Architecture Overview

High-Level View

The client repository contains the public web application built with Next.js and React. It renders pages, manages user interaction, and communicates with the backend GraphQL API.

Web Browser
   |
   v
Next.js App (React pages/components)
   |
   +--> GraphQL API (queries/mutations/subscriptions)
   +--> Firebase client services
   +--> Google OAuth and maps integrations

Runtime Entry Points

• src/pages/_app.jsx: application shell, providers, Apollo setup, shared layout.
• src/pages/*: route-level pages for auth, search, profile, messaging, help, etc.
• src/utilities/apollo/client.js: GraphQL transport setup, including upload and subscription links.

Main Frontend Layers

• src/pages/: route-level screens and page-specific behavior.
• src/sections/: larger reusable UI sections composed into pages.
• src/components/: shared UI building blocks.
• src/hooks/: reusable React hooks for common interaction patterns.
• src/utilities/: helpers for API wiring, forms, auth, mapping, and formatting.

Why this structure works

• Route pages stay focused on user flows.
• Sections/components promote reuse and consistency.
• Apollo client setup centralizes backend communication behavior.