🍕 Fast react pizza

A modern TypeScript + React web app that lets users browse pizzas, create orders, and enjoy a smooth, delightful UI experience.
Built with **React Router (data loaders & actions), Redux Toolkit, and **Tailwind CSS**.

🔗Live Demo

✨ Features

🧭 Routing & Data Handling （TypeScript + React Router)

• Developed with TypeScript for robust type safety and improved developer experience
• Powered by React Router
• Utilized loaders for data pre-fetching data and actions for form submissions

🛒 State Management (Redux Toolkit)

• Redux Toolkit for global UI state (cart, user, etc.)
• Typed slices, reducers, and memoized selectors
• Client-side navigation with smooth transitions and data consistency

🎨 Styling (Tailwind CSS)

• Tailwind CSS for utility-first and fully responsive design
• Custom reusable components: buttons, layout utilities, etc
• Consistent theme and hover animations for modern UI feel

🍽️ App Flow

1. Enter your name to begin an order
2. Browse pizza menu (fetched from an external API)
3. Add pizzas to the cart - quickly adjust quantities from the menu
4. Submit order via form - quickly access your current address using browser's position
5. View and track your order status - including an option to upgrade it to priority

---

🗂️ Project Structure

src/
├── features/
│   ├── cart/                  # Cart UI and Slice
│   │   ├── cart.tsx
│   │   ├── cartSlice.ts
│   │   └── ...
│   ├── menu/                  # Menu UI and Loader function
│   │   ├── Menu.tsx
│   │   ├── menuLoader.ts
│   │   └── ...
│   ├── order/                 # Order UI, loaders, and actions
│   │   ├── CreateOrder.tsx
│   │   ├── createOrderAction.ts
│   │   ├── Order.tsx
│   │   ├── orderLoader.ts
│   │   ├── UpdateOrder.tsx
│   │   ├── updateOrderAction.ts
│   │   └── ...
│   └── user/                 # User related UI, Slice, and Types
│       ├── userSlice.ts      # User slice
│       ├── userThunks.ts     # Async thunk for fetching address from geocoding API
│       ├── userTypes.ts      # Type definitions
│       └── ...
├── services/
│   ├── queries/              # API query functions
│   │   ├── apiGeocoding.ts
│   │   └── apiRestaurant.ts
│   └── types/
│       └── Restaurant.ts     # API request and response types
├── store/
│   ├── hooks.ts              # Typed custom hooks for Redux
│   └── store.ts              # Redux store configuration
├── ui/                       # Reusable and customized components, layout
│   └── ...
├── utils/                    # Utility functions
│   └── ...
├── App.tsx                   # Route entry point
├── index.css
└── main.tsx

©️ Copyright & Credits

This project was developed under the guidance of Jonas Schmedtmann’sThe Ultimate React Course