A modern, accessible web application for the Little Lemon restaurant that allows customers to reserve tables online. Built with React and designed with UX/UI best practices, semantic HTML, and comprehensive accessibility features.
Little Lemon is a family-owned Mediterranean restaurant in Chicago. This web app provides:
- An elegant homepage showcasing the restaurant
- A functional table reservation system with real-time availability
- Form validation with helpful error messages
- Fully responsive design for mobile, tablet, and desktop
- Accessibility-first approach following WCAG guidelines
- Hero section with call-to-action
- Weekly specials showcase (3 menu items)
- Customer testimonials section
- Mobile-responsive navigation
- Semantic HTML structure
- Dedicated page for restaurant information
- Detailed restaurant story and history
- Chef information and images
- Date picker with validation (no past dates)
- Time slot selection with availability
- Guest count selection (1-10 people)
- Occasion selection for special events
- Real-time form validation with clear error messages
- Booking confirmation page with details
- Semantic HTML5 elements (
<nav>,<main>,<footer>,<section>) - ARIA labels and roles throughout
- Proper heading hierarchy
- Keyboard navigation support
- Form validation with screen reader announcements
- Focus management and visible focus indicators
- Unit tests for components
- Form validation tests
- Accessibility attribute tests
- 100% test coverage for booking form logic
- Node.js (version 14 or higher)
- npm or yarn package manager
- Clone the repository:
git clone <your-repository-url>
cd lemon-app- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to:
http://localhost:5173
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpm test- Run unit testsnpm run lint- Run ESLint for code quality
The project includes comprehensive unit tests using Vitest and React Testing Library:
npm testTests cover:
- Component rendering
- Form validation logic
- User interactions
- Accessibility attributes
- Error handling
lemon-app/
├── public/ # Static assets
│ └── images/ # Restaurant images
├── src/
│ ├── components/ # React components
│ │ ├── Header.jsx # Navigation header
│ │ ├── Hero.jsx # Hero section
│ │ ├── About.jsx # About section
│ │ ├── Specials.jsx # Weekly specials menu
│ │ ├── Testimonials.jsx # Customer reviews
│ │ ├── Footer.jsx # Footer with contact info
│ │ └── BookingForm.jsx # Booking form with validation
│ ├── pages/ # Page components
│ │ ├── HomePage.jsx # Main landing page
│ │ ├── AboutPage.jsx # About restaurant page
│ │ ├── BookingPage.jsx # Reservation page
│ │ └── ConfirmationPage.jsx # Booking confirmation
│ ├── tests/ # Unit tests
│ │ ├── Header.test.jsx
│ │ ├── Hero.test.jsx
│ │ ├── BookingForm.test.jsx
│ │ └── setup.js # Test configuration
│ ├── App.jsx # Main app component with routing
│ ├── App.css # Component styles
│ ├── index.css # Global styles
│ └── main.jsx # App entry point
├── index.html # HTML template
├── package.json # Dependencies and scripts
├── vite.config.js # Vite configuration
└── README.md # This file
- Primary Green:
#495e57(Restaurant branding) - Primary Yellow:
#f4ce14(Accent color) - Light Background:
#edefee - Dark Text:
#333
- Headings: Markazi Text (serif)
- Body: Karla (sans-serif)
- Mobile: < 480px
- Tablet: 480px - 768px
- Desktop: > 768px
The booking form implements the following validation:
- Date: Must be today or a future date
- Time: Required selection from available slots
- Guests: Must be between 1 and 10
- Occasion: Optional selection
Error messages are displayed inline with clear, actionable text.
- Semantic HTML5 structure
- ARIA labels on all interactive elements
- Proper form labels and field associations
- Error messages announced to screen readers
- Keyboard navigation support
- Focus indicators on all interactive elements
- Alt text for images
- Proper heading hierarchy (h1 → h6)
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
The codebase follows these principles:
- Clean Code: Clear variable and function names
- Comments: Comprehensive JSDoc comments
- Simplicity: Beginner-friendly code structure
- Maintainability: Modular component architecture
- No Extra Code: Only essential features included
This is a learning project. When making contributions:
- Follow the existing code style
- Add comments for complex logic
- Write tests for new features
- Ensure accessibility is maintained
This project is created for educational purposes as part of the Meta Front-End Developer Certificate program.
- Connect to a backend API for real booking management
- Add user authentication
- Implement email confirmations
- Add menu section
- Add customer reviews section
- Integrate payment processing
- Currently uses simulated API calls
- Time slots are static (not database-driven)
- No persistent storage for bookings
This project demonstrates:
- React component architecture
- State management with
useStateanduseReducer - Form handling and validation
- React Router for navigation
- Responsive CSS design
- Unit testing with Vitest
- Accessibility best practices
Built as part of the Meta Front-End Developer Certificate program on Coursera.