cobrother-official/cobrother_frontend

1. Overall shape

- This repository is a React 18 + Vite single-page application for the CoBrother marketplace.

- It is the browser frontend only: business data, auth, auctions, listings, and AI features are served by an external FastAPI backend.

- Production hosting is on Vercel, with backend API calls routed to Render-hosted services.

2. Routing and page composition

- src/pages/ contains the route-level screens: home, domains, ventures, technology/co-creation, creator community, auctions, dashboards, auth flows, and admin/operator pages.

- src/components/layout/ and common navigation components provide the shell around those pages.

- Protected areas such as dashboard/admin flows are gated through src/components/auth/ProtectedRoute.jsx.

3. Feature boundaries

- The UI is organized around the platform’s core business domains:

- Domains: marketplace, registration, transfer, verification, storefront

- Ventures: venture listings, bids, deals, verification, profile sections

- Technology / co-creation: software listings, auctions, demo/verification flows

- Creator/community: creator listings, community auctions, profile completion

- Auctions: shared auction hub and category-specific auction flows

- Each domain has its own page components, specialized cards/modals, and helper utilities.

4. Data access layer

- src/api/ is the network boundary: Axios client setup plus feature-specific service modules.

- src/utils/* contains many business adapters and calculators that shape API data for the UI: pricing, verification, listing visibility, auction fees, domain display, analytics, and navigation helpers.

- The backend API origin is resolved through src/config/urls.js, which is important because OAuth and WebSocket endpoints must target the backend host, not the frontend host.

5. Request and environment flow

- In local development, Vite proxies /api, /oauth2, and /ws to the backend.

- In production, vercel.json rewrites API routes to the backend and preserves SPA client-side routing.

- Environment variables in .env.* control the backend URL and app origin, so the frontend can switch cleanly between local and production deployments.

6. Global application state

- Cross-cutting state is handled by React context in src/context/:

- AuthContext for sign-in/session state

- CurrencyContext for display and conversion

- LanguageContext for localization

- CookieConsentContext for privacy/cookie preferences

- These contexts affect almost every route because they control permissions, formatting, locale, and consent-driven UI.

7. Realtime and live updates

- Auction and notification experiences are supported by SockJS + STOMP through hooks like useNotificationSocket, useAuction, useCommunityAuction, and useSoftwareAuction.

- This is the main realtime boundary in the app: the browser subscribes to backend events for live auction status, notifications, and similar updates.

8. Localization and regional behavior

- The app is multi-lingual through i18next / react-i18next.

- Translation resources live in src/i18n/locales/, with helper scripts to sync/apply translations.

- src/context/LanguageContext.jsx, locale utilities, and region-specific currency formatting make language and currency part of the core UX, not just presentation.

9. Shared UI system

- src/components/common/ contains reusable primitives: buttons, modals, loaders, banners, navbars, search bars, tooltips, consent UI, and bot-protection widgets.

- src/components/home/, src/components/listings/, src/components/ai/, src/components/analytics/, and similar folders hold feature-specific presentational components.

- Styling is a mix of Tailwind CSS and targeted CSS files in src/styles/, with Framer Motion used for page and section animation.

10. Integrations with external services

- Google OAuth is part of the auth flow and routes through the backend.

- AI domain generation and related storefront experiences are frontend surfaces over backend AI services.

- Payment/payout flows are supported by utility code for checkout and payout settings, indicating an external payment provider integration.

- Bot protection and consent mechanisms are also first-class parts of the app boundary.

11. Analytics and dashboards

- The app includes multiple dashboards and reporting views: user dashboards, admin dashboards, operations views, platform analytics, profile analytics, and venture/domain analytics.

- Charts are rendered with Recharts, and the data is pre-shaped by utility modules before it reaches chart components.

- This makes analytics a separate UI subsystem rather than just another page.

12. Build, deployment, and quality gates

- The frontend is built with Vite and deployed through Vercel; GitHub Actions run frontend tests and deployment workflows.

- Tests are present for critical utilities and auth/protected-route behavior, showing that route protection, formatting logic, and business rules are treated as core frontend concerns.