Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/thiagohrcosta/coffee-delivery

This challenge was developed along the React JS specialization created by Rocketseat. The purpose of this project is to create a coffee delivery with checkout page using ContextAPI and LocalStorage
https://github.com/thiagohrcosta/coffee-delivery

Last synced: about 1 month ago
JSON representation

This challenge was developed along the React JS specialization created by Rocketseat. The purpose of this project is to create a coffee delivery with checkout page using ContextAPI and LocalStorage

Awesome Lists containing this project

README

        

![banner](https://res.cloudinary.com/dloadb2bx/image/upload/v1661720807/Capa_2_spwvmu.png)

# Coffee Delivery
This is a challenge project developed along the React JS specialization created by Rocketseat.

The objective was to develop an application capable of storing product data and manipulating its values with ContextAPI, also storing it in LocalStorage for better manipulation since the present application does not have a backend. At the end the products selected by the user are shown on screen.

An external API called "VIACEP" was used, capable of providing postal code data in order to automate the filling of the address by the user.

At the end, with the address filled in, selected products and the chosen payment method, the user can finalize the order by being forwarded to the final page.

## Development

![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white) ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) ![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white)

## Technologies used

- [ViaCEP (API for postal code)](https://viacep.com.br/)
- [Phosphor Icons](https://phosphoricons.com/)
- [Styled Components](https://styled-components.com/)
- [React hook form](https://react-hook-form.com/)

## What your can do?
![enter image description here](https://res.cloudinary.com/dloadb2bx/image/upload/v1662829106/coffee2_c0sj5g.png)

In this application a user can:

- Select one or more coffee;
- Search for his address using a API postal code that fills some fields like street, neighborhood, city and state;
- Select a payment format;
- Confirm his order.