Threeify

This project is an online record player using Spotify's Playback SDK while being visualized using Three.js

Setup

Clone the Repository

git clone https://github.com/EuanHam/threeVinyl.git
cd threejs-spotify-app

Install Dependencies Install Node.js. Then run:
```
npm install
```
Install Firebase by running:
```
npm install firebase
```
Configure the Environment Create a .env.local file in the root directory and add your Spotify client ID. This information can be accessed by logging into Spotify's developer dashboard (https://developer.spotify.com/) and creating an app. Set the redirect URI as 'http://127.0.0.1:3000/auth/callback'. Additionally set up an app in firebase and initialize a Cloud Firestore database. In settings, gather the values for the environment variables below.
```
NEXT_PUBLIC_CLIENT_ID=your_client_id
SPOTIFY_CLIENT_SECRET=your_client_secret
NEXT_PUBLIC_REDIRECT_URI=http://127.0.0.1:3000/auth/callback

NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id
```
Run the Application Start the application using:
```
npm run dev
```
Open in Browser Navigate to http://localhost:3000

This guide will assume you are using this on a Windows or MacOS device.
Press p to authenticate with Spotify (now only requires authentication once!). The app should indicate that you are signed in.
The app now creates a virtual Spotify player, so you no longer need to have the Spotify app open or any other device active.
After authentication, pressing p will allow you to play a random top song.
The 1-5 keys will allow you play your top 5 albums respectively.
You can pause and resume songs using the space bar (note: it may take a second to respond because this app is supposed to simulate a record player)