pavkout / shopping-cart

Overview

Demo

You can follow the link to see the online demo.

Used Stack

• TypeScript
• React
• Next.js
• Tailwind CSS

Shopping Cart

• 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.

Features

• Mobile Friendly.
• Full Accessibility.

Tests (Jest)

• Test Suites: 6 passed
• Tests: 50 passed
• Snapshots: 1 passed

Getting started

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.

Setup

npm install

Running locally

Development

Start the project in development mode.

npm run dev

Run all the tests.

npm run test

Production

Build and start the project in production mode.

npm start

API

The API can be interacted with via http://localhost:3000/api and has the following endpoints:

/products

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).

/products/[gtin]

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.