SpotifyApp

Front-end clone of the Spotify website. This project was created using `create-react-app`. The app should be used with the authentication server here

View Demo

Table of Contents

• About the Project
  • Motivation
  • Tech Stack
  • Features
  • Environment Variables
• Getting Started
  • Prerequisites
  • Installation
  • Run Locally
• Usage
• Roadmap

About the Project

Motivation

This project was created mainly as a way for me to learn React frontend development. I tried to imitate the general formatting/style of the Spotify application so as to learn what it's like to develop a popular website using React. It was an intersting challenge for my first time using React. The project allowed me to learn React, states, hooks, and properties.

All components were written by me from scratch but organization and structure of the project was inspired by this project

Tech Stack

• React
• React Router
• axios
• colorthief

Features

• View Spotify playlists
• Export playlists in .txt or .csv

Environment Variables

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

REACT_APP_BACKEND_URL - link to the backend auth server

Getting Started

Prerequisites

This project uses npm as package manager

Installation

Install spotify-clone with npm

  npm install spotify-clone
  cd spotify-clone

Run Locally

Clone the project

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

Go to the project directory

  cd spotify-clone

Install dependencies

  npm install

Start the application

  npm start

Usage

Currently, the app can only view playlists that have already been created. To do this, login to Spotify on the home page. The application authenticates via a backend server. Once logged in, it should redirect you to the frontend application with your information loaded. Playlists can be viewed by clicking on them in the sidebar or in the collection page. Playlists can be exported in either .txt or .csv format.

Roadmap

• Export playlists in .txt, .csv
• Rewrite components using Redux
• Create/edit playlists
• Export playlists to other services (e.g. YouTube)
• Import playlists from .txt, .csv
• Implement other routes of the website such as Search