A complete Zomato-like food ordering application built with React + Vite for web and React Native for mobile, demonstrating modern React concepts and best practices.

otamoz/
├── web/              # React + Vite web application
├── mobile/           # React Native mobile application
└── api/              # Mock JSON server API

• ✅ Login Page - Form validation, controlled inputs, error handling
• ✅ Home Page - Food item listing with search and filters
• ✅ Item Details - Product details with add-to-cart functionality
• ✅ Cart Page - Shopping cart with quantity management
• ✅ Order Tracking - Real-time order status updates
• ✅ Profile Page - User information and preferences

• ✅ Login Screen - Native mobile login experience
• ✅ Home Screen - Food item browsing
• ✅ Cart Screen - Shopping cart management
• ✅ Profile Screen - User profile and settings
• 

• React 18.2.0
• Vite 5.0.8
• React Router DOM 6.20.0
• React Hooks (useState, useEffect, useMemo, useCallback)

• React Native 0.72.6
• Expo ~49.0.0
• React Navigation 6.x
• AsyncStorage for persistence

• JSON Server for mock API
• CORS enabled

• Node.js (v16 or higher)
• npm or yarn
• For mobile: Expo CLI (npm install -g expo-cli)

cd web
npm install

cd api
npm install

cd mobile
npm install

cd api
npm start

The API server will run on http://localhost:3001

cd web
npm run dev

The web app will be available at http://localhost:3000

cd mobile
npm start

Then:

• Press i for iOS simulator
• Press a for Android emulator
• Scan QR code with Expo Go app on your phone

• Reusable components (ItemCard, InfoCard, etc.)
• Separation of concerns
• Props passing and composition

• Context API for global state (Auth, Cart)
• Local state with useState
• Derived state with useMemo

• useEffect for data fetching
• Cleanup functions for intervals/timeouts
• Dependency arrays for optimization

• Lazy loading with React.lazy()
• Code splitting with dynamic imports
• useMemo for expensive calculations
• useCallback for function memoization
• Suspense for loading states

• React Router for web navigation
• React Navigation for mobile
• Protected routes
• Lazy-loaded routes

• Controlled components
• Form validation
• Error state management
• Event handling (onChange, onSubmit)

• Dynamic UI based on state
• Error messages
• Loading states
• Empty states

• Bottom tab navigation
• Native mobile UI components
• AsyncStorage for data persistence
• Shared business logic with web app

Pages are lazy-loaded using React.lazy() and Suspense:

• Login
• Home
• ItemDetails
• Cart
• OrderTracking
• Profile

React 18 automatically batches state updates for better performance.

Order tracking page properly cleans up intervals when unmounting.

• Memoized calculations (total, itemCount)
• Memoized callbacks (addToCart, updateQuantity)
• Filtered items memoization

The mock API provides:

• GET /api/items - Get all food items
• GET /api/items/:id - Get single item details

1. When to use lazy loading: Top-level routes that are code-split
2. When NOT to lazy load: Small components, frequently used components
3. State management: Context API for global state, useState for local
4. Performance: useMemo for expensive calculations, useCallback for functions passed as props
5. Cleanup: Always cleanup side effects in useEffect return function

• Real backend API integration
• Payment gateway integration
• Push notifications
• Real-time order tracking
• Restaurant selection
• User reviews and ratings
• Order history

This project is for educational purposes.

• All components are well-commented
• Code follows React best practices
• Responsive design for web
• Native mobile UI patterns
• Clean folder structure
• Reusable component architecture

Happy Coding! 🍔🍕🍟

Chanu