# konstasil/anijun architecture

> Architecture diagram of the GitHub repository konstasil/anijun, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-07-31). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/konstasil/anijun
- Repository: https://github.com/konstasil/anijun

## Overview

#### Purpose and Runtime

Anijun is a Next.js TypeScript application for an anime catalog and social recommendation experience: browsing anime, rating items, profile/friend interactions, suggestions, and an admin content workflow. It uses the App Router and runs as a server-rendered/client-interactive web application.

Primary entry points:
- Root layout and landing route: `src/app/layout.tsx`, `src/app/page.tsx`
- Request/session boundary: `middleware.ts`
- Supabase access adapters: `src/lib/supabase/client.ts`, `src/lib/supabase/server.ts`

#### Routing and Product Surfaces

Route folders define the application’s primary product areas:
- Catalog and title detail: `src/app/catalog/page.tsx`, `src/app/anime/[slug]/page.tsx`
- Discovery/rankings and recommendations: `src/app/top/page.tsx`, `src/app/sova/page.tsx`, `src/app/suggest/page.tsx`
- User and social features: `src/app/profile/page.tsx`, `src/app/friends/page.tsx`
- Administrative content management: `src/app/admin/page.tsx`, `src/app/admin/add/page.tsx`

The dynamic `[slug]` route is the canonical detail boundary for an individual anime, supported by the slug database migration.

#### Authentication and Session Propagation

Authentication UI lives at `src/app/login/page.tsx` and `src/app/signup/page.tsx`; the OAuth/auth redirect completion endpoint is `src/app/auth/callback/route.ts`.

`middleware.ts` delegates Supabase-aware request handling through `src/lib/supabase/middleware.ts`, making session refresh and identity availability a cross-cutting request boundary. Server components/routes should use `src/lib/supabase/server.ts`; browser-interactive components should use `src/lib/supabase/client.ts`, avoiding direct coupling to a single environment’s auth/storage mechanics.

#### Data Model and Persistence

Supabase is the material persistence and authentication service. The relational baseline and evolution are represented in:
- `sql/schema.sql`
- `sql/migration_profiles_extended.sql`
- `sql/migration_recommendations.sql`

Migrations indicate core domains: profiles and user IDs, friends, anime slugs, avatar storage URLs, ratings/recommendations, suggestions, seasonal notes, and simulation data. `sql/seed.sql` supplies initial data. Database schema changes are an explicit deployment concern rather than being generated by the Next.js app.

#### Recommendation and Simulation Domain

Recommendation logic is centralized in `src/lib/recommendations.ts`, separating ranking/suggestion rules from page presentation. Recommendation-related persisted state is introduced by `sql/migration_recommendations.sql` and `sql/migration_suggestions.sql`.

`src/lib/simulation-context.tsx` provides client-side shared state for a simulation-oriented experience, consumed by the Sova/discovery surface at `src/app/sova/page.tsx`. This is a UI-state boundary distinct from durable Supabase records.

#### Shared UI and Interaction Boundaries

`src/components/Header.tsx` is the application-wide navigation shell, while `src/components/AnimeCard.tsx` is the reusable catalog/list presentation unit used across discovery-oriented routes.

Interactive boundaries include:
- Image/avatar upload: `src/components/ImageUpload.tsx`
- User discovery/social selection: `src/components/UserSearch.tsx`
- Rating feedback: `src/components/RatingToast.tsx`

`src/components/SafeImage.tsx` standardizes image rendering/failure handling, important because anime artwork and user avatars likely originate from stored or external URLs.

#### Infrastructure and External Integration

The deployment runtime is Next.js, configured by `next.config.ts`, with global styling in `src/app/globals.css`. Supabase provides auth, database, and likely object storage for uploaded avatars. Static ownership-verification files in `public/google4b778939d11ff2e9.html` and `public/yandex_1bb5b30642fb8372.html` indicate Google and Yandex webmaster/search integrations.

Control flow is generally: request → middleware session handling → App Router page/route → server or browser Supabase adapter → Supabase persistence/auth; UI components render catalog, profile, social, and recommendation results.

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Next.js Runtime"]
  node_middleware{{"Session Middleware<br/>request boundary"}}
  node_supabase_middleware["Supabase Middleware<br/>auth adapter"]
  node_app_shell["App Shell<br/>root layout"]
  node_landing["Landing Route<br/>App Router page"]
end

subgraph group_surfaces["Product Surfaces"]
  node_auth_routes["Auth UI &amp; Callback<br/>auth routes"]
  node_catalog_detail["Catalog &amp; Anime Detail<br/>catalog routes"]
  node_discovery["Discovery &amp; Suggestions<br/>discovery routes"]
  node_social["Profile &amp; Friends<br/>social routes"]
  node_admin["Admin Content Workflow<br/>admin routes"]
end

