Portfolio

DevCusto

Projeto

DevCusto

O DevCusto é um sistema intuitivo para a criação e gerenciamento de projetos com controle financeiro. Nele, você pode criar projetos e adicionar serviços conforme necessário, garantindo que o custo total não ultrapasse o orçamento definido para o projeto principal.

Com o DevCusto, você mantém controle total sobre os investimentos, organizando seus serviços de forma eficiente e evitando gastos excessivos.

JavascriptReactTypeScriptAxiosTailwindCssFirebase

Informações sobre o projeto

O DevCusto é um sistema web para criação e gerenciamento de projetos de desenvolvimento com controle financeiro. Permite que usuários autenticados:

  • Criar, editar e excluir projetos
  • Definir orçamento e categoria para cada projeto
  • Adicionar serviços a projetos, controlando custos
  • Gerenciar projetos de forma organizada com acesso restrito
Stack Tecnológica
  • Frontend: React 19 + TypeScript
  • Build Tool: Vite
  • Estilização: Tailwind CSS 4
  • Backend/Banco: Firebase (Authentication + Firestore)
  • Roteamento: React Router DOM 7
  • Ícones: React Icons
  • Alertas: SweetAlert2
  • ID Único: UUID
Estrutura Principal 

src/
├── components/    # Componentes reutilizáveis (Header, Footer, Input, etc.)
├── pages/         # Páginas: Home, Projects, Auth, Contact, Company
├── context/       # Contextos: Auth e Project
├── services/      # Serviços: auth e projectService (Firebase)
├── hooks/         # Hooks customizados: useProjects, useCategories
├── routes/        # Rotas protegidas (ProtectedRoute)
├── interface/     # Interfaces TypeScript
└── config/        # Configuração do Firebase
Regras de Desenvolvimento
  • Usar TypeScript em todos os arquivos React
  • Seguir o padrão de componentização com index.tsx
  • Utilizar Context API para gerenciamento de estado global
  • Rotas protegidas requerem autenticação
  • Formatação de moeda brasileira (BRL)