QALA - Language Exchange Platform

Status: 🚀 Phase 6 Complete - Full Video Call Platform Ready Version: 0.1.0 Live: https://www.qalatalk.com

Connect with native speakers worldwide through HD video calls with real-time translation support.

⚡ Quick Start

# Clone and install
npm install

# Environment setup
cp .env.example .env.local
# Edit .env.local with your credentials

# Development
npm run dev          # Local server
npm run test         # Run tests
npm run build        # Production build

Visit localhost:3000 or see SETUP.md for detailed configuration.

🎯 Current Status - MVP Ready for Testing

✅ MVP DEPLOYED - Core language exchange features live for initial user testing:

• 🎥 HD Video Calling - WebRTC peer-to-peer connections with adaptive quality
• 💬 Real-time Chat - Text messaging with emoji support during calls
• 🌍 Translation - Provider-based translation (Google free, LibreTranslate, or Google API; 15 lookups/session)
• 🔄 Smart Matching - Progressive algorithm matching native speakers
• 📊 Session Tracking - Duration and quality metrics
• 🔐 Enterprise Security - JWT auth, rate limiting, RLS policies
• 📱 Responsive Design - Netflix-style UI, mobile-optimized
• 📧 Email Capture - Landing page with smart routing (signup/login)

Architecture: Next.js 14 + TypeScript + Supabase + Socket.io + Redis

Next Phase: User testing and feedback collection → Ratings/Payments/Enhanced Security

📁 Project Structure

src/
├── app/                 # Next.js App Router pages
│   ├── auth/           # Authentication pages
│   ├── profile/        # Profile management
│   └── layout.tsx      # Root layout
├── components/         # React components
│   ├── ui/            # Reusable UI primitives
│   ├── HeroSection.tsx # Landing page hero
│   ├── Header.tsx     # Navigation header
│   └── SignupForm.tsx # Multi-step signup
├── contexts/          # React contexts
│   └── AuthContext.tsx # Authentication state
├── lib/               # Utilities and configurations
│   ├── schemas/       # Zod validation schemas
│   ├── auth.ts        # Authentication utilities
│   ├── supabase.ts    # Database client
│   └── constants.ts   # Application constants
├── hooks/             # Custom React hooks
├── types/             # TypeScript type definitions
└── test-utils/        # Testing utilities

🎨 Design System

The project uses a comprehensive design system with:

• Brand Colors: Primary indigo, secondary amber, accent emerald
• QALA Gold: Custom golden yellow (#e5b567) for CTAs
• Netflix-inspired Landing: Dark theme with gold accents
• Responsive Design: Mobile-first approach with proper breakpoints
• Accessibility: WCAG 2.1 Level AA compliance considerations

🧩 Key Components

Authentication System

• Landing Page: Netflix-style hero with email capture
• Signup Flow: 3-step process with language preferences
• Login/OAuth: Google OAuth + email/password
• Profile Setup: Comprehensive user onboarding

UI Component Library

• QalaButton: Branded button with variants and loading states
• Form Components: Comprehensive form building blocks
• MultiSelect: Language selection with validation
• GoogleIcon: Reusable OAuth icon component

📚 Documentation

• CHANGELOG.md - Complete development history and phase details
• SETUP.md - Detailed environment and deployment configuration
• CLAUDE.md - Development standards and coding guidelines
• PLAN.md - Technical roadmap and architecture decisions

🏆 Quality Metrics

• ✅ Build Status: Production builds successfully
• ✅ TypeScript: Zero compilation errors (strict mode)
• ✅ Test Coverage: 80% coverage requirement enforced
• ✅ Code Quality: ESLint/Prettier passing with pre-commit hooks
• ✅ Security: Enterprise-grade with comprehensive protection
• ✅ Performance: Optimized bundle size, static generation

🤝 Contributing

Follow TDD methodology: Write tests → Implement → Lint/TypeCheck → Verify tests pass. See CONTRIBUTING.md for git workflow and CLAUDE.md for complete development standards.

🔧 Troubleshooting

Common Setup Issues

"Cannot connect to Supabase"

• Verify .env.local has correct NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY
• Check Supabase Dashboard → Settings → API for correct values
• Ensure no extra spaces or quotes in environment variables
• Check if Supabase project is paused (free tier auto-pauses after 1 week inactivity)

"Redis connection failed"

# Check if Redis is running
redis-cli ping  # Should return "PONG"

# Start Redis if not running
redis-server

# Or run in background
redis-server --daemonize yes

"Port 3000 already in use"

# Find and kill the process
lsof -ti:3000 | xargs kill -9

# Or use different port
PORT=3001 npm run dev

"Build fails with TypeScript errors"

# Run type check to see all errors
npm run type-check

# Common fixes:
rm -rf node_modules .next
npm install

"Pre-commit hook fails"

# Auto-fix linting issues
npm run lint:fix

# Format code
npm run format

# Update secrets baseline if needed
detect-secrets scan > .secrets.baseline

"Database tables not found"

• Go to Supabase Dashboard → SQL Editor
• Run the schema from docs/DATABASE_SETUP.md
• Verify tables exist in Table Editor

For more help, see GETTING_STARTED.md

🔐 Security

• Never commit .env files to git
• Use separate Supabase projects for dev and production
• Rotate credentials every 90 days
• See docs/SECURITY.md for complete security policy

📄 License

Proprietary software for QALA Language Exchange Platform.