https://github.com/aszurar/dt-money
O projeto tem o intuito de gerenciar seus gastos e ganhos. Podemos registrar entradas, saídas com categorias, valores e por fim calcularmos seu saldo.
https://github.com/aszurar/dt-money
axe axe-core axios css html http-requests javascript json-server netlify radix-ui react reactjs tailwind tailwindcss typescript
Last synced: about 1 month ago
JSON representation
O projeto tem o intuito de gerenciar seus gastos e ganhos. Podemos registrar entradas, saídas com categorias, valores e por fim calcularmos seu saldo.
- Host: GitHub
- URL: https://github.com/aszurar/dt-money
- Owner: Aszurar
- Created: 2023-12-17T18:58:52.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-23T00:09:37.000Z (10 months ago)
- Last Synced: 2025-02-10T10:26:33.996Z (3 months ago)
- Topics: axe, axe-core, axios, css, html, http-requests, javascript, json-server, netlify, radix-ui, react, reactjs, tailwind, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://newdtmoney-aszurar.netlify.app/
- Size: 462 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# #9 - React: ****
**OBS**: Essa é a branch main, aqui **simulamos uma API REST com json-server para consumir os dados**. Mas a versão publicada esta feita com o localStorage e dados locais para facilitar a publicação, para acessá-la, vá na branch **[feature/localstorage](https://github.com/Aszurar/DT-money/tree/feature/localstorage)**.
## DT Money
- O projeto tem o intuito de gerenciar seus gastos e ganhos. Podemos registrar entradas, saídas com categorias, valores e por fim calcularmos seu saldo.
- O objetivo desse projeto é entender a forma como podemos consumir APIs, melhorar a performance prevenindo renderizações desnecessárias e praticar um pouco mais a construção de formulários.
- O site foi publicado com CI/CD por meio da plataforma **[Netlify](https://www.netlify.com/)**.
- Acesse e teste o projeto em: ****
[](https://app.netlify.com/sites/newdtmoney-aszurar/deploys) [](https://vitejs.dev/) [](https://react.dev/) [](https://tailwindcss.com/) [](https://www.radix-ui.com/) [](https://www.typescriptlang.org/) [](https://www.javascript.com/) [](https://developer.mozilla.org/pt-BR/docs/Web/HTML) [](https://www.w3schools.com/css/) [](https://yarnpkg.com/)
---
**[Vídeo no Youtube](https://www.youtube.com/watch?v=EqQ_cgrPPvI)**
---
## :information_source: Sobre
- O projeto tem o intuito de gerenciar seus gastos e ganhos. Podemos registrar entradas, saídas com categorias, valores e por fim calcularmos seu saldo.
- O objetivo desse projeto é entender a forma como podemos **consumir APIs**, melhorar a performance **prevenindo renderizações desnecessária**s e praticar um pouco mais a construção de formulários.
- A acessibilidade foi levada em consideração, com o uso da lib **[axe-core](https://www.npmjs.com/package/@axe-core/react)** para testes e correções de acessibilidade assim como leitor de tela ChromeVox e o uso do **[Radix UI](https://www.radix-ui.com/)** para componentes acessíveis como Modais e Tooltips.
- Esse projeto é derivado da formação React da **[Rocketseat](https://www.rocketseat.com.br/)**.
- **Tela inicial**
---
## :interrobang: Motivo
- O objetivo do projeto é entender e praticar os conceitos de como podemos **consumir APIs**, usar os métodos HTTP: **GET, POST, PUT, PATCH e DELETE** em conjunto com **axios**, assim como a própria **configuração do axios**. Além disso, praticamos mais sobre formulários com React Hook Form focando em **componentes Controlados** e focamos também em performance verificando as renderizações dos componentes no navegador por meio da extensão **React Dev Tools** e usamos hooks como **useCallback**, **useMemo** e métodos como **memo** para **prevenir renderizações desnecessárias**.
### Funcionalidades:
1. Listagem com todos os gastos e ganhos;
2. Cadastro de movimentações financeiras com categorias, valores e data atual;
3. Total de entradas, saídas e saldo;
4. Responsividade para dispositivos móveis.
5. Acessibilidade ampliada com o cumprimento de todas regras e avisos do axe-core permitindo a navegação completa de teclado e leitores de voz.
- **Pesquisa de movimentações**
---
## :art: Design
- O Design foi disponibilizado pela Rocketseat, e pode ser acessado no link abaixo:
DT Money
[](https://www.figma.com/design/XaDRpS7QidcQyb1TFtM5jc/DT-Money-%E2%9C%85?node-id=0-1&t=eoK7W6icuo7wrhig-0)
---
## :seedling: Requisitos Mínimos
1. NodeJS
2. ReactJS
3. Vite
4. Yarn(ou NPM)
- **Cadastro**
_
---
## :rocket: Tecnologias Utilizadas
- O projeto foi desenvolvido utilizando as seguintes tecnologias:
1. **[axios](https://axios-http.com/ptbr/docs/intro)**
2. **[axe-core/react](https://www.npmjs.com/package/@axe-core/react)**
3. **[JavaScript](https://developer.mozilla.org/pt1.BR/docs/Web/JavaScript)**
4. **[Json Server](https://github.com/typicode/json-server)**
5. **[Netlify](https://www.netlify.com/)**
6. **[NodeJS](https://nodejs.org/en/)**
7. **[Phosphor Icons](https://phosphoricons.com/)**
8. **[Radix UI](https://www.radix-ui.com/)**
9. **[React](https://pt1.br.react.dev/)**
10. **[React Hook Form](https://react-hook-form.com/)**
11. **[Sonner](https://sonner.emilkowal.ski/)**
12. **[TailwindCSS](https://tailwindcss.com/)**
13. **[Tailwind Variants](https://www.tailwind-variants.org/)**
14. **[TypeScript](https://www.typescriptlang.org/)**
15. **[Vite](https://vitejs.dev/)**
16. **[Yarn](https://classic.yarnpkg.com/blog/2017/05/12/introducing-yarn/)**
17. **[zod](https://zod.dev/)**
- **Responsividade**
_
_
---
## :truck: Entrega e distribuição continua
****
- Para a publicação da aplicação foi por meio da plataforma **[Netlify](https://www.netlify.com/)** onde é possível publicar de forma rápida, fácil e simples projetos React que estão hospedados no GitHub, GitLab, dentre outras plataformas de repositório remoto de graça.
- Com isso, o CI/CD já é aplicado automaticamente por meio dessa plataforma definindo a branch de produção, sempre que houver uma atualização nela, será gerado uma nova versão do projeto e já publicado.
- Além disso, podemos customizar o próprio endereço do site, adicionar ferramentas dentre outras funcionalidades facilmente.
---
## :package: Como baixar e executar o projeto
### Baixar
- Clonar o projeto:
```bash
git clone https://github.com/Aszurar/DT-money.git
```
- É necessário ter o Node.js e um gerenciador de pacotes, como o Yarn, instalados em seu sistema. Se você ainda não os tem, siga estas instruções:
- [Instalação do NodeJS](https://nodejs.org/en/)
- [Instalação do Yarn](https://classic.yarnpkg.com/blog/2017/05/12/introducing-yarn/)
- Instalação das dependências:
- Execute o comando abaixo dentro da pasta do projeto
```bash
yarn
```
### Execução
- Caso tudo tenha sido instalado com sucesso, basta executar na raiz do projeto:
- Caso esteja na branch **```main```**:
- Terminal 1: Executando front-end
```bash
yarn dev
```
- Terminal 2: Executando servidor json
```bash
yarn dev:server
```
- Caso esteja na branch **```feature/localstorage```**:
```bash
yarn dev
```
Desenvolvido por :star2: Lucas de Lima Martins de Souza.