Welcome to my portfolio project, the Little Lemon Restaurant website. This project was developed as part of the capstone for the Meta Front-end Developer course on Coursera. It showcases my abilities in front-end web development, incorporating several key skills and learning objectives from the course.
Responsive Web Design: Implemented using CSS Flexbox and Grid, ensuring the site is accessible and aesthetically pleasing across various devices.
Interactive UI Development: Utilized React.js for creating dynamic user interfaces, enhancing the user experience with interactive elements.
State Management: Managed application state effectively using React Hooks and Context API, particularly for the reservation system.
API Integration: Integrated with a mocked backend API for the reservation feature, handling asynchronous data fetching and updates.
Accessibility and Web Standards: Adhered to web accessibility standards (WCAG) to make the site user-friendly for a diverse audience.
Online Reservation Form: A simple form allowing customers to make reservations online. This would include basic fields like date, time, number of guests, and occasion.
- Front-end: React.js, HTML5, CSS3, JavaScript (ES6+)
- APIs: mock Backend Reservation API
- Tools: Git, npm, Webpack
Instructions for cloning the repository and setting up the project locally for development:
Clone the Repository
git clone https://github.com/melissakipp/little-lemon-app.gitNavigate to the Directory
cd little-lemon-appInstall Dependencies
npm installRun the Development Server
npm startOne of the key hurdles was creating reusable components in Figma. Developing components that could be reused across different pages and contexts, such as buttons, input fields, and navigation bars, was both challenging and rewarding.
Another significant aspect of the project was the research I conducted on the restaurant industry. This was a part of the process I thoroughly enjoyed. Delving into the world of restaurant branding, customer experience, and the latest trends in restaurant web design was fascinating. It gave me insights into how restaurants present themselves online and how they connect with their customers. It helped me understand the kind of experience we wanted to offer the users and how the design could facilitate that experience.
This project played a pivotal role in solidifying my understanding of the Software Development Life Cycle (SDLC). Prior to this, my grasp of the SDLC was mostly theoretical, learned through courses and reading. However, the practical experience of taking a project from conception to deployment provided me with a deeper, more nuanced understanding. This hands-on experience has given me a much clearer perspective on how each phase interlinks and the importance of a well-thought-out approach at each stage.
Throughout this project, I engaged in each phase of the SDLC:
- Requirements Analysis: I started by outlining the key features and functionalities required for the Little Lemon Restaurant website.
- Design: I translated these requirements into a functional design, utilizing wireframes and flow diagrams to map out the user experience.
- Implementation: The core of my work involved coding the website using React.js, HTML, CSS, and JavaScript.
- Testing: I performed various types of testing, including unit tests and user testing, to ensure the website was reliable and user-friendly.
- Deployment: Finally, deploying the website to a live server was a rewarding phase, marking the culmination of my efforts.
The Meta Front-end Developer course's approach to teaching ReactJS was refreshingly effective. While I had some prior exposure to React, this course allowed me to revisit the core concepts with a more structured and comprehensive framework.
Key areas of review and enhancement included: JSX and React Components: I deepened my understanding of JSX syntax and the component-based architecture of React. Creating reusable and scalable components for the Little Lemon Restaurant website was both challenging and informative.
State and Props: Mastering the use of state and props was crucial, especially for the dynamic aspects of the site like the reservation system.
React Hooks: The course's focus on React Hooks, like useState and useEffect, was particularly beneficial. Implementing these Hooks in real-world scenarios helped me understand their practical utility beyond just theory.
Routing with React Router: Implementing navigation within the website using React Router was a valuable learning experience, reinforcing my understanding of single-page applications (SPA) in React.
The challenges I encountered, especially in functionality the right data to get from API calls and seamlessly integrating them with the app's functionality, really drove me to deepen my understanding. I had to carefully think through what data I needed and how to structure my API requests using React's useState and useReducer. This process was not just about writing code; it was about strategically thinking through each step and learning to approach these technical hurdles in a more planned and effective way. It taught me the importance of being precise in both understanding the data requirements and in crafting the API calls to meet those needs.
Dynamic Reservation System: A key feature developed in this project, allowing users to make, view, and cancel reservations.
Menu Display: A section showcasing the restaurant's dishes with filtering capabilities.
Interactive Location Map: Integrated an interactive map using the Google Maps API.
This project is licensed under the MIT License
Feel free to reach out if you have any questions, suggestions or code review.
