Component Library Overview

Comprehensive guide to the Pizza Chef Frontend component architecture and organization

Introduction

The Pizza Chef Frontend component library provides a modern, performant set of React components built with TypeScript, Redux, and Tailwind CSS. The architecture emphasizes type safety, state management, and responsive design patterns.

Component Architecture

Components are organized by feature domain, following a clear separation of concerns:

src/components/
├── pizza/          # Pizza browsing and display
│   ├── PizzaCard.tsx
│   └── PizzaFilters.tsx
├── order/          # Order management
│   └── OrderSummary.tsx
└── dashboard/      # Analytics and reporting
    └── Analytics.tsx

Technology Stack

React 19

Functional components with hooks for state and lifecycle management

TypeScript

Full type safety with strict mode enabled

Redux Toolkit

Centralized state management with typed hooks

Tailwind CSS

Utility-first styling with custom design system

State Management

All components integrate with Redux using typed hooks from store/index.ts:

import { useAppDispatch, useAppSelector } from '../../store/index.ts';

// Type-safe Redux dispatch
const dispatch = useAppDispatch();

// Type-safe Redux selectors
const state = useAppSelector((state) => state.pizza);

Redux Slices

• pizzaSlice: Manages pizza catalog, filters, and search state
• orderSlice: Handles current order, order history, and loading states

Core Components

Pizza Components

PizzaCard

Interactive card component for displaying individual pizzas with add-to-order functionality

PizzaFilters

Comprehensive filtering system with search, category, price range, and sorting controls

Order Components

OrderSummary

Real-time order management with quantity controls, discount calculation, and checkout

Dashboard Components

Analytics

Data visualization dashboard with revenue metrics and order distribution charts

Type System

All components use strongly-typed interfaces from src/types/:

// Core pizza type
export interface Pizza {
  id: string;
  name: string;
  price: number;
  ingredients: string[];
  category: 'Vegetarian' | 'Meat' | 'Seafood' | 'Spicy';
  imageUrl: string;
  isRecommended?: boolean;
}

// Order item with pricing calculations
export interface OrderItem {
  pizza: Pizza;
  quantity: number;
  originalLinePrice: number;
  discountAmount: number;
  finalLineTotal: number;
}

Design Patterns

Animation & Motion

Components use Framer Motion for smooth transitions:

import { motion, AnimatePresence } from 'framer-motion';

<AnimatePresence mode="popLayout">
  {items.map((item) => (
    <motion.div
      key={item.id}
      initial={{ opacity: 0, x: -20 }}
      animate={{ opacity: 1, x: 0 }}
      exit={{ opacity: 0, scale: 0.95 }}
    >
      {/* Content */}
    </motion.div>
  ))}
</AnimatePresence>

Icon System

Lucide React provides consistent iconography:

import { Plus, Trash2, CheckCircle } from 'lucide-react';

<Plus size={18} />
<CheckCircle className="animate-bounce" />

Responsive Design

Tailwind breakpoints enable mobile-first responsive layouts:

className="flex flex-col lg:flex-row gap-6"

Styling Conventions

Glass Morphism

Many components use backdrop blur effects:

bg-white/60 backdrop-blur-md border border-white/20 shadow-xl

Interactive States

Hover and active states provide tactile feedback:

hover:shadow-xl transition-all duration-300 active:scale-95

Color System

• Primary: Orange (orange-500, orange-600)
• Success: Green (green-500, green-600)
• Danger: Red (red-500)
• Neutral: Gray scale (gray-50 to gray-900)

Navigation

Components use React Router for client-side navigation:

import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();
navigate(`/pizza/${pizza.id}`);

Performance Optimizations

• Lazy animations: Components animate only on user interaction
• Memoized selectors: Redux selectors prevent unnecessary re-renders
• Conditional rendering: Empty states and loading states reduce DOM complexity
• Debounced inputs: Search and filter inputs minimize Redux updates

Accessibility

• Semantic HTML elements (button, input, select)
• ARIA-compliant form controls
• Keyboard navigation support
• Focus states on interactive elements
• Color contrast meets WCAG standards

Next Steps

PizzaCard Component

Learn about the interactive pizza display card

PizzaFilters Component

Explore the filtering and search system

OrderSummary Component

Understand order management and checkout

Analytics Component

Dive into data visualization patterns