https://github.com/jonomacc/fast-tracks

A simple web app for discovering new music and saving it to your Spotify playlist.
https://github.com/jonomacc/fast-tracks

create-react-app framer-motion jamstack netlify oauth2-authentication progressive-web-app react serverless-functions single-page-app spotify-web-api

Last synced: 4 months ago
JSON representation

A simple web app for discovering new music and saving it to your Spotify playlist.

• Host: GitHub
• URL: https://github.com/jonomacc/fast-tracks
• Owner: JonoMacC
• License: apache-2.0
• Created: 2020-08-03T19:37:36.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-05T09:28:47.000Z (over 2 years ago)
• Last Synced: 2023-03-07T23:13:53.066Z (over 2 years ago)
• Topics: create-react-app, framer-motion, jamstack, netlify, oauth2-authentication, progressive-web-app, react, serverless-functions, single-page-app, spotify-web-api
• Language: JavaScript
• Homepage: https://fasttracks.app
• Size: 10.4 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Fast Tracks

[![Netlify Status](https://api.netlify.com/api/v1/badges/a1b74fb2-f506-44c7-9966-f879403e2e04/deploy-status)](https://app.netlify.com/sites/fasttracks/deploys)

> This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).  

> It uses the [Spotify Web API](https://developer.spotify.com/documentation/web-api/).

## Deploy

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/JonoMacC/fast-tracks)

## Spotify Client ID Setup

Use your Spotify account on the [Spotify developer site](https://developer.spotify.com) to create an app and get a Client ID. This app assumes that two apps have been created: one for testing purposes and one for production. You need to set up your redirect URIs on the Spotify dashboard.

### Redirect URIs for Local Development

> http://localhost:3000/api/callback  

> http://localhost:8888/.netlify/functions/callback

## Local Development

Create a file called .env to store environment variables. Follow the format in .env.sample to set up your client ID and client secret.  

Never share your Client ID in public such as in a git repository.

### Initialize

Install the dependencies

    yarn

### Running with Node Express Server

Set REACT_APP_NETLIFY=false in your .env file.

    yarn devstart

You can view the app by navigating to **http://localhost:3000/** in your browser. The node server will be running on **http://localhost:4001/** and requests to **http://localhost:3000/api/** are proxied to the server.

### Running with Netlify Functions

Be sure to set REACT_APP_NETLIFY=true in your .env file. You will need to have the Netlify CLI installed. If it is not set up, you can do so:

    npm install netlify-cli -g

    ntl login

Start the app

    ntl dev

You can view the app by navigating to **http://localhost:8888/** in your browser.