CasaMais | ExpoStacker

PRODUTO EM PRODUÇÃO

casamais.expostacker.com.br/?demo=1

live preview

CasaMais — Programa de parceiros com tiers, comissões e milhas

Usar agora Arquitetura

Stack tecnológica: Expo React Native React Native Web TypeScript AsyncStorage Cloudflare Pages

3
Perfis: 9
Telas: 2
Idiomas

Acesso de teste

e-mail admin

senha admin123

1 Acesse com o login acima
2 Navegue pelo painel e veja os fluxos
3 Teste o fluxo principal de conversão

Usar agora

Cliente

CasaMais

Setor

Varejo de construção · Programa de parceiros B2B

Linha do tempo

2 semanas · Set 2026

Produto ao vivo

Usar agora

Resultados

Resultados reportados pelo cliente durante o rollout

3 Perfis com telas dedicadas

Baseline: admin · arquiteto · vendedor

9 Telas de produto completas

Baseline: drawers + workflows

2 Idiomas completos

Baseline: PT + EN, incluindo domínio

0 Warnings de lint/typecheck

Fonte: tsc + eslint

52 Datas relativas no seed

Fonte: dIso() — demo sempre viva

67 Chaves de tradução de domínio

Fonte: dv() status/tipo/origem/tier

Dados reportados pelo cliente

O desafio

CasaMais é uma demonstração profissional de programa de parceria para varejo de construção. A experiência cobre o ciclo completo: indicação do cliente, acompanhamento do funil, comissão calculada pela tabela de tiers, acúmulo de pontos CasaMilhas e resgate em catálogo de prêmios — com três perfis de usuário e visões dedicadas para cada um.

Lojas de materiais de construção dependem da indicação de arquitetos e designers, mas controlam comissões por planilha ou WhatsApp — sem visibilidade de pipeline, sem regra clara de tiers e sem programa de fidelidade que incentive o parceiro a voltar.

A abordagem

Pesquisamos programas de fidelidade B2B e dashboards SaaS. Aplicamos dark glass UI com Space Grotesk, sidebar adaptativa em desktop e tab bar em mobile, drawers de detalhe em todas as entidades, skeletons de carregamento, empty states com CTA e feedback de hover/press. Toda ação relevante grava auditoria.

A solução

O app entrega o produto completo como demonstração navegável:

Três perfis com telas dedicadas: admin (parceiros, produtos, relatórios), arquiteto (indicações, comissões, CasaMilhas, agenda) e vendedor (clientes, orçamentos)
Tabela de comissão por tier — Bronze 5%, Prata 7,5%, Ouro 10% — em fonte única que alimenta cards, cálculos e termos
CasaMilhas: extrato de pontos, catálogo de prêmios com imagens, resgate com validação de saldo e registro de auditoria
Calendário mensal real com navegação, dots de evento e workflow de status do agendamento
Command palette (Ctrl/⌘+K) com busca global em clientes, indicações, orçamentos, parceiros, produtos e agenda
Deep links por rota (/indicacoes, /clientes, /agenda, /casamilhas) que sobrevivem a refresh
Drawer de detalhe em todas as entidades com ações reais (aprovar, rejeitar, mudar status, resgatar)
i18n PT/EN completo — incluindo modais legais, alertas e tradução de valores de domínio exibidos
Auditoria de ações persistida e reset de demo explícito

Linha do tempo

Como o projeto foi conduzido, do mapeamento ao deploy. How the project was conducted, from mapping to deploy.

Semana 1

Fundação

Setup Expo + RN Web
Design system dark glass
Store central com persistência
Navegação adaptativa por perfil

Semana 2

Produto

9 telas por perfil com drawers e workflows
CasaMilhas + catálogo de resgate
Command palette + deep links
i18n PT/EN total

Dias finais

Lançamento

CI/CD GitHub → Cloudflare Pages
Domínio casamais.expostacker.com.br
Case na vitrine ExpoStacker

Metodologia

Como o projeto foi conduzido, do mapeamento ao deploy. How the project was conducted, from mapping to deploy.

Auditoria funcional de todas as telas e workflows antes de escrever código

Design tokens centralizados — uma paleta, um tema, zero divergência

Regras de negócio em tabela única validada contra marketing e termos

Validação contínua: tsc 0, eslint 0, build exportável a cada entrega

QA em três breakpoints (mobile, tablet, desktop) com navegação adaptativa

Arquitetura

React Native Web

Expo 53 · RN 0.79

AppStore

Actions = backend seam

AsyncStorage

