LFA Platform - Logical Framework Design for Education NGOs

Helping 150+ education NGOs design programs using the Common LFA framework to transform 1 million schools.

A comprehensive web-based platform that guides education-focused NGOs through creating Logical Framework Approach (LFA) documents for program design using proven Common LFA templates across 9 themes (FLN, Career Readiness, STEM, Digital Literacy, SEL, Gender Equity, Early Childhood, Teacher Professional Development, Inclusive Education).

Features

• 7-Step Guided Wizard: Structured questions for problem definition, outcomes, interventions, stakeholders, practice changes, and indicators
• Common LFA Templates: JSON-driven templates for 9 themes with ready outcomes, indicators, and practice changes
• PDF Export: Download professional LFA documents with jsPDF
• Auto-Save: Automatic progress saving every 30 seconds
• Authentication: Secure user accounts with password reset
• Gamification: Points, badges, and progress tracking (⚠️ Badges coming soon - core points working)
• Project Management: Create, edit, and manage multiple projects
• Analytics Dashboard: Track completion and design patterns
• Error Boundaries: Graceful error handling with recovery options
• SEO Optimized: Open Graph tags, Twitter cards, custom favicon
• Legal Pages: Privacy Policy and Terms of Service
• Offline-First PWA: Installable on mobile with caching for dashboard, wizard, and templates

Tech Stack

• Frontend: Next.js 16.0.10 (Turbopack), React 19, TypeScript
• Backend: Supabase (PostgreSQL with Row-Level Security)
• Authentication: Supabase Auth with email/password
• Styling: Tailwind CSS 4.1.9
• UI Components: Radix UI primitives
• Notifications: Sonner toast library
• PDF Generation: jsPDF library
• Icons: Lucide React + custom SVG favicon
• PWA: Service worker + manifest for offline caching and install prompt
• Deployment: Vercel-ready

Prerequisites

• Node.js 18+ and npm
• Supabase account (free tier works)
• Vercel account (optional, for deployment)

Quick Start

1. Clone & Install

git clone <repository-url>
cd lfa
npm install

2. Configure Supabase

Get your Supabase credentials:

1. Go to https://supabase.com/dashboard
2. Create a new project (or select existing)
3. Go to Settings > API
4. Copy the Project URL and anon/public key

Update .env.local:

NEXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here

3. Set Up Database

1. Open your Supabase project
2. Go to SQL Editor
3. Copy the contents of scripts/01-create-schema.sql
4. Run the SQL script
5. (Optional) Run scripts/seed-templates.sql for sample templates

4. Run Development Server

npm run dev

Open http://localhost:3000 in your browser.

5. Build for Production

npm run build
npm start

6. Environment Variables

Create a .env.local file with:

NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key

Database Setup

The database schema is automatically created when you set up Supabase. To seed templates:

1. Go to your Supabase SQL Editor
2. Run scripts/seed-templates.sql

Project Structure

├── app/
│   ├── auth/              # Authentication (login, signup, password reset)
│   ├── dashboard/         # User dashboard with projects
│   ├── wizard/            # 7-step LFA wizard (main feature)
│   ├── templates/         # Template library
│   ├── analytics/         # Analytics dashboard
│   ├── help/              # Help center and FAQ
│   ├── privacy/           # Privacy policy page
│   ├── terms/             # Terms of service page
│   └── api/               # API routes (track-event)
├── components/
│   ├── wizard/            # Wizard step components (Step1-Step7)
│   ├── header.tsx         # Global navigation header
│   ├── error-boundary.tsx # Error handling wrapper
│   └── ui/                # Reusable UI components (Radix UI)
├── lib/
│   ├── supabase.ts             # Supabase client setup
│   ├── pdf-utils.ts            # PDF export with jsPDF
│   ├── wizard-types.ts         # TypeScript type definitions
│   ├── templates-data.json     # Source of all 9 Common LFA templates
│   ├── common-lfa-templates.ts # Helpers to load templates from JSON
│   └── gamification.ts         # Points and badges system
├── scripts/
│   ├── 01-create-schema.sql   # Database initialization
│   └── seed-templates.sql     # Sample template data
└── public/manifest.json   # PWA manifest (install + icons)

