Solfive
A personal music streaming web app for browsing, searching, playing, liking, downloading songs, and viewing synchronized lyrics.
Purpose of the project
I built Solfive because I wanted to create my own music listening website instead of relying on existing music platforms.
The goal was to build a personal music web app where I could customize the interface, browsing experience, player layout, playlist behavior, and overall user experience based on my own preferences.
The Process
The project started in June 2024. I used a backend API provided by a friend to handle music data, audio sources, playlists, artists, lyrics, search, and user-related features.
I built the frontend with React.js, creating multiple pages.
A major part of the process was building the music player experience, including audio playback, playlist navigation, synchronized lyrics, shuffle, repeat, volume control, song download, and drag-and-drop playlist ordering.
Lesson learned
Learned how to build a complete music streaming interface with React.js and React Router DOM.
Practiced managing global audio state using Context API and useReducer, including current song, current audio, playlist, and playing status.
Improved API integration skills using Axios with separate service files for home, playlist, artist, song, search, and user APIs.
Learned how to work with the HTML Audio object to control playback, volume, progress, repeat, shuffle, and next/previous song behavior.
Built synchronized lyrics by listening to audio timeupdate events and matching the current time with lyric timestamps.
Implemented drag-and-drop playlist reordering with @hello-pangea/dnd.
Added Google OAuth login, favorite songs, and authenticated API requests using tokens from localStorage.
Improved UI structure by splitting the app into reusable components such as.