Rillex Casino

• The app is split into 22 feature modules under `src/features/`. Each module keeps its components, hooks, queries, services, store, schemas, types, and utilities together. Auth, web3, games, chat, bonuses, referrals, search, blog, SEO, and notifications all follow that boundary.
• Shared configuration lives in focused files. `app.config.ts` holds URLs, storage keys, API settings, and SEO defaults; the other files cover images, games, navigation, protected routes, and locale metadata.
• The provider tree has 11 layers: Wagmi, Solana, QueryProvider, Theme, reCAPTCHA, Auth, WebSocket, PlatformConfig, AuthGuard, Dynamic Modals, and LiveChat. The order matters because WebSocket needs an auth token and Auth relies on QueryProvider for mutations.
• State has three homes. The URL carries tabs, filters, and modal triggers through `useQueryParam`, Zustand runs seven client-side stores, and TanStack Query owns API data through typed query keys.
• Browser requests use Axios with a JWT interceptor and a shared 401 refresh queue through `/api/v1/*` rewrites. RSC components use `serverFetch()` directly against the backend with per-route ISR caching and a 120-second default.
• `CasinoShell` changes its structure across three breakpoints. Mobile uses a fixed header, slide-in sidebar, and Figma-derived SVG bottom nav; tablet uses an overlay sidebar; desktop shows static sidebars. The transitions use a 300ms cubic-bezier curve.
• Auth, wallet, search, bonus, and wheel modals load through `next/dynamic` with SSR disabled. Zustand keeps the active modal in sync with the `?modal=` URL parameter.
• Server components prefetch into a `QueryClient` singleton through `React.cache`, dehydrate the result, and pass it through `HydrationBoundary`. The client can use games, banners, and SEO data without requesting them again.
• `APP_CONFIG` is a module object instead of React context. It holds site, API, socket, storage, WalletConnect, timeout, and SEO settings. `instrumentation.ts` applies backend SEO settings at startup and the client receives them through `window.__APP_SETTINGS__`.
• Every feature uses the same internal shape: presentational components, feature hooks, typed query and mutation hooks, thin Axios services, an optional store, Zod schemas, and interfaces. Features consume public barrel exports rather than each other's internals.
• Each feature exposes a query-key factory such as `gamesKeys.list(params)` or `walletKeys.balance()`. The 33 live event types map to those keys, so a deposit confirmation only invalidates the wallet cache and a bonus update only invalidates bonus data.
• Route protection happens twice. `proxy.ts` checks the session cookie before protected routes render, while `AuthGuard` checks the actual Zustand role on the client. A manually created cookie cannot bypass the client role check.
• Leaf components receive data through props and do not fetch for themselves. Fetching stays with page components, layout shells, or dedicated `*Content` wrappers.
• Notifications arrive through WebSocket and enter a Zustand store capped at 50 items. A 30-second unread-count poll acts as a fallback, and users can clear one notification or all of them.
• Referrals support three levels with category-specific rates in basis points. Affiliates use separate RevShare, CPA, and Hybrid models with applications, approval, period-based GGR calculations, and payout tracking.
• The app uses `next-intl` with 20 prefix-always locales, so URLs begin with a locale such as `/en/games` or `/ar/games`. Arabic flips the layout for RTL. Locale resolution checks the URL, then a saved cookie, then English. A sync script keeps locale keys aligned.
• At startup, backend SEO settings merge into `APP_CONFIG`. `generateMetadata()` uses a route override when one exists, otherwise the global default, and adds hreflang alternates for all locales. Games, providers, and categories have their own SEO endpoints, JSON-LD, dynamic sitemap entries, and configurable robots rules.

This frontend has six auth flows, more than 10 chains, moderated live chat, 20 locales including RTL Arabic, live balances, games, bonuses, referrals, affiliates, and a separate backend. Feature modules keep that work close to the feature that owns it. The three state tiers give URL state, client state, and API state separate homes. Shared config files keep settings discoverable, and Figma tokens make visual changes local. The main event channel uses native WebSocket because the Bun backend already supports it; chat uses Socket.IO because rooms and reconnection fit that job.