portfolio react typescript pwa case-study

Como Engenharia de Software e PWA Resolveram a Comparação de Custo-Benefício no Supermercado

Construção de uma Progressive Web App mobile-first para comparação de preços com React, TypeScript, Tailwind CSS, Workbox (Offline) e CI/CD automatizado no Netlify.

Quem tenta economizar no supermercado conhece a armadilha das embalagens: comparar um produto de 350g por R$ 14,90 com outro de 500g por R$ 19,80 exige contas mentais rápidas ou uso incômodo da calculadora do celular enquanto se segura o carrinho.

Para resolver essa dor cotidiana, desenvolvi a prices.mourao.info — uma aplicação web progressiva (PWA) mobile-first, ultraleve e focada em normalizar e comparar o custo por unidade de medida (g, kg, ml, L ou unidades) em tempo real.

🎯 O Problema de Negócio vs. A Solução Arquitetural

Gargalo no Supermercado	Solução Implementada na PWA
Dificuldade para identificar a embalagem mais vantajosa no corredor	Cálculo instantâneo e normalizado de custo por grama, quilo, mililitro ou litro
Sinal de internet ruim ou inexistente dentro de estabelecimentos	Arquitetura PWA com Service Worker via Workbox garantindo funcionamento 100% offline
Navegação incômoda ao segurar produtos com uma das mãos	Design mobile-first responsivo com alvos de toque otimizados e suporte a i18n
Falhas de rotas após refresh em produção no Netlify	Configuração de build e SPA Routing declarativo via `netlify.toml` direcionado para `dist`

🛠️ Highlights da Stack & Decisões Técnicas

A aplicação foi projetada para carregamento instantâneo, baixo consumo de dados e alta performance em dispositivos móveis.

1. Tipagem de Domínio e Normalização (TypeScript)

Contratos estritos para unidades de medida garantem que produtos em gramas e quilos ou mililitros e litros sejam comparados na mesma escala sem erros de conversão:

export type UnitCategory = 'weight' | 'volume' | 'unit';
export type UnitType = 'g' | 'kg' | 'ml' | 'l' | 'un';

export interface ProductComparison {
  id: string;
  name: string;
  price: number;
  quantity: number;
  unit: UnitType;
  normalizedUnitPrice: number; // Preço padronizado por 1kg, 1L ou 1un
}

2. Resiliência Offline & PWA (Workbox + Vite)

Integração com vite-plugin-pwa para gerar um Service Worker com precache de assets estáticos, permitindo instalação na tela inicial e uso instantâneo offline.

3. Pipeline de Build & Deploy Estático (Netlify)

Padronização das configurações de deployment no netlify.toml apontando a publicação para a pasta dist do Vite com redirecionamento de fallback de rotas SPA (/* → /index.html).

🔀 Engenharia na Prática: Git Flow Disciplinado

O fluxo de trabalho no repositório utilizou ramificação estruturada para isolamento de funcionalidades e deploys seguros:

main                    [v1.0.0] (Produção / Netlify)
  ▲
  │ (Release Merge)
release/v1.0.0
  ▲
  │
develop ──────────────────────────────────────────────►
  ▲                      ▲                      ▲
  │                      │                      │
feature/pwa-service    feature/i18n-support   chore/CB-03-core-deps

main: Código estável em produção, alimentando a build automatizada do Netlify.
develop: Branch de integração contínua para novas features.
feature/*: Branches dedicadas para cálculo de custo, suporte offline (PWA) e i18n.
chore/*: Branches para ajuste de dependências base e infraestrutura de build.

Prices: Desenvolvendo uma PWA Mobile-First para Comparação de Custo-Benefício