Effortless playlists. 🎵
Tracktive is a single-page, full-stack web application inspired by 8tracks, created with the goal of designing a lightweight clone of the original playlist creation website. It is built on a Ruby on Rails backend, a PostgreSQL database, and a React.js with Redux architectural framework on the frontend. It uses endpoints from Spotify's API to build shuffled playlists that are saved into the database.
Users gain access to the app and their playlists by entering their credentials on the login/ sign-up modal (located on the Splash page), and Bcrypt is used to store a secure hash of the user's password.
Masonry (a React.js component) moves playlist objects to move around to fit the window if it is resized.
- The names of artists they want included in the playlist (they can enter an unlimited amount of artists)
- The name of the mix
- An image url for the mix's "cover"
After submitting the form, the user will be redirected to their profile, which will now contain the newly created playlist.
As the user types into the search bar at the top of the page, the playlists rendered is narrowed dynamically to only include items that include the artist(s) entered by the user. If no playlists include the artist(s) entered by the user, a message containing a link to the playlist creation form is rendered.
Media queries are used so that the content can adapt to the size of the screen it is presented on. If the viewport decreases enough that the navigation bar cannot fit, the links in the navigation bar convert to a hamburger button/ dropdown menu, the content of the bar is reformatted to take up less horizontal space.
There are many features that will be added to further enhance the functionality of the app and the user's experience.
While the backend for Likes has created, the front-end is currently still in the works due to time restrictions.
In the future, users should be able to share their playlists to other platforms such as Facebook or Twitter directly within the app.