Skip to content

DoniyorNl/Zo-rPizza

BranchesTags

Repository files navigation

🍕 Zor Pizza — Enterprise-Grade Pizza Delivery Platform

A production-ready, full-stack pizza ordering and delivery management system with real-time tracking, built with modern web technologies.

Live Demo Performance Tests Tech Stack TypeScript License

📋 Table of Contents

🎯 Overview

Zor Pizza is an enterprise-grade, full-stack web application that delivers a complete pizza ordering and delivery management experience. Built with scalability, performance, and user experience as top priorities.

What Makes This Project Special

  • ⚡ 95+ Performance Score — Optimized with code splitting, lazy loading, and modern image formats
  • 🧪 190 Tests Passing — Comprehensive test coverage (unit, integration, E2E)
  • 🎨 Smooth Animations — Framer Motion for professional UI transitions
  • 📱 PWA Ready — Installable, works offline, push notifications
  • 🔒 Production-Grade Security — Rate limiting, JWT auth, CORS, Helmet
  • 🚀 Real-time Updates — Socket.IO for live order tracking
  • 📊 Analytics Integrated — Google Analytics 4 with e-commerce tracking

Three Core Interfaces

  1. Customer Portal — Browse, customize, order, track deliveries
  2. Admin Dashboard — Manage products, orders, analytics, users
  3. Driver Interface — Accept deliveries, navigate with maps, update status

✨ Key Features

🛒 Customer Experience

Core Features

  • 🍕 Smart Menu — Category filters, search, popular items, deals
  • 🎨 Pizza Customization — Multiple sizes, toppings, half-and-half options
  • 💳 Multiple Payment Methods
    • Stripe (card + Google Pay)
    • Cash on Delivery
    • Click & Payme (Uzbekistan)
  • 🗺️ Real-time Tracking — Live driver location on interactive map
  • 🎁 Loyalty Program — Earn points, redeem rewards
  • 🎟️ Promo Codes — Discount coupons with validation

NEW Features ✨

  • 🔐 Google OAuth — One-click sign-in with Google
  • ❤️ Favorites — Save and quickly reorder favorite pizzas
  • 📄 PDF Invoices — Download professional order receipts
  • ⏱️ Smart ETA — Real-time delivery time calculation
  • 👤 Guest Checkout — Order without account registration
  • 🔁 One-Click Reorder — Repeat past orders instantly
  • 🎬 Smooth Animations — Framer Motion for polished UX
  • 💀 Loading Skeletons — Professional shimmer effects

📊 Admin Dashboard

  • 📈 Real-time Analytics
    • Revenue tracking (hourly, daily, monthly)
    • Order metrics with live updates
    • Top products and categories
    • Customer insights
  • 📦 Product Management — Full CRUD with image upload
  • 📋 Order Management — Status updates, customer contact
  • 👥 User Management — View, edit, manage permissions
  • 🎉 Promotions — Create deals, coupons, loyalty rewards
  • 📊 Google Analytics — GA4 integration with e-commerce events
  • 📍 Branch Management — Multiple locations support
  • 🏷️ Category & Toppings — Organize menu items

🚗 Driver Interface

  • 📱 Mobile-Optimized — Touch-friendly, responsive design
  • 🗺️ Integrated Maps — Turn-by-turn navigation (Leaflet.js)
  • 🔔 Push Notifications — New order alerts
  • 📍 GPS Tracking — Automatic location updates
  • ⚡ Quick Actions — Accept/reject, mark delivered

🔧 Technical Features

  • ⚡ Performance
    • 95+ Lighthouse score
    • AVIF/WebP images (70% smaller)
    • Code splitting & lazy loading
    • Self-hosted fonts
  • 🔐 Security
    • Firebase Auth with JWT
    • Rate limiting (100 req/min)
    • Helmet, CORS protection
    • Stripe webhook verification
  • 🧪 Testing
    • 190+ tests passing
    • 85%+ code coverage
    • Jest + Playwright
  • 🎨 UI/UX
    • Framer Motion animations
    • Shimmer loading skeletons
    • Mobile-first responsive
    • Tailwind CSS + Radix UI
  • 📱 PWA
    • Installable on all devices
    • Offline support
    • Push notifications
    • Background sync

🚀 Live Demo

🌐 Live Site: https://zo-r-pizza.vercel.app

Test Credentials

Role Email Password
👤 Customer demo.customer@zorpizza.uz password123
🔑 Admin demo.admin@zorpizza.uz admin123
🚗 Driver demo.driver@zorpizza.uz driver123

