Skip to content

sanika365/Spotify_Clone

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Spotify-Clone

Created a Spotify Clone using MERN Stack

Here I created 2 folders one for frontend and other for backend and connect backend to MongoDb, checked through postman, Used cookie to store token. For frontend I used ReactJs, cloudinary, used tailwindcss for styling and iconify for Icons.

command used:

npm run start npm i passport passport-jwt npm i dotenv
npm i express
npm i jwt
npm i mongoose npm install mongodb
npm install @craco/craco
npx tailwindcss-cli@latest init
npm i react-router-dom
npm install postcss@8
npx tailwindcss@2 -i ./src/index.css -o ./src/output.css
npm install --save-dev @iconify/react npm i cors
npm i react-cookie npm i @cloudinary/react @cloudinary/url-gen cloudinary-core cloudinary-react
npm i howler

  1. Created frontend using ReactJs:

1.1 Home Page: Contains main content of songs that we want toplay or listen. Screenshot (312)

1.2 Search Page: Contains Search bar that do searh ffor a required song that is available on database. Screenshot (314)

1.3 Library Page: Consists of MyPlaylist that User has created for its ease. Screenshot (315)

1.4 My Music: Consists of all song that user has uploaded and listen it as per liking. Screenshot (316)

1.5 Create Playlist: As a name suggest, User can create Playlist for its ease. Screenshot (317)

1.6 Upload Song: Main component that is used by the user to upload song in the database. Screenshot (318)

1.7 Login and Signup Page Screenshot (320) Screenshot (321) Screenshot (322)

1.8 Token if exist then go to login Page Screenshot (323)

1.9 If Token not exist then go to signup page Screenshot (319)

  1. Used MongoDb for backend Screenshot (325) Screenshot (326) Screenshot (327) Screenshot (328)

  2. Used Postman for backend Varification Screenshot (324)

THANK YOU