BAPBA Protocol
Architecture

Frontend Architecture

Detailed architecture of the Next.js frontend — components, pages, styling, and glassmorphism design system.

Frontend Architecture

The BAP frontend is a Next.js application with React, using Tailwind CSS and a glassmorphism design system.

Technology Stack

ComponentTechnology
FrameworkNext.js 16, React 19
LanguageTypeScript 5.9
StylingTailwind CSS 4
UI Componentsshadcn/ui, Radix UI
AnimationsFramer Motion, GSAP
State ManagementReact hooks/context
HTTP ClientCustom ApiClient (lib/api.ts)

Project Structure

web/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── (auth)/
│   │   │   ├── login/
│   │   │   └── register/
│   │   ├── (dashboard)/
│   │   │   ├── dashboard/
│   │   │   ├── settings/
│   │   │   ├── survivors/
│   │   │   ├── will/
│   │   │   └── liveness/
│   │   ├── survivor/
│   │   │   └── [willId]/
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components/
│   │   ├── ui/                 # shadcn components
│   │   │   ├── button.tsx
│   │   │   ├── input.tsx
│   │   │   ├── card.tsx
│   │   │   └── ...
│   │   ├── forms/              # Form components
│   │   ├── layout/             # Layout components
│   │   └── survivors/          # Survivor-specific
│   ├── lib/
│   │   ├── api.ts              # API client
│   │   ├── auth.ts             # Auth utilities
│   │   └── utils.ts
│   ├── hooks/                  # Custom hooks
│   ├── types/                  # TypeScript types
│   └── styles/
│       └── globals.css
├── public/
├── tailwind.config.ts
├── next.config.js
└── package.json

Design System

Glassmorphism Theme

BAP uses a glassmorphism design:

/* Glass effect */
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

Color Palette

RoleColor
BackgroundDark gradient (#0f0f23 → #1a1a3e)
PrimaryElectric blue (#3b82f6)
SecondaryPurple (#8b5cf6)
AccentCyan (#06b6d4)
Text PrimaryWhite (#ffffff)
Text SecondaryGray (#9ca3af)

Typography

  • Headings: Inter Bold
  • Body: Inter Regular
  • Monospace: JetBrains Mono (for codes)

Pages

Authentication Pages

  • /login — Host login
  • /register — Host registration

Host Dashboard

  • /dashboard — Overview, quick actions
  • /settings — Profile, connectors, storage
  • /settings/connectors — Manage connectors
  • /settings/storage — Manage storage
  • /settings/liveness — Liveness configuration
  • /survivors — Manage survivors
  • /will — View/create will
  • /will/upload — Upload documents
  • /will/liveness — Liveness history

Survivor Portal

  • /survivor/[willId] — Survivor portal entry
  • Authentication flow
  • Document access

Components

UI Components (shadcn/ui)

Based on Radix UI primitives:

  • Button
  • Input
  • Card
  • Form
  • Dialog
  • Dropdown
  • Tabs
  • Table
  • Badge

Custom Components

src/components/
├── forms/
│   ├── LoginForm.tsx
│   ├── RegisterForm.tsx
│   ├── ConnectorForm.tsx
│   ├── SurvivorForm.tsx
│   └── WillUpload.tsx
├── layout/
│   ├── Sidebar.tsx
│   ├── Header.tsx
│   └── Footer.tsx
├── dashboard/
│   ├── StatsCard.tsx
│   ├── WillStatus.tsx
│   └── LivenessCheck.tsx
└── survivor/
    ├── SurvivorList.tsx
    ├── OTPScreen.tsx
    └── DocumentList.tsx

State Management

React Context

// Auth context
useAuth() -> { user, login, logout }

// Will context
useWill() -> { will, status, documents }

// Transfer context
useTransfer() -> { transfer, authenticated, threshold }

Form State

Using React Hook Form:

const form = useForm({
    defaultValues: {
        email: '',
        password: ''
    }
});

API Integration

API Client

Centralized API client with:

  • Base URL configuration
  • Authentication header injection
  • Error handling
  • Response type transformation
// lib/api.ts
const api = axios.create({
    baseURL: process.env.NEXT_PUBLIC_API_URL
});

api.interceptors.request.use((config) => {
    const token = getToken();
    if (token) {
        config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
});

Data Fetching

Using React Query or SWR for server state:

const { data, isLoading } = useQuery({
    queryKey: ['will'],
    queryFn: fetchWill
});

Authentication Flow

Host Authentication

  1. User submits login form
  2. POST to /api/auth/login
  3. Receive JWT tokens
  4. Store tokens (httpOnly cookie or secure storage)
  5. Redirect to dashboard

Survivor Authentication

  1. Visit survivor portal link
  2. Select name from list
  3. POST to /api/survivor-auth/select
  4. Receive OTP
  5. Verify OTP
  6. Access granted when threshold met

Responsive Design

Mobile First

  • Tailwind responsive classes
  • Breakpoints: sm, md, lg, xl, 2xl
  • Touch-friendly targets (44px minimum)

Example

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    {/* Cards */}
</div>

Performance

Optimization

  • Server-side rendering (SSR)
  • Static generation for public pages
  • Image optimization
  • Code splitting
  • Lazy loading

Bundle Size

  • Tree shaking
  • Minimal dependencies
  • shadcn/ui (import on demand)

Accessibility

WCAG 2.1 AA

  • Semantic HTML
  • ARIA labels
  • Keyboard navigation
  • Focus management
  • Color contrast (4.5:1)

Environment Variables

NEXT_PUBLIC_API_URL=http://localhost:8080/api

Next Steps

Backend Architecture

Detailed architecture of the Go backend — routing, middleware, handlers, and services.

Database Architecture

Database schema design for Burning Ash Protocol — tables, relationships, and SQLite/PostgreSQL support.

On this page

Frontend ArchitectureTechnology StackProject StructureDesign SystemGlassmorphism ThemeColor PaletteTypographyPagesAuthentication PagesHost DashboardSurvivor PortalComponentsUI Components (shadcn/ui)Custom ComponentsState ManagementReact ContextForm StateAPI IntegrationAPI ClientData FetchingAuthentication FlowHost AuthenticationSurvivor AuthenticationResponsive DesignMobile FirstExamplePerformanceOptimizationBundle SizeAccessibilityWCAG 2.1 AAEnvironment VariablesNext Steps