difrescotisha-fs/pp3

Spotify search app

Spotify Search App

Project Overview:

The Spotify Search App is a web application that allows users to search for an artist, album, or song through the Spotify API. You must have a Spotify account to log in and access their media. Once a search query has been entered into the search bar, the user is redirected to the search results page where they can view and listen to what they searched. This project employs a frontend and a backend in order to track and keep up with OAuth JSON web tokens.

---

Prerequisites:

• MongoDB >= 5.1
• NodeJS >= v16.13.0
• npm >= v8.1.0
• Yarn >= v1.22.19
• Chrome/Firefox/Safari/Edge >= Latest 2 major versions

---

Technologies:

• MongoDB
• ReactJs
• Tailwind
• ExpressJS
• NodeJS

---

Getting Started

You must have a .env file to run the application. This file allows sensitive information, such as user credentials, to be stored in a local environment. This file should be added to a .gitignore file so that it is not uploaded to code repositories online for everyone to read. This can be achieved by making a copy of the .env.dist file and change the name to .env by running the following command in terminal:

cp .env.dist .env && vim .env

Next, you must add your own environment variables inside the file.

The next step is to add the dependencies (node modules) by running the following command:

npm install

Once all dependencies have been installed, you can run the project. You must open two terminal windows, one for the frontend and one for the backend.

To Run React.js (frontend)

cd frontend
npm start

To Run Express (backend)

cd backend
npm run dev

---

Links

Links to the project include the following:

• http://localhost:3000 - Link to the frontend (React.js) application, the main user interface of the Spotify application.

• http://localhost:3001 - Link to the backend (Express) application.

pp3's Issues

Create backend API that loads in your environment variables from a ".env" file

Create a general search page. Should start with no results

Setup a backend Express application that runs on port 3001

Create a login screen/page for when our API is returning a "No JWT" response

Create a search results page where results of the search are displayed

Implement some kind of system that keeps important secret credentials out of this repository

Store our JWT token in a database along with it's expires field

Create a base CSS/HTML layout & styles

Create an ExpressJS API route for general search for any keyword. Returns any three features (artists, tracks, songs, etc.).

Generate & store our Spotify CLIENT_ID & CLIENT_SECRET in our Express application

Add an Express middleware that validates a valid non-expired JWT exists in the database for use

Setup project repository

Use our client_id to send an authorization_code request to Spotify in exchange fro a code

Setup a Spotify developer account & open auth application

Catch our authorization code request callback and use the code in exchange for an API JWT token

Setup an informative README.md Markdown file in the root directory of this repository that clearly explains how to setup the project and get it up and running.