How tejas-gojariya/take-note works
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: dashboard Notes editor · layout.tsx App shell · ai AI API · use-notes-store.ts Notes store
Components 28
App Router
Next.js routes, pages, and API handlers
- App shell · Root document shell and global app composition
app/layout.tsx - Landing · Public home page
app/page.tsx - Dashboard · Main notes workspace route
app/dashboard/page.tsx - Settings · User preferences route
app/settings/page.tsx - Auth pages · Sign-in, sign-up, and password reset screens
app/auth - Auth API · Sign-in, sign-up, sign-out, and reset endpoints
app/api/auth - User API · Profile, avatar, and preferences endpoints
app/api/user - AI API · Summarize, rephrase, translate, templates, tags, and related notes
app/api/ai
Components
Reusable UI and feature assemblies
- Theme provider · App-wide theme state and persistence
components/providers/theme-provider.tsx - Home UI · Landing page presentation components
components/home - Auth forms · Sign-in, sign-up, and forgot-password forms
components/auth - Dashboard shell · Sidebar, top bar, and overall dashboard layout
components/dashboard/dashboard-layout.tsx - Notes editor · Notes list, editor, categories, tags, and related-note interactions
components/dashboard - Settings UI · Settings page composition and preference controls
components/setting/settings-page.tsx - UI primitives · Shared shadcn/Radix component wrappers
components/ui
Client State
Hooks that orchestrate notes, AI, realtime, and responsiveness
- Notes store · Primary local state for notes and workspace UI
hooks/use-notes-store.ts - AI hook · Client wrapper for AI actions
hooks/use-ai.ts - Realtime hook · Live sync and presence orchestration
hooks/use-realtime.ts - Mobile hook · Responsive behavior helper
hooks/use-mobile.ts
Data Layer
Supabase, Gemini, shared utilities, and types
- Supabase · Auth, database, realtime, and persistence platform
- Gemini · Content generation and transformation service
- Supabase client · Browser-side Supabase access wrapper
lib/supabase/client.ts - Supabase server · Server-side Supabase access wrapper
lib/supabase/server.ts - Gemini lib · Integration entry point for AI calls
lib/gemini.ts - Utils · Common utility functions
lib/utils.ts - Shared types · Cross-cutting TypeScript domain types
types/index.ts
Ops
Database schema and seed scripts
- Schema SQL · Table creation and migration-style SQL
scripts/create-tables.sql - Seed SQL · Initial data for local setup
scripts/seed-data.sql
Connections 34
- 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