Skip to content

MaryBruff/genre-q

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

93 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Tests Commits

๐Ÿ‘ฉ๐Ÿผโ€๐Ÿ’ป Author

Mary Bruff | LinkedIn

๐Ÿ“‚ Tech Stack

React Badge React Router Badge Cypress Badge Swiper VSCode Badge Spotify Postman Vercel


๐Ÿ“š Table of Contents


music_notes Overview

Discover new playlists tailored to your musical taste with Genre-Q, where you can search for your favorite artists, like Depeche Mode, select a specific genre such as 'New Romantic,' and explore a curated list of public Spotify playlists for that genre. It's the perfect solution for music enthusiasts eager to dive deeper into the genres they love and find more music that resonates with their style && soul.


๐Ÿ—‚๏ธ Getting Started

  1. Fork or clone down this respository.
git clone [email protected]:MaryBruff/genre-q.git
  1. In the terminal, open this app by running the command cd <project folder name>
cd genre-q
  1. Run the command npm install to install dependencies.
npm install 
  1. Run the command npm start to start the server.
npm start

5.. Use command C to stop the server.

CMD + C
  1. To test, run the command.
npm run cypress

To view the app

  1. Open http://localhost:3000 to view it in your browser.
  2. You can also view the project here.

๐ŸŽฅ Preview ๐Ÿ“ฑ

Recording 2024-01-13 at 18 57 41

๐Ÿ“ฑ Mobile and Tablet Views

Screenshot 2024-01-13 at 7 03 51โ€ฏPM

Screenshot 2024-01-13 at 7 03 44โ€ฏPM

Screenshot 2024-01-13 at 7 04 24โ€ฏPM

Screenshot 2024-01-13 at 7 04 32โ€ฏPM

Preview of App

๐Ÿ’ช๐Ÿป Wins

  • Implemented Spotify's Client Credentials flow. This was done by following the Spotify docs for client oauth and using the btoa() function to Base64-encode the client Id/secret to get a bearer token for API calls
  • Utilized Swiper.js for its responsiveness and mobile compatibility to create an interactive carousel displaying playlist cards.
  • Leveraged Postman for efficient API testing ensuring seamless integration with Spotify's API for reliable data retrieval.

๐Ÿ’ก Future Ideas

๐Ÿ”ฎ Incorporating User Login for a more personalized experience

๐Ÿ”ฎ Favoriting functionality so users could favorite their favorite discovered playlists

2422-monkey-music (1)

Releases

No releases published

Packages

No packages published