FastReactPizza - Pizza Delivery App

A modern React-based pizza delivery application with Redux state management, featuring a complete ordering system, cart management, and order tracking.

Overview

FastReactPizza is a comprehensive pizza delivery platform that provides:

• Interactive pizza menu with detailed product information
• Shopping cart with real-time updates
• Order creation and management system
• Order tracking and status updates
• User authentication and profile management
• Responsive design for all devices

Features

• Menu Management: Browse pizzas with detailed descriptions, prices, and images
• Shopping Cart: Add/remove items, update quantities, and view total
• Order System: Create orders with delivery details and payment
• Order Tracking: Track order status and delivery progress
• User Management: User registration, authentication, and profiles
• Responsive Design: Optimized for desktop, tablet, and mobile
• Real-time Updates: Live cart and order status updates

Technical Stack

• Frontend: React 19.1.0
• State Management: Redux Toolkit 2.8.2
• Routing: React Router DOM 6.30.1
• Styling: Tailwind CSS 4.1.11
• Build Tool: Vite 7.0.3
• Development: ESLint & Prettier

Getting Started

Prerequisites

• Node.js (version 18 or higher)
• npm or yarn

Installation

1. Clone the repository
2. Navigate to the project directory:

   cd Websites/FastReactPizza/main

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

5. Open your browser and visit http://localhost:5173

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run lint - Run ESLint
• npm run preview - Preview production build

Project Structure

src/
├── App.jsx                    # Main application component
├── features/                  # Feature-based modules
│   ├── cart/                  # Shopping cart functionality
│   │   ├── Cart.jsx          # Cart component
│   │   ├── CartItem.jsx      # Individual cart item
│   │   ├── CartOverview.jsx  # Cart summary
│   │   ├── cartSlice.js      # Redux cart slice
│   │   ├── DeleteItem.jsx    # Remove item functionality
│   │   ├── EmptyCart.jsx     # Empty cart state
│   │   └── UpdateItemQuantity.jsx # Quantity updates
│   ├── menu/                  # Menu management
│   │   ├── Menu.jsx          # Menu component
│   │   └── MenuItem.jsx      # Individual menu item
│   ├── order/                 # Order management
│   │   ├── CreateOrder.jsx   # Order creation
│   │   ├── Order.jsx         # Order details
│   │   ├── OrderItem.jsx     # Order item display
│   │   ├── SearchOrder.jsx   # Order search
│   │   └── UpdateOrder.jsx   # Order updates
│   └── user/                  # User management
│       ├── CreateUser.jsx    # User registration
│       ├── Username.jsx      # Username component
│       └── userSlice.js      # Redux user slice
├── services/                  # API services
│   ├── apiGeocoding.js       # Geocoding API
│   └── apiRestaurant.js      # Restaurant API
├── store.js                   # Redux store configuration
├── ui/                        # UI components
│   ├── AppLayout.jsx         # Application layout
│   ├── Button.jsx            # Reusable button
│   ├── Error.jsx             # Error handling
│   ├── Header.jsx            # Site header
│   ├── Home.jsx              # Homepage
│   ├── LinkButton.jsx        # Link button component
│   └── Loader.jsx            # Loading component
└── utils/                     # Utility functions
    └── helpers.js            # Helper functions

Key Features

Shopping Cart

• Add pizzas to cart with quantity selection
• Real-time price calculation
• Remove items or update quantities
• Cart persistence across sessions

Order Management

• Create new orders with delivery details
• Order status tracking
• Search and view existing orders
• Update order information

User System

• User registration and authentication
• Profile management
• Order history tracking

Menu System

• Browse available pizzas
• View detailed product information
• Filter and search functionality

State Management

The application uses Redux Toolkit for state management:

• Cart Slice: Manages shopping cart state
• User Slice: Handles user authentication and data
• Store: Centralized state management

Routing

React Router DOM handles navigation:

• / - Homepage
• /menu - Pizza menu
• /cart - Shopping cart
• /order/new - Create new order
• /order/:orderId - Order details

Styling

Tailwind CSS provides:

• Responsive design utilities
• Custom component styling
• Dark/light theme support
• Animation and transition effects

API Integration

The app integrates with:

• Geocoding API: For address validation and delivery calculations
• Restaurant API: For menu data and order management

Contributing

This is a comprehensive pizza delivery application demonstrating:

• Modern React patterns with hooks
• Redux Toolkit for state management
• React Router for navigation
• Component-driven architecture
• API integration and data fetching
• Responsive design principles

License

This project is for educational purposes.