Production-ready Next.js 15 e-commerce platform with multi-language support, OTP authentication, and comprehensive documentation.
This project includes 150+ pages of professional documentation:
- 🚀 Quick Start Guide - Get running in 5 minutes
- 🔧 Setup Guide - Detailed first-time setup (DB, SMTP, etc.)
- 📖 Complete Documentation - 115-page reference
- 📡 API Reference - All endpoints documented
- 🗂️ Documentation Index - Navigation hub
- 🏗️ Visual Structure Guide - Architecture diagrams
- Start with DOCUMENTATION_INDEX.md (5 min)
- Follow QUICK_START_GUIDE.md (10 min)
- Complete SETUP_GUIDE.md (60 min)
- Reference PROJECT_DOCUMENTATION.md as needed
Total onboarding time: 2-3 hours to fully productive!
A modern, modular, and production-ready e-commerce web application built with Next.js 15, React, TypeScript, Tailwind CSS, and Radix UI. Snuzz provides a beautiful, responsive shopping experience with real-world cart, checkout, and product detail flows deployed on Vercel, PostgreSQL, and Coolify.
- Live-Demo: https://snuzz-pro.vercel.app/
- Project Summary
- Features
- Tech Stack
- Project Structure
- Getting Started
- Scripts & Usage
- Core Components
- Context & State Management
- Routing & Navigation
- Styling & Theming
- API & Data
- Extending & Reusing Components
- Deployment
- Keywords
- Conclusion
Snuzz is a feature-rich e-commerce platform designed for maintainability, scalability, and a delightful user experience. It demonstrates best practices in modular React/Next.js development, robust type safety, and real-world UI/UX polish. The project is ideal for learning, teaching, or as a foundation for your own e-commerce solution.
- Product Catalog: Browse, filter, and paginate products with detailed information.
- Product Detail: Dynamic product pages with images, descriptions, and purchase options.
- Cart & Cart Sidebar: Add, remove, and update product quantities. Access cart from anywhere.
- Checkout Flow: Secure checkout with promo code support and order summary.
- Responsive Design: Fully mobile-friendly and accessible.
- Persistent Cart: Cart state is saved in localStorage.
- Modern UI: Built with Tailwind CSS, Radix UI, and custom components.
- Type Safety: End-to-end TypeScript for all logic and data.
- Reusable Components: Modular, composable, and easy to extend.
- Framework: Next.js 15 (App Router, SSR/SSG, dynamic routes)
- Language: TypeScript, React 18
- Styling: Tailwind CSS, custom CSS, shadcn/ui, Radix UI
- State Management: React Context API
- Icons: Lucide React
- Other: Embla Carousel, React Hook Form, Zod, and more
snuzz/
├── app/ # Next.js app directory (routing, pages, layouts)
│ ├── cart/ # Cart page
│ ├── product-detail/ # Dynamic product detail route
│ ├── products/ # Product listing page
│ └── ... # Other app routes and layouts
├── components/ # All UI and feature components
│ ├── Cart/ # Cart summary/details
│ ├── Layout/ # Header, Footer, Sidebar, etc.
│ ├── ProductCard/ # Product list and single card components
│ ├── ProductDetail/ # Product detail sections
│ ├── ui/ # shadcn/ui and Radix UI components
│ └── ... # Other shared components
├── context/ # React Context (CartContext)
├── data/ # Static product data
├── hooks/ # Custom React hooks
├── lib/ # Utility functions
├── public/ # Static assets (images, icons)
├── styles/ # Global and Tailwind CSS
├── package.json # Project dependencies and scripts
├── tailwind.config.ts # Tailwind CSS config
├── tsconfig.json # TypeScript config
└── ... # Other config and support files- Node.js 18+
- npm (or yarn/pnpm, but use only one lockfile!)
git clone https://github.com/your-username/snuzz.git
cd snuzz
npm installnpm run devVisit http://localhost:3000 in your browser.
npm run dev– Start the development servernpm run build– Build for productionnpm run start– Start the production servernpm run lint– Lint the codebase
Reusable product card for listing and detail views.
import { SingleProductCard } from "@/components/ProductCard/SingleProductCard";
<SingleProductCard
productSlug="klint-arctic-mint-1"
productImage="/product-image.png"
productName="Klint Arctic Mint"
salePrice="€ 9,60"
originalPrice="€ 14,99"
saleLabel="Sale 30%"
shippingLabel="Free shipping"
stockStatus="in_stock"
addToCart={() => ...}
/>Accessible from anywhere, shows cart items, allows quantity updates, and links to product detail.
import CartSidebar from "@/components/cart-sidebar";
// Used in layout, toggled via contextGlobal state for cart items and sidebar open/close.
import { useCart } from "@/context/CartContext";
const { cartItems, setCartItems, cartOpen, setCartOpen } = useCart();- CartContext: Provides cart state and actions via React Context.
- Persistence: Cart is saved to localStorage and restored on reload.
- Dynamic Product Detail:
/product-detail/[slug](uses Next.js dynamic routes) - Cart Page:
/cart - Product Listing:
/products - Sidebar Navigation: Cart sidebar uses Next.js router for navigation.
- Tailwind CSS: Utility-first styling, custom theme in tailwind.config.ts
- shadcn/ui & Radix UI: Accessible, composable UI primitives
- Custom CSS: For global styles and overrides
- Static Data: Products are defined in products.ts as TypeScript objects.
- Type Safety: All product and cart data is strongly typed.
- All components are modular and reusable.
- To use a component in another project, copy the component and its dependencies, and update imports as needed.
- Example: To reuse the CartSidebar, import it and wrap your app in
CartProvider.
- Vercel: Recommended for Next.js.
- Lockfile: Use only one lockfile (package-lock.json for npm or
pnpm-lock.yamlfor pnpm). - Production Build:
npm run buildthennpm run start
nextjs, react, typescript, tailwindcss, ecommerce, cart, product, radix-ui, shadcn-ui, modular, context, responsive, ssr, ssg, vercel, modern-ui, component-library, best-practices
Snuzz is a modern, modular, and production-ready e-commerce platform built with the latest web technologies. Use it as a learning resource, a starter for your own projects, or a showcase of best practices in Next.js and React development.
Happy Coding! 🚀
Thank you!