TrackTrekker

This is a webapp that uses the SpotifyAPI to recommend songs, built with TypeScript React.

How to use TrackTrekker

Getting Started

<img width="743" alt="image" src="https://github.com/alux444/tracktrekker/assets/126375355/30bfa297-06b6-4382-84bd-f6db2d268738">

Click the "Get Started" button

Selecting your Search

<img width="397" alt="image" src="https://github.com/alux444/tracktrekker/assets/126375355/65a05ef8-bc6d-4a26-bf1f-2d42ca5f47f0">

Click either "Songs", "Artists" or "Genres" to open a searchbar / select to add to your search.

<img width="749" alt="image" src="https://github.com/alux444/tracktrekker/assets/126375355/332f5d49-33ed-4c96-a075-327db7a4834b">

Search for any songs or artists you wish to add to your search (or simply select for genres) Click the "ADD" button to add to your search.

Getting Results

<img width="235" alt="image" src="https://github.com/alux444/tracktrekker/assets/126375355/9fd0f219-a3a1-4989-88bf-9f90465d32ae">

Click the "Get Results" button to see your recommended results!

<img width="763" alt="image" src="https://github.com/alux444/tracktrekker/assets/126375355/f5275823-8659-494e-bdfd-a6c61dfe9eb6">

You can add more songs to your search, reroll and play song previews*

*Due to API limitations, not all previews may be available.

Refining Results

<img width="216" alt="image" src="https://github.com/alux444/tracktrekker/assets/126375355/84ca4fc3-10ef-424a-bbc4-05dc57978c8b">

Your search can be further refined through through the "Manage Filters" button, once you have a search.

<img width="558" alt="image" src="https://github.com/alux444/tracktrekker/assets/126375355/69aa94ab-de7f-4a39-a6d0-9670b9545f5f">

This allows for you to filter results with a certain range - all the results from recommendations will be within your selected range(s).

By setting a target, your results will be sorted based on the closest values to that target.

---

Development History

v0.1 (10 August 2023)

• Added recommendations from tracks, artists and genres.
• Basic UI implemented.

v0.2 (20 August 2023)

• Added tutorial.
• Extra criteria filtering added.
• Added stats and previews to songs.
• General UI overhaul implemented.
• Implemented E2E testing with Cypress, added to workflow.
• Implemented developer mode.

v0.3 (In progress!)

• Working on implementing dark mode + overall UI overhaul