Hey Dev.to! 👋 I'm Apoorv Karanwal, a 14-year-old student developer from India. Over the past year, I've been building Melody Master — an AI-powered music learning platform that helps people learn piano, guitar, and music theory with neural AI guidance.
Today I want to share how I built it, the tech stack I used, the challenges I faced, and what I learned along the way.
🎵 What is Melody Master?
Melody Master is a full-stack, AI-powered web application for learning music. It's not just another tutorial app — it features:
🧠 AI Neural Guidance — Personalized learning paths that adapt to each user
🎹 Interactive Piano & Guitar Lessons — With real-time audio feedback using the Web Audio API
🎮 Gamified Learning — XP points, levels, streaks, achievements, and a competitive Music Arena
🏆 Verifiable Certificates — Earn certificates with unique verification codes
🌐 Immersive 3D Interface — A Spline 3D robot on the landing page with GSAP animations
📊 120+ Progressive Levels — From beginner to advanced
📈 Analytics Dashboard — Track your progress and performance over time
👉 Check it out live: https://melodymasterapp.vercel.app
🛠️ The Tech Stack
Here's what I used to build Melody Master:
Layer Technology
Frontend React 18, TypeScript, Vite
Styling Tailwind CSS, shadcn/ui
Animations GSAP (ScrollTrigger, timelines), Framer Motion
3D Spline 3D (for the landing page robot)
Backend Supabase (Auth, PostgreSQL, Row-Level Security)
Audio Web Audio API for real-time instrument analysis
Charts Recharts for analytics/progress visualization
Hosting Vercel
Why This Stack?
I chose React + TypeScript because type safety saved me from so many bugs during development. Vite because it's insanely fast — hot reload in under 100ms. Supabase because it gave me auth, database, and row-level security without needing to build a custom backend.
For the 3D experience, I used Spline because I wanted the landing page to feel premium — not like a typical "student project." The 3D robot that greets users on the homepage was designed to make a statement: this is not just another app.
🏗️ Architecture Overview
Melody Master
├── Landing (3D Spline + GSAP animations)
├── Auth (Email/Password + Guest Mode via Supabase)
├── Dashboard (personalized learning hub)
├── Practice (interactive instrument sessions)
├── Learn (theory courses with gamification)
├── Arena (competitive music challenges)
├── Live (real-time jam sessions)
├── MelodyRings (rhythm game)
├── Progress (analytics + performance tracking)
├── Certificates (verifiable achievement certs)
├── Leaderboard (global rankings)
└── Profile (settings + stats)
Every route is lazy-loaded with React.lazy() and wrapped in Suspense for optimal performance. Protected routes use a custom ProtectedRoute wrapper that checks Supabase auth state.
💡 Biggest Challenges I Faced
- WebGL Context Crashes The Spline 3D robot was causing WebGL context crashes on mobile devices. The GPU was running out of memory, and the entire landing page would go blank.
Solution: I implemented explicit WebGL context management with fallback to a Lottie animation when WebGL fails. I also added a deviceMemory check to skip 3D entirely on low-end devices.
- Performance Optimization My initial Lighthouse score was 37 on mobile. Painful. 😅
After weeks of optimization, I brought it up to 90+ by:
Code-splitting every route with React.lazy()
Preloading critical assets with
Non-blocking font loading with media="print" + onload
Compressing all images to WebP
Removing unused dependencies
Real-Time Audio Analysis
Getting the Web Audio API to accurately detect which note a user is playing (especially on guitar) was the hardest technical challenge. Different microphones, background noise, overtones — it's a genuinely difficult signal processing problem.Gamification That Doesn't Feel Cheap
I wanted the XP/leveling system to feel meaningful, not just "+10 XP" spam. Each of the 120+ levels has carefully designed progressive difficulty, and certificates are verifiable with unique codes.
📸 What It Looks Like
The UI design follows a dark mode + glassmorphism aesthetic with amber/gold accents. Every interaction has micro-animations via GSAP. The landing page features a full 3D experience.
👉 See it yourself: https://melodymasterapp.vercel.app
🎯 What I Learned
Ship it, then iterate. I spent too long trying to make everything perfect before launching. Just ship.
Performance is a feature. Users don't care how cool your 3D robot is if the page takes 8 seconds to load.
TypeScript saves lives. I can't imagine building this in plain JavaScript. The type safety caught hundreds of bugs before they reached production.
SEO matters. Even the best app is useless if no one can find it. I learned JSON-LD structured data, Open Graph tags, sitemap optimization, and Google Search Console the hard way.
Age is just a number. If you have a vision and the will to learn, you can build anything.
🙏 Thank You
If you made it this far, thank you for reading! I'm Apoorv Karanwal, the creator of Melody Master. I built this entire platform from scratch as a solo developer.
If you're interested in the project, you can:
🌐 Try it: https://melodymasterapp.vercel.app/
💻 GitHub: https://github.com/updeshkaranwal151-hash/
💬 Questions? Drop a comment below — I'd love to chat!
If you found this interesting, a ❤️ or 🦄 would mean the world to me. Thanks for reading, and keep building! 🚀
— Apoorv Karanwal, Creator of Melody Master
![Defluffer - reduce token usage 📉 by 45% using this one simple trick! [Earthday challenge]](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiekbgepcutl4jse0sfs0.png)
