zaiinhs/spotify-zainal

Final Project - Generasi GIGIH 2.0

Spotify - Generasi Gigih Final Project

A replica of Spotify to Create a Playlist!

Table of Contents

1. About The Project
   • Built With
2. Features
3. Getting Started
   • Prerequisites
   • Installation
4. Contact

About The Project

This is Spotify Generasi Gigih, a React front-end client that communicates with the Spotify API. This platform will connect to your Spotify account that displays information about your playlists and create a new one.

Built With

• Create React App to initialize the project.
• ⚡️ Chakra UI for styling and layout.
• React Redux for state management.
• React Router to define routes in the application.
• 🐙 react-testing-library and jest for testing.
• Written in Javascript and Typescript.
• Hosted on Vercel🚀.

Features

If you have any suggestions/problems about the features, please let me know here.

If you want to try this on https://spotify-zainal.vercel.app/, please let me know your email. Because your email account must be registered in my development dashboard.

Feature	Description
Login Users	To redirect to the login page Spotify asks you to allow the app to access account information such as profile and playlists. Authorization using Implicit Grant Flows, so if you refresh the page you are automatically logged out or when your token has expired.
Home Page	A home page for your playlists. If you click the card will redirect to your spotify playlists.
Search	To search for other tracks/artists based on the keywords entered. Limited to 15 tracks/artist.
Create Playlist	To make a new private playlist to your Spotify account.
User Profile	After login, you can see your profile picture and username on the top right corner of the page. If you click it will redirect to your spotify profile.

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

1. You’ll need to have Node >= 10.16, npm >= 6+ or yarn >= 0.25+

• npm

  npm install npm@latest -g

2. You'll need to have Spotify Account.

Installation

1. Get Spotify API CLIENT_ID at https://developer.spotify.com/. Please refer to the Documentation.
2. Clone the repo

   git clone https://github.com/zaiinhs/spotify-zainal.git

3. Go to the project directory

   cd spotify-zainal

4. Install NPM packages

   npm install

5. Rename .env.example to .env. Enter your API to your .env file

   REACT_APP_BASE_URL=http://localhost:3000/
   REACT_APP_SPOTIFY_CLIENT_ID=YOURCLIENTID

6. Runs the app in development mode. Open http://localhost:3000 to view it in the browser

   npm start

   or

   yarn start

Contact

Zainal Abidin - @zaiinhs

Thankyou.