Master the Art of Debate Through Intelligent AI Coaching, Real-Time Feedback, and Interactive Learning Modules.
📋 Overview • ✨ Key Features • 🎯 Debate Modes • 📚 Learning System • 🧩 Technical Architecture • 🛠️ Tech Stack • 🚀 Getting Started • 🤝 Contributing • 📄 License
DebatePracticeZone is a comprehensive AI-powered platform designed to help users master debate skills through interactive learning and practice. The application combines structured learning modules with real-time AI debate practice, offering multiple interaction modes including text, voice, and video-based debates with confidence analysis.
Built with modern web technologies and powered by Google Gemini AI, the platform provides personalized feedback, tracks progress through a gamified system, and offers a complete learning path from beginner to advanced debate techniques.
- Intelligent debate opponent powered by Google Gemini 1.5 Flash
- Dynamic argument generation based on context and debate history
- Real-time logical fallacy detection and correction
- Personalized feedback on argument quality, structure, and evidence
- Progressive learning modules from beginner to advanced levels
- Interactive quizzes with immediate feedback
- Prerequisite-based module unlocking system
- Comprehensive coverage of debate fundamentals and advanced techniques
- Text-based Debates: Traditional typed argument exchanges
- Voice Debates: Speech-to-text enabled verbal practice
- Webcam Debates: Video-based practice with confidence analysis
- Direct Speech Mode: Real-time voice-to-voice debate simulation
- XP-based leveling system with achievement unlocks
- Streak tracking for consistent practice
- Detailed performance analytics and progress visualization
- Rarity-based achievement system (Common, Rare, Epic, Legendary)
- Supabase authentication with email/password and demo mode
- Row-Level Security (RLS) for data protection
- Persistent progress tracking across sessions
- Secure API key management for AI features
- Type arguments and receive AI responses
- Speech synthesis for AI arguments
- Real-time argument analysis and scoring
- Comprehensive feedback on each argument
- Voice-to-voice debate experience
- Speech recognition for user input
- AI speech synthesis with adjustable speed
- Seamless turn-based conversation flow
- Video-based debate practice
- Real-time confidence analysis including:
- Speech Confidence: Clarity and articulation analysis
- Facial Confidence: Expression and engagement detection
- Eye Contact: Camera engagement tracking
- Posture: Body language assessment
- Live suggestions for improvement
- Overall confidence scoring
-
Introduction to Debate (Beginner - 15 min)
- Debate fundamentals and structure
- Basic argumentation techniques
- Interactive examples and practice
-
Logical Fallacies (Intermediate - 20 min)
- Common fallacy identification
- Avoiding logical errors
- Real-world application examples
-
Advanced Techniques (Advanced - 30 min)
- Strategic argumentation
- Advanced rebuttal techniques
- Professional debate strategies
- Smart Topic Suggestions: AI-generated debate topics
- Topic Validation: Gemini-powered topic feasibility checking
- Auto-completion: Intelligent topic completion suggestions
- Rephrasing Assistance: Alternative topic formulations
React 18 + TypeScript + Tailwind CSS + Framer Motion
├── Components/
│ ├── LandingPage.tsx (Modern glassmorphism design)
│ ├── Dashboard.tsx (Progress tracking & quick actions)
│ ├── PracticeDebate.tsx (Multi-mode debate interface)
│ ├── WebcamDebate.tsx (Video analysis & confidence metrics)
│ ├── LearningPath.tsx (Module progression system)
│ ├── Achievements.tsx (Gamification display)
│ ├── AuthModal.tsx (Authentication with demo mode)
│ └── ApiKeySetup.tsx (Secure AI configuration)
├── Services/
│ └── geminiService.ts (AI integration layer)
├── Hooks/
│ ├── useAuth.ts (Authentication management)
│ └── useUser.ts (User data management)
└── Data/
├── modules.ts (Learning content structure)
└── achievements.ts (Achievement definitions)
Supabase Backend
├── Authentication
│ ├── Email/Password authentication
│ ├── Demo mode support
│ └── Session management
├── Database (PostgreSQL)
│ ├── user_profiles (XP, level, streak tracking)
│ ├── user_achievements (Unlocked achievements)
│ ├── user_module_progress (Learning completion)
│ └── debate_sessions (Practice history)
└── Security
├── Row-Level Security (RLS) policies
├── API key encryption
└── Data access controls
Google Gemini 1.5 Flash
├── Debate Response Generation
├── Argument Quality Analysis
├── Logical Fallacy Detection
├── Topic Validation & Suggestions
├── Feedback Generation
└── Confidence Scoring
| Category | Technologies |
|---|---|
| Frontend | React 18, TypeScript, Tailwind CSS, Framer Motion, GSAP, Lottie React |
| Backend | Supabase (PostgreSQL, Auth, RLS) |
| AI/ML | Google Gemini 1.5 Flash API |
| Build Tools | Vite, PostCSS, Autoprefixer |
| UI/UX | Lucide React Icons, Responsive Design, Glassmorphism Effects |
| Audio/Video | Web Speech API, MediaDevices API, Canvas API |
| Development | TypeScript, ESLint, Hot Module Replacement |
- Node.js 18+ and npm
- Google Gemini API key (Get one here)
- Supabase project (optional for full features)
- Clone the Repository
git clone https://github.com/Darshan0244/IITD_Malaai_Final.git
cd IITD_Malaai_Final- Install Dependencies
npm install- Environment Setup
# Copy environment template
cp .env.example .env
# Add your API keys to .env
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
VITE_GEMINI_API_KEY=your_gemini_api_key- Database Setup (Optional)
# If using Supabase, run the migrations in supabase/migrations/
# The app works with demo mode without database setup- Start Development Server
npm run dev- Build for Production
npm run build
npm run preview- Gemini API: Required for AI features (debate responses, feedback, topic suggestions)
- Supabase: Optional - enables user accounts and progress persistence
- Demo Mode: Available without any API keys for basic functionality
- Launch the app and choose between creating an account or using demo mode
- Configure AI features by adding your Gemini API key in settings
- Start with learning modules to understand debate fundamentals
- Practice debates in your preferred mode (text, voice, or video)
- Track progress through the dashboard and achievement system
- Complete learning modules in order for optimal skill development
- Practice regularly to maintain and improve your debate streak
- Use webcam mode for comprehensive confidence analysis
- Review feedback carefully to identify areas for improvement
src/
├── components/ # React components
├── hooks/ # Custom React hooks
├── services/ # API integration services
├── data/ # Static data and configurations
├── types/ # TypeScript type definitions
├── lib/ # Utility libraries
└── App.tsx # Main application component
- PracticeDebate: Multi-modal debate interface with AI integration
- WebcamDebate: Advanced video analysis and confidence tracking
- LearningPath: Progressive module system with prerequisites
- Dashboard: User progress visualization and quick actions
We welcome contributions to improve DebatePracticeZone! Here's how you can help:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow TypeScript best practices
- Maintain responsive design principles
- Add proper error handling for AI integrations
- Include tests for new features
- Update documentation as needed
This project is licensed under the MIT License - see the LICENSE file for details.
- Google Gemini AI for powering intelligent debate responses
- Supabase for backend infrastructure and authentication
- Framer Motion for smooth animations and transitions
- Tailwind CSS for rapid UI development
- React Community for excellent tooling and ecosystem
🎯 Ready to Master the Art of Debate?
Start your journey from novice to debate champion with AI-powered coaching and interactive learning.
🚀 Get Started Now | 📚 View Learning Modules | 🎯 Try Debate Modes