Sobre | Motivo | Tecnologias | Figma |
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
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
- React
- Axios
- ESLint
- Json-Server
- Phosphor
- Radix-UI
- React-Hook-Form
- Styled-Components 💅🏽
- Zod
- @rocketseat/eslint-config
Após logar em sua conta, você deve duplicar o Layout do projeto.
| 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 |
- 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 |
Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
