As the name suggests, This WebApp is a Spoitfy Clone created via NextJs, Javascript and deployed (NON-API) on Microsoft Azure. The webapp consumes data from the Spotify API and tries to imitate the UI and front-end behaviours of the official Spotify Web Payer as much as possible.
Demo URL:
Remote Controlling Spotify Web Payer via Cloned App: Left: Spotify Clone || Right: Spotify Web Payer
I created this project from scratch mainly to get some hands-on experiance with NextJs Development. I have used Spotify Api for this project, followed by various technique and tools such as :
- Tailwind CSS
- Recoil
- NextAuth
- Middleware
- React
- Debounce
- oauth JWL
- access/refresh tokens
I had so much fun developing this project and got to learn various concepts as well as techniques to make the WebApp responsive.
This project requires node and npm installed globally.
Clone the repository to a directory of your choosing
git clone https://github.com/tejaswalke/SpotifyCAzure.git
Navigate into spotify-clone-client and install the necessary packages
npm install
To start up the app locally
npm start
Addionally, you will have to use your own Spoitify API Client ID & Client Secret from Spotify for Developers, and create a file .env in the root of directory and set the Envoirnment Variables as:
NEXTAUTH_URL= "Your Domain/localhost address"
NEXT_PUBLIC_CLIENT_SECRET= "Your Client Secret"
NEXT_PUBLIC_CLIENT_ID= "Your Client ID"
JWT_SECRET= "Of your Choice"
Open in Browser: