FakeShop
Demo online store with instant search, filters in the URL, a wishlist and a full checkout.
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
- Optional demo sign-in with DummyJSON accounts; checkout then fills in the account's address
- Quick find (Ctrl+K) to jump to a page or category or open a product from the keyboard
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
- The catalog is fetched once and cached for the session, so search, filters, sorting and paging run in the browser
- Cart, wishlist, orders and theme are small stores saved to localStorage and read with useSyncExternalStore; the storage event keeps open tabs in sync
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
Gallery
