Este frontend consome a API construída no backend. Para configurar e rodar o backend, acesse o repositório:
O Controle Verbas Frontend é uma aplicação web construída com React + TypeScript + Vite, totalmente integrada com a API REST do backend.
O frontend oferece uma interface intuitiva e responsiva para gerenciamento de usuários, orçamentos, departamentos e cargos, incluindo autenticação e controle de permissões.
O desenvolvimento do frontend consolidou habilidades como:
- ⚛️ Componentes React funcionais e organização por pastas e rotas
- 🛣️ Navegação e rotas com React Router DOM
- 🖌️ Estilização responsiva com Tailwind CSS
- 💬 Notificações de feedback com React Toastify
- 📡 Consumo de API com Axios
- 🛠️ Boas práticas de linting e padronização de código com ESLint
- 🧩 Componentes reutilizáveis usando shadcn/ui
- ⚛️ React 18 + 🔷 TypeScript
- ⚡ Vite — Bundler rápido para desenvolvimento
- 🖌️ Tailwind CSS — Framework de estilização
- 💬 React Toastify — Notificações de toast
- 🛣️ React Router DOM — Navegação e rotas
- 📡 Axios — Comunicação com API
- 🛠️ ESLint — Linter e boas práticas de código
- 🧩 shadcn/ui — Componentes prontos e estilizados
- 💻 Visual Studio Code: Ambiente de desenvolvimento integrado (IDE) leve e extensível.
- Login e logout
- Controle de permissões baseado em perfil
- Cargos, departamentos, usuários e pessoas
- Orçamentos: cadastro, listagem, aprovação e liberação
- Mensagens de sucesso e erro com React Toastify
- Validação de campos nos formulários
- Rotas protegidas e públicas
- Layout responsivo para desktop e mobile
Para ver a interface completa e detalhada em ação, acesse a demonstrações visuais detalhadas com GIFs interativos mostrando os principais recursos.
Abaixo está um resumo da estrutura de pastas e arquivos principais do projeto:
docs
├── gifs/
├── estrutura-projeto.md
├── visualizacao-detalhada.md
└── visualizacao-resumida.gif
src
├── assets/
├── components
│ ├── cargos/
│ ├── departamentos/
│ ├── login/
│ ├── orçamentos/
│ ├── pessoas/
│ ├── ui
│ │ ├── feature-specific/
│ │ └── shadcn/
│ └── usuarios/
├── lib/
├── pages/
├── services/
├── types
│ ├── cargos/
│ ├── departamentos/
│ ├── orçamentos/
│ ├── pessoas/
│ └── usuarios/
├── utils/
├── App.css
├── App.tsx
├── index.css
├── main.tsx
├── vite-env.d.ts
├── LICENSE
└── README.md
📌 Para a estrutura completa e detalhada, consulte estrutura-projeto.md.
Pré-requisitos
- ⚛️ Node.js 20 ou superior
- 💻 IDE VSCode
- 🌐 Backend rodando (Controle Verbas API)
- Clone o repositório
git clone https://github.com/seu-usuario/controle-verbas-frontend.git- Acesse a pasta do projeto
cd controle-verbas-frontend- Instale as dependências
npm install- Configure a URL da API no arquivo
src/services/api.tsou via variável de ambiente .env
VITE_API_BASE_URL=http://localhost:8080- Inicie o servidor de desenvolvimento
npm run dev- Abra o navegador em
http://localhost:5173(ou porta indicada pelo Vite)
Se você quiser contribuir para o projeto, siga estas etapas:
- Faça um fork deste repositório.
- Crie uma nova branch (
git checkout -b feature/alguma-coisa). - Faça suas mudanças.
- Envie um pull request explicando as mudanças realizadas.
Obrigado pelo interesse em contribuir!
Se tiver dúvidas ou sugestões, sinta-se à vontade para entrar em contato:
- 📧 E-mail: renan.vitor.cm@gmail.com
- 🟦 LinkedIn: Renan Vitor
📌 Este projeto está licenciado sob a Licença MIT, o que significa que você pode utilizá-lo, modificar, compartilhar e distribuir livremente, desde que mantenha os devidos créditos aos autores e inclua uma cópia da licença original - veja o arquivo LICENSE para detalhes ou acesse a licença MIT oficial.