/vue-shopping-cart

This is a demo shopping cart using Vue.js 3 and Nuxt 3

Primary LanguageVueMIT LicenseMIT

Overview

image info

Demo

You can follow the link to see the online demo.

Used Stack

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 (vitest)

  • Test Files: 2 passed
  • Tests: 24 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

yarn install

Running locally

Development Server

Start the development server on http://localhost:3000

npm run dev

Production

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

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.