Description
You need to make an application which lists products from an api
User should be able to login to access the dashboard , apply pagination, and sort
the results in high to low or low to high according to price.
Boilerplate
You are given a set of Components
Dashboard
main page where you need to start working
will contain sort, pagination, product list
ProductList
this component is imported in the ProductsPage
it will contain a list of ProductItems
ProductItem
Component to display information of a single product
Pagination
Pagination component which will have prev, next, current and total pages(optional)
Requirements
API details( use Fetch)
use JSON server
use useEffect to display the data on the UI
You are given a set of Pages
Home
it contains links to other routes
login,signup,cart and dashboard routes
Signup
A user should be able to signup from here
data will save in json server
Login
A user should be able to login from here
You need to complete it with by using the following api(json api)
You need to maintain the authentication state
when the user clicks on submit, the button should be disabled
once logged in, a user is redirected to /dashboard route
Dashboard
all the filters for pagination, sorting, , and products will be present here
Once logged in, a user sees the this page
you should have a Logout button
once clicking on it, you should be logged out
There are two buttons Sort high to low and Sort low to high in the above
div(optional)
if low to high is the order, then the button Sort low to high should be
disabled(optional)
if high to low is the order, then the button Sort high to low should be
disabled(optional)
in Each product there is button or add to cart
When clicking, product will go to cart page
Cart Page
In this page cart data will show
in upper saction cart product will show
and there is button of remove it
and in heading show total amount of cart item
able to make the submission -
✓ App loads correctly - 1 mark
✓ Private Route component redirects user to login when visiting /dashboard page
- 2 mark
✅ Auth Context works correctly
✓ values in context are correctly mapped - 1 mark
Login APIs and functionality
✓ signup page works correctly with API - 1 marks
✓ Login page works correctly when API is mocked - 2 marks
✅ Cart component
✓ cart Components exist - 1 marks
✓ Delete Buttons are present - 1 mark
✓ totle value are present - 1 mark