Practice Makes Performer

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)