(2024)
As a passionate developer eager to expand my skill set beyond basic web development, I embarked on building Melodine—a music streaming application that would challenge me to master OAuth authentication, complex state management, and third-party API integration. This wasn't about creating the next Spotify competitor; it was about pushing myself to understand how modern authentication flows work, how to manage real-time data efficiently, and how to build a production-ready application with professional DevOps workflows. Through this project, I aimed to bridge the gap between tutorial-level knowledge and the practical skills required to build scalable, secure applications that interact with external services.
My primary goal with Melodine was to gain hands-on experience with OAuth 2.0 authentication—a critical skill I had only understood theoretically. I wanted to truly grasp how secure user authentication works when integrating with third-party services, understanding the flow from authorization to token management and refresh cycles. This meant diving deep into NextAuth.js and implementing Spotify's OAuth flow with 11 different permission scopes.
Beyond authentication, I challenged myself to master modern state management patterns. I needed to understand when to use global state versus server state, how to handle real-time data synchronization, and how to optimize performance when dealing with large datasets. Managing playback controls, playlists, and user preferences while maintaining a responsive UI taught me invaluable lessons about architectural decisions and their trade-offs. Additionally, working with Spotify's API rate limits forced me to think critically about caching strategies and efficient data fetching—skills that translate directly to any production application.
I chose Next.js 15 with the App Router specifically to learn server-side rendering and modern React patterns. Implementing NextAuth.js was my first real exposure to production-grade authentication, where I learned about session management, secure token storage, and handling authorization callbacks. Each error message and failed authentication attempt taught me something new about OAuth security best practices.
For state management, I deliberately chose to learn both Zustand and TanStack Query to understand their distinct purposes. Zustand helped me grasp global client state management with a simpler API than Redux, while TanStack Query revolutionized my understanding of server state—teaching me about query invalidation, background refetching, and optimistic updates. This dual approach clarified the distinction between client and server state, a concept that significantly improved how I architect applications.
The DevOps side presented entirely new challenges. I had never containerized an application before, so learning Docker taught me about reproducible environments and deployment consistency. Setting up GitHub Actions for CI/CD pipelines gave me practical experience with automated testing and deployment workflows—skills that transformed my development process and understanding of professional software delivery.
Through building Melodine, I created a functional music streaming interface that connects to Spotify's API, allowing users to browse their library, search for music, view their top artists, and explore playlists. The application handles user authentication securely, manages session persistence, and provides a responsive interface that works seamlessly across devices.
More importantly than the features themselves, I achieved my learning goals: I can now confidently implement OAuth authentication in any application, I understand how to architect applications with proper state management separation, and I've gained practical experience with modern DevOps practices including containerization and automated deployment pipelines.
