(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:
ย
Credit: This project has been inspired by a course done by JavaScript Mastery on YouTube!
introducing
Pocket
(logo stolen from glitch.com)
ย
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
ย
ย
Music player
Discover page โ genre-wise
Search by song title/artist name
Song detail page โ with lyrics
Similar songs (algorithm by shazam core)
future
- User Authentication - creating accounts
- Multiple playlist creation
- Artist details