Pular para o conteúdo principal

Template — front-web-base

O front-web-base é o template React que todos os forks herdam. Roda SSR via React Router v7 no Cloudflare Workers.

Estrutura de arquivos​

app/
├── components/
│   ├── auth/                      # AuthInitializer, LoginModal, RegisterModal, etc.
│   ├── casino/                    # Jogos, categorias, providers, busca
│   ├── common/                    # Componentes reutilizáveis (modais, buttons, etc.)
│   ├── footer/                    # Footer + links
│   ├── gamification/              # Smartico: initializer, missions, badges, etc.
│   ├── header/                    # Header auth-aware
│   ├── home/                      # Homepage sections
│   ├── kyc/                       # KYC modal + iframe + steps
│   ├── layout/                    # Layout wrappers
│   ├── payments/                  # Deposit/withdraw modais + providers
│   ├── sidebar/                   # Sidebar 280/70px colapsável
│   ├── sports/                    # Integração provedores esportes
│   ├── validation/                # ValidationBlockerOverlay, StepsModal, etc.
│   └── wallet/                    # Wallet modal, transações, rollover
├── config/                        # 18 arquivos de configuração
│   ├── routes.config.ts           # Fork override: buildRoutes()
│   ├── layout.config.ts           # Fork override: LayoutComponent
│   ├── theme.config.ts            # Fork override: cores do tema
│   ├── gamification.config.ts     # Config Smartico (client keys)
│   ├── gamification.server.config.ts # Config Smartico (server keys)
│   ├── sports.config.ts           # Config provedores de esportes
│   ├── sidebar.config.ts          # Items do sidebar
│   ├── footer.config.ts           # Items do footer
│   ├── header.config.ts           # Items do header
│   ├── home.config.ts             # Seções da homepage
│   ├── validation.config.ts       # Regras de validação por contexto
│   └── ...                        # Outros configs de marca
├── context/
│   ├── env.tsx                    # EnvProvider + useClientEnv()
│   ├── country.tsx                # CountryProvider + useCountry()
│   └── i18n.tsx                   # TranslationProvider + useTranslation()
├── hooks/
│   ├── useAuthInit.ts             # Sync auth do loader SSR para store
│   ├── useAuthProfileSync.ts      # Sync profile atualizado
│   ├── useValidationRuntimeSync.ts # Computa allValidations
│   ├── useGamificationInit.ts     # Init Smartico SDK
│   ├── useSportsInit.ts           # Init provider de esportes
│   ├── usePayments.ts             # Lógica de payments
│   ├── useWallet.ts               # Lógica de wallet
│   ├── useKyc.ts                  # Lógica de KYC
│   ├── useGames.ts                # Lógica de jogos
│   └── useValidationSteps.ts      # Lógica de modal de validações
├── layouts/
│   └── DefaultLayout.tsx          # Providers + layout wrapper
├── routes/
│   ├── _layout.tsx                # Loader: brand + clientEnv + auth + smarticoHash
│   ├── _index.tsx                 # Homepage
│   └── ...                        # Rotas de cassino, esportes, conta, etc.
├── services/
│   ├── api.server.ts              # createClient() — ApiClient SSR
│   ├── brand.server.ts            # loadBrandConfig() — BrandResult com cache
│   ├── sports.client.ts           # SportsService singleton (client)
│   ├── sports.server.ts           # SportsService factory (server)
│   ├── logger.server.ts           # Logging estruturado
│   ├── cache.server.ts            # ServerCache genérico (in-memory + CF Cache)
│   ├── games.server.ts            # Factory GamesService SSR
│   ├── games.cache.server.ts      # GamesCacheService (cache + SWR)
│   ├── games.client.ts            # GamesService singleton (client)
│   ├── auth.client.ts             # AuthService singleton client-side
│   ├── user.client.ts             # UserService singleton client-side (lazy)
│   ├── smartico.server.ts         # Hash MD5 Smartico
│   └── ...                        # kyc, validation, payments, etc.
├── store/
│   ├── auth.ts                    # user, userInfo, isAuthenticated, hydrated, authModal
│   ├── layout.ts                  # mobileMenuOpen, sidebarOpen, sectionToggles
│   ├── brand.ts                   # brand config
│   ├── gamification.ts            # Smartico SDK state
│   ├── kyc.ts                     # Fluxo KYC completo
│   ├── validationSteps.ts         # Modal de validações contextuais
│   ├── validationRuntime.ts       # allValidations resultado
│   ├── passwordValidation.ts      # Modal de senha
│   ├── games.ts                   # Jogos, busca, jogo ativo
│   ├── payments.ts                # Deposit/withdraw state
│   ├── wallet.ts                  # Wallet, transações, rollover
│   ├── user.ts                    # clearUserData
│   └── accountMenu.ts             # Menu da conta
├── utils/
│   └── cookie.server.ts           # Leitura/set/delete de cookie HttpOnly no server
├── root.tsx
├── routes.ts
├── entry.server.tsx
└── tailwind.css
workers/
├── app.ts                         # Cloudflare Workers entry (dev)
├── app.deploy.ts                  # Cloudflare Workers entry (prod)
├── middleware.ts                   # Middleware (auth, headers, etc.)
└── preview.ts                     # Preview environment entry

Layout — Sidebar colapsável​

O sidebar tem dois estados:

  • Expandido: 280px de largura (mostra ícones + labels)
  • Colapsado: 70px de largura (mostra apenas ícones)

Controlado via useLayoutStore() (sidebarOpen, toggleSidebar).

Comandos​

cd front-web-base

pnpm dev        # Dev server (localhost:5173)
pnpm build      # Production build
pnpm lint       # Biome lint
pnpm format     # Biome format

Dependências do SDK​

O template consome estes pacotes @cactus-agents/* via GitHub Packages:

{
  "@cactus-agents/api-client": "^0.4.0",
  "@cactus-agents/auth": "^0.2.2",
  "@cactus-agents/brand": "^0.2.1",
  "@cactus-agents/country-config": "^0.2.0",
  "@cactus-agents/games": "^0.6.0",
  "@cactus-agents/gamification": "^0.2.1",
  "@cactus-agents/i18n": "^0.2.0",
  "@cactus-agents/kyc": "^0.6.0",
  "@cactus-agents/payments": "^0.2.1",
  "@cactus-agents/sports": "^0.2.1",
  "@cactus-agents/types": "^0.1.1",
  "@cactus-agents/user": "^0.2.4",
  "@cactus-agents/utils": "^0.1.1",
  "@cactus-agents/validations": "0.4.1",
  "@cactus-agents/wallet": "^0.2.3"
}