NOCTURNE - Artisan Coffee E-Commerce

Overview

NOCTURNE is a dark-themed artisan coffee e-commerce application with 3D product visualization, user authentication (local + Google OAuth), and an admin dashboard for brand customization.

Features

• 3D Product Visualization: Interactive 3D models for coffee products using Three.js and React Three Fiber.
• Authentication: Secure user login/registration using Passport.js with local (email) and Google OAuth 2.0.
• E-Commerce: Full shopping cart functionality, product catalog, and order history.
• Admin Dashboard: Customize brand colors, headlines, and subtext directly from the application.
• Design System: A premium dark-themed aesthetic with gold accents, glass-morphism panels, and smooth animations.

Architecture

• Frontend: React 18, Vite, Tailwind CSS, Radix UI, Framer Motion, Three.js, Wouter.
• Backend: Express 5 on Node.js.
• Database: PostgreSQL with Drizzle ORM.
• State Management: TanStack React Query (server state), Zustand (cart state).

Project Structure

client/           - React frontend (Vite)
  src/
    components/   - UI components (Navigation, ProductCard, Footer, etc.)
    pages/        - Route pages (Home, Shop, Cart, Auth, Admin, Profile, About, etc.)
    hooks/        - Custom hooks (use-cart, use-products, use-auth, etc.)
server/           - Express backend
  index.ts        - Server entry point
  routes.ts       - API routes + seed data
  auth.ts         - Passport strategies and auth endpoints
  storage.ts      - Database operations (Drizzle)
shared/           - Shared code between client and server
  schema.ts       - Drizzle schema and Zod validation schemas
  routes.ts       - API route definitions with Zod validation

Getting Started

Prerequisites

• Node.js (v20+)
• PostgreSQL Database

Installation

1. Install dependencies:

   npm install

2. Set up environment variables (see .env.example):

   • DATABASE_URL
   • SESSION_SECRET
   • GOOGLE_CLIENT_ID (optional)
   • GOOGLE_CLIENT_SECRET (optional)

3. Push database schema:

   npm run db:push

4. Start the development server:

   npm run dev

Production

1. Build the project:

   npm run build

2. Start the production server:

   npm start

License

MIT