Sandra & Eduard - Wedding Website

⚠️ SEEING THIS README ON THE WEBSITE? Click here for the fix →

A beautiful, modern wedding website for Sandra & Eduard's celebration. Built with Next.js, TypeScript, Tailwind CSS, and Firebase.

🚀 Quick Links

• 🔧 FIX: README Showing Instead of Website - START HERE if you see this README instead of the wedding website
• ✅ Fix Checklist - Step-by-step checklist to fix the deployment
• 📊 Deployment Comparison - Visual comparison of correct vs incorrect configuration
• Quick Start Guide - Get Firebase set up in under 10 minutes
• Firebase Setup Documentation - Complete setup guide with troubleshooting
• GitHub Pages Setup Guide - Visual guide to configure deployment correctly
• Troubleshooting Guide - Fix common deployment issues
• Admin Panel - Manage invitation codes and view RSVPs
• Wedding Website - Main guest-facing site

Features

• Modern Next.js application with React 19 and TypeScript
• Invitation code verification system - Guests must enter their unique code to RSVP
• RSVP form with Firebase Firestore integration for data storage
• Admin panel (/admin) for managing invitation codes and viewing RSVPs
• Responsive design optimized for all device sizes using Tailwind CSS
• Beautiful UI components built with Radix UI and shadcn/ui
• Smooth animations powered by Framer Motion
• Firebase Authentication for admin access

Technology Stack

• Next.js 16: React framework with App Router
• React 19: Latest React with server components
• TypeScript: Type-safe development
• Tailwind CSS v4: Modern utility-first CSS
• Firebase: Firestore for database, Authentication for admin
• Radix UI: Accessible UI components
• Framer Motion: Animation library
• Fonts: Google Fonts (Cormorant Garamond, Dancing Script)

Project Structure

/
├── app/
│   ├── layout.tsx           # Root layout with fonts and metadata
│   ├── page.tsx             # Main wedding page
│   ├── globals.css          # Global styles and Tailwind config
│   └── admin/
│       └── page.tsx         # Admin panel for managing RSVPs and codes
├── components/
│   ├── wedding/             # Wedding-specific components
│   │   ├── hero-section.tsx
│   │   ├── event-details.tsx
│   │   ├── rsvp-form.tsx    # RSVP form with code verification
│   │   ├── dress-code.tsx
│   │   ├── gift-section.tsx
│   │   ├── music-section.tsx
│   │   └── footer-section.tsx
│   └── ui/                  # Reusable UI components (shadcn/ui)
├── lib/
│   ├── firebase.ts          # Firebase configuration and initialization
│   └── utils.ts             # Utility functions
├── public/
│   └── images/              # Image assets
└── README.md

Firestore Database Structure

Collections

invitationCodes

• code (string, unique): The invitation code (e.g., "ABC123")
• assignedTo (string): Name of the guest or group
• maxGuests (number): Maximum number of guests allowed
• usedGuests (number): Number of guests who have RSVP'd
• isActive (boolean): Whether the code is active

rsvps

• code (string): The invitation code used
• guests (array of strings): Names of guests attending
• guestsCount (number): Number of guests
• dietary (string): Dietary requirements/restrictions
• message (string): Message for the couple
• createdAt (timestamp): When the RSVP was submitted

GitHub Pages Deployment

This site is configured to deploy automatically to GitHub Pages using GitHub Actions.

Important: First-time Setup

If you see the README instead of the website, you need to configure GitHub Pages to use GitHub Actions:

1. Go to Settings → Pages in your repository
2. Under "Build and deployment" → "Source", select "GitHub Actions"
3. Wait a few minutes for the deployment to complete

📖 Need help? See the GitHub Pages Setup Guide for a detailed visual walkthrough with screenshots and diagrams.

For other issues, see TROUBLESHOOTING.md.

Verify Your Setup

Run the verification script to check if everything is configured correctly:

./scripts/verify-deployment.sh

This will check:

• Next.js configuration
• Build process
• Output files
• GitHub Actions workflow

Firebase Setup

First time setup? Follow the Quick Start Guide to configure Firebase in under 10 minutes.

For detailed information, see FIREBASE_SETUP.md which includes:

• Database structure and schema
• Security rules configuration
• Authentication setup
• Admin panel usage
• Troubleshooting guide

Getting Started

Prerequisites

• Node.js 18+ and npm
• A Firebase project with Firestore and Authentication enabled (see Quick Start Guide)

Local Development

1. Clone the repository:

   git clone https://github.com/ericcco/dududrilla.git
   cd dududrilla

2. Install dependencies:

   npm install

3. Configure Firebase (if not already configured):

   • Update lib/firebase.ts with your Firebase project credentials
   • Create a Firebase admin user in the Firebase Console

4. Start the development server:

   npm run dev

5. Open http://localhost:3000 in your browser

Building for Production

npm run build
npm start

Admin Panel

Access the admin panel at /admin to:

• View all RSVPs and guest confirmations
• Create and manage invitation codes
• View statistics (total confirmations, total guests, active codes)
• Activate/deactivate invitation codes
• Delete invitation codes

Default admin login: Configure in Firebase Authentication Console

Content Language

The website content is in Spanish. When adding or modifying text content, maintain Spanish language consistency.

Color Theme

The wedding uses a natural, elegant color palette:

• Primary: #5C6B4A (Sage green)
• Background: #FFFFFF (White)
• Secondary: #F8F8F8 (Light gray)
• Accent: #7A8968 (Muted green)

License

This project is private and intended for personal use.