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
GitHub Repository: 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!
Top comments (0)