Rec-Me is a music discovery app and game aimed at people who are sick of listening to the same music every day!
Rec-Me won first place in Turing's Demo Competition in May of 2022! See our fun 90's infomercial style presentation and walkthrough here
On page load, the user can view a collection of related artists with a featured artist in the center of the page -- clicking on a related artist will move that artist to the center featured artist position and update the related artists around them. Clicking on the featured artist will route the user to that artist's details page and will include a bio, music video and list of related artists.
Users can use the search bar in the header to find an artist by name and discover new artists!
Ready for a challenge? Click the play button on the home page to be assigned a random artist to reach in 6 or less clicks. Each selection will be greeted with a snarky comment from the music gods and a tally of how many turns you have left. Start the game and enjoy the adventure!
Our featured stretch technology for this project incorporated the React Context API to manage and access global state across our application. We primarily used this in managing our data from our APIs and tracking our game.
- Gain an understanding of global state management in React
- Utilize acceptance and E2E testing of site and asynchronous JavaScript with Cypress
- Create a multi-page application with React Router
This site is deployed on Surge and can be found here!
Alternatively, this repo can be cloned to your local machine. run npm i before running npm start.
On page load the user will see a random featured artist and related artist bubbles. Users can also use the search bar to search for a specific artist.
Under the Hood
Artist data is fetched from the TasteDive API while the artist images are fetched from the BandsInTown API. On each search submit, a new fetch is triggered.When a user clicks on the center featured artist on the main dashboard, they are routed to a page with the information on that specific artist with a unique URL.
Under the Hood
Single artist's are retrieved using the fetch API and interpolating an artist's name into the URL. The site's URL is also changed to reflect that individual artist's name via React Router. Users can bookmark this URL to return to later!A user can start the game by pressing the 'Lets play a game' button on the homepage. This switches the main page into game-mode. Users are given a random artist to try to reach in 6 moves or less. Users are told how many turns are left and given motivational messages to keep going!
Under the Hood
Game state is tracked via the React Context API which allows users to see the turn count and whether they win or lose. We have a custom array for game goal artists that are most likely to be recognized.Rec-Me is fully end-to-end tested with Cypress. URLs are tested and network requests are stubbed. Rec-Me was also designed to be accessible for screen-readers and is fully tab-able.
- Incorporate a favorites mechanism so user's can favorite artists and save them to a list
- Create customized user playlists
- Search and filter by genre
- Improve site accessibility
Authors: Maddie Law Eric Matlock Jerry Vohrer Katie Ammon
Project spec -> here