Front-end Coffe Delivery

1. Introduction

1.1 Challenge Overview

In this challenge, you will develop an application to manage a shopping cart for a fictional coffee shop, which contains the following features:

• List of products (coffees) available for purchase
• Add a specific number of items to the cart
• Increase or remove the number of items in the cart
• Form for the user to fill in their 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

Although there are few features, you will need to remember concepts such as:

• States
• ContextAPI
• LocalStorage
• Immutability of the state
• Lists and keys in ReactJS
• Properties
• Componentization

To complete this challenge, you may need to do research to learn about array manipulation methods such as reduce, which will be extremely useful for calculating the total value of the cart.

1.2 Application layout

For this application we provide a layout so that you can follow and implement all the features designed in figma.

To access Figma, you must first create an account on the platform.

2. Getting Started for Developers

To set up a local copy of this repository:

• For SSH (recommended for secure, key-based authentication), use:

  git@github.com:fabiobatoni/Coffe-Delivery.git

• For HTTPS (simpler setup, ideal for quick trials), use:

  https://github.com/fabiobatoni/Coffe-Delivery.git

2.1 Installation

Follow these steps to set up the Coffe-Delivery environment on your local machine:

1. Clone the Repository and Change Directory

cd Coffe-Delivery

2. Install Project Dependencies

In the project directory, run:

npm install

2.2 Local Development

Prerequisite

• Before you begin, check the version of node by running the command node --version. According to "Minimum Runtime Requirements", TypeScript requires node version 18.17.1 or later.

To start the Coffe-Delivery, follow these steps:

1. Run the Application

Use the commands to run:

• Development environment

npm run dev

2. Access the Application

Once the server is running, open your preferred web browser and navigate to:

• http://localhost:5173

3. Test the Application

• https://coffe-delivery-pied.vercel.app/