Turnify was inspired by Spotify, a music streaming service allowing users stream music, search for artists and albums, create playlists, and follow other users.
- Turnify was created with Rails on the backend using a PostgreSQL database and React/Redux on the frontend.
- Images and MP3 files were stored on AWS S3, increasing scalability
- The loading time of the app was optimized through jBuilder and Rails' Active Storage. Fewer interactions with the database helps increase user experience.
-
Play Bar
- The dynamic Play bar allows users to play and pause songs, as well as shuffle, repeat, play next and play previous songs. To do this, I created a reference to both the progress bar and the audio player using a React element, createRef. The user is also able to choose what part of the song they want to move to using the progress bar. I was able to accomplish this by using percentages, thinking of the progress bar as a whole, and calculating the percent change based on the user's click location.
-
Search
- Users are also able to search for playlists, artists, and albums. I implemented a dynamic search bar that immediatel updates the possible artists, albums, and playlists as the user types on the keybaord.
-
Playlist CRUD
- Signed in users are able to create and delete their own playlists. Once created, the playlist shows up on the page alongside all the playlists created by the use.
-
Playlist Songs
- If you have playlists, you must also have songs! Every album has songs and users are given the ability to add songs through the albums show page through the playlist_songs association as well as the Add Song modal.
