# tejas-gojariya/take-note architecture

> Architecture diagram of the GitHub repository tejas-gojariya/take-note, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-14). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/tejas-gojariya/take-note
- Repository: https://github.com/tejas-gojariya/take-note

## Overview

1. **Overall shape**
   - This is a single Next.js 14 application organized with the App Router. There is no separate backend service: UI, server-rendered pages, and API endpoints all live in the same repo and deployable unit.

2. **User-facing surfaces**
   - The main routes are split by concern: `app/page.tsx` for the landing page, `app/auth/*` for sign-in/sign-up/reset flows, `app/dashboard/page.tsx` for the note workspace, and `app/settings/page.tsx` for preferences.
   - `app/layout.tsx` and `components/providers/theme-provider.tsx` provide the root app shell and client-side theming.

3. **Feature-oriented component boundaries**
   - Reusable feature components are grouped by domain: `components/auth`, `components/dashboard`, `components/home`, and `components/setting`.
   - `components/ui` contains the shared design-system primitives, mostly shadcn/ui + Radix wrappers, used by higher-level feature components.

4. **Dashboard as the core product area**
   - The dashboard is the main interaction center for notes. It is composed from pieces like `app-sidebar`, `top-bar`, `notes-list`, `note-editor`, `category-select`, `tag-display`, and related-note/collaboration dialogs.
   - This layer is where note editing, organization, filtering, and workspace navigation are assembled into a single screen.

5. **State and client-side orchestration**
   - `hooks/use-notes-store.ts` is the primary client state container for notes and UI state.
   - `hooks/use-ai.ts` wraps AI operations, while `hooks/use-realtime.ts` handles live sync/presence concerns.
   - `hooks/use-mobile.ts` supports responsive behavior in the client UI.

6. **Server API boundary**
   - All backend calls are exposed through route handlers under `app/api/*`.
   - Auth endpoints live in `app/api/auth/*`, user/profile endpoints in `app/api/user/*`, and AI actions in `app/api/ai/*`.
   - This creates a clean boundary: client components call these endpoints, and the route handlers talk to external services or the database.

7. **Authentication and user management**
   - Authentication is backed by Supabase Auth, with dedicated sign-in, sign-up, forgot-password, and sign-out routes plus matching pages/forms.
   - User-specific data such as profile, avatar, and preferences is managed through `app/api/user/*` and persisted in Supabase.

8. **Data layer and persistence**
   - `lib/supabase/client.ts` and `lib/supabase/server.ts` provide the client/server access patterns for Supabase.
   - The persistent domain model appears to center on notes, categories, AI interaction logs, and note collaborators, backed by PostgreSQL with RLS and realtime support.
   - `scripts/create-tables.sql` and `scripts/seed-data.sql` define the database schema and initial data.

9. **AI subsystem**
   - `lib/gemini.ts` is the integration point for Google Gemini.
   - The AI API routes implement the app’s content tools: summarize, rephrase, translate, template generation, smart tag generation, and related-note suggestions.
   - The README indicates AI interactions are logged to the database, making the AI layer both a transformation service and an analytics source.

10. **Realtime collaboration flow**
   - Supabase Realtime is used to propagate note/category changes and collaboration presence across tabs or devices.
   - The collaboration-related UI components and `use-realtime` hook form the client side of this loop, while Supabase provides the pub/sub and persistence backend.

11. **Settings, theme, and personalization**
   - The settings page and `components/setting/settings-page.tsx` handle user preferences such as theme and editor-related options.
   - Theme state is centralized via the provider layer, so visual preferences are applied app-wide rather than locally per component.

12. **Types and shared utilities**
   - `types/index.ts` defines shared TypeScript types used across components, hooks, and API routes.
   - `lib/utils.ts` contains common helpers used throughout the app, keeping presentation and server logic focused on domain behavior.

13. **Operational/deployment boundary**
   - The project is designed to run with environment-provided Supabase and Gemini credentials, and the README targets deployment on Vercel.
   - In architecture terms, the external dependencies that matter are Supabase for auth/data/realtime/storage and Gemini for AI generation; everything else is internal Next.js composition.

