HOMEPROJECTSZIKRON

ZIKRON

Personal knowledge management app

Category
SaaS - B2C consumer productivity app in the personal knowledge management space
Type
B2C SaaS
Role
Full-stack developer - architecture, database design, backend API, and frontend
VISIT LIVE
01
OVERVIEW

Zikron is a cloud personal-knowledge platform that replaces the scattered habit of saving things in WhatsApp self-chat, Drive, screenshots, and bookmarks with one place to capture, organize, link, search, remember, and share everything that matters. A single quick-capture flow drops text and links into an inbox; items become notes, list entries, self-chat messages, calendar events, or contacts, and every object can be tagged, linked to related objects, versioned, scheduled, and shared through tracked public/protected/private links. A separate admin console oversees every account. Each user gets a fully isolated workspace; the product is structured for a later free/premium split.

02
ARCHITECTURE

MULTI-TENANCY & ISOLATION

A user / admin role model across three route-group-scoped areas: (public) for landing/login, (protected)/app for the user workspace, (admin)/admin for the admin console. PostgreSQL Row-Level Security enforces per-user isolation at the database; the Express API independently re-checks the Supabase JWT and role in middleware (requireAuth, requireAdmin), so isolation never depends on client code.

TWO-APP MONOREPO

apps/web (Next.js frontend, port 3000) and apps/api (Express + TypeScript backend, port 4000), with ~60 ordered SQL migrations under supabase/migrations/ and a single canonical schema in docs/supabase-schema.sql. Backend is layered route → controller → service → middleware.

STATE, DATA & DELIVERY

TanStack Query for server-state caching and optimistic updates; an in-memory pub/sub bus plus a page-state item cache for zero-latency dialog opens; Supabase Auth (email/password + Google OAuth). node-cron drives reminder dispatch, web-push sends browser notifications, Resend handles transactional email, and Google People API powers contact import.

03
KEY MODULES

Capture, Inbox & Self Chat

Frictionless text/link capture with an inbox triage flow (inbox / favorites / archived) and a chat-style personal message stream, both searchable.

Notes & Lists

Full CRUD notes with markdown rendering, favorite/archive, and a masonry grid; structured lists with reorderable items.

Reminders

Scheduled reminders with browser push notifications delivered via web-push + node-cron, including delivery state tracking.

Collections

User-defined groupings that span every module, so one collection can hold notes, links, contacts, and list items together.

Contacts

A rich contact schema with multiple emails/phones/addresses, CSV import, and Google Contacts import via OAuth + People API.

Sharing

Per-item public / protected (auth-required) / private links, native share and copy-link, tracked link views, and an authenticated shared-item preview that opens the object in its home module.

Knowledge Linking & Graph

Bidirectional links between any two objects, surfaced as an interactive, pannable knowledge graph built on React Flow.

Calendar & Timeline

FullCalendar-based month/week/day/list views over scheduled fields, milestones, and a chronological timeline of dated knowledge.

Version History & Activity Timeline

Automatic version snapshots with restore, plus a per-user activity feed of every create/edit/delete.

04
HIGHLIGHTS
  • Enforced tenant isolation at the database with Row-Level Security and re-verified it in API middleware, so a single-codebase multi-tenant app never trusts the client for access control.
  • Designed a linking layer and universal tag system that every module inherits, making “connect anything to anything” and “tag anything” work the same way across notes, contacts, lists, and events.
  • Turned dated content from every module into one calendar and timeline view driven by shared scheduled fields.
  • Built capture-to-organize as a pipeline (quick capture → inbox triage → typed object → tagged/linked/collected/shared) rather than isolated CRUD screens.
  • Added automatic version history with restore and a full activity timeline so knowledge edits are auditable and reversible.

FULL STACK

Next.js 16React 19TypeScriptTailwind CSS v4shadcn/ui + Radix/Base UIFramer MotionTanStack QueryExpress 4Node.jsSupabasePostgreSQLRow-Level SecurityFullCalendarReact Flow (@xyflow/react)web-pushnode-cronResendGoogle People APIreact-markdowncmdk