# 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`