first commit

2025-12-29 05:49:05 +02:00 · 2025-12-29 05:49:05 +02:00 · 3d1d48fd49
commit 3d1d48fd49
33 changed files with 4371 additions and 0 deletions
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@ -0,0 +1,31 @@
+# Wedding Guest List App - Project Setup
+
+## Project Overview
+Full-stack wedding guest list application with React + Vite frontend, FastAPI backend, and PostgreSQL database.
+
+## Features
+- Manage guest information (names, phone numbers, email, RSVP status, meal preferences, plus-ones)
+- Import contacts from Google account
+- Filter and search guests
+- User-friendly interface with modern design
+
+## Setup Status
+- [x] Create copilot-instructions.md file
+- [x] Get project setup info
+- [x] Create backend structure (FastAPI + SQLAlchemy + PostgreSQL)
+- [x] Create frontend structure (React + Vite)
+- [x] Add Google Contacts integration
+- [x] Create documentation (README.md)
+- [x] Install dependencies and test
+
+## ✅ Project Complete!
+
+All components have been created and dependencies installed. 
+
+### Next Steps:
+1. Set up PostgreSQL database
+2. Create .env file from .env.example
+3. Configure Google OAuth (optional)
+4. Run `start.bat` (Windows) or `./start.sh` (Linux/Mac)
+
+See README.md for detailed instructions.
--- a/README.md
+++ b/README.md
@ -0,0 +1,278 @@
+# 💒 Wedding Guest List App
+
+A full-stack wedding guest list management application built with React + Vite frontend, FastAPI backend, and PostgreSQL database. Easily manage your wedding guests, import contacts from Google, and track RSVPs, meal preferences, and seating arrangements.
+
+## ✨ Features
+
+- **Guest Management**: Add, edit, and delete guest information
+- **Contact Import**: Import contacts directly from your Google account
+- **Search & Filter**: Find guests by name, email, phone, RSVP status, or meal preference
+- **RSVP Tracking**: Track pending, accepted, and declined RSVPs
+- **Meal Preferences**: Manage dietary requirements (vegetarian, vegan, gluten-free, kosher, halal)
+- **Plus-Ones**: Track guests with plus-ones
+- **Table Assignments**: Assign guests to tables
+- **Modern UI**: User-friendly interface with a beautiful gradient design
+- **Mobile Responsive**: Works seamlessly on all devices
+
+## 🛠️ Tech Stack
+
+### Frontend
+- React 18
+- Vite
+- Axios for API calls
+- CSS3 with modern styling
+
+### Backend
+- FastAPI
+- SQLAlchemy ORM
+- PostgreSQL database
+- Google People API integration
+- Pydantic for data validation
+
+## 📋 Prerequisites
+
+- **Node.js** (v16 or higher)
+- **Python** (v3.8 or higher)
+- **PostgreSQL** (v12 or higher)
+- **Google Cloud Console** account (for contact import feature)
+
+## 🚀 Installation & Setup
+
+### 1. Clone the Repository
+
+```bash
+cd c:\Users\dvirl\OneDrive\Desktop\gitea\invy
+```
+
+### 2. Database Setup
+
+Install PostgreSQL and create a database:
+
+```sql
+CREATE DATABASE wedding_guests;
+```
+
+### 3. Backend Setup
+
+```bash
+cd backend
+
+# Create virtual environment (optional but recommended)
+python -m venv venv
+
+# Activate virtual environment
+# Windows:
+venv\Scripts\activate
+# Linux/Mac:
+source venv/bin/activate
+
+# Install dependencies
+pip install -r requirements.txt
+
+# Create .env file
+copy .env.example .env
+```
+
+Edit the `.env` file with your database credentials:
+
+```env
+DATABASE_URL=postgresql://postgres:your_password@localhost:5432/wedding_guests
+```
+
+### 4. Frontend Setup
+
+```bash
+cd frontend
+
+# Install dependencies
+npm install
+```
+
+### 5. Google OAuth Setup (Optional - for contact import)
+
+1. Go to [Google Cloud Console](https://console.cloud.google.com/)
+2. Create a new project or select an existing one
+3. Enable the **Google People API**
+4. Create OAuth 2.0 credentials:
+   - Application type: Web application
+   - Authorized JavaScript origins: `http://localhost:5173`
+   - Authorized redirect URIs: `http://localhost:5173`
+5. Copy the Client ID
+6. Update `GOOGLE_CLIENT_ID` in `frontend/src/components/GoogleImport.jsx`
+
+## 🎯 Running the Application
+
+### Start the Backend Server
+
+```bash
+cd backend
+uvicorn main:app --reload
+```
+
+The API will be available at: `http://localhost:8000`
+
+API documentation: `http://localhost:8000/docs`
+
+### Start the Frontend Development Server
+
+```bash
+cd frontend
+npm run dev
+```
+
+The application will be available at: `http://localhost:5173`
+
+## 📖 API Documentation
+
+Once the backend is running, visit `http://localhost:8000/docs` for interactive API documentation powered by Swagger UI.
+
+### Main Endpoints
+
+- `GET /guests/` - Get all guests
+- `POST /guests/` - Create a new guest
+- `GET /guests/{guest_id}` - Get a specific guest
+- `PUT /guests/{guest_id}` - Update a guest
+- `DELETE /guests/{guest_id}` - Delete a guest
+- `GET /guests/search/` - Search and filter guests
+- `POST /import/google` - Import contacts from Google
+
+## 📱 Usage Guide
+
+### Adding Guests Manually
+
+1. Click the **"+ Add Guest"** button
+2. Fill in the guest details:
+   - First and last name (required)
+   - Email and phone number (optional)
+   - RSVP status
+   - Meal preference
+   - Plus-one information
+   - Table number
+   - Notes
+3. Click **"Add Guest"** to save
+
+### Importing from Google Contacts
+
+1. Click the **"Import from Google"** button
+2. Sign in with your Google account
+3. Grant permission to access your contacts
+4. Contacts will be imported automatically
+
+### Searching and Filtering
+
+Use the search bar and filters to find guests:
+- Search by name, email, or phone number
+- Filter by RSVP status (pending, accepted, declined)
+- Filter by meal preference
+- Click **"Clear Filters"** to reset
+
+### Editing and Deleting Guests
+
+- Click **"Edit"** on any guest row to modify their information
+- Click **"Delete"** to remove a guest (confirmation required)
+
+## 🗂️ Project Structure
+
+```
+wedding-guest-list/
+├── backend/
+│   ├── main.py              # FastAPI application entry point
+│   ├── models.py            # SQLAlchemy database models
+│   ├── schemas.py           # Pydantic schemas for validation
+│   ├── crud.py              # Database operations
+│   ├── database.py          # Database configuration
+│   ├── google_contacts.py   # Google API integration
+│   ├── requirements.txt     # Python dependencies
+│   └── .env.example         # Environment variables template
+│
+├── frontend/
+│   ├── src/
+│   │   ├── components/      # React components
+│   │   │   ├── GuestList.jsx
+│   │   │   ├── GuestForm.jsx
+│   │   │   ├── SearchFilter.jsx
+│   │   │   └── GoogleImport.jsx
+│   │   ├── api/            # API client
+│   │   │   └── api.js
+│   │   ├── App.jsx         # Main app component
+│   │   └── main.jsx        # Application entry point
+│   ├── index.html
+│   ├── package.json
+│   └── vite.config.js
+│
+└── README.md
+```
+
+## 🔒 Security Notes
+
+- Never commit your `.env` file or Google OAuth credentials
+- Use environment variables for sensitive data
+- In production, use HTTPS for all communications
+- Implement proper authentication and authorization
+- Validate all user inputs on both frontend and backend
+
+## 🚀 Deployment
+
+### Backend Deployment
+
+Consider deploying to:
+- **Heroku** (with PostgreSQL add-on)
+- **Railway**
+- **Render**
+- **AWS EC2 + RDS**
+
+### Frontend Deployment
+
+Consider deploying to:
+- **Vercel**
+- **Netlify**
+- **GitHub Pages**
+
+Don't forget to update:
+- API base URL in `frontend/src/api/api.js`
+- CORS settings in `backend/main.py`
+- Google OAuth redirect URIs
+
+## 🤝 Contributing
+
+Contributions are welcome! Feel free to:
+- Report bugs
+- Suggest new features
+- Submit pull requests
+
+## 📝 License
+
+This project is open source and available under the MIT License.
+
+## 💡 Tips
+
+- Regularly backup your database
+- Test the Google import feature with a test account first
+- Use the table assignment feature to organize seating
+- Export guest data before the wedding day
+- Keep track of dietary restrictions for catering
+
+## 🆘 Troubleshooting
+
+### Database Connection Issues
+- Verify PostgreSQL is running
+- Check database credentials in `.env`
+- Ensure the database exists
+
+### Google Import Not Working
+- Verify OAuth credentials are correct
+- Check that Google People API is enabled
+- Ensure redirect URI matches exactly
+
+### Frontend Can't Connect to Backend
+- Verify backend is running on port 8000
+- Check CORS settings in `backend/main.py`
+- Ensure API URL is correct in `frontend/src/api/api.js`
+
+## 📞 Support
+
+For questions or issues, please open an issue on the GitHub repository.
+
+---
+
+Made with ❤️ for your special day!
--- a/backend/.env.example
+++ b/backend/.env.example
@ -0,0 +1,6 @@
+# Database Configuration
+DATABASE_URL=postgresql://wedding_admin:Aa123456@localhost:5432/wedding_guests
+
+# Google OAuth (for contact import)
+GOOGLE_CLIENT_ID=143092846986-v9s70im3ilpai78n89q38qpikernp2f8.apps.googleusercontent.com
+GOOGLE_CLIENT_SECRET=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
--- a/backend/.gitignore
+++ b/backend/.gitignore
@ -0,0 +1,34 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+venv/
+env/
+ENV/
+.venv
+
+# Database
+*.db
+*.sqlite3
+
+# Environment variables
+.env
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+
+# Node
+node_modules/
--- a/backend/crud.py
+++ b/backend/crud.py
@ -0,0 +1,110 @@
+from sqlalchemy.orm import Session
+from sqlalchemy import or_
+import models
+import schemas
+
+
+def get_guest(db: Session, guest_id: int):
+    return db.query(models.Guest).filter(models.Guest.id == guest_id).first()
+
+
+def get_guests(db: Session, skip: int = 0, limit: int = 100):
+    return db.query(models.Guest).offset(skip).limit(limit).all()
+
+
+def create_guest(db: Session, guest: schemas.GuestCreate):
+    db_guest = models.Guest(**guest.model_dump())
+    db.add(db_guest)
+    db.commit()
+    db.refresh(db_guest)
+    return db_guest
+
+
+def update_guest(db: Session, guest_id: int, guest: schemas.GuestUpdate):
+    db_guest = db.query(models.Guest).filter(models.Guest.id == guest_id).first()
+    if db_guest:
+        update_data = guest.model_dump(exclude_unset=True)
+        for field, value in update_data.items():
+            setattr(db_guest, field, value)
+        db.commit()
+        db.refresh(db_guest)
+    return db_guest
+
+
+def delete_guest(db: Session, guest_id: int):
+    db_guest = db.query(models.Guest).filter(models.Guest.id == guest_id).first()
+    if db_guest:
+        db.delete(db_guest)
+        db.commit()
+        return True
+    return False
+
+
+def search_guests(
+    db: Session,
+    query: str = "",
+    rsvp_status: str = None,
+    meal_preference: str = None,
+    owner: str = None
+):
+    db_query = db.query(models.Guest)
+    
+    # Search by name, email, or phone
+    if query:
+        search_pattern = f"%{query}%"
+        db_query = db_query.filter(
+            or_(
+                models.Guest.first_name.ilike(search_pattern),
+                models.Guest.last_name.ilike(search_pattern),
+                models.Guest.email.ilike(search_pattern),
+                models.Guest.phone_number.ilike(search_pattern)
+            )
+        )
+    
+    # Filter by RSVP status
+    if rsvp_status:
+        db_query = db_query.filter(models.Guest.rsvp_status == rsvp_status)
+    
+    # Filter by meal preference
+    if meal_preference:
+        db_query = db_query.filter(models.Guest.meal_preference == meal_preference)
+    
+    # Filter by owner
+    if owner:
+        db_query = db_query.filter(models.Guest.owner == owner)
+    
+    return db_query.all()
+
+
+def delete_guests_bulk(db: Session, guest_ids: list[int]):
+    """Delete multiple guests by their IDs"""
+    deleted_count = db.query(models.Guest).filter(models.Guest.id.in_(guest_ids)).delete(synchronize_session=False)
+    db.commit()
+    return deleted_count
+
+
+def delete_guests_by_owner(db: Session, owner: str):
+    """Delete all guests by owner (for undo import)"""
+    # Delete guests where owner matches exactly or is in comma-separated list
+    deleted_count = db.query(models.Guest).filter(
+        or_(
+            models.Guest.owner == owner,
+            models.Guest.owner.like(f"{owner},%"),
+            models.Guest.owner.like(f"%,{owner},%"),
+            models.Guest.owner.like(f"%,{owner}")
+        )
+    ).delete(synchronize_session=False)
+    db.commit()
+    return deleted_count
+
+
+def get_unique_owners(db: Session):
+    """Get list of unique owner emails"""
+    results = db.query(models.Guest.owner).distinct().filter(models.Guest.owner.isnot(None)).all()
+    owners = set()
+    for result in results:
+        if result[0]:
+            # Split comma-separated owners
+            for owner in result[0].split(','):
+                owners.add(owner.strip())
+    return sorted(list(owners))
--- a/backend/database.py
+++ b/backend/database.py
@ -0,0 +1,23 @@
+from sqlalchemy import create_engine
+from sqlalchemy.ext.declarative import declarative_base
+from sqlalchemy.orm import sessionmaker
+import os
+
+# Database URL - update with your PostgreSQL credentials
+DATABASE_URL = os.getenv(
+    "DATABASE_URL",
+    "postgresql://wedding_admin:Aa123456@localhost:5432/wedding_guests"
+)
+
+engine = create_engine(DATABASE_URL)
+SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
+
+Base = declarative_base()
+
+
+def get_db():
+    db = SessionLocal()
+    try:
+        yield db
+    finally:
+        db.close()
--- a/backend/google_contacts.py
+++ b/backend/google_contacts.py
@ -0,0 +1,89 @@
+import httpx
+from sqlalchemy.orm import Session
+import models
+
+
+async def import_contacts_from_google(access_token: str, db: Session, owner: str = None) -> int:
+    """
+    Import contacts from Google People API
+    
+    Args:
+        access_token: OAuth 2.0 access token from Google
+        db: Database session
+        owner: Name of the person importing (e.g., 'me', 'fianc\u00e9')
+        
+    Returns:
+        Number of contacts imported
+    """
+    headers = {
+        "Authorization": f"Bearer {access_token}"
+    }
+    
+    # Google People API endpoint
+    url = "https://people.googleapis.com/v1/people/me/connections"
+    params = {
+        "personFields": "names,phoneNumbers,emailAddresses",
+        "pageSize": 1000
+    }
+    
+    imported_count = 0
+    
+    async with httpx.AsyncClient() as client:
+        response = await client.get(url, headers=headers, params=params)
+        
+        if response.status_code != 200:
+            raise Exception(f"Failed to fetch contacts: {response.text}")
+        
+        data = response.json()
+        connections = data.get("connections", [])
+        
+        for connection in connections:
+            # Extract name
+            names = connection.get("names", [])
+            if not names:
+                continue
+                
+            name = names[0]
+            first_name = name.get("givenName", "")
+            last_name = name.get("familyName", "")
+            
+            if not first_name and not last_name:
+                continue
+            
+            # Extract email
+            emails = connection.get("emailAddresses", [])
+            email = emails[0].get("value") if emails else None
+            
+            # Extract phone number
+            phones = connection.get("phoneNumbers", [])
+            phone_number = phones[0].get("value") if phones else None
+            
+            # Check if contact already exists by email OR phone number
+            existing = None
+            if email:
+                existing = db.query(models.Guest).filter(models.Guest.email == email).first()
+            if not existing and phone_number:
+                existing = db.query(models.Guest).filter(models.Guest.phone_number == phone_number).first()
+            
+            if existing:
+                # Contact exists - merge owners
+                if existing.owner and owner not in existing.owner.split(","):
+                    # Add current owner to existing owners
+                    existing.owner = f"{existing.owner},{owner}"
+                    db.add(existing)
+            else:
+                # Create new guest
+                guest = models.Guest(
+                    first_name=first_name or "Unknown",
+                    last_name=last_name or "",
+                    email=email,
+                    phone_number=phone_number,
+                    rsvp_status="pending",
+                    owner=owner
+                )
+                db.add(guest)
+                imported_count += 1
+        
+        db.commit()
+    
+    return imported_count
--- a/backend/main.py
+++ b/backend/main.py
@ -0,0 +1,193 @@
+from fastapi import FastAPI, Depends, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import RedirectResponse, HTMLResponse
+from sqlalchemy.orm import Session
+import uvicorn
+from typing import List
+import os
+from dotenv import load_dotenv
+import httpx
+import models
+import schemas
+import crud
+from database import engine, get_db
+
+# Load environment variables
+load_dotenv()
+
+# Create database tables
+models.Base.metadata.create_all(bind=engine)
+
+app = FastAPI(title="Wedding Guest List API")
+
+# Configure CORS
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["http://localhost:5173"],  # Vite default port
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+
+@app.get("/")
+def read_root():
+    return {"message": "Wedding Guest List API"}
+
+
+# Guest endpoints
+@app.post("/guests/", response_model=schemas.Guest)
+def create_guest(guest: schemas.GuestCreate, db: Session = Depends(get_db)):
+    return crud.create_guest(db=db, guest=guest)
+
+
+@app.get("/guests/", response_model=List[schemas.Guest])
+def read_guests(skip: int = 0, limit: int = 1000, db: Session = Depends(get_db)):
+    guests = crud.get_guests(db, skip=skip, limit=limit)
+    return guests
+
+
+@app.get("/guests/{guest_id}", response_model=schemas.Guest)
+def read_guest(guest_id: int, db: Session = Depends(get_db)):
+    db_guest = crud.get_guest(db, guest_id=guest_id)
+    if db_guest is None:
+        raise HTTPException(status_code=404, detail="Guest not found")
+    return db_guest
+
+
+@app.put("/guests/{guest_id}", response_model=schemas.Guest)
+def update_guest(guest_id: int, guest: schemas.GuestUpdate, db: Session = Depends(get_db)):
+    db_guest = crud.update_guest(db, guest_id=guest_id, guest=guest)
+    if db_guest is None:
+        raise HTTPException(status_code=404, detail="Guest not found")
+    return db_guest
+
+
+@app.delete("/guests/{guest_id}")
+def delete_guest(guest_id: int, db: Session = Depends(get_db)):
+    success = crud.delete_guest(db, guest_id=guest_id)
+    if not success:
+        raise HTTPException(status_code=404, detail="Guest not found")
+    return {"message": "Guest deleted successfully"}
+
+
+@app.post("/guests/bulk-delete")
+def delete_guests_bulk(guest_ids: List[int], db: Session = Depends(get_db)):
+    deleted_count = crud.delete_guests_bulk(db, guest_ids=guest_ids)
+    return {"message": f"Successfully deleted {deleted_count} guests"}
+
+
+@app.delete("/guests/undo-import/{owner}")
+def undo_import(owner: str, db: Session = Depends(get_db)):
+    """
+    Delete all guests imported by a specific owner
+    """
+    deleted_count = crud.delete_guests_by_owner(db, owner=owner)
+    return {"message": f"Successfully deleted {deleted_count} guests from {owner}"}
+
+
+@app.get("/guests/owners/")
+def get_owners(db: Session = Depends(get_db)):
+    """
+    Get list of unique owners
+    """
+    owners = crud.get_unique_owners(db)
+    return {"owners": owners}
+
+
+# Search and filter endpoints
+@app.get("/guests/search/", response_model=List[schemas.Guest])
+def search_guests(
+    query: str = "",
+    rsvp_status: str = None,
+    meal_preference: str = None,
+    owner: str = None,
+    db: Session = Depends(get_db)
+):
+    guests = crud.search_guests(
+        db, query=query, rsvp_status=rsvp_status, meal_preference=meal_preference, owner=owner
+    )
+    return guests
+
+
+# Google OAuth configuration
+GOOGLE_CLIENT_ID = os.getenv("GOOGLE_CLIENT_ID")
+GOOGLE_CLIENT_SECRET = os.getenv("GOOGLE_CLIENT_SECRET")
+GOOGLE_REDIRECT_URI = "http://localhost:8000/auth/google/callback"
+
+# Google OAuth endpoints
+@app.get("/auth/google")
+async def google_auth():
+    """
+    Initiate Google OAuth flow - redirects to Google
+    """
+    auth_url = (
+        f"https://accounts.google.com/o/oauth2/v2/auth?"
+        f"client_id={GOOGLE_CLIENT_ID}&"
+        f"redirect_uri={GOOGLE_REDIRECT_URI}&"
+        f"response_type=code&"
+        f"scope=https://www.googleapis.com/auth/contacts.readonly%20https://www.googleapis.com/auth/userinfo.email&"
+        f"access_type=offline&"
+        f"prompt=consent"
+    )
+    return RedirectResponse(url=auth_url)
+
+
+@app.get("/auth/google/callback")
+async def google_callback(code: str, db: Session = Depends(get_db)):
+    """
+    Handle Google OAuth callback and import contacts
+    Owner will be extracted from the user's email
+    """
+    try:
+        # Exchange code for access token
+        async with httpx.AsyncClient() as client:
+            token_response = await client.post(
+                "https://oauth2.googleapis.com/token",
+                data={
+                    "code": code,
+                    "client_id": GOOGLE_CLIENT_ID,
+                    "client_secret": GOOGLE_CLIENT_SECRET,
+                    "redirect_uri": GOOGLE_REDIRECT_URI,
+                    "grant_type": "authorization_code",
+                },
+            )
+            
+            if token_response.status_code != 200:
+                raise HTTPException(status_code=400, detail="Failed to get access token")
+            
+            token_data = token_response.json()
+            access_token = token_data.get("access_token")
+            
+            # Get user info to extract email
+            user_info_response = await client.get(
+                "https://www.googleapis.com/oauth2/v2/userinfo",
+                headers={"Authorization": f"Bearer {access_token}"}
+            )
+            
+            if user_info_response.status_code != 200:
+                raise HTTPException(status_code=400, detail="Failed to get user info")
+            
+            user_info = user_info_response.json()
+            user_email = user_info.get("email", "unknown")
+            # Use full email as owner
+            owner = user_email
+            
+            # Import contacts
+            from google_contacts import import_contacts_from_google
+            imported_count = await import_contacts_from_google(access_token, db, owner)
+            
+            # Redirect back to frontend with success message
+            return RedirectResponse(
+                url=f"http://localhost:5173?imported={imported_count}&owner={owner}",
+                status_code=302
+            )
+    except Exception as e:
+        # Redirect back with error
+        return RedirectResponse(
+            url=f"http://localhost:5173?error={str(e)}",
+            status_code=302
+        )
+
+if __name__ == "__main__":
+    uvicorn.run("main:app", host="0.0.0.0", port=8000, reload=True)
--- a/backend/models.py
+++ b/backend/models.py
@ -0,0 +1,34 @@
+from sqlalchemy import Boolean, Column, Integer, String, DateTime
+from sqlalchemy.sql import func
+from database import Base
+
+
+class Guest(Base):
+    __tablename__ = "guests"
+
+    id = Column(Integer, primary_key=True, index=True)
+    first_name = Column(String, nullable=False)
+    last_name = Column(String, nullable=False)
+    email = Column(String, unique=True, index=True)
+    phone_number = Column(String)
+    
+    # RSVP status: pending, accepted, declined
+    rsvp_status = Column(String, default="pending")
+    
+    # Meal preferences
+    meal_preference = Column(String)  # vegetarian, vegan, gluten-free, no-preference, etc.
+    
+    # Plus one information
+    has_plus_one = Column(Boolean, default=False)
+    plus_one_name = Column(String, nullable=True)
+    
+    # Owner tracking (who added this guest)
+    owner = Column(String, nullable=True)  # e.g., 'me', 'fiancé', or specific name
+    
+    # Additional notes
+    notes = Column(String, nullable=True)
+    table_number = Column(Integer, nullable=True)
+    
+    # Timestamps
+    created_at = Column(DateTime(timezone=True), server_default=func.now())
+    updated_at = Column(DateTime(timezone=True), onupdate=func.now())
--- a/backend/requirements.txt
+++ b/backend/requirements.txt
@ -0,0 +1,7 @@
+fastapi>=0.104.1
+uvicorn[standard]>=0.24.0
+sqlalchemy>=2.0.23
+psycopg2-binary>=2.9.9
+pydantic[email]>=2.5.0
+httpx>=0.25.2
+python-dotenv>=1.0.0
--- a/backend/schema.sql
+++ b/backend/schema.sql
@ -0,0 +1,105 @@
+-- Wedding Guest List Database Schema
+-- PostgreSQL Database Setup Script
+
+-- ============================================
+-- STEP 1: Create Database User
+-- ============================================
+-- Create a dedicated user for the wedding guest list application
+-- Change the password to something secure!
+CREATE USER wedding_admin WITH PASSWORD 'your_secure_password_here';
+
+-- Grant user the ability to create databases (optional)
+ALTER USER wedding_admin CREATEDB;
+
+-- ============================================
+-- STEP 2: Create Database
+-- ============================================
+-- Create the wedding guests database
+CREATE DATABASE wedding_guests
+    WITH 
+    OWNER = wedding_admin
+    ENCODING = 'UTF8'
+    LC_COLLATE = 'en_US.UTF-8'
+    LC_CTYPE = 'en_US.UTF-8'
+    TEMPLATE = template0;
+
+-- Connect to the new database
+\c wedding_guests
+
+-- ============================================
+-- STEP 3: Grant Schema Privileges
+-- ============================================
+-- Grant all privileges on the public schema to the user
+GRANT ALL PRIVILEGES ON SCHEMA public TO wedding_admin;
+
+-- Grant privileges on all current and future tables
+GRANT ALL PRIVILEGES ON ALL TABLES IN SCHEMA public TO wedding_admin;
+GRANT ALL PRIVILEGES ON ALL SEQUENCES IN SCHEMA public TO wedding_admin;
+
+-- Ensure the user has privileges on future objects
+ALTER DEFAULT PRIVILEGES IN SCHEMA public GRANT ALL ON TABLES TO wedding_admin;
+ALTER DEFAULT PRIVILEGES IN SCHEMA public GRANT ALL ON SEQUENCES TO wedding_admin;
+
+-- ============================================
+-- STEP 4: Create Tables
+-- ============================================
+
+-- Guests table
+CREATE TABLE IF NOT EXISTS guests (
+    id SERIAL PRIMARY KEY,
+    first_name VARCHAR(100) NOT NULL,
+    last_name VARCHAR(100) NOT NULL,
+    email VARCHAR(255) UNIQUE,
+    phone_number VARCHAR(50),
+    rsvp_status VARCHAR(20) DEFAULT 'pending' CHECK (rsvp_status IN ('pending', 'accepted', 'declined')),
+    meal_preference VARCHAR(50),
+    has_plus_one BOOLEAN DEFAULT FALSE,
+    plus_one_name VARCHAR(200),
+    owner VARCHAR(50),
+    notes TEXT,
+    table_number INTEGER,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP WITH TIME ZONE
+);
+
+-- Create indexes for better query performance
+CREATE INDEX idx_guests_email ON guests(email);
+CREATE INDEX idx_guests_rsvp_status ON guests(rsvp_status);
+CREATE INDEX idx_guests_last_name ON guests(last_name);
+CREATE INDEX idx_guests_owner ON guests(owner);
+
+-- Create a trigger to automatically update the updated_at timestamp
+CREATE OR REPLACE FUNCTION update_updated_at_column()
+RETURNS TRIGGER AS $$
+BEGIN
+    NEW.updated_at = CURRENT_TIMESTAMP;
+    RETURN NEW;
+END;
+$$ language 'plpgsql';
+
+CREATE TRIGGER update_guests_updated_at 
+    BEFORE UPDATE ON guests
+    FOR EACH ROW
+    EXECUTE FUNCTION update_updated_at_column();
+
+-- Grant table ownership to wedding_admin
+ALTER TABLE guests OWNER TO wedding_admin;
+
+-- ============================================
+-- STEP 5: Insert Sample Data (Optional)
+-- ============================================
+-- Uncomment the lines below to insert sample guests for testing
+
+-- INSERT INTO guests (first_name, last_name, email, phone_number, rsvp_status, meal_preference, has_plus_one) 
+-- VALUES 
+--     ('John', 'Doe', 'john.doe@example.com', '+1-555-0101', 'accepted', 'vegetarian', TRUE),
+--     ('Jane', 'Smith', 'jane.smith@example.com', '+1-555-0102', 'pending', 'vegan', FALSE),
+--     ('Bob', 'Johnson', 'bob.j@example.com', '+1-555-0103', 'accepted', 'gluten-free', TRUE),
+--     ('Alice', 'Williams', 'alice.w@example.com', '+1-555-0104', 'declined', NULL, FALSE);
+
+-- ============================================
+-- Verification Query
+-- ============================================
+-- Run this to verify the setup
+SELECT 'Database setup completed successfully!' AS status;
+SELECT COUNT(*) AS total_guests FROM guests;
--- a/backend/schemas.py
+++ b/backend/schemas.py
@ -0,0 +1,35 @@
+from pydantic import BaseModel, EmailStr
+from typing import Optional
+from datetime import datetime
+
+
+class GuestBase(BaseModel):
+    first_name: str
+    last_name: str
+    email: Optional[EmailStr] = None
+    phone_number: Optional[str] = None
+    rsvp_status: str = "pending"
+    meal_preference: Optional[str] = None
+    has_plus_one: bool = False
+    plus_one_name: Optional[str] = None
+    owner: Optional[str] = None
+    notes: Optional[str] = None
+    table_number: Optional[int] = None
+
+
+class GuestCreate(GuestBase):
+    pass
+
+
+class GuestUpdate(GuestBase):
+    first_name: Optional[str] = None
+    last_name: Optional[str] = None
+
+
+class Guest(GuestBase):
+    id: int
+    created_at: datetime
+    updated_at: Optional[datetime] = None
+
+    class Config:
+        from_attributes = True
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@ -0,0 +1,30 @@
+# Dependencies
+node_modules/
+
+# Build output
+dist/
+build/
+
+# Environment variables
+.env
+.env.local
+.env.production
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Vite
+.vite/
--- a/frontend/index.html
+++ b/frontend/index.html
@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wedding Guest List</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@ -0,0 +1,22 @@
+{
+  "name": "wedding-guest-list-frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "axios": "^1.6.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "^4.2.1",
+    "vite": "^5.0.8"
+  }
+}
--- a/frontend/public/callback.html
+++ b/frontend/public/callback.html
@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Google OAuth Callback</title>
+</head>
+<body>
+    <script>
+        // Send the token back to the parent window
+        if (window.opener) {
+            window.opener.postMessage(window.location.hash, window.location.origin);
+            window.close();
+        } else {
+            document.write('Authentication successful! You can close this window.');
+        }
+    </script>
+</body>
+</html>
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@ -0,0 +1,96 @@
+.App {
+  min-height: 100vh;
+  padding: 20px;
+}
+
+header {
+  text-align: center;
+  color: white;
+  margin-bottom: 30px;
+}
+
+header h1 {
+  font-size: 2.5rem;
+  font-weight: 600;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  background: white;
+  border-radius: 20px;
+  padding: 30px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+}
+
+.actions-bar {
+  display: flex;
+  gap: 15px;
+  margin-bottom: 25px;
+  flex-wrap: wrap;
+}
+
+.btn {
+  padding: 12px 24px;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+}
+
+.btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+}
+
+.btn-secondary {
+  background: #f3f4f6;
+  color: #374151;
+}
+
+.btn-secondary:hover {
+  background: #e5e7eb;
+}
+
+.btn-danger {
+  background: #ef4444;
+  color: white;
+}
+
+.btn-danger:hover {
+  background: #dc2626;
+}
+
+.loading {
+  text-align: center;
+  padding: 40px;
+  color: #6b7280;
+  font-size: 18px;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .container {
+    padding: 20px;
+  }
+
+  header h1 {
+    font-size: 2rem;
+  }
+
+  .actions-bar {
+    flex-direction: column;
+  }
+
+  .btn {
+    width: 100%;
+  }
+}
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@ -0,0 +1,99 @@
+import { useState, useEffect } from 'react'
+import GuestList from './components/GuestList'
+import GuestForm from './components/GuestForm'
+import SearchFilter from './components/SearchFilter'
+import GoogleImport from './components/GoogleImport'
+import { getGuests, searchGuests } from './api/api'
+import './App.css'
+
+function App() {
+  const [guests, setGuests] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [showForm, setShowForm] = useState(false)
+  const [editingGuest, setEditingGuest] = useState(null)
+
+  useEffect(() => {
+    loadGuests()
+  }, [])
+
+  const loadGuests = async () => {
+    try {
+      const data = await getGuests()
+      setGuests(data)
+      setLoading(false)
+    } catch (error) {
+      console.error('Error loading guests:', error)
+      setLoading(false)
+    }
+  }
+
+  const handleSearch = async (filters) => {
+    try {
+      setLoading(true)
+      const data = await searchGuests(filters)
+      setGuests(data)
+      setLoading(false)
+    } catch (error) {
+      console.error('Error searching guests:', error)
+      setLoading(false)
+    }
+  }
+
+  const handleAddGuest = () => {
+    setEditingGuest(null)
+    setShowForm(true)
+  }
+
+  const handleEditGuest = (guest) => {
+    setEditingGuest(guest)
+    setShowForm(true)
+  }
+
+  const handleFormClose = () => {
+    setShowForm(false)
+    setEditingGuest(null)
+    loadGuests()
+  }
+
+  const handleImportComplete = () => {
+    loadGuests()
+  }
+
+  return (
+    <div className="App">
+      <header>
+        <h1>💒 Wedding Guest List</h1>
+      </header>
+
+      <div className="container">
+        <div className="actions-bar">
+          <button className="btn btn-primary" onClick={handleAddGuest}>
+            + Add Guest
+          </button>
+          <GoogleImport onImportComplete={handleImportComplete} />
+        </div>
+
+        <SearchFilter onSearch={handleSearch} />
+
+        {loading ? (
+          <div className="loading">Loading guests...</div>
+        ) : (
+          <GuestList 
+            guests={guests} 
+            onEdit={handleEditGuest}
+            onUpdate={loadGuests}
+          />
+        )}
+
+        {showForm && (
+          <GuestForm
+            guest={editingGuest}
+            onClose={handleFormClose}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default App
--- a/frontend/src/api/api.js
+++ b/frontend/src/api/api.js
@ -0,0 +1,71 @@
+import axios from 'axios'
+
+const API_BASE_URL = 'http://localhost:8000'
+
+const api = axios.create({
+  baseURL: API_BASE_URL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+})
+
+// Guest API calls
+export const getGuests = async () => {
+  const response = await api.get('/guests/')
+  return response.data
+}
+
+export const getGuest = async (id) => {
+  const response = await api.get(`/guests/${id}`)
+  return response.data
+}
+
+export const createGuest = async (guest) => {
+  const response = await api.post('/guests/', guest)
+  return response.data
+}
+
+export const updateGuest = async (id, guest) => {
+  const response = await api.put(`/guests/${id}`, guest)
+  return response.data
+}
+
+export const deleteGuest = async (id) => {
+  const response = await api.delete(`/guests/${id}`)
+  return response.data
+}
+
+export const deleteGuestsBulk = async (guestIds) => {
+  const response = await api.post('/guests/bulk-delete', guestIds)
+  return response.data
+}
+
+export const undoImport = async (owner) => {
+  const response = await api.delete(`/guests/undo-import/${encodeURIComponent(owner)}`)
+  return response.data
+}
+
+export const getOwners = async () => {
+  const response = await api.get('/guests/owners/')
+  return response.data
+}
+
+export const searchGuests = async ({ query = '', rsvpStatus = '', mealPreference = '', owner = '' }) => {
+  const params = new URLSearchParams()
+  if (query) params.append('query', query)
+  if (rsvpStatus) params.append('rsvp_status', rsvpStatus)
+  if (mealPreference) params.append('meal_preference', mealPreference)
+  if (owner) params.append('owner', owner)
+  
+  const response = await api.get(`/guests/search/?${params.toString()}`)
+  return response.data
+}
+
+export const importGoogleContacts = async (accessToken) => {
+  const response = await api.post('/import/google', null, {
+    params: { access_token: accessToken }
+  })
+  return response.data
+}
+
+export default api
--- a/frontend/src/components/GoogleImport.css
+++ b/frontend/src/components/GoogleImport.css
@ -0,0 +1,28 @@
+.btn-google {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: white;
+  color: #5f6368;
+  border: 1px solid #dadce0;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.btn-google:hover:not(:disabled) {
+  background: #f8f9fa;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.btn-google:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.btn-google svg {
+  flex-shrink: 0;
+}
--- a/frontend/src/components/GoogleImport.jsx
+++ b/frontend/src/components/GoogleImport.jsx
@ -0,0 +1,69 @@
+import { useState, useEffect } from 'react'
+import './GoogleImport.css'
+
+function GoogleImport({ onImportComplete }) {
+  const [importing, setImporting] = useState(false)
+
+  useEffect(() => {
+    // Check if we got redirected back from Google OAuth
+    const urlParams = new URLSearchParams(window.location.search)
+    const imported = urlParams.get('imported')
+    const importOwner = urlParams.get('owner')
+    const error = urlParams.get('error')
+
+    if (imported) {
+      alert(`Successfully imported ${imported} contacts from ${importOwner}'s Google account!`)
+      onImportComplete()
+      // Clean up URL
+      window.history.replaceState({}, document.title, window.location.pathname)
+    }
+
+    if (error) {
+      alert(`Failed to import contacts: ${error}`)
+      // Clean up URL
+      window.history.replaceState({}, document.title, window.location.pathname)
+    }
+  }, [onImportComplete])
+
+  const handleGoogleImport = () => {
+    setImporting(true)
+    // Redirect to backend OAuth endpoint (owner will be extracted from email)
+    window.location.href = 'http://localhost:8000/auth/google'
+  }
+
+  return (
+    <button
+      className="btn btn-google"
+      onClick={handleGoogleImport}
+      disabled={importing}
+    >
+      {importing ? (
+        '⏳ Importing...'
+      ) : (
+        <>
+          <svg viewBox="0 0 24 24" width="18" height="18">
+            <path
+              fill="currentColor"
+              d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+            />
+            <path
+              fill="currentColor"
+              d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+            />
+            <path
+              fill="currentColor"
+              d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+            />
+            <path
+              fill="currentColor"
+              d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+            />
+          </svg>
+          Import from Google
+        </>
+      )}
+    </button>
+  )
+}
+
+export default GoogleImport
--- a/frontend/src/components/GuestForm.css
+++ b/frontend/src/components/GuestForm.css
@ -0,0 +1,133 @@
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 20px;
+}
+
+.modal-content {
+  background: white;
+  border-radius: 16px;
+  width: 100%;
+  max-width: 600px;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 30px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.modal-header h2 {
+  color: #1f2937;
+  font-size: 1.5rem;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 32px;
+  color: #6b7280;
+  cursor: pointer;
+  line-height: 1;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+}
+
+.close-btn:hover {
+  color: #374151;
+}
+
+form {
+  padding: 30px;
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 8px;
+  color: #374151;
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  font-size: 14px;
+  transition: all 0.2s ease;
+}
+
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.checkbox-group label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+
+.checkbox-group input[type="checkbox"] {
+  width: auto;
+  cursor: pointer;
+}
+
+.form-actions {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+  margin-top: 30px;
+  padding-top: 20px;
+  border-top: 1px solid #e5e7eb;
+}
+
+@media (max-width: 768px) {
+  .form-row {
+    grid-template-columns: 1fr;
+  }
+
+  .modal-content {
+    max-height: 95vh;
+  }
+
+  form {
+    padding: 20px;
+  }
+
+  .modal-header {
+    padding: 15px 20px;
+  }
+}
--- a/frontend/src/components/GuestForm.jsx
+++ b/frontend/src/components/GuestForm.jsx
@ -0,0 +1,192 @@
+import { useState, useEffect } from 'react'
+import { createGuest, updateGuest } from '../api/api'
+import './GuestForm.css'
+
+function GuestForm({ guest, onClose }) {
+  const [formData, setFormData] = useState({
+    first_name: '',
+    last_name: '',
+    email: '',
+    phone_number: '',
+    rsvp_status: 'pending',
+    meal_preference: '',
+    has_plus_one: false,
+    plus_one_name: '',
+    notes: '',
+    table_number: ''
+  })
+
+  useEffect(() => {
+    if (guest) {
+      setFormData(guest)
+    }
+  }, [guest])
+
+  const handleChange = (e) => {
+    const { name, value, type, checked } = e.target
+    setFormData({
+      ...formData,
+      [name]: type === 'checkbox' ? checked : value
+    })
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    try {
+      if (guest) {
+        await updateGuest(guest.id, formData)
+      } else {
+        await createGuest(formData)
+      }
+      onClose()
+    } catch (error) {
+      console.error('Error saving guest:', error)
+      alert('Failed to save guest')
+    }
+  }
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h2>{guest ? 'Edit Guest' : 'Add New Guest'}</h2>
+          <button className="close-btn" onClick={onClose}>×</button>
+        </div>
+
+        <form onSubmit={handleSubmit}>
+          <div className="form-row">
+            <div className="form-group">
+              <label>First Name *</label>
+              <input
+                type="text"
+                name="first_name"
+                value={formData.first_name}
+                onChange={handleChange}
+                required
+              />
+            </div>
+
+            <div className="form-group">
+              <label>Last Name *</label>
+              <input
+                type="text"
+                name="last_name"
+                value={formData.last_name}
+                onChange={handleChange}
+                required
+              />
+            </div>
+          </div>
+
+          <div className="form-row">
+            <div className="form-group">
+              <label>Email</label>
+              <input
+                type="email"
+                name="email"
+                value={formData.email}
+                onChange={handleChange}
+              />
+            </div>
+
+            <div className="form-group">
+              <label>Phone Number</label>
+              <input
+                type="tel"
+                name="phone_number"
+                value={formData.phone_number}
+                onChange={handleChange}
+              />
+            </div>
+          </div>
+
+          <div className="form-row">
+            <div className="form-group">
+              <label>RSVP Status</label>
+              <select
+                name="rsvp_status"
+                value={formData.rsvp_status}
+                onChange={handleChange}
+              >
+                <option value="pending">Pending</option>
+                <option value="accepted">Accepted</option>
+                <option value="declined">Declined</option>
+              </select>
+            </div>
+
+            <div className="form-group">
+              <label>Meal Preference</label>
+              <select
+                name="meal_preference"
+                value={formData.meal_preference}
+                onChange={handleChange}
+              >
+                <option value="">No preference</option>
+                <option value="vegetarian">Vegetarian</option>
+                <option value="vegan">Vegan</option>
+                <option value="gluten-free">Gluten-free</option>
+                <option value="kosher">Kosher</option>
+                <option value="halal">Halal</option>
+              </select>
+            </div>
+          </div>
+
+          <div className="form-group checkbox-group">
+            <label>
+              <input
+                type="checkbox"
+                name="has_plus_one"
+                checked={formData.has_plus_one}
+                onChange={handleChange}
+              />
+              Has Plus One
+            </label>
+          </div>
+
+          {formData.has_plus_one && (
+            <div className="form-group">
+              <label>Plus One Name</label>
+              <input
+                type="text"
+                name="plus_one_name"
+                value={formData.plus_one_name}
+                onChange={handleChange}
+              />
+            </div>
+          )}
+
+          <div className="form-group">
+            <label>Table Number</label>
+            <input
+              type="number"
+              name="table_number"
+              value={formData.table_number}
+              onChange={handleChange}
+            />
+          </div>
+
+          <div className="form-group">
+            <label>Notes</label>
+            <textarea
+              name="notes"
+              value={formData.notes}
+              onChange={handleChange}
+              rows="3"
+            />
+          </div>
+
+          <div className="form-actions">
+            <button type="button" className="btn btn-secondary" onClick={onClose}>
+              Cancel
+            </button>
+            <button type="submit" className="btn btn-primary">
+              {guest ? 'Update' : 'Add'} Guest
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+export default GuestForm
--- a/frontend/src/components/GuestList.css
+++ b/frontend/src/components/GuestList.css
@ -0,0 +1,205 @@
+.guest-list {
+  margin-top: 30px;
+}
+
+.list-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.list-header h2 {
+  margin: 0;
+  color: #1f2937;
+  font-size: 1.5rem;
+}
+
+.list-controls {
+  display: flex;
+  gap: 15px;
+  align-items: center;
+}
+
+.list-controls label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #374151;
+  font-size: 14px;
+}
+
+.list-controls select {
+  padding: 8px 12px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 14px;
+  background: white;
+  cursor: pointer;
+}
+
+.guest-list h2 {
+  margin-bottom: 20px;
+  color: #1f2937;
+  font-size: 1.5rem;
+}
+
+.table-container {
+  overflow-x: auto;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  background: white;
+}
+
+thead {
+  background: #f9fafb;
+  border-bottom: 2px solid #e5e7eb;
+}
+
+th {
+  padding: 12px;
+  text-align: left;
+  font-weight: 600;
+  color: #374151;
+  font-size: 14px;
+}
+
+td {
+  padding: 12px;
+  border-bottom: 1px solid #e5e7eb;
+  color: #4b5563;
+}
+
+tbody tr:hover {
+  background: #f9fafb;
+}
+
+.badge {
+  display: inline-block;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+  text-transform: capitalize;
+}
+
+.badge-success {
+  background: #d1fae5;
+  color: #065f46;
+}
+
+.badge-danger {
+  background: #fee2e2;
+  color: #991b1b;
+}
+
+.badge-warning {
+  background: #fef3c7;
+  color: #92400e;
+}
+
+.actions {
+  display: flex;
+  gap: 8px;
+}
+
+.btn-small {
+  padding: 6px 12px;
+  border: none;
+  border-radius: 6px;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.btn-edit {
+  background: #dbeafe;
+  color: #1e40af;
+}
+
+.btn-edit:hover {
+  background: #bfdbfe;
+}
+
+.btn-delete {
+  background: #fee2e2;
+  color: #991b1b;
+}
+
+.btn-delete:hover {
+  background: #fecaca;
+}
+
+.no-guests {
+  text-align: center;
+  padding: 60px 20px;
+  color: #6b7280;
+}
+
+.no-guests p {
+  font-size: 18px;
+}
+
+.owner-cell {
+  font-size: 12px;
+  color: #6b7280;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  margin-top: 20px;
+  padding: 15px;
+}
+
+.pagination button {
+  padding: 8px 16px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  background: white;
+  color: #374151;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.pagination button:hover:not(:disabled) {
+  background: #f3f4f6;
+  border-color: #9ca3af;
+}
+
+.pagination button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.pagination span {
+  color: #374151;
+  font-size: 14px;
+}
+
+@media (max-width: 768px) {
+  table {
+    font-size: 14px;
+  }
+
+  th, td {
+    padding: 8px;
+  }
+
+  .actions {
+    flex-direction: column;
+  }
+
+  .btn-small {
+    width: 100%;
+  }
+}
--- a/frontend/src/components/GuestList.jsx
+++ b/frontend/src/components/GuestList.jsx
@ -0,0 +1,199 @@
+import { useState } from 'react'
+import { deleteGuest, deleteGuestsBulk } from '../api/api'
+import './GuestList.css'
+
+function GuestList({ guests, onEdit, onUpdate }) {
+  const [selectedGuests, setSelectedGuests] = useState([])
+  const [currentPage, setCurrentPage] = useState(1)
+  const [pageSize, setPageSize] = useState(100)
+
+  // Calculate pagination
+  const totalPages = pageSize === 'all' ? 1 : Math.ceil(guests.length / pageSize)
+  const startIndex = pageSize === 'all' ? 0 : (currentPage - 1) * pageSize
+  const endIndex = pageSize === 'all' ? guests.length : startIndex + pageSize
+  const paginatedGuests = guests.slice(startIndex, endIndex)
+
+  const handleSelectAll = (e) => {
+    if (e.target.checked) {
+      setSelectedGuests(paginatedGuests.map(g => g.id))
+    } else {
+      setSelectedGuests([])
+    }
+  }
+
+  const handleSelectOne = (guestId) => {
+    if (selectedGuests.includes(guestId)) {
+      setSelectedGuests(selectedGuests.filter(id => id !== guestId))
+    } else {
+      setSelectedGuests([...selectedGuests, guestId])
+    }
+  }
+
+  const handleBulkDelete = async () => {
+    if (selectedGuests.length === 0) return
+    
+    if (window.confirm(`Are you sure you want to delete ${selectedGuests.length} guests?`)) {
+      try {
+        await deleteGuestsBulk(selectedGuests)
+        setSelectedGuests([])
+        onUpdate()
+      } catch (error) {
+        console.error('Error deleting guests:', error)
+        alert('Failed to delete guests')
+      }
+    }
+  }
+
+  const handleDelete = async (id) => {
+    if (window.confirm('Are you sure you want to delete this guest?')) {
+      try {
+        await deleteGuest(id)
+        onUpdate()
+      } catch (error) {
+        console.error('Error deleting guest:', error)
+        alert('Failed to delete guest')
+      }
+    }
+  }
+
+  const getRsvpBadgeClass = (status) => {
+    switch (status) {
+      case 'accepted':
+        return 'badge-success'
+      case 'declined':
+        return 'badge-danger'
+      default:
+        return 'badge-warning'
+    }
+  }
+
+  if (guests.length === 0) {
+    return (
+      <div className="no-guests">
+        <p>No guests found. Add your first guest to get started!</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="guest-list">
+      <div className="list-header">
+        <h2>Guest List ({guests.length})</h2>
+        <div className="list-controls">
+          <label>
+            Show:
+            <select value={pageSize} onChange={(e) => {
+              const value = e.target.value === 'all' ? 'all' : parseInt(e.target.value)
+              setPageSize(value)
+              setCurrentPage(1)
+            }}>
+              <option value="25">25</option>
+              <option value="50">50</option>
+              <option value="100">100</option>
+              <option value="200">200</option>
+              <option value="all">All</option>
+            </select>
+          </label>
+          {selectedGuests.length > 0 && (
+            <button className="btn btn-danger" onClick={handleBulkDelete}>
+              Delete Selected ({selectedGuests.length})
+            </button>
+          )}
+        </div>
+      </div>
+      <div className="table-container">
+        <table>
+          <thead>
+            <tr>
+              <th>
+                <input
+                  type="checkbox"
+                  onChange={handleSelectAll}
+                  checked={paginatedGuests.length > 0 && selectedGuests.length === paginatedGuests.length}
+                />
+              </th>
+              <th>Name</th>
+              <th>Email</th>
+              <th>Phone</th>
+              <th>RSVP</th>
+              <th>Meal</th>
+              <th>Plus One</th>
+              <th>Table</th>
+              <th>Owner</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {paginatedGuests.map((guest) => (
+              <tr key={guest.id}>
+                <td>
+                  <input
+                    type="checkbox"
+                    checked={selectedGuests.includes(guest.id)}
+                    onChange={() => handleSelectOne(guest.id)}
+                  />
+                </td>
+                <td>
+                  <strong>{guest.first_name} {guest.last_name}</strong>
+                </td>
+                <td>{guest.email || '-'}</td>
+                <td>{guest.phone_number || '-'}</td>
+                <td>
+                  <span className={`badge ${getRsvpBadgeClass(guest.rsvp_status)}`}>
+                    {guest.rsvp_status}
+                  </span>
+                </td>
+                <td>{guest.meal_preference || '-'}</td>
+                <td>
+                  {guest.has_plus_one ? (
+                    <span>✓ {guest.plus_one_name || 'Yes'}</span>
+                  ) : (
+                    '-'
+                  )}
+                </td>
+                <td>{guest.table_number || '-'}</td>
+                <td className="owner-cell">{guest.owner || '-'}</td>
+                <td className="actions">
+                  <button
+                    className="btn-small btn-edit"
+                    onClick={() => onEdit(guest)}
+                  >
+                    Edit
+                  </button>
+                  <button
+                    className="btn-small btn-delete"
+                    onClick={() => handleDelete(guest.id)}
+                  >
+                    Delete
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      
+      {pageSize !== 'all' && totalPages > 1 && (
+        <div className="pagination">
+          <button 
+            onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
+            disabled={currentPage === 1}
+          >
+            Previous
+          </button>
+          <span>
+            Page {currentPage} of {totalPages}
+          </span>
+          <button 
+            onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
+            disabled={currentPage === totalPages}
+          >
+            Next
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default GuestList
--- a/frontend/src/components/SearchFilter.css
+++ b/frontend/src/components/SearchFilter.css
@ -0,0 +1,75 @@
+.search-filter {
+  background: #f9fafb;
+  padding: 20px;
+  border-radius: 12px;
+  margin-bottom: 25px;
+}
+
+.filter-row {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr 1fr auto auto;
+  gap: 12px;
+  align-items: center;
+}
+
+.search-box {
+  position: relative;
+}
+
+.search-box input {
+  width: 100%;
+  padding: 12px 16px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  font-size: 14px;
+  transition: all 0.2s ease;
+}
+
+.search-box input:focus {
+  outline: none;
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.search-filter select {
+  width: 100%;
+  padding: 12px 16px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  font-size: 14px;
+  background: white;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.search-filter select:focus {
+  outline: none;
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.btn-reset {
+  padding: 12px 20px;
+  background: #374151;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.2s ease;
+}
+
+.btn-reset:hover {
+  background: #1f2937;
+}
+
+@media (max-width: 768px) {
+  .filter-row {
+    grid-template-columns: 1fr;
+  }
+
+  .btn-reset {
+    width: 100%;
+  }
+}
--- a/frontend/src/components/SearchFilter.jsx
+++ b/frontend/src/components/SearchFilter.jsx
@ -0,0 +1,132 @@
+import { useState, useEffect } from 'react'
+import { getOwners, undoImport } from '../api/api'
+import './SearchFilter.css'
+
+function SearchFilter({ onSearch }) {
+  const [filters, setFilters] = useState({
+    query: '',
+    rsvpStatus: '',
+    mealPreference: '',
+    owner: ''
+  })
+  const [owners, setOwners] = useState([])
+
+  useEffect(() => {
+    loadOwners()
+  }, [])
+
+  const loadOwners = async () => {
+    try {
+      const data = await getOwners()
+      setOwners(data.owners || [])
+    } catch (error) {
+      console.error('Error loading owners:', error)
+    }
+  }
+
+  const handleChange = (e) => {
+    const { name, value } = e.target
+    const newFilters = {
+      ...filters,
+      [name]: value
+    }
+    setFilters(newFilters)
+    onSearch(newFilters)
+  }
+
+  const handleReset = () => {
+    const resetFilters = {
+      query: '',
+      rsvpStatus: '',
+      mealPreference: '',
+      owner: ''
+    }
+    setFilters(resetFilters)
+    onSearch(resetFilters)
+  }
+
+  const handleUndoImport = async () => {
+    if (!filters.owner) {
+      alert('Please select an owner to undo their import')
+      return
+    }
+
+    if (window.confirm(`Are you sure you want to delete all guests imported by ${filters.owner}?`)) {
+      try {
+        const result = await undoImport(filters.owner)
+        alert(result.message)
+        handleReset()
+        loadOwners()
+        onSearch({})
+      } catch (error) {
+        console.error('Error undoing import:', error)
+        alert('Failed to undo import')
+      }
+    }
+  }
+
+  return (
+    <div className="search-filter">
+      <div className="filter-row">
+        <div className="search-box">
+          <input
+            type="text"
+            name="query"
+            value={filters.query}
+            onChange={handleChange}
+            placeholder="Search by name, email, or phone..."
+          />
+        </div>
+
+        <select
+          name="rsvpStatus"
+          value={filters.rsvpStatus}
+          onChange={handleChange}
+        >
+          <option value="">All RSVP Status</option>
+          <option value="pending">Pending</option>
+          <option value="accepted">Accepted</option>
+          <option value="declined">Declined</option>
+        </select>
+
+        <select
+          name="mealPreference"
+          value={filters.mealPreference}
+          onChange={handleChange}
+        >
+          <option value="">All Meals</option>
+          <option value="vegetarian">Vegetarian</option>
+          <option value="vegan">Vegan</option>
+          <option value="gluten-free">Gluten-free</option>
+          <option value="kosher">Kosher</option>
+          <option value="halal">Halal</option>
+        </select>
+
+        <select
+          name="owner"
+          value={filters.owner}
+          onChange={handleChange}
+        >
+          <option value="">All Guests</option>
+          {owners.map(owner => (
+            <option key={owner} value={owner}>{owner}</option>
+          ))}
+        </select>
+
+        {filters.owner && (
+          <button className="btn btn-secondary" onClick={handleUndoImport}>
+            Undo Import
+          </button>
+        )}
+
+        {(filters.query || filters.rsvpStatus || filters.mealPreference || filters.owner) && (
+          <button className="btn-reset" onClick={handleReset}>
+            Clear Filters
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default SearchFilter
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@ -0,0 +1,19 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  min-height: 100vh;
+}
+
+#root {
+  min-height: 100vh;
+}
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173
+  }
+})
--- a/start.bat
+++ b/start.bat
@ -0,0 +1,25 @@
+@echo off
+echo Starting Wedding Guest List Application...
+echo.
+
+echo [1/3] Starting PostgreSQL (make sure it's running)
+timeout /t 2 /nobreak > nul
+
+echo [2/3] Starting Backend Server...
+start "Backend API" cmd /k "cd /d %~dp0backend && uvicorn main:app --reload"
+timeout /t 3 /nobreak > nul
+
+echo [3/3] Starting Frontend...
+start "Frontend Dev Server" cmd /k "cd /d %~dp0frontend && npm run dev"
+
+echo.
+echo ========================================
+echo Application is starting!
+echo ========================================
+echo.
+echo Backend API: http://localhost:8000
+echo API Docs: http://localhost:8000/docs
+echo Frontend: http://localhost:5173
+echo.
+echo Press any key to close this window...
+pause > nul
--- a/start.sh
+++ b/start.sh
@ -0,0 +1,35 @@
+#!/bin/bash
+
+echo "Starting Wedding Guest List Application..."
+echo
+
+echo "[1/3] Starting PostgreSQL (make sure it's running)"
+sleep 2
+
+echo "[2/3] Starting Backend Server..."
+cd backend
+uvicorn main:app --reload &
+BACKEND_PID=$!
+cd ..
+sleep 3
+
+echo "[3/3] Starting Frontend..."
+cd frontend
+npm run dev &
+FRONTEND_PID=$!
+cd ..
+
+echo
+echo "========================================"
+echo "Application is running!"
+echo "========================================"
+echo
+echo "Backend API: http://localhost:8000"
+echo "API Docs: http://localhost:8000/docs"
+echo "Frontend: http://localhost:5173"
+echo
+echo "Press Ctrl+C to stop all services"
+
+# Wait for Ctrl+C
+trap "kill $BACKEND_PID $FRONTEND_PID; exit" INT
+wait