explorer-monorepo/docs/specs/frontend/frontend-architecture.md

Frontend Architecture Specification

Overview

Frontend architecture for the explorer platform web application.

Framework Selection

Recommendation: Next.js (React framework)

Rationale:

• Server-side rendering (SSR) for SEO
• API routes for backend integration
• Excellent React ecosystem
• Good performance
• TypeScript support

Component Architecture

Structure

src/
├── components/        # Reusable components
│   ├── blocks/
│   ├── transactions/
│   ├── addresses/
│   └── common/
├── pages/            # Next.js pages/routes
├── hooks/            # Custom React hooks
├── services/         # API clients
├── store/            # State management
├── types/            # TypeScript types
└── utils/            # Utility functions

State Management

Strategy: Zustand or Redux Toolkit

Global State:

• User authentication
• Wallet connection
• Selected chain
• UI preferences

Local State: Component-level state with React hooks

Routing Structure

Routes:

• /: Home/Dashboard
• /blocks: Block list
• /blocks/[number]: Block detail
• /transactions/[hash]: Transaction detail
• /addresses/[address]: Address detail
• /tokens: Token list
• /tokens/[address]: Token detail
• /contracts/[address]: Contract detail
• /search: Search results
• /swap: Swap interface
• /bridge: Bridge interface
• /vtm: Virtual Teller Machine

Build and Deployment

Build Tool: Next.js built-in Deployment: Vercel, AWS, or self-hosted Environment: Development, staging, production

References

• Component Library: See component-library.md
• Explorer UI: See explorer-ui.md