Demo.mov

ℹ️ Introduction

This is an app that reimagines Spotify playlist creation. It is intended to evolve into a real Karaoke (カラオケ) 🎤 machine that would allow users to listen and view lyrics to their favorite songs, in a colorful environment synched to playlist "moods". The app will also enable 3D visualization of relevant metadata, to get a deeper understanding of the music.

✅ Features

• Allow access to Spotify using the Authorization Code Flow
• Search through Spotify's catalog to find the perfect tracks
• Add songs to a new playlist
• Name, edit and export playlist to Spotify account
• View app in Dark Mode
• Responsive Design

⭐️ Future work

• Sort and reorder playlist tracks
• Display lyrics
• Playback songs
• Party Mode
• Synched animations
• Data visualization

🚀 Technologies

• React (TypeScript)
• Spotify Web API
• Axios
• Dotenv
• Lottie React
• React Icons
• React Responsive
• React Router
• Zustand

💾 Guide

Required stack

• Node
• Npm or Yarn

Adding environment variables

• Create a Spotify account
• Login to the Spotify Developer Dashboard and create an app
• Click on the new app and the Settings button
• Paste the Redirect URI, Client ID and Client Secret into a new .env file

REACT_APP_REDIRECT_URI = http://localhost:3000
REACT_APP_CLIENT_ID = 1a2b3c
REACT_APP_CLIENT_SECRET = 4x5y6z

• Place the .env file at the root of the project

Running the Project

• Install packages using npm install or yarn install
• Start project using npm start or yarn start