Case Study · 2026

Qabl Dashboard — a private, magazine-grade planning app for modern weddings.

Most wedding software is split into two camps — ugly project trackers, or pretty invitation sites. Qabl is the dashboard that does both: editorial typography, swappable themes, and live views of spend, RSVPs, vendors, and timeline — all behind a private link, scoped to one couple.

Role
Product Designer & Developer
Timeline
2026
Stack
React · Babel (in-browser) · Vercel
Status
In Development
Private Wedding Dashboard
Ali & Sarah
Nikkah · Mehndi · Shaadi
142
Days
06
Hrs
21
Min
48
Sec
Budget
$48,200 / 60k
Vendors
11 / 14 confirmed
RSVPs
186 / 240
Built for my own wedding

I'm getting married. The first thing I did after the engagement was open a spreadsheet, and the second thing I did was close it. Wedding planning tools come in two flavors — project-tracker apps that look like industrial software, and invitation websites that are beautifully designed but can't track a single dollar.

I wanted a third option: a private dashboard that looks like the wedding it's planning. Editorial. Warm. Quiet. Something I'd actually want to open every morning, not just when something's overdue.

So I built Qabl — a one-couple-per-instance dashboard that sits behind a private link, themed to match the couple's aesthetic, and powerful enough to be the only tool we use until the day of.

Multi-event weddings don't fit generic planners

A modern wedding often isn't one event — it's a sequence of ceremonies and celebrations spread across days. Whether it's a rehearsal dinner, ceremony, and reception, or a longer multi-day arc with a Nikkah, Mehndi, and Shaadi, each event carries its own guest list, vendor lineup, run-of-show, and budget.

Generic planners model "the wedding" as a single object. That breaks immediately when you have a vendor booked for two of the three events, a guest invited to one of them, and a budget line that needs to split across all three. The tools either over-flatten everything (Notion templates) or over-formalize it (enterprise PM software).

The data model needs to be multi-event by default. The visual language needs to feel like a wedding lookbook, not a Jira board.

Eight screens, one couple, one private link

Qabl is a single-page React app with eight screens, each scoped to one couple's data file. There's no signup, no team accounts, no permissions matrix — just a private URL that the couple (and whoever they share it with) opens.

📊
Overview & Budget
Live countdown to Nikkah, KPI strip (budget, vendors, RSVPs, health), and a per-category spend log with inline editing and on-track / over-budget badges.
Tasks & Timeline
Tasks grouped by event (Nikkah / Mehndi / Shaadi) with priority, assignee, and due date. Full run-of-show timeline with timings, people, and tags — the day-of script.
🎟️
Guests & Vendors
Per-event RSVP donuts (confirmed / pending / declined), guest counts that respect overlap, and a vendor view with contract status, amounts, and next milestone per row.
📓
Notes & Settings
Shared notepad for inspiration, vendor follow-ups, and to-think-abouts. Settings panel exposes the entire theme system — theme, accent, serif, density, ornament, palette.
Five knobs, one dashboard, infinite weddings

The headline craft: every visual decision is exposed as a setting, so each couple's dashboard ends up looking distinctly theirs. Switch the theme and the entire app re-renders — new palette, new serif, new ornaments — without a reload.

🎨
3 themes
Atelier — warm parchment + terracotta. Vogue — black rail + antiqued gold. Bazaar — marigold + peacock teal. Each ships its own tokens.
📜
4 serifs
Cormorant, Playfair, Libre Caslon, Fraunces. Swappable via one data-serif attribute on <html>.
🌈
Accents & palettes
Five accent colors (terracotta, gold, rose, peacock, ink) and four event palettes for Nikkah / Mehndi / Shaadi badges. Pick once, applied everywhere.
📐
Density & ornament
Compact, Luxe, or Grand spacing. Decorative corners, top rule, or bare. Same data, different formality — same dashboard, three different moods.
Edit a file, refresh the tab. That's the toolchain.

The whole app ships as static HTML. React, ReactDOM, and Babel Standalone load from CDN; every screen is a <script type="text/babel"> compiled in the browser on page load. There is no npm install, no bundler, no dev server.

Zero build step
React 18 + Babel 7 from CDN. Open the HTML file directly — the whole dashboard runs. No node_modules, no toolchain to break.
📁
One file per couple
All wedding data — events, people, budget, tasks, guests, vendors, timeline, notes — lives in weddings/{couple}.jsx.
🔀
Multi-tenant by switch
Onboard a new couple by dropping a new .jsx file and pointing active.jsx at it. The whole UI re-renders for them.
🚀
Ships as static files
Vercel rewrites / to the dashboard HTML. No server, no database — couple data is the source of truth.
A small product surface, deliberately
8
Screens — overview, budget, tasks, guests, vendors, timeline, notes, settings
3
Themes, each with its own tokens, palette, and typeface
1
Data file per couple — the entire wedding lives in one .jsx
0
Build step. No bundler, no install, no toolchain
Boring on purpose

The constraint was: any future couple onboarding to this template should be able to open the data file in any text editor, change a name, and see the dashboard update on refresh. That ruled out frameworks. Everything below is reachable from a CDN.

React 18 Babel Standalone CDN modules CSS variables Vercel localStorage Static HTML
A dashboard template, not a SaaS

Each weddings/{couple}.jsx file is the seed of a productized template. The end state isn't a multi-tenant SaaS — it's a private repo a wedding planner buys, fills with their client's data, and deploys to a private Vercel link as a deliverable.

That model fits the audience. Couples paying for a planner already trust them with everything; what they want is a beautiful, single-link source of truth they can show family. The planner gets a high-margin add-on; the couple gets a dashboard that looks like the wedding they're planning.

In development
Currently building this for my own wedding. A productized template for planners is the next step.