Giter VIP home page Giter VIP logo

burguer-kenzie's Introduction

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

burguer-kenzie's People

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.