/Coffee-Delivery

Coffee Delivery is a plataform to shop coffee.

Primary LanguageTypeScript

Coffee Delivery

Challenge: Create a react application that allows the user to add products to a shopping cart and complete the purchase.

Want to test this application developed for study?

Access the example deployed: coffee-delivery.rickelmedias.dev

Project:

Functionalities implemented:

  • Add Coffee to shopping cart
  • Remove Coffee from shopping cart
  • Calculate the cart products final price
  • Forms to get input informations (using react-hook-form)
  • Pretty customized alert (using react-toastify)
  • Dynamic pages and components
  • 3 Pages (Home, Checkout, Success)
Knowledges used:
  • Application Structure
  • ESLint
  • SPA concepts
  • Styled Components (Global Styles, Types, Components, Stylizations)
  • Forms (React Hook Form, Validations)
  • Hooks (useEffect, useState, useNavigation, useContext)
  • ContextAPI to solve Prop Drilling situation with the Cart
  • Reducers (action and reducer) to cart functionalities

Techs:

Rickelme used TypescriptRickelme used ViteRickelme used Vite

How to run:

  1. Clone this repository;
  2. Run npm install to install the dependencies;
  3. Run npm run dev to run the project;
  4. When finish the previous commands, open the localhost url on the console log and use the application.
How to use the ESLint:

If you are thinking about to contribute to this repository is important to follow the coding pattern, check below how to do it.

  • Add the ESLint extension to your vscode
  • After write the code, just run on the terminal npm run lint::fix , it will fix all.