https://github.com/daraperini/learning-react-meteora

I refactored the original code of this e-commerce page in order to prevent prop drilling
https://github.com/daraperini/learning-react-meteora

context-api react reducer

Last synced: 14 days ago
JSON representation

I refactored the original code of this e-commerce page in order to prevent prop drilling

• Host: GitHub
• URL: https://github.com/daraperini/learning-react-meteora
• Owner: daraperini
• Created: 2024-01-08T13:44:14.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-01-11T14:11:27.000Z (almost 1 year ago)
• Last Synced: 2024-11-07T10:12:59.574Z (2 months ago)
• Topics: context-api, react, reducer
• Language: JavaScript
• Homepage: https://learning-react-meteora.vercel.app
• Size: 84.5 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Meteora

Hello! This project was created during Alura's class *React: managing global states with Context API*.

The project was based on receiving an e-commerce code that should be refactored. Using contextAPI I created a context to share global states through the application while removing prop drilling. I also created a customized hook with the logics to add, remove and change product's quantity in the shopping cart.

Once I had the logics written I refactored the code again using Reducer to deal with the states and logics using the customized function.

I also used useEffect to alter the shopping cart as necessary and useMemo to emprove performance.

To see the final result, click [here](https://learning-react-meteora.vercel.app/).

## Used tools:

* React

* Context API

* Reducer

*(Alura is a Brazilian technology school and for acessibility reasons this code is in Portuguese)*

## Initializing the project on your computer

- Clone the repository using the command line:

    - git clone *link of the repository*

    - cd *file of the repository*

 

- You can also download the zip file

- Unzip it

    - cd *name of the file*

 

- Run the code:

    - npm install (to install all project's dependencies)

    - npm run dev

    - Copy and paste the Local link in your browser (to open the project)

#

# Meteora

Olá! Esse projeto foi desenvolvido durante o curso *React: gerencie estados globalmente com Context API*, da Alura. 

A ideia do projeto era receber o código de um e-commerce de roupas que deveria ser refatorado. Utilizei contextAPI para criar um contexto e compartilhar os estados globais da aplicação, removendo o prop drilling presente no código inicial. Também criei um hook costumizado para encapsular a lógica complexa de adicionar, remover e alterar quantidade de produtos no carrinho.

Após ter a lógica escrita, refatorei novamente utilizando Reducer para lidar com os estados e lidar com as lógicas utilizando a função customizada.

Utilizei useEffect para alterar o carrinho conforme necessário e useMemo para melhorar a perfomance da aplicação.

Para acessar o resultado final da página, clique [aqui](https://learning-react-meteora.vercel.app/).

## Ferramentas utilizadas:

* React

* Context API

* Reducer

## Iniciando o projeto na sua máquina

- Clone o repositório através do terminal:

    - git clone *link do repositório*

    - cd *pasta do repositório*

 

    - Caso prefira, faça download do arquivo compactado

    - Descompacte a pasta

    - cd *pasta do repositório*

 

- Rode o código na sua máquina:

    - npm install (para instalar as dependências do projeto)

    - npm run dev 

    - Copie o link Local e cole no seu navegador (para abrir o projeto)