<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: PageCalm</title>
    <description>The latest articles on DEV Community by PageCalm (@pagecalm).</description>
    <link>https://dev.to/pagecalm</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3853808%2Fbdd2661f-a849-4eaa-8093-5085eb03e1ae.png</url>
      <title>DEV Community: PageCalm</title>
      <link>https://dev.to/pagecalm</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/pagecalm"/>
    <language>en</language>
    <item>
      <title>How I Built an AI Status Page Tool in a Week (and What I Learned)</title>
      <dc:creator>PageCalm</dc:creator>
      <pubDate>Fri, 03 Apr 2026 16:09:54 +0000</pubDate>
      <link>https://dev.to/pagecalm/how-i-built-an-ai-status-page-tool-in-a-week-and-what-i-learned-4na9</link>
      <guid>https://dev.to/pagecalm/how-i-built-an-ai-status-page-tool-in-a-week-and-what-i-learned-4na9</guid>
      <description>&lt;p&gt;I just launched &lt;a href="https://pagecalm.com" rel="noopener noreferrer"&gt;PageCalm&lt;/a&gt;, a status page tool where AI writes your customer-facing incident updates. I went from idea to live product in about a week, and I wanted to share what that looked like — the decisions, the stack, and the lessons.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Problem
&lt;/h3&gt;

&lt;p&gt;If you've ever been on-call during an outage, you know the drill. Your monitoring is screaming. You're SSH'd into three things. And then someone in Slack asks: &lt;em&gt;"Can you update the status page?"&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Now you have to stop debugging, switch your brain to "professional communicator" mode, and write something like:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;We're currently experiencing elevated response times affecting our API. Our engineering team has identified the root cause and is actively working on a fix.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;...while your brain is actually thinking: &lt;em&gt;"The connection pool is maxed out and I'm about to restart the primary."&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Every status page tool I looked at gives you a blank text box for this moment. I thought AI could do better.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Solution
&lt;/h3&gt;

&lt;p&gt;PageCalm is a status page tool where you paste a monitoring alert or just describe what's happening, and AI generates a professional customer-facing update. You review it, edit if needed, and publish. Subscribers get notified via email automatically.&lt;/p&gt;

&lt;p&gt;Here's the flow:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Raw alert comes in&lt;/strong&gt; — &lt;code&gt;CRITICAL: PostgreSQL connection pool exhausted. Active connections: 500/500. Queue depth: 847.&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;AI generates&lt;/strong&gt; — "We're currently experiencing elevated response times and timeouts affecting our API. Our engineering team identified the root cause and is actively working on a fix."&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;You review and publish&lt;/strong&gt; — subscribers get an email, status page updates live.&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  The Stack
&lt;/h3&gt;

&lt;p&gt;I wanted to ship fast and keep costs low:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Next.js&lt;/strong&gt; (App Router) — full-stack in one repo&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Supabase&lt;/strong&gt; — auth, database, RLS policies. Their free tier is generous.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;OpenAI (GPT-4o-mini)&lt;/strong&gt; — fast, cheap, and good enough for incident comms&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Stripe&lt;/strong&gt; — billing with checkout + customer portal&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Resend&lt;/strong&gt; — transactional email (subscriber notifications, auth emails)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Vercel&lt;/strong&gt; — hosting with automatic deployments from GitHub&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Cloudflare&lt;/strong&gt; — DNS + subdomain routing via Workers&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Total monthly cost at zero users: essentially $0 (all free tiers). Domain was $10/year.&lt;/p&gt;

&lt;h3&gt;
  
  
  What I Actually Built
&lt;/h3&gt;

