DataCollect Pro - AI-Powered Workforce System

A secure, comprehensive workforce platform connecting data collectors with job opportunities, featuring AI-powered training, job matching, offline data collection, and instant payment processing.

🌟 Features

🤖 AI-Powered Capabilities

• Adaptive Training: AI-generated questions based on system objectives and user skill level
• Intelligent Job Matching: AI analyzes profiles and matches collectors with optimal opportunities
• AI Recommendations: Smart recommendations for projects, collectors, and consultants
• 24/7 AI Support: Real-time chatbot assistance powered by OpenRouter
• Profile Verification: Automated AI-powered identity and profile verification

👥 User Management

• Secure Authentication: Supabase-powered authentication with role-based access control
• Three User Roles: Collectors, Clients, and Admins
• Complete Registration Flow: Multi-step registration with verification
• Profile Management: Comprehensive profile system with skills, experience, and certifications

📚 Training System

• Interactive Modules: Engaging training content with progress tracking
• AI-Generated Assessments: Personalized questions adapting to user competency
• Certifications: Earn certifications upon completing modules with passing scores
• Progress Tracking: Real-time monitoring of training completion and scores

💼 Job Marketplace

• AI Job Matching: Smart recommendations based on skills, location, and experience
• AI Recommendation Widget: Interactive popup recommendations on dashboards
• One-Click Applications: Streamlined application process
• Match Confidence Scores: See how well you match each opportunity
• Application Tracking: Monitor status of all submitted applications

📱 Offline Data Collection

• Offline-First: Collect data even without internet connection
• Auto-Sync: Automatic synchronization when connection is restored
• IndexedDB Storage: Reliable offline data storage
• Sync Status Indicators: Always know your online/offline status

💰 Payment Processing

• Multiple Methods: M-Pesa, Airtel Money, and Bank Transfer support
• Instant Payments: Payments processed within 24 hours
• Transaction History: Complete payment tracking and history
• Secure Processing: Industry-standard payment security

🛠️ Technology Stack

Frontend

• React 18: Modern UI library
• React Router: Client-side routing
• Supabase JS: Real-time database and authentication
• IndexedDB (idb): Offline data storage
• React Toastify: Elegant notifications
• Lucide React: Beautiful icon library

Backend

• Node.js: Runtime environment
• Express: Web application framework
• Supabase: Database and authentication (PostgreSQL)
• OpenRouter: AI services integration
• Helmet: Security middleware
• Express Rate Limit: API rate limiting

Integrations

• Supabase: Authentication, database, real-time subscriptions
• OpenRouter: AI-powered features (GPT-3.5-turbo)
• M-Pesa Daraja API: Mobile money payments
• Airtel Money API: Alternative payment method

📋 Prerequisites

• Node.js 18+ and npm
• Supabase account (free tier works)
• OpenRouter API key
• M-Pesa/Airtel Money API credentials (optional for payments)

🚀 Setup Instructions

1. Clone and Install Dependencies

# Install frontend dependencies
npm install

# Install backend dependencies
cd server
npm install
cd ..

2. Set Up Supabase

1. Create a new project at supabase.com
2. Go to Project Settings → API
3. Copy your Project URL and anon/public key
4. Open SQL Editor and execute the schema from DATABASE_SCHEMA.md

3. Get OpenRouter API Key

1. Sign up at openrouter.ai
2. Generate an API key from your dashboard
3. Add credits to your account (as low as $5 to start)

4. Configure Environment Variables

For detailed environment setup, see ENVIRONMENT_SETUP.md

Quick Start - Frontend (.env.development)

VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
VITE_OPENROUTER_API_KEY=your_openrouter_key
VITE_APP_URL=http://localhost:5173

Quick Start - Backend (server/.env.development)

PORT=5000
NODE_ENV=development

SUPABASE_URL=your_supabase_url
SUPABASE_SERVICE_KEY=your_supabase_service_key
OPENROUTER_API_KEY=your_openrouter_key

# Generate with: node -e "console.log(require('crypto').randomBytes(64).toString('hex'))"
JWT_SECRET=your_128_char_minimum_secure_random_string

# Payment APIs (optional - use sandbox for testing)
MPESA_CONSUMER_KEY=your_key
MPESA_CONSUMER_SECRET=your_secret
MPESA_PASSKEY=your_passkey
MPESA_SHORTCODE=174379
MPESA_ENVIRONMENT=sandbox

AIRTEL_CLIENT_ID=your_client_id
AIRTEL_CLIENT_SECRET=your_client_secret
AIRTEL_ENVIRONMENT=sandbox

CLIENT_URL=http://localhost:5173

⚠️ SECURITY: Never commit .env.production with real credentials. See ENVIRONMENT_SETUP.md for production deployment.

5. Run the Application

