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:


Estou feliz em anunciar uma grande reformulação do meu aplicativo web Lista de Compras! Lancei algumas atualizações importantes com o objetivo de tornar sua experiência mais fluida e confiável.

Novidades?
✨ Interface de usuário moderna e elegante: Um design completamente renovado e moderno.

🏠 Página inicial intuitiva: Comece a criar sua lista mais rápido do que nunca com um layout intuitivo.

💾 Listas salvas no seu dispositivo: Graças ao LocalStorage, sua lista de compras é salva automaticamente no seu celular ou computador. Chega de perder seu progresso!

📱 Responsivo em todas as telas: A tela foi reformulada para ter uma aparência e funcionar perfeitamente em qualquer dispositivo, do seu desktop ao seu smartphone. ☁️ Sempre online: Implementado no Vercel para acesso rápido e confiável sempre que você precisar.

Adoraria que você desse uma olhada e ouvisse seu feedback!





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

  1. Home – adicionando itens
    Formulário com nome, preço e quantidade. Total geral no rodapé.

  2. Edição e ações rápidas
    Editar preço/quantidade, botões +/– e Remover. Modo compacto ativado.

  3. Ordenar A→Z
    Lista organizada alfabeticamente (acentos ignorados).

  4. 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

Postagens mais visitadas deste blog

First commit?

À minha mulher: mãe dos meus filhos

🚌 Sistema de Registro de Entrada e Saída com Python + Flask