Practice Makes Performer

Designed to help musicians of all kinds improve their skills by customizing the playback of any song... and saving the state.

Introduction · Tech Stack · Author

Introduction

Practice Makes Performer is a tool designed to help musicians of all kinds improve their skills by customizing the playback of any song, you can:

• Create multiple players for your track and save the state of each
• Adjust the tempo as you're learning
• Select specific parts of the song to focus on and seamlessly loop these parts to practice until you get it right.
• Plus, you can save your progress and easily resume your practice session at any time

practicemakesperformer.mp4

Tech Stack

Frameworks

Practice Makes Performer is built with:

• Next.js – React framework for building performant apps with the best developer experience
• Auth.js – Handle user authentication with ease with providers like Google, Twitter, GitHub, etc.
• Prisma – Typescript-first ORM for Node.js

Platforms

and deployed to:

• Vercel – Easily preview & deploy changes with git
• Railway – Easily provision a PostgreSQL database

UI

• Tailwind CSS – Utility-first CSS framework for rapid UI development
• Radix – Primitives like modal, popover, etc. to build a stellar user experience
• Framer Motion – Motion library for React to animate components with ease
• Lucide – Beautifully simple, pixel-perfect icons
• @next/font – Optimize custom fonts and remove external network requests for improved performance
• @vercel/og – Generate dynamic Open Graph images on the edge
• react-wrap-balancer – Simple React component that makes titles more readable
• Material UI - MUI offers a comprehensive suite of UI tools to help you ship new features faster

Author

• Robert West (@robertdavidwest)