← All projects
E-Commerce MonorepoCompleted

Atelier — Fashion E-Commerce

Fullstack pnpm workspace monorepo combining static-first speed with rich client-side commerce state.

View Source on GitHubLive Demo
TypeScriptAstroPreactNestJSPrismaPostgreSQLZodNanostores
Atelier — Fashion E-Commerce
125+Seeded Catalog Items
100%Shared Zod Contracts
0 KBJS on Static Content

Problem

Traditional e-commerce storefronts suffer from heavy hydration bundles that degrade Core Web Vitals, while decoupled frontend/backend teams often drift out of sync on API contracts and variant stock validation.

Solution

Architected an Astro SSG storefront using Preact islands and Nanostores for zero-overhead browsing and instant cart/wishlist interactivity, paired with a NestJS REST API sharing strict Zod schemas via a common @clothes/shared workspace package.

System Design

Architecture Breakdown

Storefront & Islands

Astro + Preact + Nanostores

Static product pages with hydrated islands for Cart Drawer, Wishlist, and Multi-Variant Matrix Picker.

Shared Domain Layer

@clothes/shared (Zod)

Single source of truth for DTOs, runtime validation schemas, and TypeScript interfaces across client & server.

Backend API

NestJS v12 + OpenAPI

Modular controllers/services with global exception filters, Zod validation pipes, and Swagger docs.

Data Persistence

Prisma v7 + PostgreSQL

Connection pooling via @prisma/adapter-pg with relational schemas for categories, variants, and inventory.

Implementation Details

Key Engineering Highlights

  • Engineered a pnpm workspace monorepo sharing end-to-end Zod validation contracts and domain models between Astro and NestJS.
  • Built reactive Preact islands backed by persistent Nanostores for real-time size/color stock matrix selection, wishlist toggles, and cart drawer.
  • Implemented Prisma v7 persistence with @prisma/adapter-pg connection pooling, custom client generation, and automated seeding of 125 curated items.
  • Hardened the REST API with Swagger/OpenAPI documentation, global exception filters, and strict runtime DTO validation pipelines.

Explore More Projects

Digital Publishing

Poster — Digital Magazine

Editorial monolith built with Next.js 16 and Payload CMS 3 on PostgreSQL. Features real-time Live Preview via postMessage, dynamic advertising engine, and full E2E/integration test suites.

Telegram Bot RPG

Pokeshowdown — Telegram Bot RPG

Full-stack Telegram bot powered by grammY, TypeScript, and PostgreSQL with Prisma. Features 809 live species from PokeAPI, decorator-driven command registration, transactional trading, and bilingual commands.