You can follow the link to see the online demo.
- Display paginated products.
- Add products to shopping cart.
- Quick add product by clicking a button.
- Display product details. (Modal).
- Shoping cart with selected products.
- Change quantity of the product from shopping cart.
- Remove products from shopping cart.
- Erase cart.
- Confirmation for deleting products.
- Dark/Light Theme.
- Still exist the cart after reload the page.
- Display toast for user actions.
- Mobile Friendly.
- Full Accessibility.
- Test Files: 2 passed
- Tests: 24 passed
The existing code includes a development environment, and an API with product data for you to interact with. The relevant API response types can be found in src/types.ts. Please do not use data/products.json
directly.
yarn install
Start the development server on http://localhost:3000
npm run dev
Build the application for production:
npm run build
Locally preview production build:
npm run preview
Run all the tests.
yarn test
Run all the tests with UI.
yarn test:ui
Run tests coverage.
yarn coverage
The API can be interacted with via http://localhost:3000/api
and has the following endpoints:
The /products
endpoint accepts GET
requests and will return the first page of 20 products. To retrieve a different page of 20 products, you can pass the page
query parameter (e.g. /products?page=2
).
The /products/[gtin]
endpoint accepts GET
requests and will return a product matching the GTIN (e.g. /products/8005610625720
). If no product is found, the API will respond with a 404
status.