Main entry points: [`components/dashboard`](https://github.com/tejas-gojariya/take-note/tree/main/components/dashboard) (Notes editor), [`app/layout.tsx`](https://github.com/tejas-gojariya/take-note/blob/main/app/layout.tsx) (App shell), [`app/api/ai`](https://github.com/tejas-gojariya/take-note/tree/main/app/api/ai) (AI API), [`hooks/use-notes-store.ts`](https://github.com/tejas-gojariya/take-note/blob/main/hooks/use-notes-store.ts) (Notes store)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_grp_app["App Router"]
  node_node_root_layout["App shell<br/>next layout<br/>[layout.tsx]"]
  node_node_home_page["Landing<br/>route page<br/>[page.tsx]"]
  node_node_dashboard_page["Dashboard<br/>route page<br/>[page.tsx]"]
  node_node_settings_page["Settings<br/>route page<br/>[page.tsx]"]
  node_node_auth_pages["Auth pages<br/>route group"]
  node_node_api_auth["Auth API<br/>route handlers"]
  node_node_api_user["User API<br/>route handlers"]
  node_node_api_ai["AI API<br/>route handlers"]
end

subgraph group_grp_components["Components"]
  node_node_theme_provider["Theme provider<br/>client provider<br/>[theme-provider.tsx]"]
  node_node_home_components["Home UI<br/>feature components"]
  node_node_auth_components["Auth forms<br/>feature components"]
  node_node_dashboard_shell["Dashboard shell<br/>workspace UI"]
  node_node_dashboard_editor["Notes editor<br/>workspace UI"]
  node_node_settings_ui["Settings UI<br/>feature components<br/>[settings-page.tsx]"]
  node_node_ui_primitives["UI primitives<br/>design system"]
end

subgraph group_grp_state["Client State"]
  node_node_notes_store["Notes store<br/>client state<br/>[use-notes-store.ts]"]
  node_node_use_ai["AI hook<br/>client state<br/>[use-ai.ts]"]
  node_node_use_realtime["Realtime hook<br/>client state<br/>[use-realtime.ts]"]
  node_node_use_mobile["Mobile hook<br/>client state<br/>[use-mobile.ts]"]
end

subgraph group_grp_data["Data Layer"]
  node_node_supabase[("Supabase<br/>external backend")]
  node_node_gemini{{"Gemini<br/>external ai"}}
  node_node_supabase_client["Supabase client<br/>data access<br/>[client.ts]"]
  node_node_supabase_server["Supabase server<br/>data access<br/>[server.ts]"]
  node_node_gemini_lib["Gemini lib<br/>service adapter<br/>[gemini.ts]"]
  node_node_utils["Utils<br/>shared helpers<br/>[utils.ts]"]
  node_node_types["Shared types<br/>type definitions<br/>[index.ts]"]
end

subgraph group_grp_ops["Ops"]
  node_node_schema["Schema SQL<br/>database schema<br/>[create-tables.sql]"]
  node_node_seed["Seed SQL<br/>database seed<br/>[seed-data.sql]"]
end

node_node_root_layout -->|"wraps"| node_node_theme_provider
node_node_root_layout -->|"renders"| node_node_home_page
node_node_root_layout -->|"renders"| node_node_dashboard_page
node_node_root_layout -->|"renders"| node_node_settings_page
node_node_root_layout -->|"renders"| node_node_auth_pages
node_node_home_page -->|"uses"| node_node_home_components
node_node_auth_pages -->|"uses"| node_node_auth_components
node_node_dashboard_page -->|"assembles"| node_node_dashboard_shell
node_node_dashboard_page -->|"assembles"| node_node_dashboard_editor
node_node_settings_page -->|"uses"| node_node_settings_ui
node_node_dashboard_shell -->|"builds on"| node_node_ui_primitives
node_node_dashboard_editor -->|"builds on"| node_node_ui_primitives
node_node_dashboard_editor -->|"reads/writes"| node_node_notes_store
node_node_dashboard_editor -->|"triggers"| node_node_use_ai
node_node_dashboard_editor -->|"syncs"| node_node_use_realtime
node_node_dashboard_editor -->|"adapts"| node_node_use_mobile
node_node_auth_components -->|"calls"| node_node_api_auth
node_node_settings_ui -->|"calls"| node_node_api_user
node_node_use_ai -->|"calls"| node_node_api_ai
node_node_api_auth -->|"uses"| node_node_supabase_server
node_node_api_user -->|"uses"| node_node_supabase_server
node_node_api_ai -->|"uses"| node_node_gemini_lib
node_node_api_ai -->|"logs"| node_node_supabase_server
node_node_supabase_client -->|"connects to"| node_node_supabase
node_node_supabase_server -->|"connects to"| node_node_supabase
node_node_gemini_lib -->|"connects to"| node_node_gemini
node_node_notes_store -->|"persists"| node_node_supabase_client
node_node_notes_store -->|"subscribes"| node_node_use_realtime
node_node_types -.->|"types"| node_node_notes_store
node_node_types -.->|"types"| node_node_api_ai
node_node_types -.->|"types"| node_node_api_user
node_node_schema -->|"defines"| node_node_supabase
node_node_seed -->|"initializes"| node_node_schema
node_node_utils -.->|"supports"| node_node_dashboard_editor

click node_node_root_layout "https://github.com/tejas-gojariya/take-note/blob/main/app/layout.tsx"
click node_node_home_page "https://github.com/tejas-gojariya/take-note/blob/main/app/page.tsx"
click node_node_dashboard_page "https://github.com/tejas-gojariya/take-note/blob/main/app/dashboard/page.tsx"
click node_node_settings_page "https://github.com/tejas-gojariya/take-note/blob/main/app/settings/page.tsx"
click node_node_auth_pages "https://github.com/tejas-gojariya/take-note/tree/main/app/auth"
click node_node_api_auth "https://github.com/tejas-gojariya/take-note/tree/main/app/api/auth"
click node_node_api_user "https://github.com/tejas-gojariya/take-note/tree/main/app/api/user"
click node_node_api_ai "https://github.com/tejas-gojariya/take-note/tree/main/app/api/ai"
click node_node_theme_provider "https://github.com/tejas-gojariya/take-note/blob/main/components/providers/theme-provider.tsx"
click node_node_home_components "https://github.com/tejas-gojariya/take-note/tree/main/components/home"
click node_node_auth_components "https://github.com/tejas-gojariya/take-note/tree/main/components/auth"
click node_node_dashboard_shell "https://github.com/tejas-gojariya/take-note/blob/main/components/dashboard/dashboard-layout.tsx"
click node_node_dashboard_editor "https://github.com/tejas-gojariya/take-note/tree/main/components/dashboard"
click node_node_settings_ui "https://github.com/tejas-gojariya/take-note/blob/main/components/setting/settings-page.tsx"
click node_node_ui_primitives "https://github.com/tejas-gojariya/take-note/tree/main/components/ui"
click node_node_notes_store "https://github.com/tejas-gojariya/take-note/blob/main/hooks/use-notes-store.ts"
click node_node_use_ai "https://github.com/tejas-gojariya/take-note/blob/main/hooks/use-ai.ts"
click node_node_use_realtime "https://github.com/tejas-gojariya/take-note/blob/main/hooks/use-realtime.ts"
click node_node_use_mobile "https://github.com/tejas-gojariya/take-note/blob/main/hooks/use-mobile.ts"
click node_node_supabase_client "https://github.com/tejas-gojariya/take-note/blob/main/lib/supabase/client.ts"
click node_node_supabase_server "https://github.com/tejas-gojariya/take-note/blob/main/lib/supabase/server.ts"
click node_node_gemini_lib "https://github.com/tejas-gojariya/take-note/blob/main/lib/gemini.ts"
click node_node_utils "https://github.com/tejas-gojariya/take-note/blob/main/lib/utils.ts"
click node_node_types "https://github.com/tejas-gojariya/take-note/blob/main/types/index.ts"
click node_node_schema "https://github.com/tejas-gojariya/take-note/blob/main/scripts/create-tables.sql"
click node_node_seed "https://github.com/tejas-gojariya/take-note/blob/main/scripts/seed-data.sql"

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_node_root_layout,node_node_home_page,node_node_dashboard_page,node_node_settings_page,node_node_auth_pages,node_node_api_auth,node_node_api_user,node_node_api_ai toneBlue
class node_node_theme_provider,node_node_home_components,node_node_auth_components,node_node_dashboard_shell,node_node_dashboard_editor,node_node_settings_ui,node_node_ui_primitives toneAmber
class node_node_notes_store,node_node_use_ai,node_node_use_realtime,node_node_use_mobile toneMint
class node_node_supabase,node_node_gemini,node_node_supabase_client,node_node_supabase_server,node_node_gemini_lib,node_node_utils,node_node_types toneRose
class node_node_schema,node_node_seed toneIndigo
```

## Components

### App Router

Next.js routes, pages, and API handlers

- [App shell](https://github.com/tejas-gojariya/take-note/blob/main/app/layout.tsx): next layout · Root document shell and global app composition · `app/layout.tsx`
- [Landing](https://github.com/tejas-gojariya/take-note/blob/main/app/page.tsx): route page · Public home page · `app/page.tsx`
- [Dashboard](https://github.com/tejas-gojariya/take-note/blob/main/app/dashboard/page.tsx): route page · Main notes workspace route · `app/dashboard/page.tsx`
- [Settings](https://github.com/tejas-gojariya/take-note/blob/main/app/settings/page.tsx): route page · User preferences route · `app/settings/page.tsx`
- [Auth pages](https://github.com/tejas-gojariya/take-note/tree/main/app/auth): route group · Sign-in, sign-up, and password reset screens · `app/auth`
- [Auth API](https://github.com/tejas-gojariya/take-note/tree/main/app/api/auth): route handlers · Sign-in, sign-up, sign-out, and reset endpoints · `app/api/auth`
- [User API](https://github.com/tejas-gojariya/take-note/tree/main/app/api/user): route handlers · Profile, avatar, and preferences endpoints · `app/api/user`
- [AI API](https://github.com/tejas-gojariya/take-note/tree/main/app/api/ai): route handlers · Summarize, rephrase, translate, templates, tags, and related notes · `app/api/ai`

### Components

Reusable UI and feature assemblies

- [Theme provider](https://github.com/tejas-gojariya/take-note/blob/main/components/providers/theme-provider.tsx): client provider · App-wide theme state and persistence · `components/providers/theme-provider.tsx`
- [Home UI](https://github.com/tejas-gojariya/take-note/tree/main/components/home): feature components · Landing page presentation components · `components/home`
- [Auth forms](https://github.com/tejas-gojariya/take-note/tree/main/components/auth): feature components · Sign-in, sign-up, and forgot-password forms · `components/auth`
- [Dashboard shell](https://github.com/tejas-gojariya/take-note/blob/main/components/dashboard/dashboard-layout.tsx): workspace UI · Sidebar, top bar, and overall dashboard layout · `components/dashboard/dashboard-layout.tsx`
- [Notes editor](https://github.com/tejas-gojariya/take-note/tree/main/components/dashboard): workspace UI · Notes list, editor, categories, tags, and related-note interactions · `components/dashboard`
- [Settings UI](https://github.com/tejas-gojariya/take-note/blob/main/components/setting/settings-page.tsx): feature components · Settings page composition and preference controls · `components/setting/settings-page.tsx`
- [UI primitives](https://github.com/tejas-gojariya/take-note/tree/main/components/ui): design system · Shared shadcn/Radix component wrappers · `components/ui`

### Client State

Hooks that orchestrate notes, AI, realtime, and responsiveness

- [Notes store](https://github.com/tejas-gojariya/take-note/blob/main/hooks/use-notes-store.ts): client state · Primary local state for notes and workspace UI · `hooks/use-notes-store.ts`
- [AI hook](https://github.com/tejas-gojariya/take-note/blob/main/hooks/use-ai.ts): client state · Client wrapper for AI actions · `hooks/use-ai.ts`
- [Realtime hook](https://github.com/tejas-gojariya/take-note/blob/main/hooks/use-realtime.ts): client state · Live sync and presence orchestration · `hooks/use-realtime.ts`
- [Mobile hook](https://github.com/tejas-gojariya/take-note/blob/main/hooks/use-mobile.ts): client state · Responsive behavior helper · `hooks/use-mobile.ts`

### Data Layer

Supabase, Gemini, shared utilities, and types

- **Supabase**: external backend · Auth, database, realtime, and persistence platform
- **Gemini**: external ai · Content generation and transformation service
- [Supabase client](https://github.com/tejas-gojariya/take-note/blob/main/lib/supabase/client.ts): data access · Browser-side Supabase access wrapper · `lib/supabase/client.ts`
- [Supabase server](https://github.com/tejas-gojariya/take-note/blob/main/lib/supabase/server.ts): data access · Server-side Supabase access wrapper · `lib/supabase/server.ts`
- [Gemini lib](https://github.com/tejas-gojariya/take-note/blob/main/lib/gemini.ts): service adapter · Integration entry point for AI calls · `lib/gemini.ts`
- [Utils](https://github.com/tejas-gojariya/take-note/blob/main/lib/utils.ts): shared helpers · Common utility functions · `lib/utils.ts`
- [Shared types](https://github.com/tejas-gojariya/take-note/blob/main/types/index.ts): type definitions · Cross-cutting TypeScript domain types · `types/index.ts`

### Ops

Database schema and seed scripts

- [Schema SQL](https://github.com/tejas-gojariya/take-note/blob/main/scripts/create-tables.sql): database schema · Table creation and migration-style SQL · `scripts/create-tables.sql`
- [Seed SQL](https://github.com/tejas-gojariya/take-note/blob/main/scripts/seed-data.sql): database seed · Initial data for local setup · `scripts/seed-data.sql`

## Connections

- App shell → Theme provider: wraps · Root shell installs global theming
- App shell → Landing: renders · Public landing route is composed in the app shell
- App shell → Dashboard: renders · Dashboard route is mounted in the app shell
- App shell → Settings: renders · Settings route is mounted in the app shell
- App shell → Auth pages: renders · Auth routes are mounted in the app shell
- Landing → Home UI: uses · Landing page delegates presentation to home components
- Auth pages → Auth forms: uses · Auth routes render shared auth forms
- Dashboard → Dashboard shell: assembles · Dashboard route composes workspace chrome
- Dashboard → Notes editor: assembles · Dashboard route composes the note workspace
- Settings → Settings UI: uses · Settings route renders preference controls
- Dashboard shell → UI primitives: builds on · Workspace chrome is built from shared UI primitives
- Notes editor → UI primitives: builds on · Editor, dialogs, and controls use shared primitives
- Notes editor → Notes store: reads/writes · Dashboard workspace is driven by the notes store
- Notes editor → AI hook: triggers · Workspace actions call AI operations through the hook
- Notes editor → Realtime hook: syncs · Workspace listens to realtime updates and presence
- Notes editor → Mobile hook: adapts · Workspace adjusts behavior for smaller screens
- Auth forms → Auth API: calls · Forms submit to auth route handlers
- Settings UI → User API: calls · Preferences and profile updates go through user endpoints
- AI hook → AI API: calls · AI hook invokes the AI route handlers
- Auth API → Supabase server: uses · Auth handlers authenticate through server Supabase access
- User API → Supabase server: uses · User handlers persist profile and preferences through Supabase
- AI API → Gemini lib: uses · AI handlers delegate to the Gemini adapter
- AI API → Supabase server: logs · AI handlers record interactions in the database
- Supabase client → Supabase: connects to · Client-side data access targets Supabase
- Supabase server → Supabase: connects to · Server-side data access targets Supabase
- Gemini lib → Gemini: connects to · Gemini adapter calls the external AI service
- Notes store → Supabase client: persists · Local note state is backed by client Supabase access
- Notes store → Realtime hook: subscribes · Store reacts to live sync events
- Shared types → Notes store: types · Shared domain shapes constrain client state
- Shared types → AI API: types · Shared types are reused by AI endpoints
- Shared types → User API: types · Shared types are reused by user endpoints
- Schema SQL → Supabase: defines · SQL defines the persistent Supabase-backed schema
- Seed SQL → Schema SQL: initializes · Seed data populates the created tables
- Utils → Notes editor: supports · Shared helpers are used across workspace components