How sbktckp/ekam-finance works
1. High-level shape
- This is a Next.js 15 App Router application with a clear split between public auth screens and a protected finance dashboard.
- The backend is not a separate service in this repo; Supabase provides authentication, database, and row-level security.
2. Route organization
- The app/(auth) route group contains the public entry points: login and signup.
- The app/(dashboard) route group contains the authenticated product areas: dashboard home, transactions, budget, investments, goals, bills, reports, and settings.
- app/layout.tsx is the global shell, while app/(auth)/layout.tsx and app/(dashboard)/layout.tsx likely apply different page chrome for auth vs. application use.
3. Authentication flow
- Auth pages live at app/(auth)/login and app/(auth)/signup.
- app/auth/callback/route.ts handles the Supabase auth redirect/callback step after sign-in.
- middleware.ts is the guardrail that typically enforces session-based access to protected dashboard routes and keeps unauthenticated users out of the finance workspace.
4. Dashboard composition
- The dashboard area is divided into domain pages under app/(dashboard)/dashboard/....
- Some sections have dedicated view components such as transactions-view.tsx, budget-view.tsx, goals-view.tsx, investments-view.tsx, and bills-view.tsx, which suggests a pattern where the route file is thin and the screen logic lives in reusable page-level views.
- app/(dashboard)/dashboard/page.tsx acts as the dashboard landing page, while reports and settings are separate areas with simpler page entrypoints.
5. Server-side business actions
- app/actions/ contains the main domain mutation/query layer, split by resource: accounts, transactions, budgets, goals, investments, and bills.
- These are likely Next.js Server Actions that encapsulate database interaction and form handling, keeping data writes close to the server boundary.
- This creates a clean separation: UI components trigger actions; actions talk to Supabase; Supabase persists and authorizes the data.
6. Supabase integration boundary
- lib/supabase/client.ts is the browser/client-side Supabase entrypoint.
- lib/supabase/server.ts is the server-side Supabase entrypoint used by actions, routes, and server-rendered code.
- This separation matters architecturally because authentication/session handling and database access are split between client and server execution contexts.
7. Domain UI building blocks
- components/modals/ contains user-driven creation flows such as Add Account and Add Transaction.
- components/shared/ contains app-wide chrome and identity elements like the sidebar and logo.
- These shared components are the structural layer around the dashboard, while the route-specific views provide the finance module content.
8. Data model and types
- types/database.ts strongly suggests a generated Supabase schema type, which ties the frontend and actions to the actual PostgreSQL schema.
- types/index.ts likely collects higher-level app types used across modules.
- Together, these types enforce consistency between UI, server actions, and the database layer.
9. Styling and presentation
- Styling is handled with Tailwind CSS v3, backed by app/globals.css and tailwind.config.ts.
- The app uses a mostly component-driven UI model where pages assemble shared layout, module views, and modal interactions.
10. Operational/runtime details
- next.config.ts, postcss.config.mjs, and tsconfig.json indicate a standard Next.js build pipeline with TypeScript strictness.
- public/manifest.json suggests PWA-ish metadata or installability support, but it is not the core architecture.
- The README states deployment targets Vercel, which aligns with Next.js server rendering, route handlers, and server actions.
11. Conceptual data flow
- A user enters through login/signup, completes Supabase auth, and returns via the callback route.
- Middleware and protected layouts then expose the dashboard.
- Dashboard views render finance data by reading from Supabase, while modals and forms trigger server actions to create or update records.
- Supabase RLS is the final authorization boundary on persisted financial data.
12. What to show in an architecture diagram
- Draw three main zones: public auth, protected dashboard UI, and Supabase backend.
- Place middleware between browser requests and protected routes.
- Show server actions as the bridge from UI to Supabase.
- Represent shared shell components and route-group layouts as the presentation layer around all dashboard modules.
Main entry points: layout.tsx Dashboard layout · actions Server actions · transactions/page.tsx Transactions · budget/page.tsx Budget
Components 25
Public auth
Login and signup entrypoints plus auth callback handling.
- Landing · Top-level entry page for the site.
app/page.tsx - Auth layout · Presentation shell for public authentication screens.
app/(auth)/layout.tsx - Login · Public sign-in screen.
app/(auth)/login/page.tsx - Signup · Public account creation screen.
app/(auth)/signup/page.tsx - Auth callback · Supabase redirect callback after authentication.
app/auth/callback/route.ts
Protected dashboard
Authenticated finance workspace and its domain pages.
- Dashboard layout · Protected workspace shell for authenticated finance pages.
app/(dashboard)/layout.tsx - Dashboard home · Main landing page for the finance workspace.
app/(dashboard)/dashboard/page.tsx - Transactions · Transaction list and interaction screen.
app/(dashboard)/dashboard/transactions/page.tsx - Budget · Budget management screen.
app/(dashboard)/dashboard/budget/page.tsx - Goals · Financial goals screen.
app/(dashboard)/dashboard/goals/page.tsx - Investments · Investment tracking screen.
app/(dashboard)/dashboard/investments/page.tsx - Bills · Bills and recurring payments screen.
app/(dashboard)/dashboard/bills/page.tsx - Reports · Reporting and analytics entrypoint.
app/(dashboard)/dashboard/reports/page.tsx - Settings · Application settings entrypoint.
app/(dashboard)/dashboard/settings/page.tsx
Data and backend
Server actions, Supabase integration, and shared domain types.
- Server actions · Next.js server actions for domain reads and writes.
app/actions - Client Supabase · Browser-side Supabase entrypoint.
lib/supabase/client.ts - Server Supabase · Server-side Supabase entrypoint for actions and routes.
lib/supabase/server.ts - Database types · Generated Supabase database schema typings.
types/database.ts - App types · Cross-cutting application type definitions.
types/index.ts - Middleware · Session guard and route protection boundary.
middleware.ts
Shared UI
Reusable chrome and modal components used across the app.
- Sidebar · Primary navigation shell for the dashboard.
components/shared/sidebar.tsx - Logo · App identity and branding element.
components/shared/logo.tsx - Add account · Flow for creating a new account.
components/modals/add-account-modal.tsx - Add transaction · Flow for creating a new transaction.
components/modals/add-transaction-modal.tsx
Other components
- App shell · Global App Router shell and route entrypoint coordination.
app/layout.tsx
Connections 37
- App shell → Landing: routes to · Top-level app entrypoint.
- App shell → Auth layout: wraps · Applies shared auth-route shell.
- App shell → Dashboard layout: wraps · Applies protected workspace shell.
- Auth layout → Login: contains · Public login screen.
- Auth layout → Signup: contains · Public signup screen.
- Login → Auth callback: auth return · Authentication redirect completes here.
- Signup → Auth callback: auth return · Authentication redirect completes here.
- Middleware → Dashboard layout: protects · Prevents unauthenticated access to workspace routes.
- Dashboard layout → Sidebar: uses · Dashboard navigation chrome.
- Dashboard layout → Logo: uses · Brand element in app shell.
- Dashboard layout → Dashboard home: contains · Workspace landing page.
- Dashboard layout → Transactions: contains · Finance module screen.
- Dashboard layout → Budget: contains · Finance module screen.
- Dashboard layout → Goals: contains · Finance module screen.
- Dashboard layout → Investments: contains · Finance module screen.
- Dashboard layout → Bills: contains · Finance module screen.
- Dashboard layout → Reports: contains · Analytics entrypoint.
- Dashboard layout → Settings: contains · Settings entrypoint.
- Dashboard home → Add account: opens · Account creation flow from dashboard.
- Transactions → Add transaction: opens · Transaction creation flow.
- Transactions → Transactions: renders · Dedicated view component supports the page.
- Budget → Budget: renders · Dedicated view component supports the page.
- Goals → Goals: renders · Dedicated view component supports the page.
- Investments → Investments: renders · Dedicated view component supports the page.
- Bills → Bills: renders · Dedicated view component supports the page.
- Dashboard home → Server actions: reads/writes · Dashboard data operations go through server actions.
- Transactions → Server actions: reads/writes · Transaction operations go through server actions.
- Budget → Server actions: reads/writes · Budget operations go through server actions.
- Goals → Server actions: reads/writes · Goals operations go through server actions.
- Investments → Server actions: reads/writes · Investment operations go through server actions.
- Bills → Server actions: reads/writes · Bills operations go through server actions.
- Server actions → Server Supabase: uses · Server-side database and auth access.
- Auth callback → Server Supabase: uses · Completes auth flow on the server.
- Server Supabase → Database types: typed by · Database schema typings guide server access.
- Client Supabase → App types: typed by · Client code shares app-level types.
- Server actions → App types: typed by · Actions share application types.
- Server actions → Client Supabase: may use · Client-facing auth or session helpers as needed.