spotify-dashboard
This a Vue 3 application that is developed and built with Vite and is deployed as a static website to AWS S3.
Requirements
node
^14.0.0
to run and deploy the appnpm
to install app dependenciesngrok
or equivalent for http tunnelingnvm
(optional) to install the project’s recommended node versionaws
(optional) for deploying to an AWS account
Running local development
- Create an app in the Spotify Developer Console
- Create a file in the project’s root –
.env.local
:
VITE_SPOTIFY_CLIENT_ID=<your client id>
- Run
npm install
- Run
npm run dev
- Use an http tunnel such as
ngrok
to expose your localhost port (probably 3000), for example,ngrok http 3000
- Take the HTTP URL it tunnels to and add it as a ‘Redirect URI’ in your Spotify app, appending the path
/auth
. - Navigate to the tunnel’s URL in your browser
Deploying to AWS S3
- Authenticate your
aws
cli to point to the account and region you would like to deploy to (I usedap-southeast-2
) - Optionally set or pass override env variables to the following command (
STACK_NAME=my-stack
,BUCKET_NAME=my-unique-bucket
) - Run
npm run deploy
- Navigate your browser to
http://<BUCKET_NAME>.s3-website-<your aws region>.amazonaws.com/
Note: after the stack is initialised, subsequent deployments take around 5 seconds.
What I would improve with more time
- Fix the
eslint
config so that my code is more consistently formatted - Add a view that communicates to the user that they need to log in first, rather than simply redirecting
- Use the Spotify Web Player API to preview tracks on hover
- Make longer track/artist names easier to read
- Add infinite scrolling & paging to the lists
- Add internationalisation and region settings so it works for non-NZ or non-English-speakers
- Add Spotify links to items