Frontend Architecture
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Boda Cris frontend is a modern Single Page Application (SPA) built with React and Vite, designed to manage and display digital wedding invitations. The architecture follows a modular approach, separating concerns into specialized contexts for theme management, content delivery, and guest administration. It leverages a mobile-first design philosophy using Tailwind CSS and Framer Motion for interactive UI components.
The system is split into two primary domains: a public-facing invitation page that dynamically renders content based on active themes, and a secure administrative dashboard. This dashboard allows users to customize the invitation's appearance, manage event details, and coordinate guest lists through real-time updates persisted via localStorage.
Sources: src/main.jsx, src/App.jsx, package.json:1-25
Core Tech Stack
The project utilizes a React-based ecosystem with several key libraries for functionality and styling:
| Category | Technology | Description |
|---|---|---|
| Framework | React 18 | Core UI library using functional components and hooks. |
| Build Tool | Vite | Modern frontend build tool for fast development and bundling. |
| Routing | React Router DOM 7 | Handles SPA navigation and route protection. |
| Styling | Tailwind CSS | Utility-first CSS framework for layout and design. |
| Animation | Framer Motion | Library for complex UI transitions and entrance animations. |
| Icons | Lucide React | SVG icon set used throughout the admin and user interfaces. |
| Maps | Leaflet / React Leaflet | Used for location picking and event venue display. |
Sources: package.json:10-25, tailwind.config.js:1-70
State Management and Data Flow
The application employs a provider-based architecture using React Context API to manage global state across disparate components. This eliminates "prop drilling" and ensures that changes made in the admin panel (like theme updates or content edits) are reflected immediately.
Context Providers
The src/main.jsx file establishes a hierarchy of providers that wrap the entire application:
The provider hierarchy ensures that theme and authentication states are available to content and guest management logic.
Sources: src/main.jsx:10-23
Persistence Logic
Data is persisted locally using the browser's localStorage API. Each context (Theme, Content, Guest) initializes its state by checking for existing keys and provides "reset" functions to revert to defaults.
- ThemeContext: Manages CSS variables (colors, fonts, border-radius) that are injected into
document.documentElement. - ContentContext: Manages the text and media assets (hero message, event times, gallery images).
- GuestContext: Manages the guest registry, attendance status, and statistics.
Sources: src/context/ThemeContext.jsx:161-190, src/context/ContentContext.jsx:7-45
Component Architecture
The frontend is divided into two main entry points managed by src/App.jsx:
Invitation Domain
Located in src/pages/InvitationPage.jsx, this domain is responsible for the public invitation view. It consists of several pure presentational components that consume data from ContentContext and ThemeContext.
| Component | Responsibility |
|---|---|
Hero | Displays names, date, and background image with entrance animations. |
EventInfo | Iterates through the events array to show times and venues. |
Location | Displays an interactive map and address details. |
Gallery | Renders the wedding photo collection. |
RSVPForm | Interface for guests to confirm attendance. |
Sources: src/pages/InvitationPage.jsx:1-30, src/components/invitation/Hero.jsx:10-40
Administrative Domain
The AdminPage.jsx acts as a secure dashboard. It utilizes a local activeView state to toggle between different management modules:
Logical structure of the Admin Dashboard navigation and modular components.
Sources: src/pages/AdminPage.jsx:20-50, src/components/admin/ContentEditor.jsx:40-70
Theming System
The project implements a dynamic theming system that bridges JavaScript state with Tailwind CSS. The ThemeContext maps theme properties to CSS custom properties (variables), which are then used by Tailwind's configuration.
CSS Variable Injection
The ThemeProvider uses a useEffect hook to apply theme changes to the DOM:
// src/context/ThemeContext.jsx
useEffect(() => {
const root = document.documentElement
root.style.setProperty('--color-primary', theme.primary)
root.style.setProperty('--color-secondary', theme.secondary)
root.style.setProperty('--font-heading', theme.fontHeading)
// ...other properties
}, [theme])
Sources: src/context/ThemeContext.jsx:167-187
Tailwind Integration
The tailwind.config.js file is configured to use these variables, allowing developers to use standard Tailwind classes (e.g., text-theme-primary) that resolve to the user-selected colors.
// tailwind.config.js
theme: {
extend: {
colors: {
theme: {
primary: 'var(--color-primary)',
secondary: 'var(--color-secondary)',
text: 'var(--color-text)',
}
}
}
}
Sources: tailwind.config.js:15-25
Routing and Security
The application uses react-router-dom to manage navigation between the invitation and admin sections.
- Public Routes: The root path
/renders theInvitationPage. - Private Routes: The
/adminpath renders theAdminPage, which contains internal logic to check for authentication viauseAuth. If the user is not authenticated, theAdminLogincomponent is rendered instead. - SPA Redirection: The
netlify.tomlfile includes a redirect rule (/*to/index.html) to ensure that browser refreshes on sub-paths are handled correctly by the client-side router.
Sources: src/App.jsx:1-20, src/pages/AdminPage.jsx:13-17, netlify.toml:13-16
Conclusion
The Boda Cris frontend architecture is a robust, client-side driven system that prioritizes user customization and ease of management. By centralizing state in React Contexts and using a dynamic CSS variable-based theming engine, the application provides a seamless transition between administrative configuration and the final public invitation. Its modular component design and clear separation between public and private domains make it highly maintainable and extensible.