Water Bar Email MCP Server

# 🎬 Hackathon Demo Video Script (90 seconds) ## 🕵️ Noir Detective Theme: "Case File: Hydration" --- ## 📝 **NARRATION CHUNKS (15 seconds each)** ### **Chunk 1 (0:00 - 0:15) - INTRO** ``` Another late night in the data district. A booking came in — ice bath, sauna, a ginger shot on the side. But I'd seen this story before. Fatigue. Headaches. Hydration gone missing. ``` **VISUAL:** - Black screen - White typewriter text: "CASE FILE: HYDRATION" - Red stamp: "CLASSIFIED" - Noir jazz starts --- ### **Chunk 2 (0:15 - 0:30) - THE INVESTIGATION** ``` The case wasn't just booking itself. It was the trail of data left behind. Supabase held the records. Stripe guarded the payments. And Resend? Well, Resend had to deliver the message... or the kid was outta luck. ``` **VISUAL:** - Windsurf IDE (black & white) - Supabase MCP tool list - Execute query → JSON bookings appear - Scroll through booking data --- ### **Chunk 3 (0:30 - 0:45) - THE CURE** ``` The machine whispered back: the cure. Timeline, pristine. Drinks paired. Payment link locked and loaded. Case closed. ``` **VISUAL:** - Show React Email template code - Compiled preview appears (purple gradient) - Zoom in on timeline with paired drinks - Show booking details --- ### **Chunk 4 (0:45 - 1:00) - ORCHESTRATION** ``` See, this wasn't just about hydration. It was about orchestration. Three MCP servers working together — Supabase, Stripe, Resend — all laid up in a bow. An autonomous agent for wellness. ``` **VISUAL:** - Windsurf terminal - Execute: `send_waterbar_email` - Console logs: "Email sent! ID: xxx" - Show Supabase: email_log table updates --- ### **Chunk 5 (1:00 - 1:15) - THE DELIVERY** ``` And when the email landed? Purple. Pink. Paired drinks, timeline, payment link. The inbox went from black-and-white to full color. The cure arrived. ``` **VISUAL:** - Gmail inbox (black & white) - Email notification appears - Click email → Opens to FULL COLOR - Scroll through beautiful email - Show timeline + drinks section --- ### **Chunk 6 (1:15 - 1:30) - THE WRAP** ``` Supabase keeps the records. React writes the story. Resend delivers the goods. Three pieces, one flow. Fork it. Clone it. Crack your own case. The repo's yours now, detective. ``` **VISUAL:** - Back to Windsurf - Show MCP tools list - GitHub repo link appears: - `github.com/[username]/case-file-hydration` - Text overlay: - "Built with: Supabase MCP | Resend MCP | React Email" - "Windsurf + Codeium MCP Hackathon 2025" --- ## 🎥 **SHOT LIST CHECKLIST** ### **Required Recordings:** - [ ] Hedra avatar (noir detective character) - narration - [ ] Windsurf IDE - Supabase MCP query - [ ] React Email template code - [ ] Terminal - Email sending logs - [ ] Gmail inbox - Email arrival (B&W) - [ ] Email opened - Full color reveal - [ ] GitHub repo page ### **Effects to Add:** - [ ] Black & white filter (until email opens) - [ ] Color burst transition (at email reveal) - [ ] Typewriter SFX (intro) - [ ] Noir jazz background music (low volume) - [ ] Fade transitions between scenes --- ## 🎯 **WHAT TO SHOW (Public Demo)** ✅ **Show:** - Supabase MCP querying bookings - React Email template compilation - Resend MCP sending email - Email delivery tracking in Supabase - Beautiful branded email in inbox ❌ **DON'T Show (Secret Sauce):** - Webhook endpoints - Dexie updates - `/log-consumption` page - Full autonomous loop details - .env files or API keys --- ## 🔊 **AUDIO RECORDING FOR HEDRA** ### **Use HackerJack Voice:** Upload each 15-second chunk separately to Hedra: 1. **Chunk 1:** Intro (mysterious, setting scene) 2. **Chunk 2:** Investigation (slightly faster, building tension) 3. **Chunk 3:** The cure (confident, solving) 4. **Chunk 4:** Orchestration (impressed, explaining) 5. **Chunk 5:** Delivery (satisfied, reveal) 6. **Chunk 6:** Wrap (cool, call to action) --- ## 🎬 **EDITING TIMELINE** ``` 0:00-0:15 | Black screen → Typewriter intro 0:15-0:30 | Windsurf → Supabase query (B&W) 0:30-0:45 | React template → Compiled preview 0:45-1:00 | Terminal → Email sending 1:00-1:15 | Gmail → Email opens (COLOR BURST) 1:15-1:30 | GitHub repo → Call to action ``` --- ## 📹 **RECORDING TIPS** 1. **Record all Windsurf screens first** (before making any changes) 2. **Use screen recording at 1920x1080** 3. **Record Gmail on phone** (real device = more authentic) 4. **Keep each scene 10-15 seconds max** 5. **Add 1-second black frames** between transitions --- ## 🚀 **EXPORT SETTINGS** - **Resolution:** 1920x1080 (1080p) - **Frame Rate:** 30fps - **Format:** MP4 - **Total Length:** 90 seconds (max) - **Audio:** Background jazz at -20dB --- ## 📤 **WHERE TO SHARE** 1. **LinkedIn:** Post with noir README text 2. **YouTube:** Upload with title "Case File: Hydration - MCP Hackathon Demo" 3. **GitHub README:** Embed video at top 4. **Hackathon Submission:** Link to video + repo --- ## 🏆 **WINNING ELEMENTS** - ✅ Unique noir detective theme (memorable) - ✅ Real business value (actual booking system) - ✅ Multi-MCP orchestration (Supabase + Resend + Stripe) - ✅ Beautiful design (React Email templates) - ✅ Working demo (can be forked and tested) - ✅ Cinematic presentation (not just code walkthrough) --- **Now go make your movie, detective.** 🎬🕵️