Takeaway Assignment App

A modern React application built with TypeScript, featuring a robust architecture and best practices for state management, routing, and styling.

Installation and Setup

1. Install dependencies:

npm install

2. Create your .env file: Copy all the environment variables (with their values) from the env.example file that was provided to you in the email.

3. Start the development server:

npm run dev

The application will be available at http://localhost:3000

Available Scripts

• npm run dev - Start the development server
• npm run dev:watch - Run development server with TypeScript type checking
• npm run build - Build the application for production
• npm run preview - Preview the production build locally
• npm run lint - Run ESLint to check code quality
• npm run format - Format code using Prettier
• npm run test - Run tests
• npm run test:watch - Run tests in watch mode
• npm run test:coverage - Run tests with coverage report

Project Dependencies

Core Dependencies

• React & React DOM (v19.1.0): The core library for building the user interface
• TypeScript: For type-safe development
• Vite: Next-generation frontend tooling for fast development and building

State Management

• @reduxjs/toolkit: Modern Redux toolkit for state management
• react-redux: React bindings for Redux
• redux-persist: Persist and rehydrate Redux store

Routing & Authentication

• react-router-dom: Client-side routing
• @clerk/clerk-react: Authentication and user management

UI & Styling

• styled-components: CSS-in-JS styling solution
• lucide-react: Beautiful and consistent icons
• @tanstack/react-virtual: Provides high-performance virtual scrolling for large lists and grids. This library efficiently renders only the visible items in the viewport, making it ideal for handling thousands of rows or complex layouts without performance issues.

API & Data Fetching

• axios: Promise-based HTTP client for API requests

Project Structure

takeaway-assignment-app/
├── src/                    # Source code
│   ├── api/               # API integration and services
│   ├── assets/            # Static assets (images, fonts, etc.)
│   ├── components/        # Reusable React components
│   ├── pages/            # Page components
│   ├── store/            # Redux store configuration
│   ├── styles/           # Global styles and theme
│   ├── types/            # TypeScript type definitions
│   ├── App.tsx           # Root component
│   ├── main.tsx          # Application entry point
│   └── routes.tsx        # Route definitions
├── public/               # Public static files
├── coverage/            # Test coverage reports
├── node_modules/        # Dependencies
├── .env                 # Environment variables
├── package.json         # Project configuration and dependencies
├── tsconfig.json        # TypeScript configuration
├── vite.config.ts       # Vite configuration
└── jest.config.js       # Jest configuration

Key Features

• TypeScript for type safety
• Redux Toolkit for state management
• React Router for navigation
• Clerk for authentication
• Styled Components for styling
• Jest for testing
• ESLint and Prettier for code quality
• Vite for fast development and building
• Redux Thunk for handling asynchronous actions (API calls) and supporting optimistic UI updates
• tanstack/react-virtual for efficiently rendering large lists and improving performance with virtual scrolling
• Redux Persist for automatically saving and restoring Redux state across page reloads
• react-hot-toast for showing beautiful, non-blocking toast notifications to the user