Dara Music App

The problem

Users need to discover music, search for artists and tracks, and save favourites in a cohesive and easy-to-use application.

The solution

We built a responsive music application with Spotify OAuth, debounced real-time search, top artist and track displays, and favourites persisted in localStorage.

My responsibilities

• Developed the user interface with React and TypeScript.
• Implemented routing for the home, favourites, artist and sign-in views.
• Built debounced real-time search for artists and tracks.
• Implemented Spotify OAuth 2.0 authentication.
• Built functionality for adding and removing favourite tracks.
• Collaborated on a modular and scalable application structure.

Technical implementation

• React and TypeScript with a component-based architecture.
• Spotify OAuth 2.0 and the Spotify Web API.
• React Router for navigation between application views.
• Zustand for authentication state and global favourites management.
• Tailwind CSS for a responsive and accessible interface.
• localStorage for persisting favourite tracks between sessions.

Result

The result was a working music application where users can sign in with Spotify, search for music, explore artists and tracks, and manage their favourites.

What I learned

• Integrating an external API with OAuth authentication.
• Managing global state with Zustand.
• Building responsive and accessible React interfaces.
• Structuring a larger frontend application with reusable components.

Technologies

• React
• TypeScript
• React Router
• Zustand
• Tailwind CSS
• Spotify API