TopTrax is a single-page application built with React that leverages Spotify’s RESTful API, enabling users to explore their most frequently played tracks over various time periods and create playlists.
Note: Currently, when logging in with your Spotify account, TopTrax may not appear as the app is under review by the Spotify Developer Team for a user quota extension. In the meantime, you can check out this video to see the app’s functionality: Watch the Demo Video
Check out the live version of the app here.
To run the app locally, follow these steps:
-
Clone the repository:
git clone https://github.com/S-Sajith/top-spotter.git cd top-spotter -
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open your browser and navigate to
http://localhost:5173/to see the app in action.
-
Login
- Click on login button, enter your username and password.
- Provide permission to access you top tracks data.
-
Select time period:
- Select time frame out of the three options - last month, last 6 months or all time.
-
Create Playlist:
- View the playlist, preview tracks if needed.
- Click on create playlist button and the created playlist will appear in your spotify account.
- React: A JavaScript library for building user interfaces.
- Spotify API: An API provided by Spotify that allows developers to access and integrate Spotify's music data and functionality into their applications.
- Tailwind CSS: A utility-first CSS framework for rapidly building custom user interfaces with a focus on simplicity and scalability.
Sajith S
GitHub: S-Sajith
Contributions are welcome! If you have any suggestions or improvements, please create an issue or submit a pull request.
For any inquiries or support, feel free to contact me via GitHub.