&lt;p&gt;The core features:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Status pages&lt;/strong&gt; with custom subdomains (yourapp.pagecalm.com), component tracking, light/dark themes&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;AI incident writer&lt;/strong&gt; — paste an alert, get a customer update. Phase-aware prompts that adapt to whether you're investigating, identified, monitoring, or resolved.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Full incident lifecycle&lt;/strong&gt; — create, update, resolve. Components auto-update status based on active incidents.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Scheduled maintenance&lt;/strong&gt; — announce planned downtime with start/end times. Distinct blue banner on the public page so users know it's planned, not broken.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;90-day uptime history&lt;/strong&gt; — per-component bar chart on every public status page. Color-coded daily status with hover tooltips. Industry-standard visual that makes the page look complete.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Subscriber notifications&lt;/strong&gt; — double opt-in confirmation, automatic notifications on incidents, one-click unsubscribe&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Custom domains (Pro)&lt;/strong&gt; — point your own domain at your status page. Vercel handles SSL automatically.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Admin dashboard&lt;/strong&gt; — blog management (DB-backed, no redeploys for new posts), user management, revenue metrics&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Billing&lt;/strong&gt; — Free tier with limits, Pro at $29/mo via Stripe&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Decisions I'd Make Again
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Supabase for auth + database.&lt;/strong&gt; Row-level security means I barely wrote any authorization code. The auth system just works, and their new SMTP integration let me send branded emails through Resend instead of generic "Powered by Supabase" ones.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;GPT-4o-mini over GPT-4o.&lt;/strong&gt; For incident communications, the mini model is fast and accurate. The quality difference doesn't justify 10x the cost for this use case.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Cutting features aggressively.&lt;/strong&gt; I had postmortem generation, internal notes, component descriptions, and a team tier in the original spec. I cut all of them before launch. Every one of them can be added later. None of them were needed for a v1 that proves the concept. Some features I thought were "later" problems — like custom domains and scheduled maintenance — turned out to matter sooner than expected and got built in the first week of iteration.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Building with AI assistance.&lt;/strong&gt; I built the entire thing with heavy AI assistance — no team, just me and an AI coding agent. It's wild how fast you can move when you're not context-switching between Stack Overflow tabs. That said, you still have to review everything carefully. AI will confidently generate code that works but is structured poorly, or worse, subtly wrong. The speed gain is real but it's not free.&lt;/p&gt;

&lt;h3&gt;
  
  
  Decisions I'd Reconsider
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Next.js App Router.&lt;/strong&gt; It works, but the mental model around server components vs. client components, and when env vars are inlined vs. read at runtime, tripped me up more than once. For a simple SaaS like this, Pages Router or even a separate API + SPA might have been simpler.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Free tier limits.&lt;/strong&gt; I originally launched with 5 AI generations per month on free, which was too tight for someone evaluating the product. Bumped it to 10 — enough to get through a couple of real incidents and see the value before deciding to upgrade.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;No analytics from day one.&lt;/strong&gt; I launched with zero visibility into traffic. The privacy policy even said "we don't use analytics." I've since added Vercel Web Analytics (privacy-respecting, no cookies), but I spent the first few days completely blind to whether anyone was even visiting. Should have had this from the start.&lt;/p&gt;

&lt;h3&gt;
  
  
  Security Things I'm Glad I Caught
&lt;/h3&gt;

&lt;p&gt;Before launch, I did a thorough security review — and I've kept doing them as the codebase grows. Here's what I've caught across multiple passes:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Public status page was using the service role key (full DB access) instead of the anon key&lt;/li&gt;
&lt;li&gt;Security tokens using predictable values. Switched to cryptographically random tokens.&lt;/li&gt;
&lt;li&gt;No CSRF protection on mutations. Added origin checking in middleware.&lt;/li&gt;
&lt;li&gt;No rate limiting on public endpoints. Added limits on subscriber signup, waitlist, and AI generation.&lt;/li&gt;
&lt;li&gt;API error responses were leaking internal details. Added generic error messages for production.&lt;/li&gt;
&lt;li&gt;User-generated content rendering without proper sanitization. Added HTML sanitization on output.&lt;/li&gt;
&lt;li&gt;State-changing actions triggered by GET requests. Switched to POST with confirmation steps.&lt;/li&gt;
&lt;li&gt;No Content-Security-Policy headers. Added CSP, X-Frame-Options, and other security headers.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you're building a SaaS, don't treat security as a one-time pre-launch checklist. Make it a habit. Every feature you add is a new surface to review.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Numbers
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Build time:&lt;/strong&gt; ~1 week (evenings and weekends)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Launch cost:&lt;/strong&gt; ~$32 (domain registration + first month of paid services)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Lines of code:&lt;/strong&gt; ~12,000 (TypeScript, excluding config and generated files)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Revenue so far:&lt;/strong&gt; $0 (just launched)&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  What's Next
&lt;/h3&gt;

&lt;p&gt;Gathering feedback, watching how people use it, and deciding what to build next. Top of the roadmap:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Inbound webhook / API&lt;/strong&gt; — monitoring tools send alerts, PageCalm auto-creates a draft incident with an AI-generated update ready to review&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Slack / Discord notifications&lt;/strong&gt; — push incident updates to team channels alongside email&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Team tier&lt;/strong&gt; — multi-user support with role-based access&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you're interested, check it out at &lt;a href="https://pagecalm.com" rel="noopener noreferrer"&gt;pagecalm.com&lt;/a&gt;. Free tier is genuinely free — no credit card, no trial expiration.&lt;/p&gt;

&lt;p&gt;Happy to answer questions about the build, the stack, or the decisions. What's your experience with AI-assisted development — has it changed how you approach side projects?&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>saas</category>
      <category>nextjs</category>
      <category>ai</category>
    </item>
  </channel>
</rss>
