Next.js Frontend Architecture
Relevant source files
The following files were used as context for generating this wiki page:
The Next.js frontend provides a modern web interface for the Financial Asset Relationship Database. It allows users to explore asset relationships through interactive 3D visualizations, analytical dashboards, and filterable data tables. The frontend operates as the production-ready UI layer, communicating with a FastAPI backend to retrieve financial graph data.
Sources: frontend/README.md, ARCHITECTURE.md
System Overview
The frontend adopts a React-based architecture using Next.js 14 with the App Router. It uses TypeScript for type safety and Tailwind CSS for responsive styling. The architecture decouples data fetching from presentation by utilizing a central API client and modular React components.
Core Technology Stack
| Technology | Role |
|---|---|
| Next.js 14 | React Framework and App Router |
| React 18 | UI Library |
| TypeScript | Static typing and interface definitions |
| Tailwind CSS | Utility-first CSS styling |
| Plotly.js | 3D Network and Graph visualizations |
| Axios | HTTP client for backend communication |
Sources: frontend/package.json:23-29, ARCHITECTURE.md, INTEGRATION_SUMMARY.md
Component Architecture
The frontend organizes code into functional directories within the app/ folder. The primary entry point is page.tsx, which manages the state for tabbed navigation between different views.
The diagram shows the component hierarchy where the main page routes data to specific visualization and data components.
Sources: frontend/README.md, frontend/app/page.tsx
Data Flow and Integration
The frontend communicates with the FastAPI backend via a standardized REST API. The API client in lib/api.ts handles request configuration, including base URL resolution from environment variables.
API Communication Sequence
This sequence illustrates the typical asynchronous data flow when loading the network graph.
Sources: frontend/app/lib/api.ts, ARCHITECTURE.md
API Client Implementation
The Axios client uses NEXT_PUBLIC_API_URL to determine the backend location. If this variable is missing, it defaults to http://localhost:8000.
Sources: frontend/app/lib/api.ts:5-10, frontend/README.md
Key Modules and Components
Network Visualization
This component renders an interactive 3D network graph. It transforms raw backend relationship data into 3D coordinates, colors, and sizes compatible with Plotly.js. Users can rotate, zoom, and hover over assets to view details.
Sources: INTEGRATION_SUMMARY.md, frontend/README.md
Metrics Dashboard
The dashboard displays aggregated network statistics. It visualizes asset class distributions and key metrics such as network density and average degree.
Sources: INTEGRATION_SUMMARY.md, frontend/app/page.tsx
Asset Explorer
The Asset Explorer provides a filterable table of all assets. It supports filtering by asset class and sector.
Sources: INTEGRATION_SUMMARY.md, frontend/app/page.tsx
Configuration and Deployment
The project uses a vercel.json file to manage routing and serverless function configuration for Vercel deployments. The frontend is optimized to run alongside the FastAPI backend, routing /api/* requests to the Python server while serving static React content for UI routes.
Sources: vercel.json, INTEGRATION_SUMMARY.md
Environment Variables
| Variable | Description | Default |
|---|---|---|
NEXT_PUBLIC_API_URL | Base URL for the FastAPI backend | http://localhost:8000 |
NEXT_PUBLIC_MAX_NODES | (Optional) Limit for graph visualization nodes | N/A |
NEXT_PUBLIC_MAX_EDGES | (Optional) Limit for graph visualization edges | N/A |
Sources: frontend/README.md, ARCHITECTURE.md
Conclusion
The Next.js frontend architecture provides a scalable, type-safe interface for the Financial Asset Relationship Database. By utilizing Next.js 14 and Plotly.js, the system delivers complex financial relationship data through high-performance 3D visualizations. The modular design ensures that UI updates remain independent of the core graph logic residing in the backend.