foodie
This is a food ordering application built with React. This e-commerce application has different food categories users can choose to order from it will reflect in their cart. Users can go to the cart page to delete, increase and decrease the number of their items. In addition, users can search for the various food category by name.
| Type | Technologies used | Live |
|---|---|---|
| Individual Work | React | Live Code |
| Context API | Github Code | |
| Rest API | ||
| React Router | ||
| Github Pages |
Purpose and Goal
I wanted to build an e-commerce website, so I went for a food ordering application. The goal of this application was to have different categories with different pages where users can order. On a cart page, they can increase and decrease the quantity of their item while seeing the corresponding price before finalizing their order. The state management will be handled by context api
It is a multiple-page application, so for the design, I drew inspiration from various dribbble shots
Spotlight
- Orders displayed in the cart section
- Search functionality
- Multiple-page application
- delete orders in the cart section
- Increase and decrease the quality of orders
- Form Validation
- responsive layout
One of the challenges of this project was how to reflect the orders from users in the cart section. To solve this, I used Context API to pass data between components.
Lessons Learned
As this was my first large react app, This project taught me lots of things like when to use various react hooks, how to structure my files in an organized manner, how to pass data across components using context api, how to work with react router in building multipage application.
The use of context api was quite good for this project but, I will consider using redux. As this was a large project, I learned making my code organized, modular and reusable will be very useful for my future projects. I deployed it successfully on github pages which I will continue to do for my future projects.