subgraph group_domain["Shared Domain &amp; UI"]
  node_recommendations{{"Recommendation Rules<br/>domain logic"}}
  node_simulation["Simulation State<br/>client state"]
  node_shared_ui["Shared Catalog UI<br/>UI components"]
  node_interactions["Interactive UI<br/>UI components"]
end

subgraph group_data["Supabase &amp; Schema"]
  node_server_adapter["Server Supabase Adapter<br/>server data adapter"]
  node_browser_adapter["Browser Supabase Adapter<br/>client data adapter"]
  node_supabase[("Supabase<br/>auth, database &amp; storage")]
  node_schema["Schema Baseline<br/>SQL schema"]
  node_recommendation_migrations["Recommendation Migrations<br/>SQL migrations"]
  node_seed["Initial Seed Data<br/>SQL seed"]
end

node_middleware -->|"delegates session handling"| node_supabase_middleware
node_supabase_middleware -->|"refreshes auth session"| node_supabase
node_app_shell -->|"wraps"| node_landing
node_app_shell -->|"uses navigation"| node_shared_ui
node_auth_routes -->|"auth flow"| node_server_adapter
node_catalog_detail -->|"loads catalog data"| node_server_adapter
node_discovery -->|"applies ranking rules"| node_recommendations
node_discovery -->|"uses client state"| node_simulation
node_discovery -->|"renders cards"| node_shared_ui
node_social -->|"loads social data"| node_server_adapter
node_admin -->|"manages content"| node_server_adapter
node_interactions -->|"interactive data access"| node_browser_adapter
node_server_adapter -->|"server access"| node_supabase
node_browser_adapter -->|"browser access"| node_supabase
node_recommendations -->|"reads persisted signals"| node_supabase
node_schema -.->|"defines baseline"| node_supabase
node_recommendation_migrations -.->|"evolves recommendation tables"| node_supabase
node_seed -.->|"loads initial data"| node_supabase

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_middleware,node_supabase_middleware,node_app_shell,node_landing toneBlue
class node_auth_routes,node_catalog_detail,node_discovery,node_social,node_admin toneAmber
class node_recommendations,node_simulation,node_shared_ui,node_interactions toneMint
class node_server_adapter,node_browser_adapter,node_supabase,node_schema,node_recommendation_migrations,node_seed toneRose
```

## Components

### Next.js Runtime

- **Session Middleware**: request boundary · Refreshes sessions and makes identity available per request.
- **Supabase Middleware**: auth adapter
- **App Shell**: root layout · Global layout and navigation shell.
- **Landing Route**: App Router page

### Product Surfaces

- **Auth UI & Callback**: auth routes · Login, signup, and OAuth completion routes.
- **Catalog & Anime Detail**: catalog routes · Browse catalog and canonical slug-based title detail.
- **Discovery & Suggestions**: discovery routes · Rankings, Sova discovery, and recommendation suggestions.
- **Profile & Friends**: social routes · User profile and friend interactions.
- **Admin Content Workflow**: admin routes · Administrative content management and creation.

### Shared Domain & UI

- **Recommendation Rules**: domain logic · Centralized ranking and suggestion logic.
- **Simulation State**: client state · Shared client-side state for the simulation experience.
- **Shared Catalog UI**: UI components · Global navigation and reusable anime-card presentation.
- **Interactive UI**: UI components · Uploads, user search, rating feedback, and safe image rendering.

### Supabase & Schema

- **Server Supabase Adapter**: server data adapter · Supabase access for server components and route handlers.
- **Browser Supabase Adapter**: client data adapter · Supabase access for browser-interactive components.
- **Supabase**: auth, database & storage · Durable authentication, relational data, and avatar storage.
- **Schema Baseline**: SQL schema · Relational baseline for application domains.
- **Recommendation Migrations**: SQL migrations · Persists recommendation and suggestion state.
- **Initial Seed Data**: SQL seed

## Connections

- Session Middleware → Supabase Middleware: delegates session handling
- Supabase Middleware → Supabase: refreshes auth session
- App Shell → Landing Route: wraps
- App Shell → Shared Catalog UI: uses navigation
- Auth UI & Callback → Server Supabase Adapter: auth flow
- Catalog & Anime Detail → Server Supabase Adapter: loads catalog data
- Discovery & Suggestions → Recommendation Rules: applies ranking rules
- Discovery & Suggestions → Simulation State: uses client state
- Discovery & Suggestions → Shared Catalog UI: renders cards
- Profile & Friends → Server Supabase Adapter: loads social data
- Admin Content Workflow → Server Supabase Adapter: manages content
- Interactive UI → Browser Supabase Adapter: interactive data access
- Server Supabase Adapter → Supabase: server access
- Browser Supabase Adapter → Supabase: browser access
- Recommendation Rules → Supabase: reads persisted signals
- Schema Baseline → Supabase: defines baseline
- Recommendation Migrations → Supabase: evolves recommendation tables
- Initial Seed Data → Supabase: loads initial data