Note: These demo accounts are auto-created on first successful login.

Stripe Test Cards

  • ✅ Success: 4242 4242 4242 4242 (any future date, any CVC)
  • ❌ Decline: 4000 0000 0000 0002
  • 🔐 3D Secure: 4000 0025 0000 3155

🛠️ Tech Stack

Frontend

Next.js 16.1        — React framework with App Router
TypeScript 5.9      — Type safety
Tailwind CSS 3.4    — Utility-first styling
Framer Motion 11    — Smooth animations
Zustand 5.0         — State management
Leaflet.js 1.9      — Interactive maps
Stripe React 2.8    — Payment UI
Socket.IO Client    — Real-time updates
Next PWA 10.2       — Progressive Web App
Radix UI            — Accessible components

Backend

Node.js 20+         — Runtime environment
Express.js 4.21     — Web framework
TypeScript 5.9      — Type safety
Prisma 6.19         — ORM & database toolkit
PostgreSQL          — Relational database (Neon)
Firebase Admin      — Authentication
Stripe Node 17      — Payment processing
Socket.IO 4.7       — WebSocket server
Helmet & CORS       — Security
Winston & Morgan    — Logging

DevOps & Tools

pnpm 9.15           — Fast package manager (workspaces)
Vercel              — Frontend deployment
Railway             — Backend hosting
Neon                — Serverless PostgreSQL
GitHub Actions      — CI/CD pipelines
Jest 29             — Unit & integration tests
Playwright 1.49     — E2E testing
ESLint 9            — Code linting

🏗️ System Architecture

┌─────────────────────────────────────────────────────────────────┐
│                       CLIENT LAYER (React 19)                    │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐          │
│  │   Customer   │  │    Admin     │  │    Driver    │          │
│  │   Next.js    │  │  Dashboard   │  │  Interface   │          │
│  │  Port 3000   │  │              │  │              │          │
│  └──────┬───────┘  └──────┬───────┘  └──────┬───────┘          │
│         │                 │                  │                   │
│         └─────────────────┼──────────────────┘                   │
│                           │                                      │
└───────────────────────────┼──────────────────────────────────────┘
                            │ HTTPS/WSS
┌───────────────────────────┼──────────────────────────────────────┐
│                    API GATEWAY LAYER                             │
│  ┌─────────────────────────────────────────────────────────┐    │
│  │  Express.js Server (Port 5001)                          │    │
│  │  • Rate Limiting (100 req/min)                          │    │
│  │  • CORS (Cross-Origin Resource Sharing)                 │    │
│  │  • Helmet (Security headers)                            │    │
│  │  • JWT Authentication (Firebase)                        │    │
│  │  • Request Logging (Morgan)                             │    │
│  └─────────────────────────────────────────────────────────┘    │
└───────────────────────────┼──────────────────────────────────────┘
                            │
┌───────────────────────────┼──────────────────────────────────────┐
│                     BUSINESS LOGIC LAYER                         │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐             │
│  │   Orders    │  │  Products   │  │  Payments   │             │
│  │ Controller  │  │ Controller  │  │ Controller  │             │
│  └──────┬──────┘  └──────┬──────┘  └──────┬──────┘             │
│         │                │                 │                     │
│  ┌──────┴────────────────┴─────────────────┴──────┐            │
│  │          Socket.IO (Real-time Updates)         │            │
│  │  • Order status changes                        │            │
│  │  • Driver location updates                     │            │
│  │  • Live notifications                          │            │
│  └────────────────────────────────────────────────┘            │
└───────────────────────────┼──────────────────────────────────────┘
                            │
┌───────────────────────────┼──────────────────────────────────────┐
│                      DATA ACCESS LAYER                           │
│  ┌─────────────────────────────────────────────────────────┐    │
│  │           Prisma ORM (Type-safe queries)                │    │
│  │  • Auto-generated TypeScript types                      │    │
│  │  • Connection pooling                                   │    │
│  │  • Query optimization                                   │    │
│  └─────────────────────────┬───────────────────────────────┘    │
└────────────────────────────┼──────────────────────────────────────┘
                             │
┌────────────────────────────┼──────────────────────────────────────┐
│                    PERSISTENCE LAYER                             │
│  ┌─────────────────────────────────────────────────────────┐    │
│  │      PostgreSQL Database (Neon Serverless)              │    │
│  │  • Users & Authentication                               │    │
│  │  • Orders & Order Items                                 │    │
│  │  • Products & Variations                                │    │
│  │  • Reviews & Ratings                                    │    │
│  │  • Analytics & Logs                                     │    │
│  └─────────────────────────────────────────────────────────┘    │
└──────────────────────────────────────────────────────────────────┘

