A full-stack application for private music teachers to manage their lessons, students, and music. This is a refactor of the previous version of Lesson Maestro (formerly My Music Studio). See old repo here: My Music Studio
With my expertise in JavaScript, I realized I was lacking experience working in a typesafe environment. I wanted to challenge myself to work with the same kind of typesafety you come across in many other programming languages. The t3 stack allows me to do this while staying within JavaScript. Typesafety improves productivity and helps me commit with fewer bugs.
HTML, CSS, JavaScript, React, Next.js, TypeScript, TailwindCSS, tRPC, Prisma, and CockroachDB
The front-end for this app was built using React in Next.js and TailwindCSS. In the app, users can create students, enter and update their information, and create lessons. This allows music teachers to view what lessons they have coming up and what the students have been working on.
TypeScript provides the typesafety for the front-end and it provides live feedback as you write your code by defining expected data types. Next.js offers a lightly opinionated, heavily optimized approach to creating applications using React. I use NextAuth for authentication which is an excellent solution to bring in the complexity of security without the hassle of having to build it yourself. Next.js also comes with built in routing compared to the react-router-dom package I used previosly.
The back-end for this app was built using tRPC, Prisma, and CockroachDB. For this app, I have various routers that handle crud operations for items such as Lessons, Students, and Todos. The combination of tRPC and Prisma allows for robust API and data handling.
tRPC allows you to write end-to-end typesafe APIs without any code generation or runtime bloat. It uses TypeScript’s great inference to infer your API router’s type definitions and lets you call your API procedures from your frontend with full typesafety and autocompletion. Prisma is an ORM for TypeScript, that allows you to define your database schema and models in a schema.prisma file, and then generate a type-safe client that can be used to interact with your database from your backend.
This is a long term project with many optimizations and dreams in mind.
- Collect feedback and get ideas for future features from my music teacher contacts.
- Add recurring lessons or a way to create many lessons at once.
- Add a student portal that students can access to view their assigned music and lessons.
I have learned so much about the benefits of typesafety. Every time I create a variable to hold data I have to think about where the data comes from and how I'm going to handle it. This has given me a lot of practice analyzing my app from an overview perspective. I have a better understanding of the structure of my data and what I'm trying to solve with my application.
Take a look at some other projects I have.
Inventory App Demo: Live Site | Repo
Karissa Derousseua: A client Website Kdconciergept.com
To learn more about the T3 Stack, take a look at the following resources:
- Documentation
- Learn the T3 Stack — Check out these awesome tutorials
You can check out the create-t3-app GitHub repository — your feedback and contributions are welcome!