Usage Guide

Creating Your First LFA Program

1. Sign Up: Create an account at /auth/signup
2. Dashboard: Access your dashboard at /dashboard
3. New Project: Click "Create New Program Design"
4. 7-Step Wizard: Complete all steps:
   • Step 1: Define the core problem
   • Step 2: Set student-level outcomes
   • Step 3: Design intervention strategy
   • Step 4: Identify key stakeholders
   • Step 5: Map practice changes
   • Step 6: Define indicators
   • Step 7: Review and export
5. Export: Download as PDF, Text, JSON, or Print

Using Templates

1. Visit /templates page
2. Browse 9 Common LFA templates (FLN, Career Readiness, STEM, Digital Literacy, SEL, Gender Equity, Early Childhood, Teacher PD, Inclusive Education)
3. Click template to view details
4. Use template to pre-fill wizard steps

Exporting Your LFA

From Step 7 (Review), you can export in 5 formats:

• PDF: Professional formatted document (jsPDF)
• Text: Plain text file (.txt)
• JSON: Structured data export
• Copy: Copy to clipboard
• Print: Browser print dialog

Install as PWA (Mobile/Desktop)

1. Open the site in Chrome/Edge (Android/Desktop) or Safari (iOS)
2. Tap Install (Chrome/Edge) or Add to Home Screen (Safari)
3. Offline caching covers: /, /dashboard, /wizard, /templates, manifest, icons

Extend or Edit Templates

1. Open lib/templates-data.json
2. Add or update a template with: id, name, category, theme, problemStatement, studentOutcomes[] (each has outcome_description, indicator_description), stakeholderPracticeChanges[] (each has stakeholder_role, expected_changes[], outcome_indicators[])
3. Run npm run build to validate structure
4. No code changes are needed—the app reads directly from JSON

Troubleshooting

"Supabase not configured" Error

Problem: You see "Supabase configuration is missing" message.

Solution:

1. Check .env.local has real Supabase credentials (not placeholders)
2. Restart dev server: Stop (Ctrl+C) and run npm run dev again
3. Verify credentials are correct in Supabase dashboard

Database Errors

Problem: "relation 'lfa_projects' does not exist" or similar errors.

Solution:

1. Go to Supabase SQL Editor
2. Run the complete database-schema.sql file
3. Verify tables are created in Database > Tables

Port Already in Use

Problem: "Port 3000 is in use" error.

Solution:

# Windows PowerShell
Get-Process node | Stop-Process -Force

# Mac/Linux
killall node

# Then restart
npm run dev

Build Errors

Problem: TypeScript compilation errors.

Solution:

# Clear cache and rebuild
rm -rf .next node_modules
npm install
npm run build

Auto-Save Not Working

Problem: Wizard doesn't save progress automatically.

Solution:

1. Ensure you're logged in (check if user email shows in header)
2. Verify Supabase connection is working
3. Check browser console for errors (F12)
4. Auto-save triggers every 30 seconds after typing

Security Features

• ✅ Row-Level Security (RLS) on all database tables
• ✅ User-specific data isolation
• ✅ Secure authentication with Supabase Auth
• ✅ Password reset via email
• ✅ Environment variable protection

Key Statistics

• Target: Transform 1,000,000 schools
• NGO Partners: 150+ education organizations
• Templates: 9 Common LFA frameworks (FLN, Career Readiness, STEM, Digital Literacy, SEL, Gender Equity, Early Childhood, Teacher PD, Inclusive Education)
• Auto-Save: Every 30 seconds
• Export Formats: 5 options (PDF, Text, JSON, Copy, Print)

Security

• All data is protected with Row-Level Security (RLS)
• Authentication handled by Supabase Auth
• HTTPS enforced in production
• CSRF protection included
• SQL injection prevention through parameterized queries

Deployment

Deploy to Vercel

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Add environment variables:
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
   • NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL (production URL)
4. Click Deploy

Support

For issues or questions:

• Check the documentation at [docs-url]
• Open an issue on GitHub
• Contact rajprakash1046@gmail.com

License

MIT License - see LICENSE file for details

Contributing

We welcome contributions! Please see CONTRIBUTING.md for guidelines.