CasaMais | ExpoStacker

LIVE PRODUCT

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

live preview

CasaMais — Partner program with tiers, commissions and reward miles

Use now Architecture

Tech stack: Expo React Native React Native Web TypeScript AsyncStorage Cloudflare Pages

3
Roles: 9
Screens: 2
Languages

Test access

e-mail admin

senha admin123

1 Log in with the details above
2 Browse the dashboard and see the flows
3 Test the main conversion flow

Use now

Client

CasaMais

Sector

Construction retail · B2B partner program

Timeline

2 semanas · Set 2026

Live product

Use now

Results

Client-reported results during rollout

3 Roles with dedicated screens

Baseline: admin · architect · seller

9 Complete product screens

Baseline: drawers + workflows

2 Full languages

Baseline: PT + EN, including domain values

0 Lint/typecheck warnings

Fonte: tsc + eslint

52 Relative seed dates

Fonte: dIso() — always-live demo

67 Domain translation keys

Fonte: dv() status/type/source/tier

Client-reported data

The challenge

CasaMais is a professional demonstration of a partner program for construction retail. The experience covers the full cycle: client referral, funnel tracking, commission calculated by the tier table, CasaMilhas points accrual and redemption in a rewards catalog — with three user roles and dedicated views for each.

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.

The approach

We researched B2B loyalty programs and SaaS dashboards. We applied dark glass UI with Space Grotesk, adaptive sidebar on desktop and tab bar on mobile, detail drawers for every entity, loading skeletons, empty states with CTA and hover/press feedback. Every relevant action writes an audit entry.

The solution

The app delivers the complete product as a navigable demo:

Three roles with dedicated screens: admin (partners, products, reports), architect (referrals, commissions, CasaMilhas, agenda) and seller (clients, quotes)
Tier commission table — Bronze 5%, Silver 7.5%, Gold 10% — in a single source feeding cards, calculations and terms
CasaMilhas: points statement, rewards catalog with images, redemption with balance validation and audit logging
Real monthly calendar with navigation, event dots and appointment status workflow
Command palette (Ctrl/⌘+K) with global search across clients, referrals, quotes, partners, products and agenda
Per-route deep links (/indicacoes, /clientes, /agenda, /casamilhas) that survive refresh
Detail drawer on every entity with real actions (approve, reject, change status, redeem)
Full PT/EN i18n — including legal modals, alerts and displayed domain-value translation
Persisted action audit log and explicit demo reset

Timeline

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

Semana 1

Fundação

Expo + RN Web setup
Dark glass design system
Central store with persistence
Adaptive per-role navigation

Semana 2

Produto

9 per-role screens with drawers and workflows
CasaMilhas + redemption catalog
Command palette + deep links
Full PT/EN i18n

Dias finais

Lançamento

CI/CD GitHub → Cloudflare Pages
casamais.expostacker.com.br domain
ExpoStacker showcase case

Methodology

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

Functional audit of all screens and workflows before writing code

Centralized design tokens — one palette, one theme, zero divergence

Business rules in a single table validated against marketing and terms

Continuous validation: tsc 0, eslint 0, exportable build on every delivery

QA at three breakpoints (mobile, tablet, desktop) with adaptive navigation

Architecture

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

→ Central AppStore — all entities and actions in a single provider
→ Data layer = backend seam: swapping AsyncStorage for an API doesn't touch screens
→ program.ts — tier/commission table as single source of truth
→ mockData.ts — coherent seed with relative dates (dIso)
→ utils/colors.ts — semantic color map by domain value
→ i18n — PT/EN dictionaries + dv() for displayed data values
→ Global ErrorBoundary + persistence resilient to malformed data

Conceptual diagram — does not reflect real implementation

Tech stack

Technical choices and what was left out.

Core

Expo 53

Why: One codebase → web + iOS + Android

Rejected alternative: React+Vite: would duplicate mobile later

TypeScript

Why: 0 any, literal unions across all state

Rejected alternative: Plain JS: status/typo bugs

RN Web

Why: Native components become accessible DOM

Rejected alternative: Two separate UI codebases

Product

AsyncStorage

Why: Persistence without backend, API seam

Rejected alternative: Supabase: would need auth/creds in showcase

React Navigation 7

Why: Real deep links + adaptive tabs

Rejected alternative: React Router: no mobile parity

Custom i18n

Why: PT/EN + domain-value translation (dv)

Rejected alternative: react-i18next: overhead for a demo

Infra

Cloudflare Pages

Why: dist/ deploy in ~1min per push

Rejected alternative: Vercel: same thing, ecosystem is already CF

GitHub Actions

Why: Automatic CI/CD in ExpoStacker standard

Rejected alternative: Manual deploy: forbidden by rule

Decision log

What I chose, what I rejected, and why.

AsyncStorage as backend seam

Why: The demo needed to run 100% offline in the browser with no server credentials. All entities live in a central AppStore — the actions (addIndicacao, updatePartner, addResgate) are the exact swap point for a real API, without rewriting screens.

Rejected alternatives: Direct Firebase/Supabase (rejected — would require real auth and credentials in a public showcase); in-memory state without persistence (rejected — would lose data on refresh).

Expo + React Native Web instead of web React

Why: A single codebase produces the website and the future native app via Expo Go/EAS. The showcase receives the static build (expo export) and the same code runs on iOS/Android without a fork.

Rejected alternatives: Plain React + Vite (rejected — would duplicate the mobile app later); Flutter web (rejected — ecosystem and staffing).

Relative dates in the seed data

Why: Fixed dates make demos stale: "this week" becomes "2 years ago". All 50+ seed dates are generated relative to today — the calendar, feed and reports always show live-looking data.

Rejected alternatives: Well-chosen fixed dates (rejected — goes stale within weeks).

Single-source tier table

Why: Commission programs break when the rule lives scattered across marketing, code and contract. CasaMais centralizes Bronze/Silver/Gold in program.ts — cards, calculation and legal terms read from the same table.

Rejected alternatives: Inline percentages per screen (rejected — guaranteed divergence).

CasaMilhas — mechanics

Tiers

Bronze → Silver → Gold raise commission (5/7.5/10%) and miles per R$100 (10/15/25).

Statement

Earnings and redemption history with per-transaction status.

Catalog

Rewards by category with image, points and availability.

Redemption

Balance validation, redemption record and audit — full flow.

Security and access

Security (demo scope)

No real secrets or credentials in the bundle — auth is explicit mock
Demo credentials visible by design, with on-screen disclaimer
Global error boundary with on-brand fallback instead of crash
No sensitive data in transit — 100% local by architecture
No third-party runtime dependency — zero supply-chain surface in the demo

Lessons learned

Not everything went as planned.

— A good demo isn't a pretty demo — it's a live one. Relative dates, a single-source commission table and a detail drawer on every entity made the difference between "navigable mockup" and "product that feels ready".