https://github.com/jerp86/03-dt-money

Nesse módulo foi construido uma aplicação front-end web completa, conectando a uma API e foi visto como performar aplicações com o React entendendo como funcionam os algoritmos internos da biblioteca e todo fluxo de renderização de componentes.
https://github.com/jerp86/03-dt-money

axios phosphor-react radix-ui react react-hook-form react-hooks styled-components zod

Last synced: about 1 month ago
JSON representation

Nesse módulo foi construido uma aplicação front-end web completa, conectando a uma API e foi visto como performar aplicações com o React entendendo como funcionam os algoritmos internos da biblioteca e todo fluxo de renderização de componentes.

• Host: GitHub
• URL: https://github.com/jerp86/03-dt-money
• Owner: jerp86
• License: mit
• Created: 2023-01-17T12:37:37.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-11-11T09:24:34.000Z (over 1 year ago)
• Last Synced: 2024-11-17T12:49:50.594Z (3 months ago)
• Topics: axios, phosphor-react, radix-ui, react, react-hook-form, react-hooks, styled-components, zod
• Language: TypeScript
• Homepage:
• Size: 907 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Consumo de API e performance no ReactJS

[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://choosealicense.com/licenses/mit/)

---



  Sobre | 

  Motivo | 

  Tecnologias | 

  Figma | 





  Cores | 

  Fontes | 

  Executar | 

  Licença



---

## :information_source: Sobre

Nesse módulo foi construido uma aplicação front-end web completa, conectando a uma API e foi visto como performar aplicações com o React entendendo como funcionam os algoritmos internos da biblioteca e todo fluxo de renderização de componentes.

A aplicação desenvolvida para gerenciar transações monetárias, que contém as seguintes funcionalidades:

- Botão para criação de novas transações

- Dashboard com os valores de entradas, saídas e total

- Campo de busca de transação

- Listagem das transações

- Modal para a inserção das transações

## :interrobang: Motivo

Reinicio dos estudos do bootcamp Ignite ReactJS da Rocketseat.

Este terceiro projeto foi dividido em três partes:

- Estrutura visual

  - Criação das estruturas e estilos dos componentes, modal e página

- Conexão com a API

  - Utilizado o JSON-Server para criar uma API fake;

  - Criado contexto das transações;

  - Criado hook personaliozado

  - Criado funções utilitárias para as formatações dos valores;

- Performance

  - Utilizado React DevTools para analisar a performance

  - Aplicado Context Selectors

  - Aplicado hooks para melhorar a performance

## :rocket: Tecnologias Utilizadas

- [React](https://reactjs.org/)

- [Axios](https://axios-http.com/)

- [ESLint](https://eslint.org/)

- [Json-Server](https://github.com/typicode/json-server)

- [Phosphor](https://phosphoricons.com/)

- [Radix-UI](https://www.radix-ui.com/)

- [React-Hook-Form](https://www.react-hook-form.com/)

- [Styled-Components](https://styled-components.com/) 💅🏽

- [Zod](https://github.com/colinhacks/zod)

- [@rocketseat/eslint-config](https://github.com/rocketseat/eslint-config-rocketseat#readme)

## :art: Layout no Figma

Após logar em sua conta, você deve duplicar o Layout do projeto.

[DT Money](https://www.figma.com/community/file/1138814493269096792)

## :rainbow: Documentação de cores

| Cor       | Hexadecimal |

| --------- | ----------- |

| white     | #FFFFFF     |

|                         |

| gray-100  | #E1E1E6     |

| gray-300  | #C4C4CC     |

| gray-400  | #8D8D99     |

| gray-500  | #7C7C8A     |

| gray-600  | #323238     |

| gray-700  | #29292E     |

| gray-800  | #202024     |

| gray-900  | #121214     |

|                         |

| green-300 | #00B37E     |

| green-500 | #00875F     |

| green-700 | #015F43     |

|                         |

| red-300   | #F75A68     |

| red-500   | #AB222E     |

| red-700   | #7A1921     |

## :abc: Fontes utilizadas

- [Roboto](https://fonts.google.com/specimen/Roboto)

## :zap: Como executar

- Clone o projeto: ```git clone https://github.com/jerp86/03-dt-money.git```

- Acesse a pasta clonada: ```cd 03-dt-money```

- Instale as dependências: ```npm ci```

- Inicie a fake API e o projeto: ```npm start```

Caso tenha interesse em rodar em terminais separados, você pode utilizar o seguinte:

| Para iniciar a fake API    | Para iniciar o projeto |

| -------------------------- | ---------------------- |

| ``` npm run dev:server ``` | ``` npm run dev ```    |

## :memo: Licença

Esse projeto está sob a licença MIT. Veja o arquivo [LICENSE](LICENSE) para mais detalhes.

---



  Feito por Jerp86 👋️





  Entre em contato!





  

    

  

  &nbsp