Tuneify
Tools
Next.js, TypeScript, Prisma, PostgreSQL, Spotify API, NextAuth, Tailwind CSS
Context & Location
Software Engineering Course @ Swarthmore College
Year
2024
ROLES
Design and Development (Frontend and Backend)
LINKS
The Idea
Tuneify is a music journaling platform, similar to Letterboxd, but for songs and albums instead of films. Users are able to sign in with Spotify, search the catalog, and log what they’ve listening to along with their thoughts, ratings, and reflections on it. In addition, users can also see what their top songs and albums were for the month thanks to Spotify analytics. Over time, your journal becomes an archive of your life through music. You can look back on what moved you, what you discovered and put your friends onto, and what a particular album meant to you at a specific moment in your life. The social aspect also lets you see what your friends and others are loggint too. It’s making music discovery and discussion a bit more analog and personal, not based on algorithmic recommendations or pre-generated playlists as we saw music as something worth remembering and sharing with others.
Context
This was a group project for Swarthmore’s software engineering course. We had a semester to go from concept to working application, which meant making decisions about scope, dividing up our responsibilities, and learning new tools under deadline pressure. For me personally, this was my first time building with React. I'd worked with vanilla JavaScript and some front-end code before, but component-based frontend development was new territory. The project became a crash course in modern web development patterns thanks to my senior and one of my partners George Fang who guided me along new tools and frameworks.
What was Built:
Core Features:
Spotify authentication via NextAuth, giving users access to Spotify's full catalog
Search across artists, albums, and tracks using the Spotify API
Journal entries where users can rate (star system) and write about what they listened to
Public profiles showing a user's review history
Caching layer to reduce redundant API calls and speed up repeat searches
Technical Stack:
Next.js with TypeScript for the frontend and API routes
Prisma as the ORM, connected to a PostgreSQL database
Spotify Web API for music data
NextAuth for authentication
Tailwind CSS for styling
My Contributions:
Visual Identity & Design
I created the logo, established the typography, and set the overall visual direction. We wanted something that felt warm and personal—more like a journal than a tech product. The name "Tuneify" was meant to evoke both music ("tune") and the idea of making something your own ("-ify"), along with a nod to Spotify. I also worked with Figma and designed mock-ups for review.
React Components
This was my first React project, and I learned by building. I worked on several of the core UI components: cards for displaying albums and tracks, the review form, profile layouts, and search bar. I got comfortable with component composition, props, state management, and the patterns that make React code maintainable through the help of online tutorials.
Spotify API Integration
Together with my teammate George, I worked on connecting our app to Spotify's API. This involved handling OAuth tokens, structuring search queries, parsing response data, and building the caching system that stored artist/album/track metadata locally to avoid hitting rate limits. It was my first time working with backend, but with George’s help I was able to learn a lot about the process.
Challenges:
Learning React under pressure. There's a difference between understanding React conceptually and actually building with it. I made plenty of mistakes early on—prop drilling when I should have lifted state, overcomplicating component hierarchies, not thinking about re-renders. By the end of the project, my code was cleaner and I had a much better intuition for how to structure a React app.
Cooordinating across the stack with others. With three people touching frontend, backend, and database code, we had to be deliberate about how we communicated. We used GitHub issues to track work, kept the database schema stable once we agreed on it, and did regular check-ins to avoid stepping on each other's code.
Finding an appropriate scope for the semester. We had more ideas than time. Features like playlist integration, listening statistics, and recommendation feeds got cut so we could ship something complete. Learning to scope—and to cut features without feeling like failures—was part of the education.
What I Learned:
React finally clicked. I'd read tutorials before, but nothing replaces building something real. By the end of this project, I understood why React is structured the way it is, and I felt confident picking up new component libraries or patterns.
Working closely with API's Working with Spotify's API taught me to read documentation carefully, handle edge cases (what if the album art is missing?), and think about rate limits and caching from the start.
Design and code aren't seperate. Because I was doing both visual design and frontend implementation, I had to think about how my design decisions would translate to components. It made me a better designer (more realistic) and a better developer (more intentional about UI).
