https://github.com/bestguy/spotify-example
Example app using Spotify API, React, & Hooks
https://github.com/bestguy/spotify-example
Last synced: 8 months ago
JSON representation
Example app using Spotify API, React, & Hooks
- Host: GitHub
- URL: https://github.com/bestguy/spotify-example
- Owner: bestguy
- Created: 2021-08-30T02:47:27.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-08-30T05:15:01.000Z (almost 5 years ago)
- Last Synced: 2025-02-14T02:51:20.057Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://bestguy.github.io/spotify-example
- Size: 89.8 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# Spotify Playlist App
## Using TypeScript, React, & React Hooks
**TODOs**
- [ ] Playlist storage uses localstorage and serializes the entire object returned from Spotify APIs to JSON. Need to trim to only fields used in app.
- [ ] `usePlaylists` hook has inconsistent function signatures, some taking Playlists, others id. Need make consistent with ids.
- [ ] `useFetch` is naive and does not return loading or error states. UI should accomodate both.
- [ ] Accessibility (a11y) is poor with most inputs missing labels, and some inputs are not in forms.
---
## Install
`npm install`
## Running
`npm run dev`
Open [http://localhost:8080](http://localhost:8080)
This application uses [Vite](https://vitejs.dev) for development.
## Build
`npm run build`
Bundled application for production will be under /docs.
----
### Components
```
┌─────────────────────────────────┐
│App │
│ ┌──────────────────────────┐ │
│ │Login │ │
│ │ ┌────────────────────────┴─┐ │
│ │ │PostLogin │ │
│ │ │ │ │
│ │ │ │ │
│ │ │ │ │
│ └─┤ │ │
│ └──────────────────────────┘ │
└─────────────────────────────────┘
┌──────────────────────────────────────────────────────────────────────────────┐
│PostLogin │
│ ┌───────────────┐ ┌───────────────────────────────────────────────────┐ │
│ │UserPanel │ │ShowPlaylist │ │
│ │ │ │ ┌────────────────────────────────────────────────┴──┐ │
│ │ │ │ │NowPlaying │ │
│ │ │ │ │ ┌─────────────────────────────────────────────┐ │ │
│ │ │ │ │ │ShowTrack │ │ │
│ │ │ │ │ │ │ │ │
│ └───────────────┘ │ │ │ │ │ │
│ ┌───────────────┐ │ │ │ │ │ │
│ │Playlists │ │ │ │ │ │ │
│ │ │ │ │ │ │ │ │
│ │ │ │ │ │ ┌───────────────────┐ │ │ │
│ │ │ │ │ │ │AddToPlaylist │ │ │ │
│ │ │ │ │ │ │ │ │ │ │
│ │ │ │ │ │ │ │ │ │ │
│ │ │ │ │ │ │ │ │ │ │
│ │ ┌───────────┐ │ │ │ │ │ │ │ │ │
│ │ │AddPlaylist│ │ │ │ │ └───────────────────┘ │ │ │
│ │ │ │ │ │ │ │ │ │ │
│ │ └───────────┘ │ └──┤ └─────────────────────────────────────────────┘ │ │
│ └───────────────┘ └───────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────────────────────┘
```