Little Lemon Restaurant Website - Portfolio Project

Introduction

Welcome to the enhanced Little Lemon Restaurant website. This project showcases a Mediterranean restaurant website with modern design and improved user experience. The site features a responsive layout with elegant animations and a streamlined reservation system.

Key Features

• Responsive Design: Fully responsive layout that adapts to any device size
• Modern UI: Clean, elegant interface with subtle animations
• Enhanced Reservation System: Comprehensive booking form with additional options
• Accessibility Focused: Adheres to WCAG standards for inclusive user experience

Design Improvements

The project has been enhanced with several key design improvements:

Home Page Enhancements

• Added subtle fade-in animations for a more engaging user experience
• Improved hero section with a cleaner, more modern layout
• Enhanced typography and spacing for better readability
• Optimized images with hover effects

Reservation System Upgrades

• Redesigned the reservation form with a card-based layout
• Added additional fields for a more comprehensive booking experience
• Improved form validation with helpful error messages
• Enhanced mobile responsiveness for the reservation process
• Added seating preferences and special requests options

Technical Stack

• Front-end: React.js, HTML5, CSS3, JavaScript (ES6+)
• State Management: React Hooks and Context API
• APIs: Mock Backend Reservation API
• Tools: Git, npm, Webpack

Setup and Installation

Instructions for cloning the repository and setting up the project locally for development:

Clone the Repository

git clone https://github.com/fayyazak/little-lemon-app.git

Navigate to the Directory

cd little-lemon-app

Install Dependencies

npm install

Run the Development Server

npm start

Project Structure

The project is organized with a clean, maintainable structure:

• components/: Reusable UI components
• pages/: Main page components (Home, Reservation, etc.)
• assets/: Images and static resources
• utils/: Utility functions and helpers

Responsive Design Approach

The website is built with a mobile-first approach, ensuring a seamless experience across all devices:

• Mobile: Optimized for portrait orientation with easy-to-tap elements
• Tablet: Enhanced layout taking advantage of additional screen space
• Desktop: Full-featured experience with optimized navigation and content display

Future Enhancements

• Online Ordering System: Allow customers to place orders for pickup or delivery
• Menu Management: Dynamic menu with filtering capabilities and seasonal specials
• Customer Accounts: User profiles for saving preferences and order history
• Reviews Integration: Allow customers to leave reviews for dishes they've tried

License

This project is licensed under the MIT License

Contact Me

Feel free to reach out if you have any questions, suggestions or code review.