Event Information & Logistics
Relevant source files
The following files were used as context for generating this wiki page:
The "Event Information & Logistics" system serves as the core informational hub of the Boda Cris wedding invitation application. It encompasses the management, storage, and presentation of essential wedding details, including scheduled events, venue locations, and dress code requirements. This system ensures that guests have access to real-time, accurate data regarding where and when specific celebration activities occur.
Architecturally, the system relies on a centralized ContentContext to manage state, allowing administrators to modify logistics through a dedicated ContentEditor while automatically updating the guest-facing InvitationPage. Data is persisted locally and structured to support multiple event types, such as religious ceremonies and receptions, each with specific metadata.
Sources: src/pages/InvitationPage.jsx, src/context/ContentContext.jsx:5-20
Data Architecture & State Management
The logistics data is managed through a React Context API pattern. The ContentProvider initializes state from a combination of hardcoded defaults and localStorage to ensure persistence across sessions.
Content Data Structure
The logistics information is organized into three primary objects within the global content state:
- Events: An array of objects defining the timeline (ceremony, reception, etc.).
- Location: A single object containing venue details and geographical coordinates for map integration.
- Dress Code: Configuration for the event's formality and suggested color palettes.
Sources: src/data/defaultContent.js:1-55, src/context/ContentContext.jsx:8-50
The diagram above illustrates the relationship between the primary content state and the logistics-related data models.
Sources: src/data/defaultContent.js:12-46
Event Management System
The application supports a dynamic list of events. Each event is assigned a type which determines the iconography used in the user interface.
Event Types and Visual Representation
Events are categorized into specific types, mapped to lucide-react icons for consistent visual communication:
| Event Type | Icon Component | Description |
|---|---|---|
ceremony | Church | Religious or formal ceremony |
civil | Building2 | Civil registry or legal ceremony |
reception | PartyPopper | Main celebration or banquet |
cocktail | Wine | Pre-reception drinks |
afterparty | Music | Late-night celebration |
other | Calendar | Miscellaneous events |
Sources: src/components/invitation/EventInfo.jsx:4-11, src/data/defaultContent.js:132-139
Logical Flow for Event Display
The EventInfo component dynamically adjusts its grid layout based on the number of events configured in the state.
This flow ensures the UI remains responsive and clean regardless of the number of scheduled activities.
Sources: src/components/invitation/EventInfo.jsx:17-45
Location & Geospatial Logistics
The logistics system includes integrated mapping and directions to facilitate guest arrival. The location data object stores both human-readable addresses and coordinates for the interactive LocationPicker used in the admin panel.
Location Data Fields
| Field | Type | Purpose |
|---|---|---|
venue | String | The name of the location (e.g., Hacienda Los Naranjos) |
address | String | Full physical address for navigation |
lat / lng | Float | Coordinates for Leaflet map markers |
mapUrl | String | Embed URL for Google Maps iframe |
directions | String | Additional instructions (e.g., "Parking available") |
Sources: src/data/defaultContent.js:27-35, src/components/admin/ContentEditor.jsx:254-285
Dress Code Configuration
The DressCode component provides guests with visual and textual guidance on the expected attire. This section is highly customizable via the ContentEditor.
- Code: A short string representing the formality (e.g., "Formal", "Black Tie").
- Description: Detailed instructions, often including specific requests like "Avoid wearing white".
- Color Palette: An optional array of colors suggested for the guests' attire.
Sources: src/components/invitation/DressCode.jsx:10-45, src/data/defaultContent.js:37-41
Logistics Administration
Administrators manage logistics through the ContentEditor. This component provides a tabbed interface for CRUD (Create, Read, Update, Delete) operations on logistics data.
Update Logic
When an administrator modifies a logistics field, the updateContent or specific helper functions (like updateEvent or updateLocation) are triggered within the ContentContext. These updates are immediately saved to localStorage.
Summary
The Event Information & Logistics system provides a robust framework for handling wedding celebration details. By centralizing data in ContentContext and providing specialized components for events, location, and dress code, the system ensures that both administrators and guests have a consistent and reliable experience. The integration of dynamic iconography, interactive maps, and persistent storage makes it a critical module for the successful coordination of the event.