Meditation Script Generator

A small web app that generates guided meditation scripts from either random inspiration or user-provided keywords, and (once signed in) lets users save, copy, download, and regenerate their scripts.

Script output is designed to follow the guided-meditation writing guidance from TunePocket’s article: How To Write A Compelling Guided Meditation Script.

What this project demonstrates (for recruiters / hiring teams)

• End-to-end product thinking: landing → generate → refine → save → export
• Modern web stack: React + Vite + TypeScript + Tailwind
• Serverless backend: Netlify Functions for AI calls (API key stays server-side)
• Real user features: authentication + per-user persistence (Supabase)
• Security basics: secrets never in the browser, Row Level Security (RLS) for private user data

Features

• Generate meditation scripts
  • Random: chooses a random inspiration link from src/lib/inspiration-data.ts and derives a topic label from its slug
  • Keywords: uses user-entered topic keywords
• Constrained style (based on TunePocket)
  • simple language
  • specific, easy-to-follow instructions
  • vivid visualization
  • positive present tense
  • action steps
  • gradual ending (no abrupt stop)
• Duration slider: targets ~5–30 minutes (implemented via word-count/time targets)
• Library (account): save generated scripts, view/open them later
• User identification: avatar icon in header showing first letter of email with tooltip
• Actions: copy to clipboard, download .txt, regenerate from saved script (same params; returns to generator), regenerate with tweaks (pre-fills generator form for modification)

Tech stack

• Frontend: React + Vite + TypeScript
• Styling: Tailwind CSS
• AI: OpenAI (via Netlify Function)
• Auth/DB: Supabase Auth + Postgres
• Hosting: Netlify

Architecture (high level)

• The browser app calls a Netlify Function at /.netlify/functions/generate for script generation.
• The function calls OpenAI with server-side credentials and returns a structured script (script_json + script_text).
• Signed-in users save scripts to Supabase; RLS keeps scripts private per user.

More detail: docs/ARCHITECTURE.md.

Repo layout

• src/: React app
• netlify/functions/: serverless functions (OpenAI generation)
• src/lib/inspiration-data.ts: inspiration links used by Random mode
• docs/example-scripts-excerpts.json: source list (for curation/reference)
• supabase/schema.sql: database table + RLS policies
• docs/: planning + architecture docs

Local development

1. Install dependencies

npm install

2. Create .env for the frontend (Vite)

VITE_SUPABASE_URL=...
VITE_SUPABASE_PUBLISHABLE_KEY=...

See docs/ENV.example for a copy/paste template.

3. Run dev server

# Recommended: Netlify Dev (so `/.netlify/functions/generate` works locally)
npx netlify dev

Deployment

See docs/NETLIFY.md (build settings, redirects, and required env vars).

Project planning & status

• docs/PROGRESS.md: implementation checklist + status
• docs/ARCHITECTURE.md: data flow + storage + security notes
• docs/TROUBLESHOOTING.md: common issues and solutions