Architecture

System architecture and design patterns for Astraa.

Table of Contents

• System Overview
• Frontend Structure
• Routing Architecture
• State Management
• Data Flow
• Error Handling

System Overview

Architecture Type: Client-side rendered SPA with Next.js App Router

Key Characteristics:

• No backend API routes
• Browser-based processing for tools
• External APIs for live data
• Client-side state persistence

Frontend Structure

app/
├── layout.tsx              # Root layout with providers
├── page.tsx                # Landing page
├── error.tsx               # Error boundary
├── global-error.tsx        # Global error boundary
├── not-found.tsx           # 404 page
├── api/                    # API routes
├── tools/
│   ├── page.tsx            # Tools listing
│   ├── password/           # Password generator
│   ├── hash/               # Hash generator
│   ├── currency/           # Currency converter
│   ├── text/               # Text generator
│   ├── image/              # Image resizer
│   ├── units/              # Unit converter
│   ├── calculator/         # Calculator
│   ├── json/               # JSON validator
│   ├── sql/                # SQL formatter
│   └── music/              # Lofi Focus Studio
├── games/
│   ├── page.tsx            # Games listing
│   ├── snake/              # Snake game
│   ├── memory/             # Memory game
│   ├── dino/               # Dino game
│   ├── pacman/             # Pacman game
│   ├── sudoku/             # Sudoku game
│   └── word-search/        # Word Search game
├── explore/                # Activity feed
├── contribute/             # Contribution page
└── privacy/                # Privacy policy

Page Component Pattern