iMahmoudEmad / MSD-react-assignment

MSD Assessment

This project was bootstrapped with Create React App.

Task Lists

• Add folder structure.
• Implement state management (Redux).
• Implement JSON-server.
• Add & implement Axios.
• Make reusable components such as (Song, Rate) components.
• Add filter by stars.
• Add infinite scroll.
• Add loading when data fetching.
• Add search integration with API.
• Add / Remove songs to the favorite list.
• User can able to Add a song.
• Build responsive components (100% done).

Extra inhancments

• Add initial BASE_URL with Axios.
• Implement SCSS.
• Implement redux-devtools-extension.
• Implement redux-logger.
• Implement redux-thunk.
• Implement toastr when Add or Remove song to favorite.
• Implement toastr when Add a song.
• Implement toastr when Data fetching.
• Add some animation when data render to view (Added to buttons only for now).
• Write testing, (I have work with unit testing before you can check the previous unit test code from Here).
• Add readable commits with Github

Third party library

• react-star-ratings.
• emotion-icons.

Run the project

• Open another terminal inside the project folder and write yarn install if you used Yarn PKG or write 'npm i' if you used NPM.
• Open another terminal inside the project folder and write yarn start-api to run the JSON-server to listen on db.json file.
• Open the terminal inside the project folder and write yarn start to run the react project.

Build the project

• Open the terminal inside the project folder and write yarn build inside it.

Note

• I want to mention that I was only able to work on this task for about 4 to 7 hours in the last week, also this first time to work with Redux integration with APIs.
• I have read more about infinite scroll but I didn't get a free time to built it for sorry, if I added it it will be the first time applied it in a project:
  • also I have read more about it from this list
    • Medium
    • Youtube 1, Youtube 2
    • Dev.to
    • loserkid.io (I know he was implement it with Saga but I visit it to know how to make it with native JS not with a third party libaray).`

Important note

• I want to apologize for the things that I have not finished with yet, but if you check the last email I sent you will find that I mentioned that I'm very busy in this period and to the 15th of March 2021.