The NanoLog Deep Dive: Engineering a Frictionless SaaS Engine

Post 02: Architectural Choices & The Infrastructure Moat

In my previous post, I introduced the “Vibe Coding” philosophy behind NanoLog, a 3-in-1 engagement suite. Today, we’re peeling back the layers of the tech stack. When you are building a tool meant to be embedded in other people’s production environments, “good enough” doesn’t cut it. Your code has to be invisible, performant, and hyper-secure.

Here is the breakdown of why I chose this specific 2026 stack.

1. The Core Stack: Framework, Database & ORM

• Next.js 15 (App Router) & React 19: I leveraged React Server Components (RSC) to ensure the NanoLog dashboard loads instantly with zero client-side JS overhead for initial data fetching. Server Actions provide a type-safe bridge for feedback management without the cognitive load of maintaining a separate REST API.
• PostgreSQL (Hosted on Supabase): Multi-tenancy is the heart of SaaS. Postgres provides the relational integrity needed for complex org structures while allowing us to use JSON querying for custom cohort rule evaluations.
• Drizzle ORM (with postgres.js): I moved away from heavy ORMs. Drizzle acts as a thin TypeScript wrapper that fits perfectly in serverless environments like Vercel, providing zero cold-start overhead. Crucially, I use postgres.js configured for PgBouncer connection pooling to ensure the API handles traffic spikes without melting.
• TypeScript 5 & ESNext: End-to-end type safety from the Drizzle schema to the React components ensures that a database change never breaks the UI silently.

The interactive Kanban roadmap planner built using Next.js 15 Server Actions and Postgres/Drizzle ORM.

2. Widget Architecture: Performance & Styling Isolation

The biggest challenge with 3rd-party widgets is “leakage.” Most widgets break your site’s styles. NanoLog doesn’t.

• Vite & Terser Compilation: The widget.min.js is compiled in a completely separate pipeline from the main app. This keeps the bundle under 20KB gzipped, ensuring zero impact on the host’s Core Web Vitals.
• Web Components & Shadow DOM: By using attachShadow({ mode: 'open' }), we ensure NanoLog’s styles are mathematically isolated. Host CSS cannot bleed in, and our internal Tailwind v4 styles cannot leak out.
• Tailwind CSS v4: Using the new Rust-based compiler engine, we get lightning-fast utility-first styling even inside the isolated Shadow DOM.
• Motion: Hardware-accelerated micro-animations provide that “premium” feel that distinguishes a utility from a product.

Configuring custom styling parameters for the embeddable NanoLog widget without style leakages.

3. The Security & AI Engine: Server-side PII Image Redaction

Handling user screenshots is a GDPR nightmare. To solve this, I designed a multi-stage PII Redaction Pipeline that processes images in-memory so unredacted data never touches persistent storage.

Stage	Technology	Objective
Ingestion	Next.js Server Action	Receive raw image buffer into transient memory.
Recognition & Analysis	Custom layout & OCR scan	Map text coordinates across the image dynamically.
Analysis & Extraction	Transformers.js (BERT-NER)	Identify sensitive entities (Names, emails, keys) using local AI.
Redaction	Sharp (libvips)	Burn solid black SVG rectangles into the pixel data.
Storage	S3 / Supabase Storage	Save only the redacted, “safe” version of the file.

By utilizing Sharp, we leverage high-performance C++ image processing to ensure the redaction is permanent and computationally efficient.

4. Authentication, Services & Infrastructure

• Better Auth (SSO Plugin): Manages multi-tenant invitations and Role-Based Access Control (RBAC) natively with our Drizzle schema.
• Upstash Redis: We use @upstash/ratelimit at the edge to protect public endpoints (like roadmap upvoting) from spam without hitting the main database.
• Resend & MJML: Clean, developer-friendly email dispatching with programmatically generated responsive templates.

The team access panel powered by Better Auth, enabling SSO invitations and role management.

5. Development & Testing

• Playwright & Jest: Unit tests aren’t enough. We use Playwright for E2E testing to simulate how the widget behaves on various host sites, checking for CORS issues and visual regressions across browser engines.

The Summary Hook: I chose this stack to build an all-in-one product updates platform that is lightweight enough to run anywhere, styling-safe enough not to break a customer’s app, and secure enough—thanks to on-the-fly local AI redaction—to trust with enterprise user screenshots.

See you in the next post, where we dive into Privacy Engineering.

---

Authored by Aaron Harpermayo on June 6, 2026.