Pocket: a music streaming service
Pocket: a music streaming service

Pocket: a music streaming service

Project type
UI Design
Front-end
large-scale
React
Redux
(NOTE: API key expired, this doesn’t work anymore πŸ₯²)

intro

It’s been ages since I’ve worked on a personal project from start to finish.
I had been on a hiatus - taking a break from work and coding in general so I could prepare for the graduate school applications πŸ™‚Β 
The obvious inactivity seen on my github profile:
notion image
Β 
Credit: This project has been inspired by a course done by JavaScript Mastery on YouTube!

introducing Pocket

(logo stolen from glitch.com)
notion image
Β 
notion image

Tech stack used

react.js (next.js)
redux
vite
tailwind
shazam core api

Folder structure:

. β”œβ”€β”€ LICENSE β”œβ”€β”€ README.md β”œβ”€β”€ index.html β”œβ”€β”€ package-lock.json β”œβ”€β”€ package.json β”œβ”€β”€ postcss.config.js β”œβ”€β”€ src β”‚Β Β  β”œβ”€β”€ App.jsx β”‚Β Β  β”œβ”€β”€ assets β”‚Β Β  β”‚Β Β  β”œβ”€β”€ constants.js β”‚Β Β  β”‚Β Β  β”œβ”€β”€ favicon.ico β”‚Β Β  β”‚Β Β  β”œβ”€β”€ index.js β”‚Β Β  β”‚Β Β  β”œβ”€β”€ loader.svg β”‚Β Β  β”‚Β Β  └── logo.svg β”‚Β Β  β”œβ”€β”€ components β”‚Β Β  β”‚Β Β  β”œβ”€β”€ ArtistCard.jsx β”‚Β Β  β”‚Β Β  β”œβ”€β”€ DetailsHeader.jsx β”‚Β Β  β”‚Β Β  β”œβ”€β”€ Error.jsx β”‚Β Β  β”‚Β Β  β”œβ”€β”€ Loader.jsx β”‚Β Β  β”‚Β Β  β”œβ”€β”€ MusicPlayer β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ Controls.jsx β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ Player.jsx β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ Seekbar.jsx β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ Track.jsx β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ VolumeBar.jsx β”‚Β Β  β”‚Β Β  β”‚Β Β  └── index.jsx β”‚Β Β  β”‚Β Β  β”œβ”€β”€ PlayPause.jsx β”‚Β Β  β”‚Β Β  β”œβ”€β”€ RelatedSongs.jsx β”‚Β Β  β”‚Β Β  β”œβ”€β”€ Searchbar.jsx β”‚Β Β  β”‚Β Β  β”œβ”€β”€ Sidebar.jsx β”‚Β Β  β”‚Β Β  β”œβ”€β”€ SongBar.jsx β”‚Β Β  β”‚Β Β  β”œβ”€β”€ SongCard.jsx β”‚Β Β  β”‚Β Β  β”œβ”€β”€ TopPlay.jsx β”‚Β Β  β”‚Β Β  └── index.js β”‚Β Β  β”œβ”€β”€ index.css β”‚Β Β  β”œβ”€β”€ index.jsx β”‚Β Β  β”œβ”€β”€ pages β”‚Β Β  β”‚Β Β  β”œβ”€β”€ AroundYou.jsx β”‚Β Β  β”‚Β Β  β”œβ”€β”€ Discover.jsx β”‚Β Β  β”‚Β Β  β”œβ”€β”€ MyFaves.jsx β”‚Β Β  β”‚Β Β  β”œβ”€β”€ Search.jsx β”‚Β Β  β”‚Β Β  β”œβ”€β”€ SongDetails.jsx β”‚Β Β  β”‚Β Β  β”œβ”€β”€ TopArtists.jsx β”‚Β Β  β”‚Β Β  β”œβ”€β”€ TopCharts.jsx β”‚Β Β  β”‚Β Β  └── index.js β”‚Β Β  └── redux β”‚Β Β  β”œβ”€β”€ features β”‚Β Β  β”‚Β Β  └── playerSlice.js β”‚Β Β  β”œβ”€β”€ services β”‚Β Β  β”‚Β Β  └── shazamCore.js β”‚Β Β  └── store.js β”œβ”€β”€ tailwind.config.js └── vite.config.js

functionality

Β 
notion image
Β 

Music player

notion image

Discover page β€” genre-wise

notion image

Search by song title/artist name

notion image

Song detail page β€” with lyrics

notion image

Similar songs (algorithm by shazam core)

notion image

future

  • User Authentication - creating accounts
  • Multiple playlist creation
  • Artist details