Skip to content
Ákos Kappel
Language: en
Theme
Light
Dark

FakeShop

Demo online store with instant search, filters in the URL, a wishlist and a full checkout.

FakeShop home page with product cards

About the project

A personal project from 2024 that I later rebuilt into a realistic demo store with 194 products from DummyJSON. Nothing is sold and no payment is taken.

What you can try

  • Search with suggestions and filters for price, rating, brand, stock and discounts, all kept in the URL
  • Product pages with a zoomable gallery, reviews and related products
  • A cart with undo, the promo codes FAKE10 and FREESHIP, and a free-delivery threshold
  • Checkout with card number validation and delivery dates in business days; only the last four digits are kept
  • Compare products, wishlist, recently viewed and order history, synced across open tabs
  • Dark mode, image transitions from card to product page, installable as an app

Under the hood

  • React Router in data mode with loaders, actions and lazy routes; product details stream in with Suspense
  • End-to-end tests on desktop and phone sizes with accessibility checks, including tests that no card data is stored
  • Lighthouse CI fails below 100 for accessibility, best practices and SEO; deployed to GitHub Pages with GitHub Actions

Changelog

  • React 18 to 19, React Router 6 to 8 and Vite 5 to 8
  • Tailwind CSS 3 to 4 and TypeScript 5 to 6
  • Data source moved from Fake Store API to DummyJSON
When
2024 – 2026
Type
Personal
Versions
  • React 19
  • React Router 8
  • Vite 8
  • Tailwind CSS 4
Stack
  • React
  • React Router
  • TypeScript
  • React Hook Form
  • Tailwind CSS
  • Vite
  • Vitest
  • Playwright
  • ESLint
  • GitHub Pages
Product search results with filters
Search with suggestions and filters kept in the URL.
Checkout form with the order summary
Checkout with card number validation and delivery dates in business days.

1 of 2

Product search results with filters

Search with suggestions and filters kept in the URL.