# Terminal 1: Start frontend (http://localhost:5173)
npm run dev

# Terminal 2: Start backend (http://localhost:5000)
cd server
npm run dev

📱 User Flows

Collector Registration

1. Sign up with email/password
2. Complete 3-step collector registration:
   • Personal information (phone, ID, county)
   • Skills and experience
   • Payment preferences
3. AI-powered profile verification
4. Access training modules
5. Browse and apply to matched jobs
6. Collect data (works offline!)
7. Receive instant payments

Client Registration

1. Sign up with email/password
2. Complete client registration with company details
3. Create job postings with requirements
4. Review AI-matched collector applications
5. Monitor data collection progress
6. Approve and process payments

🔒 Security Features

• Helmet.js: Security headers
• Rate Limiting: API request throttling
• Row Level Security: Database-level access control via Supabase
• JWT Authentication: Secure session management
• Environment Variables: Sensitive data protection
• CORS Configuration: Cross-origin resource sharing protection

🌐 API Endpoints

Authentication (/api/auth)

• POST /register - Register new user
• POST /login - Login user
• POST /verify-session - Verify session token
• POST /logout - Logout user

Training (/api/training)

• GET /modules - Get all training modules
• GET /modules/:id - Get specific module
• POST /start/:id - Start training module
• GET /questions/:moduleId - Get AI-generated questions
• POST /submit/:moduleId - Submit training assessment
• GET /progress - Get user's training progress
• POST /certify/:moduleId - Award certification

Jobs (/api/jobs)

• GET /listings - Get active job listings
• GET /matched - Get AI-matched jobs for user
• POST /apply/:id - Apply to job (one-click)
• GET /applications - Get user's applications
• POST /create - Create new job (clients only)

Payments (/api/payments)

• POST /initiate - Initiate payment
• GET /status/:id - Check payment status
• GET /history - Get payment history
• POST /mpesa/callback - M-Pesa webhook
• POST /airtel/callback - Airtel Money webhook

Data Collection (/api/data)

• POST /submit - Submit collected data
• POST /sync - Bulk sync offline data
• GET /jobs/:jobId - Get data collection form

AI Services (/api/ai)

• POST /support-chat - AI chatbot support
• POST /verify-profile - AI profile verification

🎨 UI Components

• AISupportChat: Floating AI chatbot
• OfflineIndicator: Connection status and sync indicator
• ProtectedRoute: Role-based route protection
• AuthContext: Global authentication state
• Training Modules: Interactive learning experiences
• Job Cards: Beautiful job listings with match scores
• Payment Dashboard: Transaction history and management

📊 Database Schema

The complete database schema is available in DATABASE_SCHEMA.md. Key tables include:

• profiles: User information and roles
• training_modules: Available training content
• training_progress: User training completion
• certifications: Earned certifications
• jobs: Job listings
• applications: Job applications with AI match scores
• collected_data: Submitted data from collectors
• payments: Payment transactions and history

🔧 Development

Project Structure

datacollect-pro/
├── src/                      # Frontend source
│   ├── components/           # React components
│   ├── contexts/             # React contexts (Auth)
│   ├── lib/                  # Libraries (Supabase)
│   ├── pages/                # Page components
│   ├── styles/               # CSS files
│   └── utils/                # Utilities (offline, sync, protected routes)
├── server/                   # Backend source
│   ├── config/               # Configuration (Supabase)
│   ├── routes/               # API routes
│   └── services/             # Business logic (AI, payments)
├── DATABASE_SCHEMA.md        # Database setup guide
└── .env.example              # Environment template

Key Design Decisions

1. Supabase over PostgreSQL: Simplified authentication and real-time capabilities
2. OpenRouter for AI: Flexible AI provider with multiple model support
3. Offline-First: Critical for field data collection
4. Role-Based Access: Clean separation between collectors, clients, and admins
5. Component-Based: Reusable, maintainable React components

🐛 Troubleshooting

Frontend won't start

• Ensure all dependencies are installed: npm install
• Check that .env file exists with correct Supabase credentials
• Clear node_modules and reinstall: rm -rf node_modules && npm install

Backend won't start

• Navigate to server directory: cd server
• Install dependencies: npm install
• Check server/.env has all required variables
• Ensure Supabase service key is correct (not anon key)

AI features not working

• Verify OpenRouter API key is valid
• Check you have credits in your OpenRouter account
• Review server logs for specific error messages

Payments not processing

• Ensure you're using sandbox environment for testing
• Verify payment API credentials are correct
• Check webhook URLs are accessible (use ngrok for local development)

📝 License

This project is proprietary software developed for DataCollect Pro.

🤝 Support

For support, contact the development team or use the in-app AI assistant.

---

Built with ❤️ for empowering data collectors and enabling efficient data collection