How I Built a Personal Ops Dashboard with Next.js, Supabase, and AI

Offline sync is handled by a custom useOfflineSync hook that queues mutations in IndexedDB and replays them on reconnect. It's the kind of feature that's invisible when it works — and was the hardest to get right.

Work: Todos, Calendar, Subscriptions#

Todo tracks tasks with due dates, priorities, and categories. Overdue items surface in the tab badge. Calendar gives a monthly view of scheduled items across configurable timezones. Subscriptions is a lightweight financial tracker — cost per subscription, monthly vs annual, running total at a glance.

Site: Messages, Blog, Subscribers, Analytics#

Centralizes the inbound side: contact form submissions, newsletter subscribers, and analytics. The Blog tab lets me write and publish posts — including this one — without opening a separate CMS.

Technical Decisions#

Next.js App Router#

The dashboard uses the App Router with a deliberate split between server and client components. The initial page load is a server component that fetches the user's full data set from Supabase using the service role client — no loading spinners on first render, no client-side data fetching waterfalls.

Mutations go through server actions: form submissions, note updates, todo toggles, blog publishes. This eliminates an entire layer of API route boilerplate and keeps the data layer co-located with the components that use it.

Supabase for Auth, DB, and Storage#

Supabase handles authentication (email/password, session management), the primary PostgreSQL database, and file storage for note images and blog assets.

Row-Level Security is the core of the auth model. Every table enforces read/write policies at the database layer — not in application code. Even if a server action has a bug, the DB won't return data it shouldn't. This is the right place to enforce authorization.

Types are generated directly from the database schema via the Supabase CLI and imported throughout the app. A schema change immediately surfaces as a TypeScript error in consuming code — not a runtime crash in production.

Multi-Tenant Architecture#

The same codebase that powers this dashboard is the foundation for the ExpertSapiens platform — a multi-tenant directory with 7 live tenant sites (expertsapiens.com, airlinkee.com, mrvisakorea.com, seoultranslate.com, and others). Tenant context is resolved from the request hostname at the middleware layer and flows through the app as a typed config object. Adding a new tenant requires a config entry, not a new codebase or deployment.

This is the architecture pattern I use across all new projects now — single codebase, environment-resolved tenant, shared DB with RLS-based data isolation.

TypeScript End-to-End#

Everything is typed: server actions, API routes, component props, Supabase query results. The discipline pays off most in refactors — rename a column in the DB, regenerate types, and every usage that's now broken is highlighted immediately.

What I Would Do Differently#

Split the dashboard shell earlier — the main component grew past 6,000 lines. It works, but feature-level module splits from the start would make it far easier to navigate.

Service worker for offline sync — the current IndexedDB-based approach works well but a service worker with background sync would handle more edge cases, especially on flaky mobile connections.

Time-series store for analytics — basic Supabase queries are fine for low-traffic dashboards. For anything richer, a dedicated time-series store (Tinybird, ClickHouse) would be worth it.

What This Demonstrates#

A production-quality private dashboard requires the same skill set as any client-facing SaaS: real-time data, auth, background jobs, file uploads, offline resilience, and clean UI. The difference is that the only user is me, which means faster iteration and more opinionated decisions.

If you're looking for a developer who can take a project from blank repo to production — Next.js App Router, Supabase backend, TypeScript throughout, AI integrations, multi-tenant architecture — I'd be glad to talk.

Get in touch →