Link to website: spotifyrandomizer.zysk.it
Link to repository: github.com/zysktomasz/spotify-randomizer-web
Link to consumed REST API repository: github.com/zysktomasz/spotify-randomizer
Overview
SpotifyRandomizer React SPA - web application that consumes REST API.
Has a simplistic UI that allows users to log in with their Spotify account. Once authenticated they can see their Playlists (title, image cover, number of songs) and all Tracks assigned to them (album cover & title, track title, artists).
They can also randomly shuffle Playlist Tracks.
Spotify player, when in shuffle mode doesn’t play songs truly randomly, but rather tends to play Songs that you listen to most often.
Thanks to this application you ran randomly reorder Songs in your Playlists.
Technologies used
- React with Typescript
- Material-UI - Material Design framework
- Redux - state management
- Axios - HTTP communication with SpotifyRandomizer backend
- ESLint - linter
- Prettier - code formatting
Architecture
Use of REST API
This project is React Single Page Application consuming REST API of SpotifyRandomizer backend project. All communication between client and Spotify API is made through that backend project.
Calls to API are made with Axios.
State Management
SPA uses Redux to store state - essentially only details of authenticated user are stored. This state is also saved to and loaded from localStorage.
Deployment
Built application is deployed and stored on AWS S3 bucket that is configured to host a static website. Website can be visited by going to spotifyrandomizer.zysk.it.
It is cached and served to users by Cloudfront
Showcase
Main page
Playlists list
Tracks list
Reorder tracks dialog panel
