Rechord
Overview
Rechord is a tool that displays a user’s unique album covers of their top Spotify tracks in a story-sized shareable image. I was inspired by my hobby in collecting vinyls and increasing my experience in front and back end development.
My contribution
Team Lead Front End Development OAuth Setup Video Editing
The team
1 Team Lead 1 Designer 1 Front End Assistant
Year
2023
Process
About Rechord
Rechord utilizes Spotify’s API to get a user’s top tracks of three time periods (past month, past 6 months, and all time) and displays the unique album covers. The user’s Spotify display name is also displayed in the header.
The website’s overall theme is inspired by record stores and neon signage. The story image is inspired by someone’s record collection display at home.
Technologies Used
- Back end: OAuth, Javascript, Spotify Web API
- Front end: Bootstrap, CSS, HTML
- Image Design: Adobe Photoshop
- Video Editing: Canva
Website Demo
Here is a step-by-step video tutorial on how to use Rechord:
Next Steps
- Implement features such as image download, share directly to Instagram Stories
- Release to public - for additional users to access this project, Spotify Web API requires a formal request. I plan to polish the code and add features before releasing.
Reflection
This was my first time using an API to get information and display it in this format. It was a big learning experience and I learned how to ask for help when I needed it. Creating something like this has always been something I wanted to do and I am proud of being able to accomplish it. I now have a much better understanding of utilizing API’s, Bootstrap, and JavaScript.