sShop
Full-Stack Storefront // Next.js 16 App Router // Deterministic Commerce Engine
Project Overview
sShop is a polished, single-store e-commerce storefront built with Next.js 16 and Tailwind CSS v4. Shoppers browse a catalog of real products with photos, filter and search, add items to a persistent cart, and walk through a mock checkout. What began as a multi-store price-comparison app was rebuilt into a normal shop — but its rich synthesis engine still runs under the hood, manufacturing believable “was / now” sale prices from a single price point.
Tech Stack & Architecture
Framework
Built on Next.js 16 with the App Router — everything is a React Server Component by default, and only interactive UI opts into the client.
UI Runtime
React 19 for the component model, with server-rendered data fetching and client components receiving resolved data as props.
Language
TypeScript 5 in strict mode. A single Product/Offer domain model in lib/types.ts is the contract every data source maps into.
Styling & Design System
Tailwind CSS v4 via PostCSS, layered over a hand-built design system in globals.css — brand color scale, soft-elevation shadows, and reusable card/button/badge/input utilities.
Animation
Framer Motion 12 drives page transitions, scroll reveals, and the product-gallery lightbox — all collapsed under prefers-reduced-motion.
Data Plane
A live catalog sourced from DummyJSON with an ordered fallback to a hand-authored 12-product seed catalog, memoized per request and cached across requests so the UI never renders empty.
Synthesis Engine
A deterministic seeded RNG (Park–Miller LCG) fans a single real price into a realistic multi-store offer spread and price history — identical on server and client, so there are no hydration mismatches.
Cart & Persistence
A client-side, localStorage-backed cart mounted once via a CartProvider context; all cart-dependent UI gates on a hydration flag so first paint matches the server markup.
Key Features & Functionality
- 01
Searchable Multi-Category Catalog
Shoppers browse real products across electronics, audio, apparel, gaming, and more, with debounced autocomplete, client-side filtering (price, category, rating, in-stock), and sorting — the deals grid round-robins one product per category so it never shows eight of the same kind.
- 02
Persistent Cart & Mock Checkout
A fast, responsive bag persists across sessions in localStorage with live subtotal, shipping, and tax math. Checkout is an intentional stub — it shows the order for context but never takes a real payment.
- 03
Deterministic Price Synthesis
Retained from the app's origins as a price-comparison tool, a seeded engine manufactures believable “was / now” sale prices and per-store offers from a single base price — stable across reloads and safe to render on the server.
- 04
Live Cross-Store Price Scraping
A fully working backend — a zero-dependency HTML scraper (eBay, Amazon, Best Buy) plus a RapidAPI-backed provider — pulls live cross-store pricing behind a fail-soft /api/scrape route that always returns HTTP 200, even on a block or timeout.
- 05
Resilient, Fail-Soft Architecture
Every external call degrades gracefully: the catalog falls back DummyJSON → seed, live search degrades to an empty result set rather than crashing, and all synthetic data is deterministic to avoid hydration divergence.
- 06
Premium, Accessible UI
Glassmorphic navigation, soft shadows, responsive grids, a keyboard-navigable ARIA combobox search, and fluid Framer Motion transitions — with a mobile filter drawer and reduced-motion support throughout.
Skills Gained
Next.js App Router & RSC
Structuring an app around Server Components, server-side data fetching, route-segment config, and selective client interactivity in the modern App Router model.
Data-Source Abstraction
Designing a single Product/Offer contract that every source — seed catalog, DummyJSON, RapidAPI, or an HTML scrape — maps into, so the UI is fully decoupled from where data comes from.
Deterministic & Hydration-Safe SSR
Using a seeded RNG to generate synthetic offers and price history that render identically on server and client, eliminating hydration mismatches by construction.
Client State Management
Building a localStorage-backed cart with a Context provider and a useCart() hook, gating cart-dependent UI on a hydration flag for a clean SSR/CSR handoff.
Web Scraping & API Integration
Writing a dependency-free fetch + RegExp HTML scraper across multiple stores and a provider-aware RapidAPI client, unified behind one fail-soft search endpoint with TTL caching.
Design Systems with Tailwind v4
Authoring a token-driven design system — brand scale, elevation, typography, and component utilities — layered on Tailwind CSS v4 for a consistent, premium look.