Construí uma "Lista de Compras" moderna (React + FastAPI + MongoDB) — do zero ao deploy
Queria algo simples pra usar no celular no mercado: nome do item, preço unitário, quantidade, total por item e total geral — com edição rápida. No caminho, virou um projetinho completo com modo local (privado), nuvem (API), exportação XLSX/PDF e página de doação via PIX.
🔗 Demo (Front): https://lista-de-compras-ten-hazel.vercel.app
🔗 API (Health): https://lista-de-compras-65nd.onrender.com/health
Update 16/10/2025:
Linha do tempo (resumo)
Protótipo: formulário + cálculo de total, edição/remoção e arredondamento (2 casas).
Back-end: FastAPI + MongoDB Atlas (CRUD /items), CORS e /health.
Armazenamento: toggle entre LocalStorage (privado no dispositivo) e API (centralizado).
Visual: Tailwind “limpo” + helpers (.card, .input, .btn-*) + modo compacto p/ caber mais na tela.
Exportações: XLSX (xlsx) e PDF (jspdf + autotable).
Páginas: Home, Sobre e Doar (react-router-dom).
Doação: PIX com QR estático + chave fixa contatorodrigorodrigues@gmail.com.
Deploy: Vercel (front) + Render (API).
Stack
Frontend: React + Vite + Tailwind
Backend: FastAPI (Python)
DB: MongoDB Atlas
Build/Deploy: Vercel (SPA) + Render (Uvicorn)
Extras: axios, react-router-dom, xlsx, jspdf/autotable
Lições rápidas
CORS e preflight importam (liberar origins, methods, headers).
Um CSS global “ruidoso” quebra o design — manter um index.css único, minimalista e helpers reaproveitáveis.
LocalStorage é ótimo pra privacidade: a lista não sai do seu dispositivo se você não quiser.
Organizamos a lista com ordenar A→Z (ignora acentos) e modo compacto para mobile.
Próximos passos
✅ marcar item como comprado • ✅ categorias • ⬜️ PWA (instalável) • ⬜️ compartilhamento/backup
Quer apoiar?
Se o app te ajuda, você pode doar via PIX:
Chave: contatorodrigorodrigues@gmail.com
Na página Doar (menu do app) tem o QR Code estático e botão Copiar chave. Obrigado! 💜
Screenshots
Home – adicionando itens
Formulário com nome, preço e quantidade. Total geral no rodapé.Edição e ações rápidas
Editar preço/quantidade, botões +/– e Remover. Modo compacto ativado.Ordenar A→Z
Lista organizada alfabeticamente (acentos ignorados).Sobre
Página com stack e referências do projeto.
Se curtir, comenta aqui o que você adicionaria — categorias? PWA? compartilhamento?
Curtiu o projeto? Me conta nos comentários
Comentários
Postar um comentário