┌──────────────────────────────────────────────────────────────────┐
│                    EXTERNAL SERVICES                             │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐          │
│  │   Firebase   │  │    Stripe    │  │   Leaflet    │          │
│  │     Auth     │  │   Payments   │  │     Maps     │          │
│  │  • Google    │  │  • Card      │  │  • Tracking  │          │
│  │  • Email     │  │  • Google Pay│  │  • Routes    │          │
│  └──────────────┘  └──────────────┘  └──────────────┘          │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐          │
│  │   Resend     │  │ Google GA4   │  │    Sentry    │          │
│  │    Email     │  │  Analytics   │  │    Errors    │          │
│  └──────────────┘  └──────────────┘  └──────────────┘          │
└──────────────────────────────────────────────────────────────────┘

Architecture Highlights

  • 🎯 Monorepo Structure — Shared types, unified tooling, atomic deployments
  • 🔒 Type Safety — End-to-end TypeScript with Prisma-generated types
  • ⚡ Real-time — Socket.IO for live updates without polling overhead
  • 🏛️ Layered Architecture — Controllers → Services → Repository pattern
  • ☁️ Serverless-Ready — Stateless backend, connection pooling
  • 📦 Modular Design — Each feature is self-contained and testable

🎨 UI/UX Highlights

Design Philosophy

  • Mobile-First — Optimized for small screens, enhanced for desktop
  • Minimalist — Clean interface inspired by modern e-commerce
  • Uzbek-Friendly — Full Uzbek language support, local payment methods

Animation Strategy (Framer Motion)

// 1. Hero Section — Staggered entrance
<motion.h1
  initial={{ opacity: 0, y: 30 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.6, delay: 0.1 }}
/>

// 2. Product Cards — Scroll-triggered
<motion.div
  initial={{ opacity: 0, scale: 0.95 }}
  whileInView={{ opacity: 1, scale: 1 }}
  viewport={{ once: true }}
/>

// 3. Modals — Spring animation
<motion.div
  initial={{ opacity: 0, scale: 0.9 }}
  animate={{ opacity: 1, scale: 1 }}
  exit={{ opacity: 0, scale: 0.9 }}
  transition={{ type: "spring" }}
/>

Loading States

  • Shimmer Skeletons — Professional loading placeholders
  • Optimistic Updates — Instant UI feedback
  • Progressive Loading — Load critical content first

⚡ Performance

Lighthouse Score: 95+

Metric Score Details
Performance 95 ⚡ Optimized images, code splitting
Accessibility 98 ♿ WCAG 2.1 AA compliant
Best Practices 100 🔒 HTTPS, secure headers
SEO 100 🔍 Meta tags, sitemap, robots.txt

Optimization Techniques

1. Image Optimization (+3 points)

<Image
  src={imageUrl}
  alt={name}
  loading="lazy"           // Lazy load below fold
  quality={85}             // Optimized quality
  formats={['avif', 'webp']} // Modern formats (70% smaller)
  sizes="(max-width: 768px) 100vw, 50vw"
/>

2. Font Optimization (+2 points)

// Self-hosted with next/font (no external request)
import { Inter } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',      // No FOIT (Flash of Invisible Text)
  preload: true,
  weight: ['400', '500', '600', '700']
})

3. Code Splitting (+3 points)

// Lazy load heavy components
const TrackingMap = dynamic(
  () => import('@/components/tracking/TrackingMap'),
  { 
    ssr: false,
    loading: () => <MapSkeleton />
  }
)

4. Production Scripts (+1 point)

// Only load in production
if (process.env.NODE_ENV === 'production') {
  initSentry()
}

Bundle Size

Before Optimization: 450KB
After Optimization:  340KB
Saved:              110KB (24% reduction)

Core Web Vitals

  • FCP (First Contentful Paint): 1.3s ✅
  • LCP (Largest Contentful Paint): 1.9s ✅
  • TTI (Time to Interactive): 2.6s ✅
  • CLS (Cumulative Layout Shift): 0.05 ✅

🚀 Getting Started

Prerequisites

Node.js >= 20.0.0
pnpm >= 9.0.0
PostgreSQL (or Neon account)
Firebase project
Stripe account

Quick Start

  1. Clone repository
git clone https://github.com/DoniyorNl/Zo-rPizza.git
cd Zo-rPizza
  1. Install dependencies
pnpm install
  1. Setup environment variables

