React-Spotty

Spotify web player using latest technologies, including React, Node, Express, and Spotify playback SDK

Spotty is a web player for Spotify built using the latest technologies, including React, Node, Express, and the Spotify playback SDK. With Spotty, you can stream your favorite music from Spotify right in your browser.

Inspiration

I made Spotty because I wanted to explore APIs and learn how to build a web player for one of my favorite music streaming services, Spotify. As someone who loves music and coding, I saw this as an exciting opportunity to combine my interests and create something that I would personally use.

My inspiration for Spotty also came from my frustration with the official Spotify desktop and mobile apps. While they offer a great user experience, I often found myself wishing for a more lightweight and customizable way to access my music. With Spotty, I aimed to create a simple and intuitive web player that allows users to stream their music seamlessly without any distractions.

Goals

My goal with Spotty was to create a web player that offers all the core functionalities of Spotify, such as browsing and searching for music, creating and managing playlists, and streaming songs, albums, and playlists. At the same time, I wanted to use modern web technologies such as React, Node.js, and the Spotify Web API to build a fast and responsive player that would work on any device.

Another important goal for me was to make Spotty accessible to as many people as possible. That's why I made sure to design the player with a clean and minimalistic user interface that is easy to use even for those who are not tech-savvy.

Features

Secure login with your Spotify account
Browse and search for songs, albums and artists
Switch between themes (Dark, Light, City Lights, and Spotify Green)
Stream songs, albums, and playlists with the Spotify playback SDK
View song lyrics
Censor profanity in song lyrics

Technologies

To build Spotty, I used a range of modern web technologies, including:

React
Node.js
Express
Spotify Premium API
Spotify Playback SDK
Google Lyrics API

Installation

To install Spotty, you will need to clone the repository to your local machine and install the necessary dependencies. Here are the steps:

Clone the repository: git clone https://github.com/r-chong/spotty.git

Navigate to the project directory: cd spotty

Install dependencies: npm install

Create a .env file with your Spotify API credentials:

CLIENT_ID=your-client-id
CLIENT_SECRET=your-client-secret
REDIRECT_URI=http://localhost:3000/callback
Start the development server: npm start

References: