maricastroc / coffee-delivery

Coffee Delivery App build with ReactJS, with a shopping cart for a fictional coffee shop

Home Page:https://maricastroc-coffee-delivery.netlify.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Coffee-Delivery

coffee-delivery

๐Ÿ“š Project Description

In this project, I developed an application to manage a shopping cart for a fictional coffee shop, with the following functionalities:

  • List of products (coffees) available for purchase
  • Add a specific amount of items to the cart
  • Increase or remove the amount of items in the cart
  • Form for the user to fill in his address
  • Display the total items in the cart in the Header
  • Display the total value of the sum of items in the cart multiplied by the value

๐Ÿ“Œ What did I learn?

In this project, I had the opportunity to practice working with many of ReactJS features, using styled-components, contexts, reducers, immers, routing with React Router DOM, ReactHook Form and hookform/resolvers, using zod for validation. Also, I was able to work deeper with TypeScript, allowing a better organization project's files and preventing bugs.

I was able to establish a much more organized and efficient communication logic between the components through contexts and reducers, and I practiced organizing files in different folders, following a pre-established hierarchy, giving special importance to code refactoring to facilitate readability and maintenance.

In addition, I could practice using hooks like useDebounce and useMemo, as well as creating my own useLocation hook using the Geolocation API.

๐Ÿ” Links

Preview-Site

๐Ÿ’ป My Process

Built with:

โ„น๏ธ How to run the application?

Clone the repository:

git clone https://github.com/maricastroc/coffee-delivery

Install the dependencies:

npm install

Start the service:

npm run dev

โฉ Access http://localhost:3000 to view the web application.

About

Coffee Delivery App build with ReactJS, with a shopping cart for a fictional coffee shop

https://maricastroc-coffee-delivery.netlify.app

License:MIT License


Languages

Language:TypeScript 98.9%Language:HTML 1.1%