Meta Front-End Developer Capstone Project

Welcome to the repository for the Meta Front-End Developer Capstone Project by Wesley Smits. This project demonstrates the skills and knowledge gained from the Meta Front-End Developer Professional Certificate, focusing on building a responsive and dynamic React-based web application with best practices in UI/UX design, state management, and testing.

---

Project Highlights

• Fully responsive and accessible React-based web application.
• Modular, reusable components for scalability and maintainability.
• Implementation of modern UI/UX principles for an intuitive user experience.
• Comprehensive unit and end-to-end testing to ensure application reliability.

---

Table of Contents

• Project Overview
• Features
• Technologies Used
• Setup Instructions
• License

---

Project Overview

This capstone project is the culmination of the skills developed throughout the Meta Front-End Developer Professional Certificate. The project showcases:

• Responsive design tailored for mobile, tablet, and desktop devices.
• Interactive, dynamic components built using React.
• Form validation with Yup and Formik.
• Unit testing with Vitest and React Testing Library.
• End-to-end testing with Cypress.
• Performance optimization, accessibility compliance, and modern development practices.

---

Features

• Responsive Design: Ensures a seamless experience across all devices.
• Interactive UI: Dynamic functionality with smooth animations and transitions.
• Form Validation: Robust and user-friendly reservation form validation.
• State Management: Efficient handling of component state using React hooks (useState, useEffect).
• Testing: Unit and end-to-end testing to ensure functionality and prevent regressions.
• SEO Optimization: Title, description, and OG tags set up for all pages.

---

Technologies Used

• React: Component-based UI library for building the application.
• TypeScript: Logic and interactivity.
• CSS3: Custom styles and layout design.
• Yup & Formik: Schema-based form validation and management.
• Vitest & React Testing Library: Unit testing.
• Cypress: End-to-end testing.
• Netlify: Hosting and deployment.

---

Setup Instructions

1. Clone the repository:

   git clone https://github.com/thevibingteen/meta-frontend-capstone.git

2. Navigate to the project directory:

   cd meta-frontend-capstone.git

3. Install dependencies:

   npm install

4. Start the development server:

   npm start

5. Open your browser and navigate to:

   http://localhost:5173

6. Run tests (optional but recommended):

• Unit tests:

   npm run test

• End-to-End tests:

   npx cypress open

---