Supermarket Checkout System

A shopping cart application with automatic discount calculation for special offers.

🚀 Live Demo deployed on Vercel

How to run the app locally

install dependencies with npm

npm install

Run app

npm run dev

Available Commands

Command	Description
npm run dev	Start development server with hot reload
npm run build	Build for production (TypeScript compile + Vite build)
npm run lint	Run ESLint to check code quality
npm run preview	Preview latest production build locally
npm run test	Run unit tests with Vitest

Tech Stack

Made with Vite Template for React.

npm create vite@latest my-app -- --template react-ts

• React (UI Library)
• TypeScript
• Tailwind CSS (Styling)
• Vite (Tooling and Dev Server)
• Vitest (Testing)
• Zustand (State management)

Project Structure

src/
├── components/    # React UI components
├── data/          # Static data (products, offers)
├── hooks/         # Custom React hooks
├── stores/        # Zustand state management
├── types/         # TypeScript type definitions
└── utils/         # Pure utility functions with tests

Weekly Offers System

The checkout system supports automatic discount application through weekly offers.

Example: Apple costs €0.50, but 2 apples are offered at €0.75

Offers are defined in src/data/weeklyOffers.ts and automatically applied during checkout calculation.

// Example offer structure
{
  productId:  1,      // Apple
  quantity: 2,       // Buy 2
  specialPrice: 75   // Pay €0.75 instead of €1.00
}

Cart Illustration

Cart illustration was inspired by Wolt's empty cart animation, but implemented with fully custom SVGs and my own character.

Check my design file in Figma for more details.

Product Images

Product Images created with Open AI GPT Image 1.5 Prompt created in ChatGPT 5.2

See Prompt for more details

References

For this project I used real apps for checking out how they work, although the putting products in the cart e-commerce pattern is pretty well known.

• Wolt: Food delivery platform
• Prisma: web store from retail chain Prisma
• K-ruoka: web store from retail chain K-Group

Further improvements

User facing app

• Polish user interface
• Show special offers in separate section
• Optimize image size
• Component documentation & tests with Storybook
• Add pagination to handle big amount of product
• Add product categories
• Product search
• Improve empty cart illustration animation
• Add server-side rendering (SSR)
• Add product details
• Implement checkout flow

Backend

• Get data from backend service
• Update special offers once per week
• Backoffice for managing special offers
• Backoffice for managing products

Developer Experience & code quality (DX)

• Add precommit hook setup to check (and apply) linting, formatting, etc.
• Add e2e tests for testing UI and user flows

Git Flow

Since this was a solo test assignment, I pushed directly to the development branch to save time.

In a team environment, or for bigger projects, I typically follow:

1. Create feature branch from main
2. Open Pull Request with description
3. Code review
4. Merge to main