A smart playlist curator that allows you to filter your Spotify library according to your mood, and uses AI to generate a unique image for each playlist, for you to share and discover music that you love.
We made this as a team of 4 for our final 2 week project at Le Wagon's web dev bootcamp.
✨ Demo
- Understanding of responsive web design: in this case, mobile-first design as we envision it being used mainly as a mobile app
- Implementation of Progressive Web App for the same reason
- Customizing bootstrap colour variables, according to our Figma prototype
- Working with components and using Sass to write CSS in a more organised way
- This project was great for developing our skills in Stimulus JS and Ajax.
- Building a better understanding of MVC architecture
- Adopting RoR conventions and best practices
- Applying RESTful principles: with the use of 2 APIs we made a conscious effort to keep the routes RESTful
-
How to define database schema, perform CRUD operations, database migrations. We are aware of the importance of a sound database structure and spent time trying to establish this from the beginning. One particular dilemma we faced was whether or not to store the user's songs in our own database. We ended up electing to do this as it was much more efficient to query our database when filtering songs than to make an API request each time.
-
Importance of validations to ensure data integrity and consistency
- Figma: designing a user-centric app, designing with components, producing a low fidelity prototype
- Collaboration via Github, PRs, resolving merge conflicts
- Deployment via Heroku, management of database on Heroku, environment variables
Other key learning points:
- Knowledge of integrating third-party services eg. Spotify API, openAI API, honing our skills of reading documentation and troubleshooting
- User authentication via Spotify, understanding OAuth, scopes for user privacy and data protection
- Agile methodologies: we had daily stand-up meetings and used Trello for project management. We learnt the importance of being flexible when we came across limitations of the APIs. One example of this was having to create a playlist in the user's Spotify account to allow autoplaying through embedded iframes. Our initial desire to use the webplayer SDK had to be adapted as this did not allow for continuous playback, which we felt was integral to the user experience.
Thanks for reading 🤓