Backend (.env):

# Database
DATABASE_URL=postgresql://user:pass@host:5432/zorpizza
DIRECT_URL=postgresql://user:pass@host:5432/zorpizza

# Firebase
FIREBASE_PROJECT_ID=your-project-id
FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----\n"
FIREBASE_CLIENT_EMAIL=firebase-adminsdk@your-project.iam.gserviceaccount.com

# Stripe
STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...

# Security
JWT_SECRET=your-super-secret-jwt-key
FRONTEND_URLS=http://localhost:3000

# Server
PORT=5001
NODE_ENV=development

Frontend (.env.local):

NEXT_PUBLIC_API_URL=http://localhost:5001
NEXT_PUBLIC_FIREBASE_API_KEY=your-api-key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
  1. Initialize database
cd backend
pnpm prisma:generate
pnpm prisma:migrate
pnpm prisma:seed    # Optional: add sample data
  1. Run development servers
# From root directory
pnpm dev:both   # Runs frontend (3000) + backend (5001)

# Or separately
pnpm dev          # Frontend only
pnpm dev:backend  # Backend only
  1. Access the application

Testing Locally

Run all tests:

pnpm test                  # All tests
pnpm test:frontend         # Frontend tests only
pnpm test:backend          # Backend tests only
pnpm test:e2e              # E2E tests (Playwright)

Build for production:

pnpm build                 # Build frontend
pnpm build:analyze         # Build with bundle analyzer

📚 API Documentation

Base URLs

  • Production: https://zor-pizza-backend.railway.app
  • Development: http://localhost:5001

Authentication

All protected endpoints require Firebase JWT:

Authorization: Bearer <firebase-id-token>

Core Endpoints

🔐 Authentication

Method Endpoint Description
GET /api/auth/me Get current user
POST /api/auth/set-admin Set admin role

🍕 Products

Method Endpoint Description
GET /api/products List all products
GET /api/products/:id Get product details
POST /api/products Create (Admin)
PUT /api/products/:id Update (Admin)
DELETE /api/products/:id Delete (Admin)

📦 Orders

Method Endpoint Description
GET /api/orders List all (Admin)
GET /api/orders/user/:uid User orders
POST /api/orders Create order
PATCH /api/orders/:id/status Update status
DELETE /api/orders/:id Cancel order

💳 Payments

Method Endpoint Description
POST /api/payment/create-intent Create Stripe payment
POST /api/payment/webhook Stripe webhook
POST /api/payments/initiate Click/Payme payment

🗺️ Tracking

Method Endpoint Description
GET /api/tracking/:orderId Track order
POST /api/tracking/update-location Update driver GPS

📊 Analytics (Admin)

Method Endpoint Description
GET /api/dashboard Real-time stats
GET /api/analytics Detailed analytics

Rate Limits

  • General API: 100 req/min
  • Authentication: 20 req/min
  • Dashboard: 120 req/min

🧪 Testing

Test Coverage

Layer Coverage Tests Status
Backend 85%+ Unit + Integration ✅ 100% Pass
Frontend 85%+ Component + Integration ✅ 100% Pass
E2E Critical Flows Playwright ✅ 100% Pass
Total 85%+ 190+ tests ✅ All Passing

Test Commands

# Run all tests
pnpm test

# Frontend tests
pnpm test:frontend
pnpm test:frontend:watch      # Watch mode
pnpm test:frontend:coverage   # Coverage report

# Backend tests
pnpm test:backend
pnpm test:backend:watch
pnpm test:backend:coverage

# E2E tests
pnpm test:e2e                 # Headless
pnpm test:e2e:ui              # UI mode

# Test only changed files
pnpm test:changed

Test Structure

frontend/
├── __tests__/
│   ├── components/      # React component tests
│   ├── hooks/           # Custom hooks tests
│   ├── pages/           # Page integration tests
│   └── lib/             # Utility tests

backend/
├── tests/
│   ├── unit/            # Controllers, services
│   └── integration/     # API endpoints

e2e/
└── tests/               # End-to-end user flows

📸 Screenshots

Customer Portal

Homepage Modern, clean interface with category filters and deals

Admin Dashboard

Admin Dashboard Real-time metrics, charts, and order management

Order Tracking

Tracking Live driver location with interactive map

💡 Technical Challenges

1. Real-time Order Tracking at Scale

Challenge: Efficiently broadcast updates to thousands of concurrent users.

Solution:

  • Socket.IO rooms to isolate connections
  • Debounced driver location updates (every 5s)
  • Redis adapter for horizontal scaling

