Introduction & Project Scope
Relevant source files
The following files were used as context for generating this wiki page:
Boda-cris is a specialized web application designed to manage digital wedding invitations and guest coordination. The project provides a dual-interface system consisting of a public-facing, highly customizable invitation page for guests and a private administrative dashboard for event organizers. The application is built using React and Vite, utilizing a theme-driven architecture that allows real-time customization of visual aesthetics and content.
The scope of the project encompasses guest management (RSVP tracking, import/export, and WhatsApp broadcasting), event information dissemination (ceremony details, locations, and dress codes), and dynamic theme administration. By leveraging CSS variables and React Context, the system ensures that changes made in the admin panel are immediately reflected across the invitation interface.
Sources: package.json, src/pages/InvitationPage.jsx:1-12, src/pages/AdminPage.jsx:1-15
Core Architecture & Tech Stack
The application is built as a Single Page Application (SPA) using modern web technologies. It follows a component-based architecture where state is managed through specialized React Contexts for Content, Themes, and Guests.
Frontend Technologies
- Framework: React 18.3.1 with Vite as the build tool.
- Routing: React Router DOM 7.0.0 for navigating between the invitation and admin views.
- Styling: Tailwind CSS 3.4.0 for utility-first styling, complemented by Framer Motion 11.0.0 for animations.
- Mapping: Leaflet and React-Leaflet for interactive event location displays.
- Icons: Lucide-React for a consistent iconography system.
Sources: package.json:11-28, tailwind.config.js:1-10
Deployment & Environment
The project is configured for deployment on Netlify, featuring automated builds and SPA-specific redirect rules. It enforces security headers such as X-Frame-Options: DENY and X-Content-Type-Options: nosniff.
Sources: netlify.toml:5-25
The diagram above illustrates the high-level data flow and how different contexts feed into the primary views.
Functional Modules
The project is divided into two primary functional areas: the Invitation System and the Admin Panel.
1. Invitation System
This module handles the guest experience. It is composed of multiple sections including a Hero section, Countdown, Event Information, and RSVP forms. The interface is "theme-aware," meaning its fonts, colors, and border radii are driven by CSS variables defined in the ThemeContext.
Sources: src/pages/InvitationPage.jsx:11-30, src/context/ThemeContext.jsx:165-185
2. Admin Panel
The admin panel provides tools for event management, categorized into three main views:
- Dashboard: Provides a general summary of RSVP statuses.
- Guest Management: Includes CRUD operations for guests, CSV/JSON import/export, and a WhatsApp broadcast system for sending mass messages with dynamic variables.
- Content & Theme Editor: Allows administrators to modify wedding details (names, dates, locations) and visual presets in real-time.
Sources: src/pages/AdminPage.jsx:21-75, src/components/admin/GuestList.jsx:110-145, src/components/admin/WhatsAppBroadcast.jsx:20-50
Theme & Customization Engine
A central feature of Boda-cris is its dynamic theme engine. It uses a ThemeContext to manage visual presets and individual property overrides.
Theme Properties
| Property | Description | Examples |
|---|---|---|
| Colors | Primary, Secondary, Accent, and Text colors. | Gold (#D4AF37), Cream (#FFF8E7) |
| Typography | Specific fonts for headings and body text. | Playfair Display, Inter, Montserrat |
| Borders | Configurable border-radius for components. | None, Soft, Rounded, Pill |
| Animations | Intensity and duration of UI transitions. | Subtle (300ms), Normal (500ms), Dynamic (800ms) |
Sources: src/context/ThemeContext.jsx:130-155, tailwind.config.js:15-35
This sequence shows how a theme change initiated in the admin panel propagates through the system to update the public UI instantly.
Sources: src/context/ThemeContext.jsx:167-180, src/components/admin/ThemeEditor.jsx:105-125
Data Management
The application manages data structures for guests, events, and gift registries.
Guest Schema
Guests are stored with fields including name, email, phone, attendance status (confirmed, pending, declined), and party size (adults/children). The system supports complex string parsing for importing these guests from external CSV files.
Sources: src/components/admin/GuestFormModal.jsx:10-25, src/components/admin/GuestImportExport.jsx:100-130
Content Schema
The ContentContext manages the wedding-specific information:
- Hero: Names, wedding date, and background image URL/Base64.
- Events: List of sub-events (Ceremony, Reception) with time, venue, and coordinates.
- Gifts: Message and a list of bank accounts (CLABE, bank name, holder).
Sources: src/components/admin/ContentEditor.jsx:150-180, src/components/admin/ContentEditor.jsx:380-410
Project Significance
Boda-cris bridges the gap between static digital invitations and complex event management platforms. By providing an integrated WhatsApp broadcast system and a real-time theme editor, it allows organizers to maintain a consistent brand for their wedding while streamlining guest communication and RSVP tracking. The project's use of local storage and SPA architecture ensures high performance and offline-resilience for the administrative user.