Sentify

This is Spotify Spoof Assignment Build with REACT

Tech Stack

• React
• Grommet component Library
• Redux Toolkit
• React-router-DOM

How to Start on local system

Clone the project

  git clone https://github.com/t007rushi/Sentify.git

Go to the project directory

  cd Sentify

Install dependencies

  npm install

Start the server in Development mode

  npm run start

Start the server in Production mode

  npm run build

  npm install -g serve
  serve -s build

Pages

• Landing Page Frontend Authentication
• Home Page with below Sections
  • Released This Week Songs
  • Featured Playlists
• Browse Genre
• Search for music

While Building the App!

1. How much logic did I offloaded out of the UI components?

• Created SongsCard and GenreCard, mapped the data out of array/collection and passing down the specific data as prop for a particular card
• There is Case while making Playlists/Songs Rows code is repetative,so followed DRY (Don't Repeat Yourself) Principal so offload the data into PlaylistRow and passed the props to this component making PlayLists Component More Readable, Modular and Reusable.
• Instead of repeating the Fixed component (Header, Sidebar, Footer) for each Page Just offloaded the Changing part i.e. MainComp and passed the Whole Data as special {Children} Prop making use of Higher Order Component (HOC) Pattern
• For Footer made 3 sections
  1. Song details
  2. Player with controls and
  3. Volume and extra options

2. How did I structured my app?

• While Structuring App Code is look-like chaos and unmodular at first so Seperated out the layout Component and then Compose them into Single Home Page Component.

Following tree Summerizes the Structure of APP

3. What I did it made the use of Redux as simple as possible?

• Started with spotify Auth, thought of making authSlice but later dropped and stored it in window.localstorage

  Reasons

  • There is no option for signup or custom login page it's done by Spotify Auth API under the hood
  • so no need to make another slice and crowding the store for single token to use over the app lifecycle

• Async calls using thunk and just added loading as boolean flag to signal data is fetched or in pending/rejected state

DEMO

Home Page with playlists and songs

Browse Genre Section

Search Page

Author

• @t007rushi

Acknowledgements

• Grommet component Library

🔗 Links