Fast Pizza

Fast React Pizza Co.: A High-Performance Pizza Ordering App Built with React

When I started working on Fast React Pizza Co., my goal was simple: build a fast, modern, and user-friendly pizza ordering web app - and also learn Redux . Using React, Redux, and TypeScript, I created an application that lets users browse a delicious menu, add pizzas to their cart, and place orders with ease.

Key Features

• Fast & Responsive:
  Leveraging Vite as the build tool, the development experience very fast. Hot module replacement and quick rebuilds let me iterate quickly on UI features and bug fixes.
• Modern State Management:
  Redux Toolkit powers the simple yet effective state management. The clean usage of slices, such as in the cart and user data, keeps the code organized and easy to extend.
• Tailwind CSS for Styling:
  With Tailwind CSS and a Prettier plugin for Tailwind, styling the application becomes efficient and cohesive. The utility-first approach enables responsive layouts without extensive CSS files.
• Deployment via Netlify:
  A straightforward netlify.toml configuration and build scripts enable seamless deployment

Project Structure

Here's a brief look at how the project is organized:

src/
├── App.tsx                // The main application route setup
├── features/              // Feature-specific logic (cart, menu, order, user)
├── ui/                   // Reusable UI components such as buttons and headers
├── services/             // API clients for fetching data (menu, orders, geocoding)
├── utils/                // Helper functions, type definitions, and interfaces
└── main.tsx              // App entry point

For example, in CartSlice.ts, adding or removing pizzas is achieved by dispatching an action:

export const addPizza = (state, action) => {
  state.cart.push(action.payload)
}

The same approach is followed for other slices, making state changes predictable and easy to manage.

Development Tools and Workflow

During development, the app benefits from several modern tools:

• Vite ensures a blazing-fast dev server.
• React Router sets up the application flow with nested routes.
• ESLint and Prettier maintain code quality and consistency.

Sample routing is set up in App.tsx so that users can immediately start browsing the menu or check out their cart:

const router = createBrowserRouter([
  {
    element: <AppLayout />,
    errorElement: <Error />,
    children: [
      { path: '/', element: <Home /> },
      { path: '/menu', element: <Menu />, loader: menuLoader },
      { path: '/cart', element: <Cart /> },
      { path: '/order/new', element: <CreateOrder />, action: CreateOrderAction },
      { path: '/order/:orderId', element: <Order />, loader: orderLoader },
    ],
  },
])

Subdirectory Deployment Configuration

Deploying Fast React Pizza Co. to a domain like aseck.io/fastPizza required careful configuration. The netlify.toml file is set up to build and publish your site while correctly handling routing:

[build]
  command = "npm run build"
  publish = "dist"
  base = "fastPizza"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

After building the project, the generated files are placed in a specific folder so that the routing works seamlessly on the subdirectory URL.

Conclusion

Redux requires a lot of setup compared to the Context API, but it allows to really complex state management