Nightmare Before Wedding

Turning seating chaos into a joyful, AI-powered experience. We make seating the most fun part of wedding planning.

Comment

Inspiration

The inspiration for "Nightmare Before Wedding" stems from the universally acknowledged stress of wedding planning, particularly the intricate and often overwhelming task of seating arrangements. Traditional methods, relying on spreadsheets, paper, or rudimentary digital tools, often lead to frustration, countless revisions, and suboptimal guest experiences. We aimed to transform this "nightmare" into a delightful, efficient, and intelligent process, leveraging modern technology to solve a real-world problem for couples and wedding planners.

What it does

"Nightmare Before Wedding" is a comprehensive, AI-powered web application designed to simplify and optimize wedding seating arrangements. Key functionalities include:

  • Guest Management: Users can easily add, edit, and delete guest profiles, including details such as name, role (family, friend, colleague), gender, group affiliation, VIP status, and crucial special requirements (e.g., dietary restrictions, accessibility needs).
  • Table Management: The application allows for the creation and customization of tables, defining their name, capacity, shape (round, rectangular, oval), VIP designation, and precise positioning and rotation on a virtual venue canvas.
  • Interactive Seating Arrangement: A highly intuitive drag-and-drop interface enables users to manually assign guests to specific seats on tables. The visual canvas provides a clear overview of the venue layout, making manual adjustments straightforward.
  • AI Auto-Assignment: This is the core intelligent feature. Utilizing DeepSeek AI, the system can automatically generate optimal seating plans. Users can set preferences, such as prioritizing VIP guests for VIP tables, keeping groups together, and ensuring all special requirements are met. This significantly reduces the manual effort and cognitive load.
  • Credit System for AI: The AI auto-assignment feature operates on a credit-based system. New users receive free credits, and additional credits can be purchased seamlessly through Stripe, allowing for multiple iterations and refinements of the seating plan.
  • PDF Export: Users can generate professional, printable PDF reports of their seating arrangements in two formats: a detailed list of guests assigned to each table and seat, and a visual layout of the venue with tables and their occupants. This is perfect for sharing with venue staff or for personal records.
  • User Authentication: Secure user registration and login are handled via Supabase Authentication, ensuring data privacy and personalized planning.
  • Customizable Themes: Users can personalize their app experience by choosing from different aesthetic themes (Romantic, Classic, Whimsical) to match their wedding style.
  • Responsive Design: The application is fully responsive, providing an optimal user experience across various devices, from desktop computers to mobile phones.

How we built it

"Nightmare Before Wedding" was built as a full-stack application, leveraging a modern and robust technology stack:

  • Frontend: Developed with React, providing a dynamic and interactive user interface. Vite was used as the build tool for its speed and efficiency during development.
  • Styling: Tailwind CSS was employed for a utility-first approach to styling, enabling rapid UI development and easy customization while maintaining a clean and consistent design.
  • State Management: Zustand was chosen for its simplicity and efficiency in managing the application's complex state, including guests, tables, and their assignments.
  • Routing: React Router DOM handles client-side navigation, providing a smooth single-page application experience.
  • Backend & Database: Supabase serves as the comprehensive backend solution. PostgreSQL Database: Stores all guest, table, seat, and relationship data, along with user credits and Stripe transaction records.
  • Supabase Authentication: Manages user registration, login, and session management. Row Level Security (RLS): Implemented across all database tables to ensure strict data isolation, allowing users to access only their own wedding data.
  • Supabase Edge Functions: Powers the intelligent features: ai-seating: An Edge Function that communicates with the DeepSeek AI API to process seating requests and return recommendations. stripe-checkout and stripe-webhook: Edge Functions that handle the Stripe payment flow, creating checkout sessions and processing webhook events for credit purchases.
  • AI Integration: The core AI auto-assignment logic is powered by the DeepSeek AI API, which processes guest and table data to generate optimized seating plans.
  • Payment Processing: Stripe is integrated for secure and seamless processing of credit purchases, enabling users to top up their AI assignment credits.
  • PDF Generation: Client-side PDF export is achieved using jspdf for document creation and html2canvas for capturing the visual layout of the seating canvas.
  • Development Environment: The entire project was developed within Bolt's WebContainer environment, which provided a powerful, in-browser Node.js runtime, enabling rapid full-stack development without local setup.

Challenges we ran into

Developing "Nightmare Before Wedding" presented several interesting challenges:

  • Complex Drag-and-Drop Logic: Implementing a fluid and intuitive drag-and-drop system for guests onto specific seats within dynamically positioned and shaped tables required careful handling of DOM events, coordinates, and state updates.
  • Real-time Data Synchronization: Ensuring that changes made on the interactive seating canvas (e.g., moving tables, assigning guests) were immediately reflected in the database and across the application, while maintaining performance.
  • AI Prompt Engineering: Crafting effective and precise prompts for the DeepSeek AI to consistently generate accurate, relevant, and actionable seating recommendations, especially when balancing multiple constraints like VIP status, group cohesion, and special requirements.
  • Integrating AI with Database Operations: Seamlessly connecting the AI's recommendations (which are just data) to actual database updates (assigning guests to seats, handling seat locks) and ensuring data integrity.
  • Robust Credit System: Designing and implementing a reliable credit system that tracks free and purchased credits, handles consumption, and integrates securely with Stripe payments, including webhook processing for transaction logging.
  • Accurate PDF Export of Dynamic Content: Capturing the interactive seating canvas, which involves dynamically positioned and rotated elements, into a high-quality PDF image using html2canvas proved challenging, requiring careful configuration and scaling.
  • Responsive UI for Interactive Canvas: Adapting the highly interactive seating canvas to provide a good user experience on both large desktop screens and smaller mobile devices, where drag-and-drop interactions differ.

Accomplishments that we're proud of

We are particularly proud of several key accomplishments in "Nightmare Before Wedding":

  • Everything Developed within Bolt: Building such a feature-rich application in a short timeframe within Bolt's WebContainer environment showcases the power and efficiency of the platform
  • Intelligent AI Auto-Assignment
  • Intuitive and Beautiful User Interface
  • Robust and Scalable Backend with Supabase
  • Seamless Stripe Integration
  • Comprehensive PDF Export

What we learned

  • We deepened our understanding of how AI can be applied to solve real-world logistical challenges, moving beyond theoretical concepts to a tangible product.
  • We gained extensive experience with Supabase's diverse offerings, including advanced RLS policies, database functions, and the power of Edge Functions for backend logic and API integrations.
  • The hackathon environment, combined with the WebContainer, pushed us to find creative and efficient solutions to technical hurdles.

What's next for Nightmare Before Wedding

"Nightmare Before Wedding" has a strong foundation and significant potential for future development:

  • Guest RSVP Tracking: Integrate a system for managing guest RSVPs directly within the application, automatically updating guest lists and seating needs.
  • Integration with Other Wedding Tools: Explore integrations with popular wedding planning platforms for calendar management, budget tracking, and vendor coordination.
  • Generate beautiful table charts: option to generate printable beautiful table charts
  • Generalization : this application can be de-verticalized from wedding and applied to many other use cases where seats compatibily matters (i.e. business events)

Built With

Share this project:

Updates