Log inSign up
project logo

Riya04

chai-pe-charcha

Public
Remixed
Real-time collaborative promotion poem generator ☕
Edit with AI
1 Branch
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
index.ts
README.md

Chai pe Charcha ☕ — Collaborative Promotion Poem Generator

A live, interactive web app for short team celebration sessions. Participants join via a shared link, enter their name, and drop words or phrases that capture their journey. Every contribution appears on a real-time Word Wall that everyone sees. When the moment's right, the facilitator picks a tone and hits Brew — the app calls the Anthropic API to weave the group's own words into a custom celebratory poem.

Built for a 30-minute virtual connect celebrating newly promoted colleagues at Deloitte's OWC practice.

Features

  • 🧱 Shared real-time word wall — SQLite-backed, polls every 4 seconds so everyone stays in sync.
  • ✋ 3 words per person — keeps contributions balanced (enforced server-side by name).
  • 🎨 3 poem tones — Playful, Bollywood Shayari, and Inspirational, generated server-side with Claude.
  • 📱 Mobile-friendly — responsive layout that works on phones and laptops.
  • 🔄 One-click reset — clear the wall to reuse the app across sessions.

Setup

This app needs an Anthropic API key to brew poems. Create one at https://console.anthropic.com/settings/keys, then add it as an environment variable named ANTHROPIC_API_KEY:

👉 Add ANTHROPIC_API_KEY here: https://www.val.town/x/Riya04/chai-pe-charcha/environment-variables?key=ANTHROPIC_API_KEY

Everything else — the SQLite table and word wall — sets itself up automatically.

How to run a session

  1. Share the app URL with the group.
  2. Everyone enters their name and adds up to 3 words/phrases.
  3. Watch the Word Wall fill up live.
  4. The facilitator picks a tone and hits ☕ Brew the Poem.
  5. Read the poem aloud and celebrate! 🎉
  6. Hit Reset wall to start fresh for the next group.

Architecture

Rendering mermaid diagram...

File structure

index.ts                    ← Hono backend (serves frontend + API routes)
backend/
  db.ts                     ← SQLite word wall (add / list / reset, 3-per-person limit)
  poem.ts                   ← Anthropic poem generation + tone prompts
frontend/
  index.html                ← HTML shell (Twind + React)
  index.tsx                 ← React entrypoint
  types.ts                  ← Shared types + tone options
  favicon.svg               ← Chai-cup icon
  components/
    App.tsx                 ← Root component (state, polling, reset)
    WordForm.tsx            ← Name + word entry with per-person limit
    WordWall.tsx            ← Live wall of sticky-note words
    BrewPanel.tsx           ← Tone picker + Brew button + poem display

API routes

MethodPathPurpose
GET/api/wordsFetch the current word wall
POST/api/wordsAdd a word ({ name, word })
POST/api/brewGenerate a poem ({ tone })
POST/api/resetClear the wall for a new session