Pocket: a music streaming service

(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:

Go here for a short tutorial on how to create a tree 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