System Architecture

Architecture Overview

CSSA-Website uses a frontend-only SPA architecture, runs in the browser, and does not depend on backend services. The overall structure is as follows:

Layered Design

Layer	Responsibility	Corresponding Code
Entry Layer	Mount React root, StrictMode	src/index.js
Routing Layer	Define path-to-page mapping	src/App.js
Layout Layer	Header, Navbar, Footer	src/components/Header, Navbar, Footer
Page Layer	Business pages	src/components/Pages/
UI Layer	Shared UI components	src/components/ui/
Utility Layer	Utility functions (e.g. cn)	src/lib/utils.js

Routing Architecture

• Home: Displays Header hero image + Navbar + main content
• Subpages: Display Navbar + main content only (no Header)
• 404: Unmatched paths redirect to fallback page Activity_BufferPage

Route Overview

Data Flow

• No global state: No Redux, Context, or other global state management
• Local state: Components use useState, useEffect, useRef
• Data sources: Defined in components, Honor_Wall.json, static assets in public/

Deployment

• Use npm run build to generate static files
• Can be deployed to any static hosting (Netlify, Vercel, GitHub Pages, Nginx, etc.)
• SPA fallback must be configured: unmatched paths should return index.html