saleml/darija-arabic-learning

Comprehensive learning platform for Moroccan Darija speakers to master Levantine and Gulf Arabic dialects with Supabase database integration # 🌍 Darija Arabic Learning Platform A comprehensive web application designed to help Moroccan Darija speakers learn other Arabic dialects including Lebanese, Syrian, Emirati, Saudi, and Modern Standard Arabic (MSA). ## 🌟 Live Demo **Try the app now at darija-tr.netlify.app** ## 🎯 Features ### Core Learning Features - **📚 Translation Hub**: Browse 552+ phrases with instant search across 6 Arabic dialects - **🎯 Interactive Quiz System**: Multiple choice and word ordering questions with smart distractors - **📈 Progress Tracking**: Personal learning statistics and achievement system - **🌐 Cultural Context**: Detailed usage notes and cultural sensitivities for each phrase - **✨ Smart Learning**: Only shows unmastered phrases, with ability to mark known phrases ### User Experience - **🔐 Secure Authentication**: Email/password and GitHub OAuth authentication - **💾 Cloud Sync**: All progress saved to Supabase with real-time updates - **📱 Mobile Responsive**: Fully optimized for all devices with adaptive layouts - **🎨 Modern UI**: Clean, intuitive interface with TailwindCSS - **⚡ Fast Performance**: Optimized loading with Vite - **🔗 Clean URLs**: Simple navigation (`/hub`, `/quiz`, `/progress`, `/culture`) - **👆 Touch Optimized**: Proper touch targets and gestures for mobile users - **📐 Responsive Design**: Seamless experience from 320px to 4K displays ## 🚀 Quick Start ### Prerequisites - Node.js 18+ - npm or yarn - Supabase account - Clerk account ### Installation 1. **Clone the repository** ```bash git clone github.com cd darija-arabic-app ``` 2. **Install dependencies** ```bash npm install ``` 3. **Set up environment variables** Create a `.env` file in the root directory: ```env # Clerk Authentication VITE_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key # Supabase VITE_SUPABASE_URL=your_supabase_url VITE_SUPABASE_ANON_KEY=your_supabase_anon_key ``` 4. **Run the development server** ```bash npm run dev ``` The …