A React based frontend project that fetches and displays quotes. The quotes are presented in a clean, simple theme based UI with simple animations along with a Navbar, Footer and various other features which are explained below.
API used - https://dummyjson.com/quotes?limit=1454&skip=0
Version - 1 (initial draft)
Version - 2 (after adding a footer)
Footer mainly contains links to Quote clubs on the social media platforms - Facebook, Intagram, X(Twitter) and Pinterest, and also the links to navigate through the platform.
Version - 3 (after adding pagination)
Instead of fetching and displaying all the data at once, pagination is added which ensures faster load times and allows users to browse content in a more organized way, which enhances the experience.
Version - 4 (after adding loader, detailed card, routing and responsiveness)
Loader/Spinner:
Added a spinner to the display when the data is still being fetched from the API.
Detailed card:
When user clicks on any card on the home page, they will get directed to a page where there is a detailed explanation of the selected card details which also contains a button to go back to home page easily. (right now the detailed page just contains the quote and the author but this can be improved later).
Routing:
Routing is added with react-router-dom to change the path in the URL and also the effective change of displayed content.
Responsiveness: (on various devices)
The website is made responsive using media queries, which can be seen in the following screenshots.
