Project Directory Structure
Relevant source files
The following files were used as context for generating this wiki page:
The Boda Cris project is a specialized wedding invitation application built with React, Vite, and Tailwind CSS. The directory structure is designed to separate the public invitation experience from the administrative management tools, utilizing a context-driven architecture to manage themes, content, and guest data across the platform.
The project follows a modern Single Page Application (SPA) layout, where the root directory contains configuration for build tools (Vite), styling (Tailwind), and deployment (Netlify), while the src directory houses the application logic, UI components, and state management providers.
Core Configuration and Build Tools
The project root contains essential configuration files that define the development environment, build pipeline, and deployment strategy.
Project Metadata and Dependencies
The package.json file identifies the project as a Vite-powered React application using ES modules. Key dependencies include framer-motion for animations, leaflet for mapping, and lucide-react for iconography.
Sources: package.json:1-30
Deployment Configuration
Deployment is managed via netlify.toml, which specifies the build command and the output directory (dist). It also includes critical SPA routing rules to redirect all traffic to index.html and sets security headers like X-Frame-Options and X-Content-Type-Options.
Sources: netlify.toml:1-55
Styling Architecture
The project utilizes Tailwind CSS for styling. The tailwind.config.js file extends the default theme to include dynamic CSS variables (e.g., var(--color-primary)) which allow for real-time theme switching.
Sources: tailwind.config.js:1-68, src/index.css:1-125
Application Entry Point
The application entry point initializes the React environment and wraps the component tree in several essential context providers.
This diagram illustrates the hierarchical wrapping of context providers that manage global state.
Sources: src/main.jsx:1-25
The src Directory Structure
The src directory is the primary location for the application's source code, organized into functional subdirectories.
Components (src/components/)
Components are divided into two primary sub-modules based on their target audience:
invitation/: UI elements for the public-facing wedding invitation (e.g.,Hero.jsx,DressCode.jsx,EventInfo.jsx).admin/: Functional components for the management dashboard (e.g.,Dashboard.jsx,GuestList.jsx,ContentEditor.jsx,WhatsAppBroadcast.jsx).
Pages (src/pages/)
The application defines high-level routes that serve as the main views:
InvitationPage.jsx: Orchestrates the wedding invitation components into a single-page scrolling experience.AdminPage.jsx: Provides the authenticated management interface with views for the dashboard, guest list, and content editor.
Sources: src/pages/InvitationPage.jsx:1-40, src/pages/AdminPage.jsx:1-110
Context (src/context/)
State management is handled through React Context providers:
ThemeContext.jsx: Manages visual presets, custom colors, fonts, and border radii. It injects CSS variables into the document root.ContentContext.jsx: (Referenced in components) Manages the text and image data displayed on the invitation.GuestContext.jsx: (Referenced in components) Manages the guest list, attendance status, and statistics.
Sources: src/context/ThemeContext.jsx:1-205, src/components/admin/ContentEditor.jsx:20-40
Functional Module Relationships
The directory structure facilitates a clear separation of concerns between content presentation and administrative control.
| Directory | Primary Responsibility | Key Files |
|---|---|---|
src/components/admin | Management UI and logic | GuestList.jsx, ThemeEditor.jsx, WhatsAppBroadcast.jsx |
src/components/invitation | Public display components | Hero.jsx, EventInfo.jsx, DressCode.jsx |
src/context | Global state and theme logic | ThemeContext.jsx, ContentContext.jsx |
src/pages | Route definitions | InvitationPage.jsx, AdminPage.jsx |
Sources: src/pages/InvitationPage.jsx:1-15, src/pages/AdminPage.jsx:1-25, src/components/admin/ContentEditor.jsx:1-35
Static Asset and Theme Flow
The project handles assets and themes through a combination of configuration and dynamic state.
This diagram shows how theme data flows from presets or the ThemeEditor into CSS variables that drive the Tailwind styles.
Sources: src/context/ThemeContext.jsx:160-200, tailwind.config.js:15-30, src/index.css:5-20
Conclusion
The directory structure of the boda-cris repository reflects a well-organized React application. By separating public invitation components from administrative tools and centralizing state management in context providers, the architecture ensures that the application remains maintainable and that theme changes or content updates propagate efficiently throughout the system. The reliance on configuration files at the root level ensures consistent builds and secure deployments on the Netlify platform.