Burger House

Burger House enables customers to browse a curated menu or construct personalized burgers by selecting specific ingredients, with real-time order tracking and a comprehensive admin dashboard.

Overview

Burger House is a full-featured e-commerce platform that demonstrates modern web development practices. The application goes beyond a simple ordering system to include features like a custom burger builder with drag-and-drop ingredients and real-time delivery tracking on a map.

Key Features

Custom Burger Builder

Real-Time Preview - See your burger as you build it
Price Calculator - Dynamic pricing based on selections

Curated Menu - Pre-designed burger options
Cart Management - Add, remove, and modify quantities
Order History - View past orders and reorder

User Experience

JWT Authentication - Secure login and registration
Profile Management - Update personal information
Order Tracking - Real-time status updates

Delivery Tracking

MapBox Integration - Interactive delivery map
Live Location - See driver position in real-time

Admin Dashboard

Order Management - View and update order statuses

Technical Highlights

Type-Safe Full Stack

tRPC - End-to-end type safety without code generation
Zod Validation - Runtime type checking with static inference
TypeScript - Strict mode throughout the codebase

Performance

Server-Side Rendering - Fast initial page loads
Optimistic Updates - Instant UI feedback
Image Optimization - Next.js automatic optimization
Code Splitting - Route-based lazy loading

State Management

Redux Toolkit - Centralized cart and user state
Persist - Cart survives page refreshes

Styling

Sass Modules - Scoped component styles
Framer Motion - Smooth animations
Responsive Design - Mobile-first approach

Architecture

flowchart TB
  subgraph Client["Client Layer"]
      A[Next.js Pages]
      B[Redux Store]
      C[tRPC Client]
      D[React Components]
  end

  subgraph API["API Layer"]
      E[tRPC Router]
      F[Auth Procedures]
      G[Order Procedures]
      H[Product Procedures]
  end

  subgraph Data["Data Layer"]
      I[(MongoDB)]
      J[Mongoose ODM]
  end

  subgraph External["External Services"]
      K[Cloudinary
Images]
      L[MapBox
Tracking]
  end

  A --> B
  A --> D
  A --> C
  C --> E

  E --> F
  E --> G
  E --> H

  F --> J
  G --> J
  H --> J
  J --> I

  D --> K
  G --> L

Screenshots

The application features a modern, responsive design:

Home Page - Hero section with featured burgers
Menu Page - Grid layout with filtering options
Burger Builder - Interactive ingredient stacking
Customer Dashboard - Order history and tracking
Admin Dashboard - Order and inventory management

Getting Started

# Clone the repository
git clone https://github.com/sreekarnv/burger-house.git
cd burger-house

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env.local
# Add your MongoDB URI, Cloudinary keys, and MapBox token

# Run development server
npm run dev

# Open http://localhost:3000