# thefunnyday/doubleyou architecture

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

- Interactive diagram: https://gitdiagram.com/thefunnyday/doubleyou
- Repository: https://github.com/thefunnyday/doubleyou

## Overview

#### Purpose and runtime
DoubleYou is an archived Nuxt 3 microblogging application: authenticated users publish short posts with images and interact through a social feed. It runs as a Nuxt client/server application locally or in production, with Supabase providing the database, authentication, and likely realtime/storage-backed features. Global styling is SCSS.

Key entry points: `app.vue`, `nuxt.config.ts`, and `pages/index.vue`.

#### Application shell and shared UI
`app.vue` establishes the Nuxt application shell. Shared layout-level UI is split into reusable header, navigation, loading, modal, and image-viewing components:
- `components/Header.vue`
- `components/Menu/left.vue`
- `components/Menu/right.vue`
- `components/Loading.vue`
- `components/ModalPopup.vue`
- `components/ViewImage.vue`

Responsive navigation has a dedicated mobile variant at `components/Menu/mobile.vue`.

#### Route-driven feature surfaces
Nuxt file routes define the primary product surfaces:
- Main feed: `pages/index.vue`
- Individual post view: `pages/post/[postId].vue`
- Public profile view: `pages/user/[userNickname].vue`
- Authentication: `pages/login.vue`
- Account preferences and user-list views: `pages/settings.vue`, `pages/userlists.vue`
- Informational and monetization pages: `pages/about.vue`, `pages/premium.vue`

Dynamic route parameters form the boundary between browser navigation and resource-specific post/profile retrieval.

#### Authentication boundary
Supabase Auth is the identity provider. `middleware/auth.ts` is the route-access control point, protecting pages that require a session and redirecting unauthenticated users as appropriate. The auth UI is isolated in `components/Auth/Page.vue`, while `pages/login.vue` exposes it as a route-level entry point.

Control flow is: route navigation → auth middleware/session check → page rendering → Supabase-authenticated data operations.

#### Social content flow
The feed and post-detail routes are the core content pipeline. Users create/read microblog posts from the feed, navigate to records by `postId`, and access authors by nickname. README-declared likes, comments, image attachments, and realtime feed behavior are UI/data concerns centered on:
- `pages/index.vue`
- `pages/post/[postId].vue`
- `pages/user/[userNickname].vue`
- `components/ViewImage.vue`

Supabase is the external persistence and realtime boundary; browser UI should not own authoritative post, interaction, or identity state.

#### Administrative and secondary flows
An administrative surface exists at `pages/admin/index.vue`, separate from normal user routes and likely requiring stronger authorization than baseline authentication. Additional standalone pages include `pages/test.vue` and `pages/about.vue`; they are not core feed-path entry points.

#### Client presentation and assets
Global visual rules live in `assets/styles/global.scss`. Client-only theme behavior is initialized through `plugins/theme.client.js`, making theme state/browser APIs explicitly client-bound. Static media is served from `public`, notably `public/about-video.mp4` and premium assets under `public/premium`.

