How I Fought the "Content Bottleneck" with a Pragmatic Stack (Prisma, Redis & React)

#webdev #programming #saas #productivity

Part 1: "The Pain"

It's Friday, 4:00 PM. You're finally in the zone, refactoring a complex piece of logic. Then, the ticket comes in: "Urgent! Need to change the text on the promo banner by 5:00 PM."

It's that ticket. The one that kills your flow. The one that takes 5 minutes of work but costs an hour of productivity.

This "content bottleneck" problem was driving me crazy. Instead of writing another quick script, I decided to build a proper, scalable solution from the ground up.

Part 2: "The Core" (Admin Panel First)

I knew I needed a reliable admin panel before I even thought about a landing page. This was a tool, not a brochure.

My main architectural problem was simple: how do I let a marketer update content (a write to Postgres) and have that change instantly reflect for thousands of users (a read from an API) without killing the database?

The "Source of Truth" (Prisma + Postgres): I chose Prisma to manage my Postgres DB. Its schema-first approach gave me full type safety for my notification model. It was reliable, clean, and fast. This became my "source of truth."
The "Delivery Mechanism" (Express + Redis Cache-on-Demand): But constantly hitting Postgres for every user's page load is inefficient.

I implemented a pragmatic read-through (cache-on-demand) workflow on Express, using Redis.

Logic: The API first checks Redis. If it's a cache miss, it hits Postgres (via Prisma), caches the data, and then returns it.

Invalidation: When the marketer hits "Publish" in the admin panel, I simply invalidate (clear) the relevant key in Redis. The very next API request automatically refreshes the cache.

The result: blazing-fast notification delivery that doesn't overload the main database.

The Admin UI Itself (Vite + MUI + Tiptap): For the admin panel UI, the stack was straightforward: Vite + React for instant HMR, MUI for a professional UI without the CSS headache, and Tiptap as a lightweight WYSIWYG editor to give non-technical users basic formatting.

Part 3: "The Shop Window" (The Landing Page Last)

Only after the core product (the admin panel and the cached API) was working did I think about the "shop window."

Here, I didn't need a heavy SPA. I needed a fast, static-first (SSG) site that would index well on Google. Next.js is the king of this. And Tailwind CSS let me build a custom, clean design that didn't just look like my standard MUI admin panel.

Funnily enough, the development process mirrored the product's philosophy: the core "Head" (Vite/Prisma/Redis) was built completely separate from its "Presentation" (Next.js/Tailwind).