This is a submission for Weekend Challenge: Passion Edition
What I Built
I'm getting married later this year, and planning the wedding has made me realize something: I still haven't found a wedding planner app that fits how I actually plan.
I've tried several apps, downloaded templates, and spent hours comparing different Google Sheets and Excel planners shared by other brides. Every one of them had something I liked, but none had everything I needed. I found myself jumping between spreadsheets for budgets, notes, guest lists, supplier contacts, and checklists—and it quickly became overwhelming.
As a software developer, I eventually thought, why not build the planner I've been looking for?
That's how Passion Planner started.
Passion Planner is a full-featured wedding planning dashboard that brings every part of wedding planning into one place. Instead of juggling multiple spreadsheets, apps, and group chats, couples can manage everything from a single dashboard that's personalized to their wedding style.
I also wanted it to feel personal. Weddings aren't just projects—they're milestones. That's why the app lets couples customize colors to match their motif, switch themes, and even use AI to make planning easier—from estimating a realistic budget to brainstorming wedding hashtags and generating a reception program flow.
Core Features
- 💒 Wedding Details — store your date, venue, ceremony time, motif colors, and theme
- 💰 Budget Tracker — categorize expenses, compare estimated vs. actual costs, and visualize spending with a pie chart
- 🤖 AI Budget Estimator — enter your wedding details, guest count, and preferences to receive an AI-generated budget breakdown that helps couples start planning with realistic estimates.
- 💳 Payments Tracker — record down payments, succeeding payments, and final balances for each supplier
- 🏪 Suppliers — manage vendors, contact information, booking status, and notes
- 👥 Guest List & RSVP — add guests, assign invitation slots, send personalized RSVP emails through EmailJS, and track responses
- 🎟️ QR Code RSVP — generate and download unique QR codes for every guest that link directly to their RSVP page
- 🪑 Seating Arrangement — organize guests into tables and manage seating layouts
- 🎵 Processional Order — drag-and-drop processional lineup with a printable view
- 🎤 AI Program Flow Generator — instantly generate a customizable wedding reception timeline and program flow that can be edited to fit your celebration.
- 🏷️ AI Wedding Hashtag Generator — generate creative and personalized hashtag ideas based on the couple's names.
- ✅ Checklist — categorized tasks with due dates, overdue reminders, and progress tracking
- 🎨 Themes & Dark Mode — choose from seven preset themes or automatically use your wedding motif colors throughout the app
- 🌍 Currency & Location Settings — budgets and payments automatically adapt to your selected currency (16 supported)
- 📸 Media & Branding (coming soon) — wedding logo, gallery, digital invitations, QR menus, and gift registry
This started as a personal solution for my own wedding, but as I kept adding features I realized it could help other couples too. My goal is to replace the collection of spreadsheets, templates, and planning apps with one beautiful, practical dashboard that makes wedding planning a little less stressful.
Demo
đź”— Live App: https://passion-planner-fawn.vercel.app/
Register a free account to explore all features. No credit card required.
Code
Getting Started with Create React App
This project was bootstrapped with Create React App.
Available Scripts
In the project directory, you can run:
npm start
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
npm test
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
npm run build
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
npm run eject
Note: this is a one-way operation. Once you eject, you can't go back!
If you…
How I Built It
Tech Stack
| Layer | Technology |
|---|---|
| Frontend | React 19 + TypeScript |
| Styling | Tailwind CSS v3 with CSS custom properties |
| Backend | Firebase Firestore (real-time sync) |
| Auth | Firebase Authentication |
| EmailJS (client-side, no backend needed) | |
| Hosting | Vercel |
Architecture Decisions
Single Firestore document per user
Rather than complex collections, most data (budget, guests, checklist, etc.) is stored as a single JSON document per user per feature—simple, fast reads, and easy to reason about.
Client-side RSVP tokens
To avoid needing the Firebase Blaze plan (which requires billing for outbound HTTP), RSVP tokens are generated entirely client-side using crypto.getRandomValues() and written to a public Firestore collection. EmailJS handles delivery, requiring no backend.
Runtime theming with CSS variables + Tailwind
Colors are defined as CSS custom properties in rgb(R G B) format so Tailwind's opacity utilities (bg-brand-primary/10) continue working at runtime when users switch themes. The .dark class on <html> toggles a full palette override.
Currency-aware formatting everywhere
A useCurrency() hook reads the user's saved currency from Firestore and returns an Intl.NumberFormat-backed fmt() function used across the Budget, Payments, and Dashboard pages—so switching from ₱ to $ to € just works.
AI-assisted planning
Rather than only tracking wedding information, I wanted the app to actively help couples make planning decisions. AI is used to estimate wedding budgets, generate personalized hashtag ideas, and create reception program flows, reducing the time spent searching online for inspiration while keeping everything editable.
Interesting Challenges
-
QR Code sharing — used
qrcode.reactwith a canvasrefto call.toDataURL()for downloads, plus the Web Share API for native mobile sharing with clipboard fallback. -
Printable pages — Tailwind's
print:hiddenandprint:blockutilities made the Processional and Checklist pages print-friendly without maintaining a separate print stylesheet. - Drag-to-reorder — implemented native HTML5 drag-and-drop for Budget categories and Processional entries without any third-party libraries.
Prize Categories
Best Use of Google AI
Top comments (0)