Andamento • Arquitetura • Ferramentas Utilizadas • Como contribuir
O Gasosa Justa é uma aplicação ágil e acessível desenhada para acabar com as contas de cabeça desorganizadas na hora de rachar despesas automobilísticas entre amigos ou passageiros.
Seja para uma longa viagem, um rolê pelo litoral ou caronas diárias, a ferramenta entrega a divisão exata calculando o peso da distância percorrida, do consumo médio do veículo, do preço atual do abastecimento e de eventuais despesas com pedágios físicos. Tudo embalado num design Neobrutalista e mecânico inspirado em sistemas de fliperama clássicos.
Para visualizar meu projeto, clique aqui.
O projeto adota uma estrutura feature-based (orientada a domínio), separando responsabilidades por funcionalidade em vez de por tipo de arquivo.
src/
├── app/ # Rotas e layout (Next.js App Router)
│ ├── layout.tsx
│ ├── page.tsx
│ └── globals.css
├── features/
│ ├── calc/
│ │ └── services/
│ │ └── fuelCalculator.ts # Lógica de cálculo (pure functions)
│ └── trip/
│ ├── components/
│ │ ├── GasForm.tsx # Formulário principal
│ │ └── FuelCost.tsx # Exibição dos resultados
│ ├── hooks/
│ │ └── useGasForm.ts # Estado e handlers do formulário
│ └── types/
│ └── trip.types.ts # Tipagens do domínio de viagem
├── ui/
│ └── Switch.tsx # Componente atômico compartilhável
└── lib/
└── formatters.ts # Utilitários de formatação (pt-BR)
| Camada | Responsabilidade |
|---|---|
app/ |
Composição de rotas e layout global |
features/<domínio>/ |
Lógica, UI e tipos de cada funcionalidade |
features/calc/services/ |
Funções puras de cálculo (determinísticas e testáveis) |
ui/ |
Componentes atômicos sem lógica de negócio |
lib/ |
Utilitários cross-cutting (formatadores, parsers) |
@/* → src/*
@/features/* → src/features/*
@/ui/* → src/ui/*
@/lib/* → src/lib/*
@/app/* → src/app/*Utilizei as seguintes tecnologias core em meu projeto:
- TypeScript
- Next.js 16
- Tailwind CSS
- Framer Motion
- Headless UI
- Vitest (testes unitários)
- Deploy: Netlify
npm run dev # Servidor de desenvolvimento
npm run build # Build de produção
npm run start # Servidor de produção
npm run lint # Verificação de lint
npm run format # Formatação com Prettier
npm test # Testes unitários (Vitest)
npm run test:watch # Testes em modo watchPara contribuir com o nosso projeto, siga estas etapas simples:
- Bifurque este repositório (fork).
- Crie um novo branch:
git checkout -b <nome_branch>.- Faça suas alterações e confirme-as:
git commit -m '<mensagem_commit>'- Certifique-se de que os testes passam:
npm test- Envie para o branch original:
git push origin <nome_do_projeto> / <local>- Crie a solicitação de Pull Request.
Consulte a documentação oficial do GitHub em como criar uma solicitação pull.