Title: How I Built ZenPlan: A Premium AI Habit Tracker with Next.js, Vercel OIDC, and Amazon DynamoDB

A developer built ZenPlan, a premium AI habit tracker using Next.js 16, Vercel OIDC, and Amazon DynamoDB for the Hack the Zero Stack with Vercel v0 and AWS Databases Hackathon. The app features a glassmorphic UI, an AI coach, and analytics, with engineering challenges including edge caching and single-table DynamoDB design. The developer resolved caching issues by forcing dynamic routing and adding cache-control headers, and optimized performance with a single DynamoDB table structure.

I built this for the Hack the Zero Stack with Vercel v0 and AWS Databases Hackathon. Here's the thing—building a habit tracker sounds easy until you actually start building it. Check off a box, increment a counter, save it. Done, right? Wrong. If you want it to feel premium, look polished, and actually work without lag or weird edge-caching bugs, it gets complicated fast. So I decided to build ZenPlan—a dark, glassmorphic habit tracker and routine planner that actually feels like a real app. I deployed it serverless on Vercel, hooked it up to Amazon DynamoDB, and ran into some genuinely interesting engineering problems. Let me walk you through how I built it. What's ZenPlan Actually Do? I didn't want just another boring checklist. The whole point was to make it feel alive and interactive. When you check off a habit, it triggers this CSS particle animation that actually feels good. I also built an AI Coach you can chat with—like, actually useful. If the coach suggests something morning meditation, whatever , it renders an "Add to Dashboard" button right in the chat and writes it straight to your database. No copy-paste, no manual entry. On top of that, there's an analytics section showing your streaks, a checkout modal where you can simulate upgrading to Pro, and even an interactive architecture diagram showing how data actually flows through the system in real-time. For the tech stack, I went with Next.js 16 App Router , Tailwind CSS, and Framer Motion on the frontend, backed by Amazon DynamoDB. The Security Thing: Vercel OIDC + AWS IAM Technical Deep Dive 2: Tackling Edge Caching & State Persistence During deployment on Vercel, I noticed that upgrading or cancelling a subscription plan would occasionally show outdated badges on the navbar due to Edge caching. I'd click upgrade, Vercel would execute it successfully, but the UI badge wouldn't update until a hard browser refresh. To fix this, we forced dynamic routing on the API and injected explicit Cache-Control header directives into src/app/api/profile/route.ts: import { NextResponse } from 'next/server'; import { db, isDynamoConfigured } from '@/lib/db'; export const dynamic = 'force-dynamic'; export async function GET { try { const profile = await db.getProfile ; return NextResponse.json { ...profile, dbMode: isDynamoConfigured ? 'Amazon DynamoDB' : 'Local File Simulator', }, { headers: { 'Cache-Control': 'no-store, max-age=0, must-revalidate', }, } ; } catch error { console.error 'API GET profile error:', error ; return NextResponse.json { error: 'Failed to fetch profile' }, { status: 500 } ; } } Alongside this server-side configuration, client-side fetches were updated with cache-busting search parameters: const response = await fetch /api/profile?t=${Date.now } , { cache: 'no-store' } ; This double-layered solution ensures state modifications e.g., ticking off a habit or upgrading a subscription reflect instantly without reloading or facing stale client mismatches. Technical Deep Dive 3: Single-Table DynamoDB Mode For maximum performance and cost optimization, we structured profiles and habits in a single DynamoDB table. When DYNAMODB TABLE NAME is configured, the application appends partition keys PK and sort keys SK : Profile Key: PK: PROFILE default-user | SK: PROFILE Habit Key: PK: HABIT | SK: HABIT Doing index scans on these partition and sort keys allowed us to fetch all dashboard dependencies in index scans, resulting in blazing fast loads. What I Learned OIDC is the Future: Passwordless integrations make serverless deploys safer and easier to maintain. Edge Cache Busting: When compiling React Server Components and Edge Route handlers, you must be extremely explicit about cache control header policies to keep client views synchronized. Links Live Demo: https://zenplan-six.vercel.app https://zenplan-six.vercel.app GitHub Repository: https://github.com/divinefavour1234567/zenplan https://github.com/divinefavour1234567/zenplan Thank you to Vercel and AWS for hosting this amazing Hackathon If you liked ZenPlan, please drop a star on the repo