Skip to content

Igorttdp/Burguer-Kenzie

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

61 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Para README em Português, clique aqui

Preview

Burguer Kenzie Preview

About

Burger Kenzie is a simple application that simulates fast food delivery. Perhaps your only defect is not completing the order 😅. The application consumes an api (GET: https://hamburgueria-kenzie-json-serve.herokuapp.com/products), handles the response data and renders it to the screen. Having a simple project as an initial proposal, I took the liberty to develop some extra features and refactor some points of the code.


Project Structuring and Technologies

In this project, concepts of API Consumption, React Hooks, React Context, Componentization Conditional Rendering and Mobile First.

Folder Structure



Technologies / Libs

  • Axios
  • React-Js
  • React Context
  • Radix (Dialog & Switch)
  • Styled-Components

How it Works

Add food to Cart

Food

On the home screen, we have a list of all available foods. Clicking on Add, the selected product goes directly to the cart. See below:


Burguer Kenzie with food on the Cart



Cart

On the right side we can see the Cart. Here we have full control over our products. We can adjust the quantity of our products and also remove all of them. At the bottom we have the total value being shown on the screen and the button to remove all products.

Cart Bottom of Cart



Quantities

If you want to add several quantities of the same product at once, you can click on the card to open a modal (or dialog box), in the center of the screen.

Food Modal



In the left part we can see all the available information of the selected snack. At the bottom we can select the desired quantity and add the product to the cart.

Food Modal Left Side



On the right we can see our Component "Cart". In it we can do all the functions. Add/Remove products and their quantities and remove all products.

Food Modal Right Side



Extra Features

Darkmode

Switch Button Off

Switch Button On

Burguer Kenzie Darkmode



Responsiveness and Mobile-First

Burguer Kenzie on Tablet Screen Burguer Kenzie on Mobile Screen



Link of Project: Burguer Kenzie