Plan with Friends!

Collaborative event planning app where multiple people chat together with an AI facilitator to plan an event. As the group discusses and agrees on details — venue, date, guest list, food, activities — the AI locks in decisions and builds a live event flyer. The flyer can be restyled with AI-generated themes, downloaded as a PDF, or published as a shareable permalink.

Tech Stack

• Backend: Python/Flask (Vercel serverless functions in production, standard Flask server for local dev)
• Database: Neon Postgres (stores sessions, messages, plan state, published flyers)
• AI: Claude API (Sonnet) — chat facilitator + flyer style generation
• Frontend: Vanilla JS, no framework
• Push Notifications: Web Push API with VAPID, pywebpush
• Social Cards: Dynamic OG images generated with Pillow
• Deployment: Vercel

Local Setup

# Install dependencies
pip install -r requirements.txt

# Set environment variables (copy from .env.example or create .env)
ANTHROPIC_API_KEY=sk-ant-...
DATABASE_URL=postgresql://...
VAPID_PRIVATE_KEY=...
VAPID_PUBLIC_KEY=...

# Run
python app.py
# → http://localhost:5001

Deployment

The app deploys to Vercel. The GitHub repo is linked for auto-deploy on push to main.

Required Vercel environment variables:

• ANTHROPIC_API_KEY — Claude API key
• DATABASE_URL — Neon Postgres connection string
• VAPID_PRIVATE_KEY — Web Push private key
• VAPID_PUBLIC_KEY — Web Push public key

Manual deploy: vercel --prod

Database

The app uses two tables, both auto-created:

• loop_sessions — active planning sessions (id, participants, messages, plan JSON)
• published_flyers — published event flyers (slug, plan, style)

Project Structure

├── api/
│   └── index.py          # Production backend (Vercel serverless)
├── app.py                # Local dev backend (mirrors api/index.py)
├── public/
│   ├── index.html        # Main HTML (served statically by Vercel)
│   ├── sw.js             # Service worker for push notifications
│   └── static/
│       ├── app.js        # Frontend JS (production copy)
│       └── style.css     # CSS (production copy)
├── static/
│   ├── app.js            # Frontend JS (source)
│   └── style.css         # CSS (source)
├── templates/
│   ├── index.html        # Main HTML (Flask template for local dev)
│   └── flyer.html        # Published flyer page template
├── requirements.txt
└── vercel.json           # Vercel routing config

Features

• Group chat with AI facilitator that guides event planning
• Live event flyer that updates as decisions are locked in
• AI-generated flyer styles — each restyle produces a unique visual theme
• PDF download of the finished flyer
• Publish & share — generates a permalink for the flyer
• Push notifications — notifies participants when someone sends a message
• Social share cards — /invite/ links render dynamic OG images with event details