Learning: Real-time features require careful network overhead management.

2. Performance Optimization (87 → 95)

Challenge: Improve Lighthouse score by 8 points.

Solution:

  • Self-hosted fonts (+2 points)
  • AVIF/WebP images (+2 points)
  • Lazy loading maps/modals (+3 points)
  • Production-only scripts (+1 point)

Learning: Small optimizations compound into major improvements.

3. Payment Security

Challenge: Ensure Stripe webhooks are authentic.

Solution:

  • Raw body preservation for signature verification
  • Idempotency keys to prevent duplicate processing
  • Webhook signature validation

Learning: Payment integrations demand strict security protocols.

4. Monorepo Type Safety

Challenge: Share types between frontend/backend without duplication.

Solution:

  • Prisma-generated types as single source of truth
  • TypeScript path aliases for clean imports
  • Shared types directory at monorepo root

Learning: Monorepos pay off with DRY code and unified tooling.

5. Mobile-First Responsive Design

Challenge: Smooth UX on mobile while maintaining desktop richness.

Solution:

  • Mobile-first CSS with Tailwind breakpoints
  • Touch-optimized buttons (44px min)
  • Modal scrolling for small screens
  • Lazy loading images

Learning: Progressive enhancement > graceful degradation.

🗺️ Roadmap

✅ Completed (v1.0)

  • User authentication (Firebase + Google OAuth)
  • Product catalog with variations
  • Order management system
  • Real-time tracking with maps
  • Stripe payment integration
  • Admin dashboard with analytics
  • Driver interface
  • PWA support (offline, installable)
  • Push notifications
  • Loyalty program
  • Framer Motion animations
  • Loading skeletons
  • 95+ Performance score
  • 190+ tests passing

🚧 In Progress (v1.1)

  • SMS notifications (Twilio)
  • Email receipts (Resend)
  • Dark mode
  • Customer reviews & ratings
  • Multi-language support (i18n)

🔮 Future (v2.0)

  • AI-powered recommendations
  • Multi-tenant (franchise support)
  • Mobile apps (React Native)
  • Inventory management
  • Staff scheduling
  • Marketing automation

📞 Contact

Developer

Doniyor Nasriddinov

Project Links

🎓 Project Stats

📊 Project Metrics
├─ Lines of Code:    50,000+
├─ Components:       100+
├─ API Endpoints:    40+
├─ Tests:            190+
├─ Test Coverage:    85%+
├─ Performance:      95/100
├─ Commits:          500+
├─ Development Time: 3 months
└─ Status:           ✅ Production Ready

🛡️ Security

  • 🔐 Authentication: Firebase Admin SDK with JWT
  • 🔒 HTTPS Only: All traffic encrypted
  • 🛡️ Security Headers: Helmet.js protection
  • 🚫 CORS: Whitelist-based origin control
  • ⏱️ Rate Limiting: Prevent abuse (100 req/min)
  • 🔑 Environment Variables: Sensitive data in .env
  • ✅ Input Validation: Zod schema validation
  • 🪝 Webhook Verification: Stripe signature validation

📄 License

This project is licensed under the MIT License.

MIT License

Copyright (c) 2026 Doniyor Nasriddinov

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.

🙏 Acknowledgments

This project was built with amazing open-source technologies:

📈 Project Highlights

Why This Project Stands Out

  1. 🏆 Production-Grade Quality

    • 95+ Performance score
    • 190+ tests passing
    • 85%+ code coverage
    • Full TypeScript

  2. ⚡ Modern Tech Stack

    • Latest Next.js 16
    • React 19
    • TypeScript 5.9
    • Prisma 6

  3. 🎨 Professional UX

    • Framer Motion animations
    • Shimmer loading skeletons
    • Mobile-first responsive
    • Smooth transitions

  4. 🔒 Enterprise Security

    • Rate limiting
    • JWT authentication
    • HTTPS only
    • Webhook verification

  5. 📊 Real-world Features

    • Live order tracking
    • Payment integration
    • Push notifications
    • Analytics dashboard

🍕 Built with ❤️ and lots of ☕ by Doniyor Nasriddinov

If this project inspired you, consider giving it a ⭐ on GitHub!

Available for freelance work and collaboration opportunities.

Last Updated: March 1, 2026
Version: 1.0.0
Status: ✅ Production Ready

About

zo-r-pizza.vercel.app

Topics

nodejs typescript pwa stripe reactjs nextjs socket-io postgresql expressjs monorepo fullstack prisma tailwindcss

Resources

Readme

License

MIT license
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages