Little Lemon Restaurant Reservation App

A responsive web application featuring a robust table reservation system, accessibility compliance, and comprehensive unit testing, built with React and TypeScript.

TypeScript
Frontend
React
Tailwind CSS
Shadcn/ui
Vitest

Overview

This project was developed as a Capstone assignment to demonstrate advanced frontend development skills. It is a responsive web application for "Little Lemon," a fictional restaurant, designed to offer a seamless user experience for browsing menus and booking tables. The core focus was on building a functional, accessible, and testable application using modern React patterns.

Key Features

  • Robust Reservation System: Features a dynamic booking form with intuitive client-side validation to ensure accurate data submission.
  • Advanced State Management: Utilizes React's useReducer to handle complex state logic—specifically for managing available time slots—alongside useState for component-level interactions.
  • Simulated API Integration: Implements a mock API to dynamically fetch available booking times and process form submissions, mimicking real-world backend interaction.
  • Accessibility (a11y): Built with semantic HTML5 and ARIA attributes to ensure the application is inclusive and usable by assistive technologies.
  • Reliability: Includes a comprehensive suite of unit tests using Vitest and React Testing Library to verify business logic and component rendering.

Tech Stack

  • Framework: React + Vite
  • Language: TypeScript
  • Styling: Tailwind CSS, Shadcn/ui
  • Routing: React Router DOM
  • Testing: Vitest, React Testing Library