Coffee Delivery

Welcome to Coffee Delivery

Summary

A responsive coffee delivery frontend side of a website developed with React.js. The techs used are HTML, CSS, React, Typescript, styled-components, React Router Dom, React Hook Form and Context API.

Description

As a React application designed to manage the shopping cart of a fictional coffee shop, this project aims to provide a simple and intuitive interface for users to browse available coffee products, add items to the cart, modify quantities, fill in their address, and view the total value of the cart.

Deployed on Vercel: https://coffee-delivery-orcin.vercel.app/

Table of Contents

• Features
• Concepts Covered
• Installation
• Usage

Features

The Coffee Delivery provides the following functionalities:

• List all available coffee products for purchase.
• Add a specific quantity of coffee items to the cart.
• Increase or decrease the quantity of items in the cart.
• Fill in the user's address through a form.
• Display the total number of items in the cart in the header.
• Calculate the total value of items in the cart by multiplying the quantity with the item's value.

Concepts Covered

This project will help you revisit and reinforce various concepts in React development:

• States and state management.
• Context API for global state management.
• LocalStorage for storing cart data.
• Immutability of state to ensure data integrity.
• Working with lists and keys in ReactJS.
• Componentization to create reusable UI components.

Installation

Before running the application, ensure you have Node.js and npm installed on your machine.

1. Clone this repository to your local machine:

git clone https://github.com/Brenosalv/coffee-delivery.git
cd coffee-delivery

2. Install the dependencies:

npm install

Usage

To start the development server and run the Coffee Delivery, use the following command:

npm run dev

The application will be accessible at http://localhost:3000.

Feel free to explore the codebase, experiment, and implement additional features to enhance the coffee shop cart management app!

---

Happy coding! If you encounter any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request. Your contributions are welcome and appreciated!