🎓 EduTech Platform - Modern Ed-Tech Learning Platform

A feature-rich educational technology platform built with React 18, TypeScript, Vite, and Shadcn UI with the Elegant Luxury theme.

✨ Features

🌐 Multilingual Support (5 Languages)

• English, Hindi (हिंदी), Telugu (తెలుగు), Tamil (தமிழ்), Kannada (ಕನ್ನಡ)
• Real-time language switching
• Fully translated UI with i18next
• Multi-language video lessons - Watch videos in your preferred language
• Multilingual feedback system - Submit answers and feedback in any language

📚 Course Management

• Interactive course catalog with search & filtering
• Multi-language video support - Each lesson available in multiple languages
• Video lessons with YouTube embeds
• Language selector for videos (English, Hindi, Telugu, Tamil, Kannada)
• Lesson notes in multiple languages
• Progress tracking and completion status
• Course enrollment system
• 6 diverse courses across tech categories

🎯 Interactive Quizzes

• Multiple-choice questions
• Instant feedback with detailed results
• Score tracking and progress indicators
• Retry functionality

🏫 Offline Classes

• Dedicated Offline Classes page with full schedule
• Schedule table for hybrid learning
• Location-based sessions with language info
• Instructor details and seat availability
• Registration modal with form validation
• Real-time seat tracking

🤖 AI-Powered Recommendations

• Smart course suggestions based on enrollment
• Category-based learning paths
• Rating-based sorting

📊 Student Dashboard

• Real-time progress overview
• Stats: Enrolled, Completed, In Progress
• Recommended courses section
• Achievement tracking

👤 User Profiles

• Personal learning statistics
• Achievement badges (🎯🏆⚡💪)
• Certificate gallery
• Profile customization

🎙️ Multilingual Input & Feedback

• Language-specific text input with native keyboard support
• Audio/Voice upload for feedback in regional languages
• File attachments (documents, images, notes)
• Feedback stored with language metadata
• Perfect for answering quiz questions in preferred language

📱 PWA Ready

• Offline manifest configuration
• Installable as mobile app
• Fast loading & optimized assets

🚀 Tech Stack

Technology	Purpose
React 18	UI Framework
TypeScript	Type Safety
Vite	Build Tool (⚡ Lightning Fast)
Shadcn UI	Component Library
Tailwind CSS	Styling (Elegant Luxury Theme)
React Router v7	Navigation
i18next	Internationalization
Lucide React	Icons

📦 Quick Start

# Install dependencies
pnpm install

# Start dev server (opens at http://localhost:5173)
pnpm run dev

# Build for production
pnpm run build

# Preview production build
pnpm run preview

🎨 UI Highlights

• Elegant Luxury Theme with oklch color system
• Smooth animations & transitions
• Responsive design (mobile-first)
• Dark mode support
• Accessible components

📁 Project Structure

edtech/
├── src/
│   ├── components/      # Reusable components + Shadcn UI
│   ├── pages/          # Main app pages
│   ├── data/           # Mock data (courses, quizzes)
│   ├── utils/          # Helper functions (AI recommendations)
│   └── config/         # i18n configuration
├── public/locales/     # Translation files (en, hi, te, ta, kn)
└── dist/              # Production build

🌟 Key Pages

1. Home (/) - Landing page with features showcase
2. Courses (/courses) - Browse & search all courses
3. Course Detail (/courses/:id) - Multi-language video player, quizzes, offline classes, feedback form
4. Dashboard (/dashboard) - Student progress overview
5. Quiz (/quiz/:courseId) - Interactive assessments
6. Profile (/profile) - User stats & achievements
7. Offline Classes (/offline-classes) - Full schedule with registration

🚀 Deployment

Vercel (Recommended)

vercel --prod

Netlify

pnpm run build
# Upload dist/ folder to Netlify

GitHub Pages

pnpm run build
# Deploy dist/ to gh-pages branch

🎯 Demo Credentials

No login required! This is a frontend demo with mock data.

📝 Customization Guide

Add New Language

1. Create public/locales/{lang}/translation.json
2. Update src/config/i18n.ts (add lang code)
3. Add to Navigation.tsx dropdown

Add New Course

Edit src/data/courses.ts:

{
  id: '7',
  title: 'Your Course',
  instructor: 'Instructor Name',
  // ... other fields
}

Change Theme Colors

Modify CSS variables in src/index.css:

--primary: oklch(...);
--background: oklch(...);

🏆 Perfect For

✅ College Projects - Full-featured demo
✅ Portfolios - Showcase React skills
✅ Job Interviews - Discuss architecture
✅ Learning - Study modern React patterns

📊 Mock Data Included

• 6 Courses: Web Dev, React, Python, ML, UI/UX, Flutter
• 3 Quizzes: With 15+ questions total
• Sample Progress: 75%, 40%, 20% completion rates

🛣️ Roadmap

• Backend API (Node.js/Django)
• User authentication (JWT)
• Payment integration
• Live video classes
• Mobile app (React Native)
• Admin dashboard

📄 License

MIT - Free for personal and educational use!

🙏 Acknowledgments

• Shadcn UI for amazing components
• Elegant Luxury Theme from TweakCN
• Unsplash for course images

---

Built with ❤️ for education | Star ⭐ if you like it!

📧 Questions? Open an issue or contribute!