https://github.com/fatihcaliss/fazla-gida-case

https://github.com/fatihcaliss/fazla-gida-case

axios react-icons react-infinite-scroll-component redux-thunk redux-toolkit storybook tailwindcss

Last synced: 10 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/fatihcaliss/fazla-gida-case
• Owner: fatihcaliss
• Created: 2023-01-31T17:48:25.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2023-02-05T09:34:53.000Z (almost 2 years ago)
• Last Synced: 2024-04-20T14:24:14.812Z (7 months ago)
• Topics: axios, react-icons, react-infinite-scroll-component, redux-thunk, redux-toolkit, storybook, tailwindcss
• Language: JavaScript
• Homepage: https://fazla-gida-case.vercel.app
• Size: 7.76 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## :point_right: [Click here to see on browser](https://fazla-gida-case.vercel.app/)

## Fazla-Gida-FE-Case

In this project;


📌  Last.fm’s API(https://www.last.fm/api) used for datas. 


📌 Axios used for get chart.getTopArtists, artist.getTopAlbums, artist.getTopTracks infos from Last.fm’s API.


📌 Tailwindcss used for styling.


📌 For Stage management Redux-toolkit used. 


📌  React-router-dom used for routing. There are two pages. One of them is Home page which lists top 10 artist. 


📌 On Home page,   react-infinite-scroll-component used for geting datas. Each request is limited 10 artists by url query. Default API request, is responded by 50 artists. 


📌 Website theme can be changed to dark-light mode by clicking the item on top right. 


📌 The other page is Artist Detail page. This page contains a header on top with artist name. In second section, there are top 10 albums and top 10 tracks for artist.



📌 There are 3 components.



 ArtistCard component used for home page top 10 artist list and artist detail page header artist information.

 Card component used for Artist Detail Page top 10 albums and top 10 tracks.

 Navbar component used for Homee page and Artist Detail Page navbar. It contains theme change icons.



📌 React-testing-library used for testing.


📌 Development environment tool Storybook used for playground for UI components 


## Preview:

![animation](https://github.com/fatihcaliss/fazla-gida-case/blob/master/fazlagidapreview.gif?raw=true)