A modern, responsive web application for Little Lemon restaurant featuring online table reservations, dynamic booking management, and a seamless user experience.
- 🍽️ Online Table Reservations - Easy booking system for restaurant tables
- 📅 Dynamic Booking Times - Available time slots based on date selection
- 👥 Guest Management - Select number of guests and special occasions
- ✅ Form Validation - Robust client-side validation for booking details
- 📱 Fully Responsive Design - Works perfectly on desktop, tablet, and mobile devices
- 🔄 Booking Confirmation - Instant confirmation after successful reservation
- 🧪 Comprehensive Testing - Unit tests with React Testing Library
- 🎨 Modern UI - Clean and user-friendly interface
- Node.js (version 14 or higher)
- npm or yarn
# Clone the repository
git clone https://github.com/jwafaDev/Restaurant-Little-Lemon.git
# Navigate to the project folder
cd Restaurant-Little-Lemon
# Install dependencies
npm install# Start the development server
npm start
# The application will automatically open at http://localhost:3000The app is now ready to use! You can start making table reservations.
# Create an optimized production build
npm run build
# This creates a `build` folder optimized for production deployment# Run the test suite
npm test
# Run tests in watch mode
npm test -- --watch| Technology | Version | Purpose |
|---|---|---|
| React | ^19.2.7 | UI library and component framework |
| React Router | ^7.18.0 | Client-side routing and navigation |
| React Testing Library | ^16.3.2 | Component testing utilities |
| Jest | - | Test runner (included with React Scripts) |
| JavaScript (ES6+) | - | Programming language |
| HTML5 | - | Markup language |
| CSS3 | - | Styling and responsive design |
- JavaScript: Primary language
- HTML5: Markup
- CSS3: Styling
Restaurant-Little-Lemon/
├── public/ # Static files
│ └── index.html # Main HTML file
├── src/ # Source code
│ ├── components/ # React components
│ │ ├── Header.js # Header navigation
│ │ ├── Nav.js # Navigation bar
│ │ ├── Footer.js # Footer section
│ │ ├── BookingForm.js # Reservation form
│ │ ├── BookingPage.js # Booking page
│ │ ├── ConfirmedBooking.js # Confirmation page
│ │ └── ...
│ ├── styles/ # CSS files
│ ├── App.js # Main App component
│ ├── App.test.js # App tests
│ └── index.js # React entry point
├── package.json # Project dependencies
├── package-lock.json # Dependency lock file
└── README.md # Project documentation
- Navigate to the Reservations or Booking section
- Select your desired date and time
- Specify the number of guests
- Choose an occasion (if applicable)
- Enter your personal details
- Submit the form
- Receive a booking confirmation
The booking form includes validation for:
- Valid date selection (no past dates)
- Available time slots
- Guest count (typically 1-10)
- Required personal information
Handles user input for reservation details with validation and error handling.
Main page for managing reservations with date/time selection.
Displays confirmation details after successful booking.
Uses React Router for smooth navigation between different pages.
| Script | Command | Description |
|---|---|---|
| Start | npm start |
Runs the app in development mode on port 3000 |
| Build | npm run build |
Creates an optimized production build |
| Test | npm test |
Launches the test runner in interactive mode |
| Eject | npm run eject |
Ejects configuration (irreversible) |
Note: npm run eject is a one-way operation. Once you eject, you can't go back!
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
The application is built with a mobile-first approach ensuring:
- Optimal viewing on mobile devices (320px+)
- Tablet-friendly layouts (768px+)
- Desktop optimization (1024px+)
Contributions are welcome! To contribute:
- Fork the repository
- Create a feature branch (
git checkout -b feature/YourFeature) - Make your changes
- Write or update tests as needed
- Commit your changes (
git commit -m 'Add YourFeature') - Push to the branch (
git push origin feature/YourFeature) - Open a Pull Request
- Follow React best practices and hooks patterns
- Write meaningful commit messages
- Test your changes with
npm test - Ensure responsive design works on all screen sizes
- Keep components small and focused
If port 3000 is already in use:
PORT=3001 npm startIf you encounter dependency conflicts:
rm -rf node_modules package-lock.json
npm installMake sure Jest is properly configured:
npm test -- --clearCache
npm testThis project is licensed under the MIT License. See the LICENSE file for details.
This project was developed as part of the Meta Front-End Developer Capstone Project, demonstrating proficiency in:
- React development
- Component-based architecture
- Client-side routing
- Form handling and validation
- Responsive web design
- Testing and quality assurance
Potential features for future versions:
- Backend integration for persistent data
- User authentication and accounts
- Email confirmation notifications
- Admin panel for managing reservations
- Payment integration
- Advanced filtering and search
- Cancellation and modification options
jwafaDev - Visit Profile
For questions, issues, or suggestions, feel free to:
- Open an issue on the GitHub repository
- Contact via GitHub
Created with ❤️ using React
Enjoy using Little Lemon Restaurant Reservation App! 🍋