Este projeto é o front-end de uma aplicação web para administração de finanças, onde os usuários podem gerenciar transações, acompanhar um resumo financeiro e criar uma conta para acessar o sistema. A aplicação foi desenvolvida com React, utilizando styled-components para a estilização, React Router para navegação e integrações com APIs back-end.
- Demonstração
- Funcionalidades
- Pré-requisitos
- Instalação e Configuração
- Scripts Disponíveis
- Estrutura do Projeto
- Tecnologias Utilizadas
- Contribuições
- Licença
Adicione um link ou captura de tela da aplicação hospedada (exemplo: Vercel, Netlify).
- Autenticação: Login de usuários com armazenamento seguro de tokens de acesso.
- Gerenciamento de Transações: Adicionar, visualizar e excluir transações financeiras.
- Resumo Financeiro: Visualizar total de entradas, saídas e saldo.
- Criação de Conta: Cadastro de novos usuários para acesso à aplicação.
- Design Responsivo: Experiência otimizada para dispositivos móveis e desktop.
Antes de começar, você precisará ter instalado em sua máquina:
- Node.js (versão >= 16)
- npm ou yarn
- Um navegador web moderno (ex.: Google Chrome).
- Clone o repositório:
git clone https://github.com/Marvinx9/money-client - Instale as dependências:
npm install # ou yarn install - Configure o arquivo
.env:Crie um arquivo
.envna raiz do projeto com as seguintes variáveis:REACT_APP_API_BASE_URL=http://localhost:4000 - Inicie o projeto:
npm start # ou yarn start - Acesse a aplicação: Abra http://localhost:3000 no navegador.
npm start: Inicia o servidor de desenvolvimento.npm test: Roda os testes unitários.npm build: Cria a versão de produção do aplicativo.npm eject: Expõe a configuração do Create React App (use com cuidado).
src/
├── components/ # Componentes reutilizáveis (Header, Summary, etc.)
├── hooks/ # Hooks customizados (useTransactions, etc.)
├── pages/ # Páginas da aplicação (Login, Dashboard, etc.)
├── services/ # Integrações com a API (loginService, criarContaService)
├── styles/ # Configuração global de estilos
├── utils/ # Utilitários auxiliares (formatadores, helpers, etc.)
└── App.tsx # Arquivo principal do React
- React: Biblioteca para criação de interfaces de usuário.
- React Router: Gerenciamento de rotas.
- styled-components: Estilização com CSS-in-JS.
- Axios: Cliente HTTP para comunicação com a API.
- TypeScript: Tipagem estática para um código mais robusto.
Contribuições são bem-vindas! Siga os passos abaixo para contribuir:
- Faça um fork do projeto.
- Crie uma branch para sua feature ou correção:
git checkout -b minha-feature - Faça commit das suas alterações:
git commit -m "Adiciona nova funcionalidade" - Envie para o repositório remoto:
git push origin minha-feature - Abra um pull request no GitHub.
Este projeto está licenciado sob a MIT License.