What Is It?
SongNotes is a visual, social music profile app layered on top of Spotify. The core idea is to give music listeners a place to annotate, share, and reflect on what they're listening to in an aesthetically curated dashboard.
I started building this in February 2026 as a personal project, using it as a hands-on way to practice modern web development (Next.js, React, TypeScript) while shipping something real that I and my friends would actually use.
The Problem
Streaming platforms are great at surfacing new music but limited in helping you understand and share your music taste. There was no lightweight place to capture my latest musical finds or my opinions — no "notes" layer on top of listening.
I also noticed that music discovery among friends still mostly happens over text or verbally ("you have to listen to this") with no good way to share context alongside the recommendation, or see real-time stats on what your friends were listening to.
How It Works
Users sign in with their Spotify account via OAuth. From there, they get a personal profile page that shows:
- A customizable profile with appearance settings (background image, colors, fonts)
- A notes feed — short annotations tied to specific tracks or albums
- Genre tags and a library view for browsing notes
- A social layer for following friends and seeing their notes
Notes are the core unit. You can write a note on any track and pin it to your profile to share your latest musical thoughts. Notes live on your profile and can be discovered by people who follow you.
Building It
I leveraged AI-native development tools, primarily Claude Code for the implementation and Figma for design. The stack ended up being:
- Next.js 15 (App Router) for the frontend and API routes
- Supabase for the database and auth (storing users, notes, profile settings)
- Spotify OAuth 2.1 for music data and user authentication
- Tailwind CSS v4 for styling
- Vercel for deployment
What I Learned
This project was as much about learning to build as it was about the product itself. A few things that stuck:
- Next.js App Router changes how you think about data fetching — server vs. client components took real reps to internalize
- Shipping to real users (even just friends) creates a feedback loop that no amount of solo testing replicates
- AI-native development (Claude Code, Cursor) genuinely accelerated the pace — but you still need to understand what the code is doing to debug it when things break
What's Next
The app is in progress and being tested by a small group of friends. Current priorities:
- Expanding the social layer — better discovery of friends' notes
- Opening up the GitHub repo once the codebase is cleaned up