ShopForge

Full-stack commerce learning and demo system covering auth, catalog, cart, orders, and admin — cash on delivery only, without a payment gateway.

Live site

React
Vite
Tailwind CSS
Express
Prisma
SQLite
JWT
Zod
PostgreSQL-portable

ShopForge storefront homepage with product highlights and navigation into the catalog — Public storefront home with a clear path into browsing products.

ShopForge product catalog listing products with filters and pricing — Catalog browse view for discovering products before opening a detail page.

ShopForge product detail page showing product information and add-to-cart action — Product detail with pricing and add-to-cart into the local-storage cart.

ShopForge cart drawer showing line items, quantities, and checkout entry — Local-storage cart drawer for reviewing items before checkout.

ShopForge checkout form with customer details and cash on delivery payment option — Checkout limited to cash on delivery — no payment gateway integration.

ShopForge admin dashboard summarizing orders and catalog activity — Admin overview for monitoring store activity and recent orders.

ShopForge admin orders list with order status and customer details — Order management for reviewing and updating cash-on-delivery orders.

ShopForge mobile storefront homepage on a phone viewport — Mobile storefront home for browsing on small screens.

ShopForge mobile product catalog on a phone viewport — Mobile catalog layout for product browsing.

ShopForge mobile product detail page on a phone viewport — Mobile product detail with add-to-cart.

Overview

ShopForge is a full-stack commerce learning and demo system. It covers customer authentication, a product catalog, a local-storage shopping cart, cash-on-delivery checkout, order persistence, and an admin area for dashboard and order management.

The stack is React 18 with Vite and Tailwind CSS on the frontend, and Express with Prisma, JWT, and Zod on the API. Development uses SQLite with a Prisma model written to stay portable to PostgreSQL. There is no payment gateway: checkout is cash on delivery only, and the project is not presented as a live commercial storefront.

Architecture

How the pieces connect, from client to data.

Features

JWT authentication for customers and admin Completed
Product catalog and product detail pages Completed
Local-storage shopping cart Completed
Cash-on-delivery checkout (no payment gateway) Completed
Admin dashboard and order management Completed
Prisma schema with SQLite in development, PostgreSQL-portable Completed
Request validation with Zod Completed
Responsive storefront on mobile viewports Completed

Challenges

Covering a realistic commerce path without introducing payment-provider complexity or implying a live storefront.
Keeping cart state simple and durable on the client while orders remain authoritative on the server.
Modeling catalog and order data so SQLite works for local development while remaining portable to PostgreSQL.

Solutions

Limited checkout to cash on delivery and framed the project as a learning and demo system rather than a commercial launch.
Persisted the shopping cart in local storage and created server-side orders at checkout.
Used Prisma with SQLite for development and a schema intended to move to PostgreSQL without a redesign.

Security

JWT-based authentication for protected customer and admin routes.
Zod validation on API request payloads.
Admin order and catalog operations separated from the public storefront.

Testing

Manual verification of catalog browse, cart, checkout, and admin order flows.
Auth and validation checks for protected API routes.

Deployment

Not deployed as a public commercial storefront.
Local development against SQLite via Prisma.
Prisma model kept portable for PostgreSQL when needed.