A focused frontend MVP for mid-sized nonprofits who need a guided, unified approach to donor communications. VisionFlow helps organizations articulate their mission story through The Vision Activity framework, then uses that story as the foundation for a single, high-impact deliverable: a Fundraising Campaign Email.
This is a narrowly scoped pilot MVP.
The tool focuses exclusively on one use case: generating a Fundraising Campaign Email that is automatically aligned with an organization's Vision, Commitment, and Core Values — as surfaced through The Vision Activity.
Generic content types (social posts, newsletters, volunteer appeals, etc.) are intentionally excluded from this pilot. The goal is depth, not breadth: one cohesive donor email, built on a genuine organizational story.
VisionFlow guides users through three sequential steps:
A guided, conversational reflection based on the Vision Activity framework (Catherine Alonzo). Users answer three deeply intentional questions tailored for mid-sized nonprofits:
- Future Vision — "Imagine it's ten years from now and your mission has been fully accomplished. What does the world look like? What has fundamentally changed for the communities you serve?"
- Commitment — "Who is your organization most deeply committed to serving — and what is the single most important transformation you promise them?"
- Core Values — "What are the 3–5 core values that guide how your team shows up every day? These are your non-negotiables."
The answers are stored in the application profile and become the bedrock of every campaign built in Step 3.
A visual confirmation screen that reflects the organization's captured story back to them — Vision, Commitment, and Core Values displayed clearly before any content is generated. This step ensures the user feels seen and understood before moving forward.
A structured, form-based composer with four specific inputs:
| Input | Purpose |
|---|---|
| Campaign Goal | The concrete, measurable outcome this campaign aims to achieve |
| Target Audience | Who receives this email (e.g., lapsed donors, major gift prospects) |
| Call to Action | The single action donors are asked to take |
| Campaign Urgency | An optional time-sensitive element to boost response rates |
| Email Tone | Warm & Grateful · Urgent & Compelling · Inspiring & Hopeful |
The generated email automatically weaves in the organization's Vision, Commitment, and Core Values from Step 1 — ensuring every campaign feels authentic and coherent, not generic.
| Layer | Technology |
|---|---|
| Framework | Next.js 16 — App Router |
| Language | TypeScript 5 — strict mode |
| Styling | Tailwind CSS v4 — OKLCH color palette |
| Component Library | shadcn/ui — Button, Card, Input, Textarea |
| Icons | Lucide React |
| State Management | React Context + useMemo (no external library) |
| Font | Geist via next/font/google |
A full-width, two-row sticky header replaces the original compact tab navigation. Users always know exactly where they are:
- Step 1: Vision Activity → Discover your transformative story
- Step 2: Core Values → See your mission aligned
- Step 3: Campaign Composer → Build your fundraising email
Steps are gated: Steps 2 and 3 are locked until the Vision Activity is complete. A "Skip to demo" button loads a pre-filled sample profile (Green Futures Foundation) for instant exploration.
- Conversational chat UI with animated AI typing indicator
- 3 guided questions with nonprofit-specific framing
- Per-question progress hint in the input area ("Vision Activity · Question 2 of 3")
- Descriptive, encouraging placeholders that model what a strong answer looks like
- Context banner explaining why the activity matters for donor storytelling
- Auto-transitions to the Alignment Dashboard after completion
- Displays captured Vision, Commitment (from Question 2), and Core Values
- Color-coded value chips cycling across 8 distinct palettes
- VVAC Framework progress tracker (Vision ✓, Values ✓, Action and Conviction completed during composition)
- CTA routes directly to the Fundraising Campaign Builder
- 5 structured inputs replacing the generic prompt textarea
- Each input has a coaching microcopy hint explaining why it matters
- Tone selector with 3 options, each described with a short framing note
- Real-time visibility of the Vision & Values alignment context above the form
- Word-by-word streaming output (~28ms per word) with a blinking cursor
- Copy to clipboard with visual confirmation state
- Regenerate button for fresh drafts
interface ChangemakerProfile {
organizationName: string;
vision: string; // Includes "| Commitment: …" suffix from Vision Activity Q2
values: string[];
}| Field | Type | Purpose |
|---|---|---|
profile |
ChangemakerProfile |
The organization's captured story |
activeView |
"onboarding" | "dashboard" | "composer" |
Active step |
isOnboardingComplete |
boolean |
Gates Steps 2 and 3 |
- Node.js 18 or later
- npm 9 or later
git clone <your-repo-url>
cd VisionFlow
npm installnpm run devOpen http://localhost:3000 in your browser.
Note: Always use
http://localhost:3000, not a LAN IP address (e.g.,192.168.x.x). Accessing via a non-localhost URL creates a non-secure browser context, which can cause browser extensions (Grammarly, Weava, etc.) to malfunction.
npm run build
npm startVisionFlow/
├── src/
│ ├── app/
│ │ ├── globals.css # Tailwind v4, OKLCH color tokens, typing-dot animation
│ │ ├── layout.tsx # Root layout: fonts, metadata, ChangemakerProvider, AppNav
│ │ └── page.tsx # Entry point — renders <ViewRouter />
│ │
│ ├── components/
│ │ ├── ui/ # shadcn/ui primitives (Button, Card, Input, Textarea)
│ │ ├── AppNav.tsx # Sticky two-row header with Progress Stepper
│ │ ├── ViewRouter.tsx # Client-side view switcher driven by activeView
│ │ └── views/
│ │ ├── OnboardingChat.tsx # Step 1 — The Vision Activity chat
│ │ ├── AlignmentDashboard.tsx # Step 2 — Mission alignment confirmation
│ │ └── ContentComposer.tsx # Step 3 — Fundraising Campaign Builder
│ │
│ ├── context/
│ │ └── ChangemakerContext.tsx # Global state: profile, activeView, onboarding status
│ │
│ └── lib/
│ └── utils.ts # cn() — Tailwind class merging utility
│
├── next.config.ts # allowedDevOrigins for LAN development
├── tsconfig.json # Strict TypeScript, @/* alias → src/*
├── components.json # shadcn/ui configuration
└── package.json
- Narrow scope by design: This pilot deliberately avoids feature sprawl. One use case, executed with depth and guided intentionality, is more valuable to the target user (mid-sized nonprofits with chaotic workflows) than a broad toolkit they won't fully adopt.
- Coaching tone throughout: Every label, placeholder, and hint is written in a supportive, coaching voice — not instructional or technical. The UI is designed to feel like a calm, trustworthy partner, not a form.
- Calming color palette: The design system uses soft blues (
oklchprimary at hue ~252°), clean whites, and subtle slate borders. No high-contrast alert colors in the primary flows — the visual environment reinforces the "reset" feeling the tool aims to create. - No external state library: React Context with
useMemois sufficient for this single-page, three-view MVP. - No markdown library:
**bold**formatting in chat messages is handled by a lightweight inline parser. "use client"only where necessary:layout.tsxandpage.tsxremain React Server Components. Only interactive components carry the directive.- OKLCH color tokens: Perceptually uniform color scaling, consistent with the shadcn/ui v4 design token approach.