Project Title
Kids Guitar Dojo
Role
JAMStack, Next.js, Prismic, Supabase, Clerk, Stripe, Prisma
Date
September, 2024
Client
Rocket House Productions
The Course
One of the standout features of the course is its physical materials, such as the instructional book and fretboard stickers. To complement these, we built an engaging digital experience using video content. Based on proven learning systems, we added a layer of gamification, including achievements and scoring, to keep students motivated.
We replaced the traditional, vertical course navigation with a fun, interactive 3D scene, where students ‘climb’ up a fretboard—a journey inspired by popular games like Candy Crush and apps like Duolingo. As students reach milestones, they unlock downloadable rewards. Points are awarded for completing questionnaires and practice lessons, and a leaderboard encourages students to revisit lessons and improve their skills.
Privacy and User Management
With a target audience of children under 13, privacy and account management were top priorities. Parents or guardians create accounts on behalf of their children, ensuring that personal data is protected at all times. We implemented a fun onboarding process for both the guardian and the student, generating playful names and avatars via a simple questionnaire, all without collecting sensitive personal information.
Development
The site was built using Next.js, with Prismic CMS chosen for its easy-to-use, component-based structure. The client was particularly thrilled with how simple and fast it was to manage content, especially compared to their previous experience with WordPress. The speed, performance, and usability far exceeded anything WordPress could offer, and the client expressed how they wished they had made the switch sooner.
The site is hosted on Netlify, and for authentication, we opted for Clerk, which provided a straightforward integration. Stripe was selected for secure payment transactions.
For the LMS dashboard, we created a fully custom build, using Supabase and Prisma as our database providers, integrated seamlessly with Next.js. This architecture allowed us to deliver the system in record time.