SY Developers - React/Vike Migration

Modern React application built with Vike (SSG), deployed to Cloudflare Pages.

🚀 Quick Start

Prerequisites

• Node.js 18+
• pnpm
• Airtable account with API key
• Stripe account

Installation

# Install dependencies
pnpm install

# Copy environment template
cp .env.local.example .env.local

# Edit .env.local and add your API keys

Development

pnpm dev  # Runs both Vike AND Cloudflare Functions

Visit http://localhost:8788 (note: wrangler uses port 8788, not 3000)

Build

pnpm build

Preview Production Build

pnpm preview

📁 Project Structure

├── pages/                  # Vike pages (SSG)
│   ├── index/             # Homepage
│   ├── funds/             # Donations page
│   ├── jobs/              # Job listings
│   ├── policy/            # Policy page
│   └── projects/          # Project pages
├── components/            # React components
│   ├── ui/               # shadcn/ui components
│   ├── Navigation.tsx    # Header navigation
│   └── DonationStats.tsx # Client-side donation stats
├── lib/                   # Utilities
│   ├── airtable.ts       # Airtable data fetchers
│   ├── stripe-client.ts  # Stripe client utilities
│   └── utils.ts          # shadcn utils
├── types/                 # TypeScript types
│   ├── airtable.ts       # Airtable record types
│   └── stripe.ts         # Stripe types
├── functions/            # Cloudflare Functions
│   └── api/
│       └── donation-stats.ts  # Stripe API proxy
└── public/               # Static assets
    ├── robots.txt        # SEO (disallow all)
    └── images/           # Images

🔧 Tech Stack

• Framework: Vike (SSG mode - pure static site generation)
• UI Library: React 19
• Styling: Tailwind CSS 4
• Components: shadcn/ui
• Icons: Heroicons
• Data: Airtable (build-time fetch)
• Payments: Stripe Buy Buttons
• Deployment: Cloudflare Pages
• Language: TypeScript

Architecture: This is a pure SSG (Static Site Generation) app, not SSR. All pages are pre-rendered at build time into static HTML files. Cloudflare Functions run separately as serverless edge functions for the donation stats API.

🌐 Data Fetching

Build-time (Airtable)

• Jobs
• Projects
• Teams/People
• Expenses

Client-side (Cloudflare Function)

• Donation statistics (last 30 days)
• Recent donations

💳 Stripe Integration

Uses Stripe Buy Buttons for donations:

• Monthly donations: buy_btn_1STkr7K5E1L5TSuqjuFbdUKO
• One-time donations: buy_btn_1STk1QK5E1L5TSuqNdkTV2km

No server-side Stripe code needed (Buy Buttons handle everything).

📊 Donation Stats API

The /api/donation-stats endpoint is a Cloudflare Function that:

1. Fetches transactions from Stripe API (last 30 days)
2. Calculates monthly vs one-time donations
3. Returns recent charges with country info
4. Called client-side from Funds page

🚢 Deployment

Cloudflare Pages

1. Connect GitHub repository to Cloudflare Pages
2. Build settings:
   • Build command: pnpm build
   • Build output directory: dist/client
3. Environment variables:
   • AIRTABLE_KEY
   • AIRTABLE_BASE
   • STRIPE_PUBLISHABLE_KEY
   • STRIPE_SECRET_KEY (for Function)

Manual Deployment

# Build the site
pnpm build

# Deploy via wrangler
npx wrangler pages deploy dist/client

📝 Environment Variables

Build-time Variables (in .env.local)

These are used during the build process and embedded into static assets:

• AIRTABLE_KEY - Airtable API key
• AIRTABLE_BASE - Airtable base ID
• STRIPE_PUBLISHABLE_KEY - Stripe publishable key

Copy from .env.local.example to get started.

Function Runtime Secrets (in .dev.vars for local dev)

These are used by Cloudflare Functions at runtime:

• STRIPE_SECRET_KEY - Stripe secret key

Important:

• .dev.vars is for local development only (gitignored)
• In production, set STRIPE_SECRET_KEY as encrypted secret in Cloudflare dashboard

🔄 Updating Content

Jobs/Projects

1. Update data in Airtable
2. Trigger rebuild:
   • Manual: Push to GitHub or trigger deploy hook
   • Automated: (Future) Airtable webhook → Cloudflare deploy hook

🎨 Components

shadcn/ui Components Used

• Button
• Card
• Badge
• Accordion
• Progress
• Alert

Custom Components

• Navigation - Header with links
• DonationStats - Real-time donation statistics

🤝 Contributing

This is an internal project for Sahaja Yoga web developers.

📞 Contact

For questions: contact@sydevelopers.com

🔒 License

Private - All rights reserved