Little Lemon Italian Restaurant Concept

LITTLE LEMON

Meta Front-End Certification Capstone

RoleFrontend Engineer
TechReact, Figma, Jest, Formik
LinksLive Demo | Repo

This project served as the final examination for the Meta Front-End Developer Professional Certificate 🏅. The challenge? Build a fully functional booking table system from scratch.

While my other work focuses on experimental WebGL 🎨, this project demonstrates my command of foundational web standards: responsive grids, form validation, and strict adherence to WCAG accessibility guidelines ♿.

🎨 Design System

The foundational visual language was provided as part of the course requirements. I was given a specific color palette and typography system to ensure brand consistency for the “Little Lemon” identity.

Little Lemon Brand Color Palette
COLORS: BRAND IDENTITY
Little Lemon Typography System
TYPOGRAPHY: MARKAZI TEXT & KARLA

✏️ Wireframes

Before committing to pixels, I mapped out the table reservation flow using low-fidelity wireframes. This phase focused purely on information architecture and user journey optimization, ensuring the booking process was intuitive.

Figma Wireframes for Table Reservation Flow
PHASE 1: STRUCTURAL BLUEPRINT

✨ Mockups & Hi-Fi Prototype

The final design challenge was to translate the wireframes into a mockups and high-fidelity prototype. I created a polished UI with interactive components, demonstrating the complete user experience from landing page to reservation confirmation.

Final UI Design Mockup
UI: HIGH FIDELITY MOCKUP
INTERACTION: HI-FI PROTOTYPE WALKTHROUGH

🛠️ System Reliability & Architecture

Engineering a robust, accessible front-end architecture.

🔐 Input Logic

Complex state management using Formik and Yup validation schemas to prevent user error before it reaches the server.

🧪 Unit Testing

Critical user flows verified with Jest & React Testing Library. I ensured component stability by simulating real user interactions in a test environment.

♿ A11y Standards

Fully semantic markup compliant with WCAG 2.1 guidelines. I implemented ARIA labels, keyboard navigation support, and correct contrast ratios for inclusivity.

🏆 Result

By completing this Course from Meta I have received this certificate.

Unable to display PDF. Download Certificate

VERIFY: COURSERA.ORG