Melofy (A Spotify Clone)

Site preview

Melofy.demo.mp4

Table of Contents

• About
• Features
• Contact
• Social
• Setup

About

Clone web application of Spotify.com, developed using the React library and styled using SASS for improved maintainability and organization of CSS code. The application seamlessly integrates with the Spotify API, allowing users to listen to their favorite music tracks, albums, and playlists. Users can log in to their Spotify accounts, access personalized playlists, and explore their Spotify music library. The app features a user-friendly and responsive design, making it accessible across various devices.

Features

• Spotify Integration: Seamlessly connect to the Spotify API to browse and stream music tracks, albums, and playlists.

• User Authentication: Securely log in to your Spotify account and access personalized content.

• Interactive User Interface: Enjoy an interactive and responsive user interface for a smooth user experience.

• SASS Styling: The application is styled using SASS for organized and maintainable CSS code.

• Cross-Device Compatibility: Access the app on various devices, ensuring a consistent experience.

• User-Friendly Design: Benefit from an intuitive and user-friendly design for efficient navigation.

• Context API: Efficiently manage application state and share it across components using React's Context API.

• Route Handling: Implement client-side routing for smooth navigation between pages.

• API Requests: Make API requests to the Spotify API for data retrieval and updates.

• Customizable Styling: Easily modify and customize the styling to suit your preferences.

Contact

Feel free to reach out to me with any inquiries, opportunities, or collaborations. You can contact me at:

• Email: priyanshusharma0326@gmail.com
• LinkedIn: Priyanshu Sharma
• Portfolio: portfolio-xtechilad.vercel.app

Social

Connect with me on social media:

• Twitter: @xtechilad
• Instagram: @xtechilad
• GitHub: @priyanshusharma0326

Let's engage, share ideas, and stay connected!

Setup

Clone the project

  git clone https://github.com/PriyanshuSharma0326/spotify-clone.git

Go to the project directory

  cd spotify-clone/

Install dependencies

  npm i react
  npm i axios
  npm i color.js
  npm i react-dom
  npm i react-router-dom
  npm i react react-dom
  npm i react-scripts
  npm i web-vitals

Start the server

  npm start

Environment Variables

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

REACT_APP_CLIENT_ID

REACT_APP_REDIRECT_URI

Tech Stack

Client: React, context API, SASS, Spotify API, React Router, Axios

Deployment

Deploy this project on Vercel.