Hype Music

Create a playlist of your favorite song choices on Spotify!
Explore the docs »

View Demo · Report Bug · Request Feature

About The Project

Hype Music is a platform that connects with Spotify, so it allows you to view all your playlists in your Spotify account and you can also create new playlists by searching for the tracks you want and adding some tracks to your new playlist!

Hype Music consists of 3 pages:

• Landing Page, where you first landing before you connect your Spotify account to Spotify
• Home, where you can see the songs you listen to frequently and search for songs by title or artist, on this page you can also create playlists based on the songs you choose.
• Profile, where you can see your profile such as your profile photo and your name, and you can also see the playlists you have.

Feature

• Connect with Spotify account
• User top tracks
• Search tracks by title or artist
• Create playlist
• User profile picture and display name
• User playlists

Built With

• React.js
• Typescript
• Daisy UI
• Tailwind CSS
• Axios
• React Redux
• React Testing Library
• Vercel

Getting Started

Prerequisites

• Node >= 14.0.0
• npm >= 5.6

Installation

• Clone repository

     https://github.com/gillyhuga/hype-music.git
  

• Go to the project directory

     cd hype-music
  

• Create environment variables

     cp .env.example .env.local
  

• Set up the environment variables to your .env file

  REACT_APP_SPOTIFY_CLIENT_ID contains Spotify Client ID

• Install dependencies

     npm install
  

• Start the server

     npm start
  

• Open http://localhost:3000 with your browser to see the result

License

Licensed under MIT License

Special Thanks To