Dong Phuong
Gravitar Role Fullstack developer Duration 02/2025 - 04/2025 GitHub PhuongCaradoc/MusicWeb
keyboard_arrow_down
Gravitar A music streaming platform
Gravitar is a full-stack music streaming application that delivers a familiar yet refreshing listening experience. The platform integrates Spotify’s streaming capabilities with a clean, modern UI to offer users seamless music discovery and playback. As a full-stack developer with strong backend focus, I designed and built the system from scratch using Spring Boot (MVC) and ReactJS. I implemented secure authentication with Spring Security, optimized data handling with MySQL and Docker-based caching, and integrated Spotify APIs for real-time music playback. On the frontend, I crafted responsive layouts using TailwindCSS, with UI prototyped in Figma. This personal project allowed me to enhance my technical skills across the stack and deepen my self-learning ability. It also gave me practical experience in building scalable, API-integrated, real-time web applications from the ground up.
Technical Stack
ReactJS
TailwindCSS
Spring Boot
MySQL
Docker
Figma
Context
Motivation As a full-stack developer, I wanted to challenge myself by building not just practice apps, but a real-time, API-driven project that reflects the complexity of modern music platforms. As a daily music listener, I also wanted the user interface to match my personal preferences — clean, modern, and intuitive. That’s how Gravitar came to life: a personal project aimed at strengthening my understanding of full-stack architecture and integrating external services like Spotify. My goal wasn’t to create a clone, but rather to design a familiar yet refreshing music experience. Through this, I honed my skills in ReactJS, Tailwind, Spring Boot, and tackled real-world problems like authentication, caching, and third-party API integration.
My Role I was the sole developer and designer, responsible for both frontend and backend implementation: Frontend:
  • Built the entire frontend with ReactJS and Tailwind CSS
  • Integrated with Spotify Web Playback SDK for real-time audio streaming
  • Designed and implemented UI components for playlists, queue, player, and modals
  • Responsive and accessible layout optimized for music navigation
Backend:
  • Developed RESTful APIs with Spring Boot for user management and session handling
  • Implemented JWT-based authentication with Spring Security
  • Connected with Spotify OAuth for login and playback authorization
  • Used caching mechanisms to minimize API requests and optimize performance
Project Brief
Key Features Gravitar is a full-stack music streaming app integrated with Spotify, offering:
  • Secure login via Spotify OAuth
  • Real-time playback via Spotify Web SDK
  • Instant search with debounced API queries
  • Top music playlist
  • UI with light/dark theme support
  • Built-in error handling and loading states
⚡️ The Challenge: How do I play Spotify music directly in my app when the API no longer provides 30-second previews?
After several hours of research on Google and community forums, I discovered that Spotify no longer supports public preview streaming. The solution was to use Spotify's Web Playback SDK which allows playback through a user's premium device session. I learned the importance of thoroughly researching third-party service limitations — especially when working with copyrighted content. I tested using my own premium account to ensure full functionality.