I forgot a domain was auto-renewing. So I built a dashboa...

I do a bunch of small things on the side. I wrote a website for a friend's thesis, took on a couple of commissioned full-stack jobs, and I have one actual side hustle that's trying to make money. None of them live on the same stack. I keep picking whichever provider has the most generous free tier for that specific thing.

The thesis site is on Firebase, the commissioned stuff is on another host, the side hustle is split across three providers. Different free plans, different dashboards, different emails. Last month I noticed a domain auto-renewing for a project I'd completely forgotten about. That was the moment I gave up trying to remember any of this in my head, or trying to keep it up in a Notion that I would never update.

So I built StackMemo. One board for every project, with connectors that hit the providers' APIs so the cost and KPI numbers update on their own.

This post is about a few of the design decisions that turned out to matter and it is written for anyone considering building something similar, or just curious how a small Next.js + Postgres app actually fits together when there are a lot of moving pieces.

The stack

Next.js 16 (App Router) + TypeScript + Tailwind v4
Postgres on Neon, raw pg (no ORM - I want to see the SQL)
NextAuth v5 (credentials, GitHub, Google)
Stripe billing for the paid tiers
In-process cron via Next.js instrumentation.ts

1. The connector registry

Every provider (GitHub, Stripe, Neon, Cloudflare, Koyeb today) implements the same interface and gets registered once. Adding a new provider is one new file plus one line in the registry.

// lib/connectors/types.ts
export type ConnectorImpl = {
  provider: ConnectorProvider;
  displayName: string;
  iconPath?: string;
  authType: "api_key" | "token" | "oauth";
  credentialsSchema: CredentialsSchema;
  setupGuide?: SetupGuide;
  kpiCatalog: KpiDefinition[];
  listResources(creds: ConnectorCredentials): Promise<ResourceOption[]>;
  sync(args: SyncArgs): Promise<SyncResult>;
};

// lib/connectors/index.ts
const registry: Partial<Record<ConnectorProvider, ConnectorImpl>> = {
  github,
  stripe,
  neon,
  cloudflare,
  koyeb,
};

export function getAllProviderMetadata(): ProviderMetadata[] { ... }

The kpiCatalog is the bit that matters. Each connector declares which metrics it can fetch (github.stars, stripe.mrr, cloudflare.requests_24h...) and the user picks which ones they want active per project. Sync only fetches enabled KPIs, which keeps the API budget tight.

The interface intentionally returns SyncResult { kpis, warnings } instead of throwing on partial failure. Real-world APIs return 403 on plan-restricted endpoints all the time; treating that as a hard failure means a single locked-down KPI breaks the entire sync.

The marketing landing page reads from this same registry, so when I add a new connector, the chip shows up on the homepage marquee automatically, no second list to keep in sync.

2. Edge-safe auth split (Next.js 16 + NextAuth v5)

NextAuth v5 wants you to put your auth config in the Edge runtime so middleware can use it. But the full config wants the Postgres adapter and bcrypt for credentials login, neither of which work in Edge.

The fix is to split into two files:

// lib/auth.config.ts — Edge-safe (no pg, no bcrypt)
export default {
  providers: [GitHub({...}), Google({...})],
  pages: { signIn: "/login" },
  callbacks: { authorized: ({ auth }) => !!auth?.user },
} satisfies NextAuthConfig;

// lib/auth.ts — Node runtime (full version)
export const { handlers, auth, signIn, signOut } = NextAuth({
  ...authConfig,
  adapter: PostgresAdapter(pool),
  providers: [...authConfig.providers, Credentials({...})],
});

Middleware imports the Edge-safe config. Everything else imports the full one. This is the kind of footgun that's obvious in retrospect but eats half a day if you don't know about it.

3. Route groups for marketing vs app chrome

The first version had a single app/layout.tsx with the user header baked in. When I added the marketing landing page, that header showed up at the top of it, wrong vibe (the landing has its own nav). The fix was Next.js route groups:

app/
  layout.tsx              <- html/body/fonts only
  (marketing)/
    layout.tsx            <- marketing nav + footer
    page.tsx              <- /
    pricing/page.tsx      <- /pricing
  (app)/
    layout.tsx            <- app header with auth state
    dashboard/page.tsx    <- /dashboard
    projects/[id]/...

URLs are unchanged and route groups are invisible to the router. Each group gets its own chrome. The marketing pages don't import auth code at all, which means an unauthenticated visitor never hits a database query just to load the landing page.

I also had to update the middleware matcher so it only protects actual app routes -> leaving /, /login, /signup, and the public share URLs (/p/[slug]) reachable without auth.

4. Encrypted credentials at rest

Connectors store API keys. Storing them in plaintext is a non-starter; KMS is overkill for a side project. I went with pgcrypto and a key in env:

// lib/crypto.ts
export function encryptCred(plaintext: string): Buffer {
  // pgp_sym_encrypt(plaintext, CONNECTOR_CRED_KEY)
}
export function decryptCred(ciphertext: Buffer): string { ... }

The key is intentionally separate from AUTH_SECRET, rotating one shouldn't invalidate the other. Generated once with openssl rand -base64 32.

5. In-process cron, no separate worker

The hourly KPI sync runs inside the same Node process as the web server. No separate worker, no managed cron service.

// instrumentation.ts (Next.js calls this once per worker on startup)
export async function register() {
  if (process.env.NEXT_RUNTIME === "nodejs") {
    const { startCron } = await import("@/lib/cron");
    startCron();
  }
}

Trade-off: scaling beyond one Node instance means the cron fires N times. For a side-project tracker that's a non-issue (the work is idempotent overwriting a KPI value with the same number is a no-op). For something with heavier per-tick work I'd extract it.

What I'd want to add

I have five connectors today (GitHub, Stripe, Neon, Cloudflare, Koyeb). Next on the list: Vercel, Plausible, Supabase, Resend, Netlify.

If you've ever lost track of a side-project subscription, what services would you most want a connector for? I'd rather hear suggestions than signups right now.

Live demo + free tier: StackMemo, drop a reaction on this article if you found it useful !

推荐订阅源

DEV Community