Main entry points: [`app.vue`](https://github.com/thefunnyday/doubleyou/blob/main/app.vue) (Nuxt application), [`pages/index.vue`](https://github.com/thefunnyday/doubleyou/blob/main/pages/index.vue) (Main feed), [`middleware/auth.ts`](https://github.com/thefunnyday/doubleyou/blob/main/middleware/auth.ts) (Route auth guard), [`components/Menu/mobile.vue`](https://github.com/thefunnyday/doubleyou/blob/main/components/Menu/mobile.vue) (Responsive navigation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["App shell"]
  node_nuxt{{"Nuxt application<br/>runtime<br/>[app.vue]"}}
  node_shared_ui["Shared UI<br/>components<br/>[Header.vue]"]
  node_navigation["Responsive navigation<br/>components<br/>[mobile.vue]"]
  node_theme["Client theme<br/>Nuxt plugin<br/>[theme.client.js]"]
  node_styles["Global styles<br/>SCSS<br/>[global.scss]"]
end

subgraph group_routes["Product routes"]
  node_feed["Main feed<br/>Nuxt page<br/>[index.vue]"]
  node_post_detail["Post detail<br/>dynamic Nuxt page<br/>[&#91;postId&#93;.vue]"]
  node_profile["Public profile<br/>dynamic Nuxt page<br/>[&#91;userNickname&#93;.vue]"]
  node_account["Account surfaces<br/>Nuxt pages<br/>[settings.vue]"]
  node_admin["Administration<br/>Nuxt page<br/>[index.vue]"]
end

subgraph group_auth["Authentication"]
  node_login["Login route<br/>Nuxt page<br/>[login.vue]"]
  node_auth_ui["Auth UI<br/>[Page.vue]"]
  node_auth_guard{{"Route auth guard<br/>Nuxt middleware<br/>[auth.ts]"}}
end

subgraph group_platform["Platform services"]
  node_supabase[("Supabase<br/>external backend")]
  node_static_media["Static media<br/>public assets<br/>[about-video.mp4]"]
end

node_nuxt -->|"renders"| node_shared_ui
node_nuxt -->|"renders"| node_navigation
node_nuxt -->|"initializes"| node_theme
node_nuxt -->|"applies"| node_styles
node_nuxt -->|"routes to"| node_feed
node_navigation -->|"navigates to"| node_feed
node_feed -->|"opens postId"| node_post_detail
node_feed -->|"opens author"| node_profile
node_feed -->|"uses image viewer"| node_shared_ui
node_feed -->|"reads and publishes content"| node_supabase
node_post_detail -->|"retrieves post and interactions"| node_supabase
node_profile -->|"retrieves profile content"| node_supabase
node_account -->|"manages account data"| node_supabase
node_login -->|"hosts"| node_auth_ui
node_auth_ui -->|"authenticates with"| node_supabase
node_auth_guard -->|"checks session"| node_supabase
node_auth_guard -.->|"protects"| node_account
node_auth_guard -.->|"gates access"| node_admin
node_admin -->|"performs admin operations"| node_supabase
node_nuxt -->|"serves"| node_static_media

click node_nuxt "https://github.com/thefunnyday/doubleyou/blob/main/app.vue"
click node_shared_ui "https://github.com/thefunnyday/doubleyou/blob/main/components/Header.vue"
click node_navigation "https://github.com/thefunnyday/doubleyou/blob/main/components/Menu/mobile.vue"
click node_theme "https://github.com/thefunnyday/doubleyou/blob/main/plugins/theme.client.js"
click node_styles "https://github.com/thefunnyday/doubleyou/blob/main/assets/styles/global.scss"
click node_feed "https://github.com/thefunnyday/doubleyou/blob/main/pages/index.vue"
click node_post_detail "https://github.com/thefunnyday/doubleyou/blob/main/pages/post/%5BpostId%5D.vue"
click node_profile "https://github.com/thefunnyday/doubleyou/blob/main/pages/user/%5BuserNickname%5D.vue"
click node_account "https://github.com/thefunnyday/doubleyou/blob/main/pages/settings.vue"
click node_admin "https://github.com/thefunnyday/doubleyou/blob/main/pages/admin/index.vue"
click node_login "https://github.com/thefunnyday/doubleyou/blob/main/pages/login.vue"
click node_auth_ui "https://github.com/thefunnyday/doubleyou/blob/main/components/Auth/Page.vue"
click node_auth_guard "https://github.com/thefunnyday/doubleyou/blob/main/middleware/auth.ts"
click node_static_media "https://github.com/thefunnyday/doubleyou/blob/main/public/about-video.mp4"

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_nuxt,node_shared_ui,node_navigation,node_theme,node_styles toneBlue
class node_feed,node_post_detail,node_profile,node_account,node_admin toneAmber
class node_login,node_auth_ui,node_auth_guard toneMint
class node_supabase,node_static_media toneRose
```

## Components

### App shell

- [Nuxt application](https://github.com/thefunnyday/doubleyou/blob/main/app.vue): runtime · Client/server application runtime. · `app.vue`
- [Shared UI](https://github.com/thefunnyday/doubleyou/blob/main/components/Header.vue): components · Header, loading, modal, and image-viewing UI. · `components/Header.vue`
- [Responsive navigation](https://github.com/thefunnyday/doubleyou/blob/main/components/Menu/mobile.vue): components · Desktop and mobile menu variants. · `components/Menu/mobile.vue`
- [Client theme](https://github.com/thefunnyday/doubleyou/blob/main/plugins/theme.client.js): Nuxt plugin · Browser-only theme initialization. · `plugins/theme.client.js`
- [Global styles](https://github.com/thefunnyday/doubleyou/blob/main/assets/styles/global.scss): SCSS · `assets/styles/global.scss`

### Product routes

- [Main feed](https://github.com/thefunnyday/doubleyou/blob/main/pages/index.vue): Nuxt page · Core post creation and feed interaction surface. · `pages/index.vue`
- [Post detail](https://github.com/thefunnyday/doubleyou/blob/main/pages/post/%5BpostId%5D.vue): dynamic Nuxt page · Retrieves a post by postId. · `pages/post/[postId].vue`
- [Public profile](https://github.com/thefunnyday/doubleyou/blob/main/pages/user/%5BuserNickname%5D.vue): dynamic Nuxt page · Retrieves an author by nickname. · `pages/user/[userNickname].vue`
- [Account surfaces](https://github.com/thefunnyday/doubleyou/blob/main/pages/settings.vue): Nuxt pages · Settings and user-list views. · `pages/settings.vue`
- [Administration](https://github.com/thefunnyday/doubleyou/blob/main/pages/admin/index.vue): Nuxt page · Separate administrative surface. · `pages/admin/index.vue`

### Authentication

- [Login route](https://github.com/thefunnyday/doubleyou/blob/main/pages/login.vue): Nuxt page · `pages/login.vue`
- [Auth UI](https://github.com/thefunnyday/doubleyou/blob/main/components/Auth/Page.vue): Authentication form and flow UI. · `components/Auth/Page.vue`
- [Route auth guard](https://github.com/thefunnyday/doubleyou/blob/main/middleware/auth.ts): Nuxt middleware · Checks sessions and redirects unauthenticated users. · `middleware/auth.ts`

### Platform services

- **Supabase**: external backend · Authoritative auth, persistence, realtime, and storage boundary.
- [Static media](https://github.com/thefunnyday/doubleyou/blob/main/public/about-video.mp4): public assets · About video and premium media. · `public/about-video.mp4`

## Connections

- Nuxt application → Shared UI: renders
- Nuxt application → Responsive navigation: renders
- Nuxt application → Client theme: initializes
- Nuxt application → Global styles: applies
- Nuxt application → Main feed: routes to
- Responsive navigation → Main feed: navigates to
- Main feed → Post detail: opens postId
- Main feed → Public profile: opens author
- Main feed → Shared UI: uses image viewer
- Main feed → Supabase: reads and publishes content
- Post detail → Supabase: retrieves post and interactions
- Public profile → Supabase: retrieves profile content
- Account surfaces → Supabase: manages account data
- Login route → Auth UI: hosts
- Auth UI → Supabase: authenticates with
- Route auth guard → Supabase: checks session
- Route auth guard → Account surfaces: protects
- Route auth guard → Administration: gates access
- Administration → Supabase: performs admin operations
- Nuxt application → Static media: serves