🍕 PizzaShop

🔥 A modern pizza ordering experience with a warm wood-fired visual identity.

Browse pizzas · Customize orders · Manage cart · Track orders · Control everything from Admin

🍕 About

PizzaShop is a modern pizza ordering web application designed around a dark, warm and energetic restaurant aesthetic.

The project combines a customer-facing pizza shop with an integrated admin dashboard. It includes authentication, menu browsing, pizza customization, cart management, ordering, profiles, events, about pages and content/product management.

The current version is intentionally frontend-only and uses the browser's localStorage as a lightweight local database, so it can be started without a separate backend or database server.

⚡ Goal: make the ordering experience feel fast, visual and delicious — before the pizza even reaches the oven.

✨ Highlights

Feature	Status
🏠 Responsive landing page	✅
🍕 Pizza menu	✅
🏷️ Category filtering	✅
📏 Pizza size selection	✅
➕➖ Quantity controls	✅
🛒 Persistent shopping cart	✅
🔐 Register / Login / Logout	✅
🔑 Password recovery demo flow	✅
👤 User profile	✅
📦 Order creation	✅
🚚 Order status management	✅
🎉 Events page	✅
ℹ️ About Us page	✅
🧑‍💼 Admin dashboard	✅
🍕 Admin product CRUD	✅
👥 User management	✅
📊 Order statistics	✅
✏️ Editable website content	✅
⏳ Branded pizza loading animation	✅
📱 Responsive UI	✅
♿ Reduced-motion support	✅

🎨 Design

PizzaShop uses a wood-fired pizza visual direction:

🌑 Deep brown / near-black backgrounds
🔥 Orange, amber and coral accents
🍕 Large food photography and pizza illustrations
✨ Soft glow and ember effects
🧱 Bento-style event cards
🪄 Smooth hover and micro-interactions
📐 Responsive layouts for desktop, tablet and mobile

🎨 Core palette

Background     → #160904 / deep brown
Surface        → #241007
Primary        → #FFB347
Accent         → #FF4E50
Text           → #FFFFFF
Muted text     → warm neutral tones

The visual language is shared across the customer interface while the admin area uses a more functional dashboard-oriented treatment.

🧩 Main Pages

🏠 Home

The landing page introduces the restaurant with:

Hero section
Pizza delivery message
Cooking preview
Primary order CTA
Featured menu
Popular pizza section
Events
About Us
Footer navigation

🍕 Menu

Customers can:

Browse pizzas
Filter by category
Choose pizza size
Change quantity
View ingredients
See calculated prices
Add products to cart

🛒 Cart

The cart provides:

Product overview
Quantity management
Price calculation
Delivery information
Order summary
Order creation

🔐 Authentication

Includes:

Login
Registration
Logout
Password recovery flow
OTP demo flow
Protected routes

ℹ️ Authentication is currently local/demo authentication. It is not intended as production-grade security.

👤 Profile

Logged-in users can access their profile and personal order information.

🎉 Events

The events section uses a visual bento layout for restaurant promotions and activities.

ℹ️ About Us

A branded restaurant story section with imagery and supporting content.

🧑‍💼 Admin Panel

The project includes a dedicated admin area.

📊 Dashboard

Displays high-level information such as:

Products
Orders
Users
Revenue
Order activity

🍕 Products

Admins can:

Add products
Edit products
Delete products
Set categories
Set descriptions
Manage ingredients
Manage size/price options
Preview product information

📦 Orders

Orders can be viewed and their status can be changed.

Typical flow:

🕐 Pending
   ↓
✅ Confirmed
   ↓
👨‍🍳 Preparing
   ↓
🚚 Delivering
   ↓
🏁 Delivered

Cancelled orders can also be marked separately.

👥 Users

Admins can inspect registered users and manage the locally stored user list.

✏️ Content

Selected website text/content can be edited from the admin panel and reflected on the customer-facing interface.

🛠️ Tech Stack

Frontend

⚛️ React 19
🧭 React Router 7
🎨 Tailwind CSS 4
⚡ Vite 7
🧩 React Icons

Development

ESLint
Vite
React Compiler tooling
SVG assets
WebP image assets

Storage

Browser
   │
   └── localStorage
        ├── users
        ├── products
        ├── orders
        ├── cart
        └── site content

No external database is required for the current version.

