Spotify Clone

Spotify_Clone_Front is a Spotify clone built using Next.js, Redux(RTK Q), TailwindCSS and my django API. Users can log in / sign up with their account and view or create the playlists, artists, and albums followed by them.

Table of contents

• Technologies and Libraries used
• Features
• To-do features
• Run locally
• Environment variables
• Data flow
• API Reference
• Responsive Web Design
• Screenshots

Technologies and Libraries used

• Next.JS 14
• Spotify_Clone_API
• Typescript
• TailwindCSS
• Shadcn UI
• Redux
• RTK Query

Features

• Spotify Google OAuth2 for authentication
• View user's top tracks and artists based on listening frequency
• Display user's top tracks of all time
• View recently played tracks
• See recommendations for a track based on my Spotify API's audio analysis features
• View all the playlists created or followed by the user
• View liked songs playlist of the user
• View artists and albums followed by the user
• Display all the tracks in a playlist, an album, or of an artist
• Play a track with play/pause/volume/repeat/shuffle controller
• Search for any playlist, artist, album, track or user
• Browse music based on categories (eg: Rock, Phonk, Hip-Hop...)
• Show latest releases
• Artist can create/update/delete playlist, license, track, album and profile.

To-do features

• Add colors for dynamic headers scroll
• Improve track player
• Improve Shuffle
• For premium user download track
• More flexible ProtectRouter

Any other features can be suggested under the issues section of the repo

Run Locally

Clone the project

  git clone https://github.com/MafanNam/Spotify_Clone_Front.git

Go to the project directory

  cd Spotify_Clone_Front

Install dependencies

  npm install
  # or
  yarn

Start the server

• Dev

  npm run dev
  # or
  yarn dev

• Prod

  npm run build
  # or
  yarn build

  npm run start
  # or
  yarn start

Environment Variables

To run this project, you will need to add the following environment variables to your .env file

REACT_APP_API_URL= http://localhost:8000/api/v1

NEXT_PUBLIC_HOST= http://localhost:8000

NEXT_PUBLIC_REDIRECT_URL= http://localhost:3000/account/auth

Spotify API credentials

For using frontend you must run backend server. Please go to this link and follow the steps

Data flow

API Reference

Please go to this link and follow the steps. There more information.

Responsive Web Design

Screenshots

Home page

Browse categories

Search

View Artist

View Album

View Playlist

View Track

View Account

Author

This project is developed by Mafan.

License

This project is licensed under MIT License.