Persistência local

i18n PT/EN

program.ts (tiers)

Audit log

React Navigation

→ AppStore central — todas as entidades e actions num provider único
→ Camada de dados = seam de backend: trocar AsyncStorage por API não toca as telas
→ program.ts — tabela de tiers/comissões como fonte única de verdade
→ mockData.ts — seed coerente com datas relativas (dIso)
→ utils/colors.ts — mapa semântico de cores por valor de domínio
→ i18n — dicionários PT/EN + dv() para valores de dados exibidos
→ ErrorBoundary global + persistência resiliente a dados malformados

Diagrama conceitual — não reflete implementação real

Stack tecnológica

Escolhas técnicas e o que ficou para fora.

Core

Expo 53

Por quê: Um codebase → web + iOS + Android

Alternativa rejeitada: React+Vite: duplicaria o mobile depois

TypeScript

Por quê: 0 any, unions literais em todo estado

Alternativa rejeitada: JS puro: bugs de status/typo

RN Web

Por quê: Componentes nativos viram DOM acessível

Alternativa rejeitada: Duas bases de UI separadas

Produto

AsyncStorage

Por quê: Persistência sem backend, seam de API

Alternativa rejeitada: Supabase: exigiria auth/creds na vitrine

React Navigation 7

Por quê: Deep links reais + tabs adaptativas

Alternativa rejeitada: React Router: sem paridade mobile

i18n próprio

Por quê: PT/EN + tradução de valores de domínio (dv)

Alternativa rejeitada: react-i18next: overhead p/ demo

Infra

Cloudflare Pages

Por quê: Deploy de dist/ em ~1min por push

Alternativa rejeitada: Vercel: mesma coisa, ecossistema já é CF

GitHub Actions

Por quê: CI/CD automático no padrão ExpoStacker

Alternativa rejeitada: Deploy manual: proibido pela regra

Decision log

O que escolhi, o que rejeitei e por quê.

AsyncStorage como seam de backend

Por que: A demo precisava funcionar 100% offline no navegador, sem credenciais de servidor. Todas as entidades vivem num AppStore central — as actions (addIndicacao, updatePartner, addResgate) são o ponto exato de troca por uma API real, sem reescrever telas.

Alternativas rejeitadas: Firebase/Supabase direto (rejeitado — exigiria auth real e credenciais numa vitrine pública); estado em memória sem persistência (rejeitado — perderia dados no refresh).

Expo + React Native Web em vez de React web

Por que: Um único codebase gera o site e o app nativo futuro via Expo Go/EAS. A vitrine recebe o build estático (expo export) e o mesmo código roda em iOS/Android sem fork.

Alternativas rejeitadas: React puro + Vite (rejeitado — duplicaria o app mobile no futuro); Flutter web (rejeitado — ecossistema e mão de obra).

Datas relativas no seed

Por que: Demo com datas fixas envelhece: "esta semana" vira "há 2 anos". Todas as 50+ datas do seed são geradas relativas a hoje — o calendário, o feed e os relatórios sempre mostram dados vivos.

Alternativas rejeitadas: Datas fixas bem escolhidas (rejeitado — fica obsoleto em semanas).

Tabela de tiers em fonte única

Por que: Programas de comissão erram quando a regra vive espalhada em marketing, código e contrato. CasaMais concentra Bronze/Prata/Ouro em program.ts — cards, cálculo e termos legais leem da mesma tabela.

Alternativas rejeitadas: Percentuais inline por tela (rejeitado — divergência garantida).

CasaMilhas — mecânicas

Tiers

Bronze → Prata → Ouro sobem comissão (5/7,5/10%) e milhas por R$100 (10/15/25).

Extrato

Histórico de ganhos e resgates com status por transação.

Catálogo

Prêmios por categoria com imagem, pontos e disponibilidade.

Resgate

Validação de saldo, registro de resgate e auditoria — fluxo completo.

Segurança e acesso

Segurança (escopo de demo)

Sem secrets ou credenciais reais no bundle — auth é mock explícito
Credenciais demo visíveis por design, com disclaimer na tela
Error boundary global com fallback on-brand em vez de crash
Nenhum dado sensível trafega — 100% local por arquitetura
Sem dependência de terceiros em runtime — zero superfície de supply chain na demo

Lições aprendidas

Nem tudo saiu como planejado.

— Demo boa não é demo bonita — é demo viva. Datas relativas, tabela de comissão em fonte única e drawer de detalhe em cada entidade fizeram a diferença entre "mockup navegável" e "produto que parece pronto".