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
- Created frontend using ReactJs:
1.1 Home Page: Contains main content of songs that we want toplay or listen.
1.2 Search Page: Contains Search bar that do searh ffor a required song that is available on database.
1.3 Library Page: Consists of MyPlaylist that User has created for its ease.
1.4 My Music: Consists of all song that user has uploaded and listen it as per liking.
1.5 Create Playlist: As a name suggest, User can create Playlist for its ease.
1.6 Upload Song: Main component that is used by the user to upload song in the database.
1.7 Login and Signup Page
1.8 Token if exist then go to login Page
1.9 If Token not exist then go to signup page
-
Used MongoDb for backend
-
Used Postman for backend Varification
THANK YOU