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