React-Redux Last FM App

React-Redux Last FM App is an artist showcase powered by the official LastFM API.

The App contains lists of Last FM's Top Artists and their details pages contain Top Tracks and Top Albums.

Click here for live demo

Tech Stack

• React
• React-Redux
• React Router Dom
• React Query
• React Icons
• Styled Components
• Storybook

Installation

Use the Yarn package manager install command.

yarn

---

You must get an API key by creating LastFM account first.

https://www.last.fm/api/account/create

Create a .env file in the project root and fill the following keys with your values.

REACT_APP_LASTFM_API_KEY=YOURVALUE
REACT_APP_LASTFM_BASE_URL=YOURVALUE

---

For starting the project run the Yarn's start command.

yarn start

• Project will go live on port number 3000 as default.

---

For starting the Storybook run the below command.

yarn storybook

• Storybook will go live on port number 6006 as default.

---

Project Structure

---

Usage

StoryBook Navigation

• In the Storybook, you will find those isolated components:

• There were no actions and controls written as default except the Navbar component which is interactive and to show backToTop button, you need to give a boolean value.

---

App's Usage

• LastFM React Redux App is a great example of clean UI and UX design. You will be introduced to a front page containing top artists of LastFM.
• While you are scrolling to the bottom, you will be aware of there is an infinite scroll mechanism working for loading brand-new artists. You can go back to the top with the Back to Top button on the right.
• If you click a Click for Artist Details button, it will take you to the artist details page generated by React Router Dom. You can see its activity on the current page URL which is baseURL/artistName
• For styling purposes, I choosed Styled Components over SASS and module CSS/SASS because of its dynamic structure and its tracking ability of which components are rendered or not then inject only their styles to the page.
• In album details page, for the purposes of Redux data persistance I used Localstorage.
• You can change between dark mode and light mode. It's state hold on themeSlice with Redux.
• Artist Details Card is a Styled Component which is used for either top albums and top tracks data. Artist Details Tab component is just a left pane, right pane structure for the mapped Artist Details Cards.

---

Test Cases

• There were some test cases coded for testing fetch top artists function and for testing render of some components. In the end, it should be better of course that these cases are not succesfully covered 100% of the app, but it was a good practice for showcasing react testing library functionalities.

Type Checking

• Type checking controlled by the React Prop Types.

---

License

Project created by Can Berk Ocalir for educational purposes.