back
recrd
Music ranking social media platform
2025
React
TypeScript
Tailwind CSS
Spotify Web API
MongoDB
Figma
Overview
Recrd is a social platform music lovers, providing a dedicated space to rank, track, and share their favorite albums, inspired by community-driven platforms such as Letterboxd and Yelp. Users have the ability to curate personal lists by discovering and ranking from an internal database of over 14,000 titles. Users can connect with friends and meet others who share similar music tastes through following profiles, while also gaining perspective by viewing album popularity metrics and instantly comparing their personal rankings against those of their social network.
Problem
Current digital music platforms focus primarily on consumption and discovery but lack a robust, dedicated social framework for long-term community engagement and personalized ranking.
key contributions
led a 5-person team, utilizing Discord, Jira, & Trello to ensure efficient task management
designed a high-fidelity interactive Figma prototype
developed a web-scraping script to ingest music album data from Spotify Web API into MongoDB database
implemented user authentication with email verification using JWT tokens, bcrypt hashing, and SendGrid
coded frontend in React, TypeScript, Tailwind CSS
Envisioning the core features
Our main objective was to create a centralized place for music rankings with a clean, user-friendly interface. We aimed for a strong sense of community, similar to a true social media application. We prioritized features essential for community building, including user-to-user following, visible ranking lists, and leaderboards to incentivize interaction.
Research and planning
After researching options like the Spotify API and MusicBrainz, we selected the Spotify Web API for its balance of data accessibility and ease of implementation. We chose a modern, scalable stack: React, TypeScript, Tailwind CSS, and MongoDB. We utilized Jira and Trello for task tracking and prioritization, and Discord for real-time team alignment and decision-making.
Designing the user experience
Using Figma, we translated concepts into high-fidelity, interactive prototypes for both mobile and web. Though extensive mobile designs were created, we prioritized website development for launch due to its accessibility and simplified deployment.
Listening party
We envisioned live chat feeds and real-time album rankings upon release, fostering an immediate, strong sense of community around new music.
Top 3 albums
Designed a profile widget allowing users to showcase their three all-time favorite albums, immediately communicating their profile and personality to others.
Global leaderboards
Leaderboards display top-ranked albums and top-ranked users, creating an incentive for deeper engagement and encouraging users to rank more albums
Developing recrd
Once the prototype was finalized, we moved into full-stack development, focusing on a secure and data-rich backend.
Harnessing the Spotify Web API
We developed a dedicated JavaScript web scraping script to ingest data from the Spotify Web API into our database. The main challenge with the Spotify Web API is it's short-lived key requirement and general API limitations made full, automated library ingestion difficult for an MVP. Our solution was to engineer a scraper based on a pre-defined array of artist names. This provided a reliable, high-volume seed data of over 14,000 albums, allowing us to launch with a robust catalog while deferring full automation as a future update.
Establishing the MongoDB database
The MongoDB database is structured around three interconnected schemas:
Album: Stores unique ID and core data (e.g., name, date, artist)
User: Stores user metadata, including hashed passwords (via bcrypt), unique ID, email, and the JWT token for session management
Ranking: Tracks a specific user's ranking of an album, linking User and Album IDs alongside the 1-10 ranking score
Secure user authentication and deployment
We established a highly secure and functional authentication system:
Security: Passwords are hashed using bcrypt. User sessions are managed using JWT tokens
Verification: We implemented email verification and a 'forgot password' flow using SendGrid.
Deployment & HTTPS: We deployed the application on a Digital Ocean droplet and secured all traffic with HTTPS to ensure data integrity and user trust
Execution
Upon creating a profile, users gain access to the full functionality of Recrd, including the ability to: rank from a list of 14,000+ albums, re-rank albums, view friends' and global album rankings, set their Top 3 Albums, and access the leaderboards. To date, we have secured 15+ active users and over 150 albums ranked, validating the core concept.
Future development
Based on user feedback and team vision, key future updates include:
Conclusion
Recrd was the perfect opportunity to combine my love for music with my passion for coding. I simply wanted to build something that helps people connect and share their musical tastes. Beyond just building the app, I learned that taking action is way better than staying indecisive, and that a team with good communication makes everything smoother. I also earned some battle scars (and confidence) fighting through Git merge conflicts. We walked away having turned a simple concept into a tangible, working platform.