personal

React Food Order App

Modern Food Ordering Platform

2 weeks

Individual Project

ReactJavaScriptCSS3Context APINetlify

A modern and responsive food ordering application built with React, featuring cart management, meal customization, and seamless user experience with contemporary UI design.

Live Demo Source Code

Key Features

Cart Management

Intuitive cart system allowing users to add, remove, and modify meal quantities with real-time total calculation.

Meal Catalog

Comprehensive meal catalog with detailed descriptions, pricing, and appealing food imagery.

Responsive Design

Fully responsive design optimized for desktop, tablet, and mobile devices with touch-friendly interactions.

User Experience

Smooth and intuitive user interface with seamless navigation and instant feedback for all interactions.

Development Journey

Phase 1

Project Setup & Planning

Set up React development environment, planned component structure, and designed the application architecture with state management strategy.

Phase 2

Component Development

Built core components including meal cards, header, cart modal, and navigation. Implemented reusable UI components with proper props handling.

Phase 3

State Management & Cart Logic

Implemented Context API for global state management, built cart functionality with add/remove operations, and quantity management.

Phase 4

Styling & Deployment

Applied responsive CSS styling, optimized for mobile devices, and deployed to Netlify with continuous integration setup.

Challenges & Solutions

State Management

Problem:

Managing complex state across multiple components while maintaining performance and avoiding prop drilling.

Solution:

Implemented Context API and Redux Toolkit for centralized state management with optimized re-renders using memo and selectors.

Creating reusable, flexible components that work across different parts of the application.

Problem:

Developed custom hooks and higher-order components (HOCs) to extract common logic and create truly reusable component patterns.

Solution:

Implemented Context API and Redux Toolkit for centralized state management with optimized re-renders using memo and selectors.

Implementing efficient form handling with validation and error management.

Problem:

Used controlled and uncontrolled components with custom validation hooks and React Hook Form for complex form scenarios.

Solution:

Implemented Context API and Redux Toolkit for centralized state management with optimized re-renders using memo and selectors.

Optimizing application performance for large datasets and frequent updates.

Problem:

Applied memoization techniques, virtualization for large lists, and implemented proper dependency arrays in useEffect hooks.

Solution:

Implemented Context API and Redux Toolkit for centralized state management with optimized re-renders using memo and selectors.

CartContext.js

javascript

import { createContext, useContext, useReducer } from 'react';

export const CartContext = createContext();

export const cartReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      export const existingItemIndex = state.items.findIndex(
        item => item.id === action.item.id
      );
      
      if (existingItemIndex > -1) {
        export const updatedItems = [...state.items];
        updatedItems[existingItemIndex] = {
          ...updatedItems[existingItemIndex],
          amount: updatedItems[existingItemIndex].amount + action.item.amount
        };
        return { ...state, items: updatedItems };
      }
      
      return { 
        ...state, 
        items: state.items.concat(action.item) 
      };
      
    case 'REMOVE_ITEM':
      return {
        ...state,
        items: state.items.filter(item => item.id !== action.id)
      };
      
    case 'CLEAR_CART':
      return { ...state, items: [] };
      
    default:
      return state;
  }
};

export export const CartProvider = ({ children }) => {
  const [cartState, dispatchCartAction] = useReducer(cartReducer, {
    items: []
  });

  export const addItemToCartHandler = (item) => {
    dispatchCartAction({ type: 'ADD_ITEM', item });
  };

  export const removeItemFromCartHandler = (id) => {
    dispatchCartAction({ type: 'REMOVE_ITEM', id });
  };

  export const cartContext = {
    items: cartState.items,
    totalAmount: cartState.items.reduce((total, item) => 
      total + item.price * item.amount, 0
    ),
    addItem: addItemToCartHandler,
    removeItem: removeItemFromCartHandler
  };

  return (
    <CartContext.Provider value={cartContext}>
      {children}
    </CartContext.Provider>
  );
};

export export const useCart = () => {
  export const context = useContext(CartContext);
  if (!context) {
    throw new Error('useCart must be used within CartProvider');
  }
  return context;
};

Previous Next