📁 Project Structure

Pizza-main/
│
├── public/
│
├── src/
│   ├── assets/
│   │   ├── imgs/
│   │   ├── logos/
│   │   └── pizza-loader.svg
│   │
│   ├── components/
│   │   ├── header/
│   │   ├── sections/
│   │   └── shared/
│   │
│   ├── context/
│   │   ├── AuthContext.jsx
│   │   └── CartContext.jsx
│   │
│   ├── layouts/
│   │   ├── MainLayout.jsx
│   │   ├── Navbar.jsx
│   │   ├── Footer.jsx
│   │   └── admin/
│   │
│   ├── lib/
│   │   └── localDb.js
│   │
│   ├── pages/
│   │   ├── Home.jsx
│   │   ├── Menu.jsx
│   │   ├── Cart.jsx
│   │   ├── Auth.jsx
│   │   ├── Profile.jsx
│   │   ├── Events.jsx
│   │   ├── AboutUs.jsx
│   │   └── admin/
│   │
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
│
├── index.html
├── package.json
├── vite.config.js
└── README.md

🚀 Getting Started

1. Clone the repository

git clone YOUR_REPOSITORY_URL
cd Pizza-main

2. Install dependencies

npm install

3. Start development server

npm run dev

Open:

http://localhost:5173

📦 Production Build

Create a production build:

npm run build

Preview the production build locally:

npm run preview

Lint the project:

npm run lint

🔑 Demo Admin

The current project contains a seeded local admin account.

Login:    admin
Password: admin123

Admin login:

/admin/login

⚠️ This account is intended for local/demo use. Change or replace it before deploying a real production application.

🔐 Security Note

This version is not a production authentication system.

Because the project stores data in localStorage:

passwords are not suitable for real-world secure storage;
authentication can be manipulated from the browser;
users/orders/products are local to the current browser;
there is no real server-side authorization;
there is no real payment gateway;
there is no real SMS/Telegram OTP provider.

For production, the recommended architecture is:

React / Vite
      │
      ▼
REST API / Backend
      │
      ├── PostgreSQL / MySQL
      ├── Secure password hashing
      ├── JWT / Session auth
      ├── Role-based authorization
      ├── Real OTP provider
      └── Payment provider

🗺️ Roadmap

Phase 1 — UI & Frontend

Phase 2 — Backend

Phase 3 — Restaurant Features

Phase 4 — Payments

Online payment
Payment confirmation
Payment history
Refund flow

🍕 Restaurant Order Flow

Customer
   │
   ▼
Browse Menu
   │
   ▼
Choose Pizza
   │
   ├── Size
   ├── Quantity
   └── Ingredients
   │
   ▼
Add to Cart
   │
   ▼
Checkout
   │
   ▼
Create Order
   │
   ▼
Admin
   │
   ├── Confirm
   ├── Prepare
   ├── Deliver
   └── Complete
   │
   ▼
Customer receives order 🍕

🧠 Architecture

The application is separated into reusable layers:

Pages
  ↓
Layouts
  ↓
Components
  ↓
Contexts
  ↓
Local Database
  ↓
localStorage

This makes it easier to replace the local storage layer with a real API later without rebuilding the entire UI from scratch.

⚡ Performance & UX

PizzaShop includes several small UX details:

⏳ Branded loading screen
🪄 Hover animations
🧭 Protected navigation
🛒 Persistent cart state
📱 Responsive breakpoints
♿ prefers-reduced-motion
🔄 Loading states for actions
⚠️ Error/empty states
🎯 Clear CTA hierarchy

🤝 Contributing

Contributions are welcome.

git checkout -b feature/my-feature
git add .
git commit -m "feat: add my feature"
git push origin feature/my-feature

Then open a Pull Request.

📜 License

This project is currently provided as a personal/demo project.

If you plan to use it commercially, review and define an appropriate license for your repository before publishing it.

👨‍💻 Author

Azico / AzicoDev

Frontend developer focused on:

React • JavaScript • UI/UX • Web Development • Cybersecurity

🍕 Built with React, caffeine & a dangerous amount of pizza. 🍕

Made fresh. Served fast. Coded with love. ❤️‍🔥

Name		Name	Last commit message	Last commit date
public		public
src		src
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
vite.config.js		vite.config.js

Latest commit

History

Folders and files

Repository files navigation