swgz
Music Streaming Platform
swgz is an up and running music streaming platform I made with zero commercial purposes therefore it's restricted for unauthorized users but can be accessed after login. It took me three months (about 300 hundred hours) to develop. I did its back-end, front-end, UI/UX, database, SMTP, deployment, CI/CD down to its icon design ALL BY MYSELF.
Features
- Advanced queuing system with similar songs or custom configuration
- Liked Songs, Most Listened and Playlists with custom drag-drop sorting feature and cover image
- Progressive streaming that covers up for the lack of static songs on the server
- Stalk/Stalkees (Follower/Followings) for users allowing them to like, share and comment on songs which their stalkers get to see on their homepage
- Flac (High Quality) or Standard Quality Songs based on client's choice
- OAuth/Telegram and Email options for authentication
- Full Desktop and Mobile Support (PWA/TWA)
Challenges
Progressive Streaming
When a client attempts to play a song that has not been cached on the server, It needs to fetch the song from the server first and then pass the stream to the client but this process would have been time-consuming therefore I set up a progressive streaming system that downloads chunks of the song and when the download process exceeds the threshold it starts sending the first chunk to the client. After the download completes the file is moved from the temp directory to the library directory but before moving creates a shortcut pointed to the moved song file so the client's streaming wouldn't get interrupted.
Frontend Package Limitation
Frontend which runs on ViteJS, is built on no more than two packages, react 19 and react-dom. I made it a challenge for myself to not use any other packages which made me have to implement react-router, store management and even custom svgs.
Data Gathering
Since it was a personal project with no commercial use I didn't want to use any paid third-party platforms. I used YTDLP for standard quality songs and Soulseek for flac Quality. LastFM Api for search and an amazon wrapper as fallback. I had to set up a crawler for images since none of the sources provided artist and album covers.
PWA Limitations
Progressive Web Applications face strict limitation when it comes to background activities like AUDIO PLAYBACKS! specially in ios safari, which I learned after I had already coded half of the frontend and didn't have the time to switch to native options for frontend.
Project information
- CategoryFull-Stack
- Client Personal
- Project URL swgz.run.place
- Tech StackReactJS, Vite, NestJS, Typescript, MYSQL
- Visit Website