Little Lemon Restaurant Table Reservation

A responsive React web application that allows users to book tables at the Little Lemon restaurant, complete with form validation, accessibility features, and unit tests.

Features

• Responsive Design: Completely responsive layout matching the Little Lemon branding (green and yellow theme).
• Interactive Reservations: Dynamically fetches and updates available booking times based on the selected date.
• Form Validation: Real-time form validations preventing invalid bookings (e.g. past dates or guest counts outside the 1 to 10 limit).
• Accessibility: Uses semantic HTML, appropriate aria attributes, and keyboard-navigable elements.
• Unit Testing: Comprehensive test coverage for application state reducers and form element constraints.

Tech Stack

• React 19
• Vite
• React Router DOM
• Vitest & React Testing Library (for unit testing)

Getting Started

Follow these steps to run the project locally.

Prerequisites

Make sure you have Node.js installed.

Installation

1. Clone the repository or extract the project files.
2. Open a terminal in the project directory.
3. Install the dependencies:

   npm install

Running the App

Start the local development server:

npm run dev

Running Tests

Execute the unit tests to verify the reducer and form components:

npm run test

Project Structure

• src/components/ - Contains layout (Header, Footer) and form (BookingForm) components.
• src/pages/ - Home page, Booking page (useReducer setup), and Confirmed reservation page.
• src/utils/api.js - Contains mock API functions for reservation times simulation.
• src/tests/ - Contains unit tests for reducer logic and component states.
• src/index.css - Custom styling theme.