76 lines
1.7 KiB
Markdown
76 lines
1.7 KiB
Markdown
# 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`
|
|
|