pjthakur / little_lemon_res

Meta Front-End Professional Certificate - Capstone Project 🍋

This is the last capstone project within the Meta Front-End Developer Professional Certificate.

The challenge consisted of creating a homepage and an online table reservation tool for a fictional restaurant called "Little Lemon" using JavaScript, React, HTML5 and CSS.

📖 Table of contents

• Meta Front-End Professional Certificate - Capstone Project 🍋
  • 📖 Table of contents
  • Overview
    • 📷 Screenshot
  • My process
    • 🔧 Built with
    • 💡 What I learned
    • 🚵 Continued development
    • 🍰 Useful resources
  • Author
  • Acknowledgments

Overview

📷 Screenshot

Homepage overview

My process

🔧 Built with

• React - JavaScript UI framework
• React Router - Javascript framework for client and server-side routing
• TailwindCSS - CSS framework for styling and responsive design
• Vite JS - Front-End build tool and bundling
• Javascript
• HTML5

💡 What I learned

This capstone project allowed me to put to test what I had learned to far during the Meta Front-End certificate, while also learning new skills through problems encountered on the way.

Some of the new skills include: Using React Router DOM for page navigation, implementing a stateful multipage form with pattern validation and tailwind styling, switching between different display styles depending on screen size and conditionally rendering a drop-down nav bar for smaller screen devices.  

This is also the first time I have used Chrome's Lighthouse reports, which has helped me discover a performance issue caused by the file size of the stock images provided for the project. Compressing the JPG images to the WEBP format has helped decrease loading times significantly.

Although this project has been great practice, I believe that further learning regarding JS async functions, API data retrieval, React Memo, React Render components and Front-End testing is necessary.

🚵 Continued development

This is a closed project. No further development intendet.

🍰 Useful resources

• Learn React Router v6 In 45 Minutes - Great React Router tutorial from beginner to intermediate topics.
• Cosmic Voices from Bulgaria & Sofia Philharmonic Orchestra - Zaspalo e Chelebiiche - Beautiful Bulgarian folk to make hard dev times more pleasant

Author

• Github - Rauldotgit

Acknowledgments