Little Lemon Restaurant Table Booking App

Live Website

This is the Capstone Project for the React Front-End Web Development Certificate, where you will build a React-based web app for the fictional Little Lemon restaurant. This app includes a table booking system with interactive and accessible features, showcasing your skills in React and front-end development.

---

📜 Course Syllabus Overview

This project is a culmination of the skills acquired throughout the course, allowing you to build a complete web application from scratch. The app demonstrates your ability to handle real-world problems using React, CSS, and semantic HTML.

Upon completion, you’ll have a job-ready portfolio to showcase your front-end development capabilities and impress potential employers.

---

📂 Project Modules

Module 1: Starting the Project

• Setup of development environment and Git version control.
• UX/UI planning with wireframes and Figma designs.
• Outcome: Project foundation ready for development.

Module 2: Project Foundations

• Setup of semantic HTML structure and reusable CSS grid for styling.
• Creation of project components.
• Outcome: Established project structure and visual design.

Module 3: Project Functionality

• Added table booking functionality using state management.
• Integrated forms and APIs for enhanced interactivity.
• Ensured accessibility, improved UX/UI, and tested app features.
• Outcome: Fully functional table booking app.

Module 4: Graded Assessment

• Peer-reviewed the project for feedback.
• Completed a graded assessment covering all skills learned.
• Outcome: Synthesized skills into a comprehensive final project.

---

🚀 Features

• Responsive table booking interface with React and Vite.
• Dynamically updated state and persistent data storage.
• Designed with accessibility and usability in mind.
• Thorough testing of functionality to ensure a seamless user experience.

---

🛠️ Technologies Used

• Frontend: React, Vite, Semantic HTML, CSS
• State Management: React Hooks
• Testing: Unit testing with Jest
• APIs: In-browser APIs for data persistence
• Design Tools: Figma for wireframes and UX/UI planning
• Hosting: Deployed on Vercel

---

📖 How to Use

1. Visit the live website here.
2. Navigate through the interactive table booking system.
3. Enjoy the seamless and accessible design experience.

---

📦 Setup Instructions

1. Clone the repository:

   git clone https://github.com/<your-username>/<your-repo-name>.git

2. Navigate to the project directory:

   cd <your-repo-name>

3. Install dependencies:

   npm install

4. Build the project:

   npm run build

5. Run the app locally:

   npm run dev

6. Open the app in your browser:

   • By default, the app will be available at:

     http://localhost:3000
     

     (Or on the port specified in your terminal).

---

👩‍💻 Contributing

Contributions are welcome! If you'd like to contribute to this project:

1. Fork the repository.
2. Create a new branch:

   git checkout -b feature-name

3. Commit your changes:

   git commit -m "Add feature-name"

4. Push to your branch and submit a pull request.