🇫🇷 Français Pro

A modern, interactive French learning platform built with Next.js 15, inspired by shadcn/ui design principles. It features comprehensive progress tracking and gamified learning experiences—all within an intuitive, clean, documentation-style interface to help you learn French from zero to hero.

🎯 Mission

Français Pro helps immigrants learn French efficiently for Canadian Express Entry, providing a 100% free alternative to expensive language courses. Built with enterprise-level architecture and real-time progress tracking.

✨ Key Features

• 🎓 Interactive Lessons: Structured lessons covering foundations, grammar, and vocabulary
• 🎵 Audio Pronunciation: Web Speech API integration for pronunciation practice
  • Optional upgrade path to cloud TTS (kept as docs only)
• 📊 Progress Tracking: Real-time progress tracking and achievement system
• 🇨🇦 Immigration Focus: Resources for Canadian Express Entry preparation
• 🏆 Community Features: Leaderboards and progress sharing
• 💬 Feedback System: User feedback and suggestion system with admin dashboard
• 👥 Admin User Management: Comprehensive user administration with role management and moderation
• 📱 Advanced Mobile Navigation: Custom drag-to-open FAB with rubber band stretch effects
• 🎨 Seasonal Theming: Dynamic themes with animated sparkles and glow effects
• ⚡ Animated UI Components: GitHub icons with theme-aware animations
• 🎯 Intuitive Learning Interface: Dashboard navigation integrated into learning sidebar
• 🌊 Parallax Footer: Professional footer with parallax scroll reveal effect
• 📄 Legal Pages: Comprehensive Privacy Policy and Terms of Service

🌐 Live Demo

👉 View Live Project - Experience Français Pro in action!

🚀 Quick Start

Prerequisites

• Node.js 18+ and npm
• Git

Installation

# Clone the repository
git clone https://github.com/kasimkazmi/francais-pro.git
cd francais-pro

# Install dependencies
npm install

# Start development server
npm run dev

Visit http://localhost:3000 to see the application locally.

🏗️ Architecture Highlights

• Next.js 15 with App Router and Server Components
• 60% smaller bundle size through strategic optimization
• 95+ SEO scores with server-side rendering
• Enterprise-level patterns and best practices
• Real-time Firebase integration for dynamic content
• Client-side Firestore operations for admin features (simple, secure, maintainable)
• SSR-safe implementations preventing server/client conflicts
• Pluggable TTS providers documented for future enablement (no vendor code shipped)

For detailed technical information, see TECH_STACK.md

🎯 Features Overview

Learning & Content

• Dynamic Stats: Real-time user analytics from Firebase
• Interactive Learning: Gamified lessons with instant feedback
• Audio Integration: Click any text to hear pronunciation
• Progress Tracking: Detailed analytics and goal setting
• Community Features: Leaderboards and study groups

User Management & Administration

• Admin Dashboard: Comprehensive user management and statistics
• User Role Management: Assign admin, moderator, or user roles
• User Moderation: Ban/unban users with reason tracking
• User Deletion: Complete user data removal from Firestore (client-side, secure)
• Activity Tracking: Monitor user activities and sessions
• Feedback Management: Review and manage user feedback and suggestions with search and filtering

UI/UX Features

• Advanced Mobile Navigation: Custom Floating Action Button (FAB) with drag-to-open functionality
• Rubber Band Effects: Elastic stretch animations for intuitive mobile interactions
• Seasonal Theming: Dynamic color schemes with animated sparkles and glow effects
• Animated Components: GitHub icons with theme-aware path animations and hand waving
• Learning Dashboard: Integrated navigation with progress tracking and module management
• Parallax Footer: Professional footer with scroll-reveal parallax effect inspired by modern web design
• Legal Compliance: Comprehensive Privacy Policy and Terms of Service pages
• Scrollable Navigation: Full-height mobile drawer with smooth scrolling
• Theme-Aware Progress: Progress bars with dynamic gradients based on seasonal themes
• Mobile-First: Responsive design optimized for all devices with custom touch interactions

For comprehensive feature details, see FEATURES.md

📱 Mobile Navigation Highlights

Advanced FAB (Floating Action Button)

• Rubber Band Stretch: Elastic drag-to-open with visual feedback
• Connected Design: Stays anchored to left edge while stretching
• Threshold-Based Opening: Opens drawer when stretched beyond 40px
• Smooth Animations: Framer Motion powered transitions and effects

Custom Touch Interactions

• Drag Gestures: Custom mouse and touch event handling
• Progressive Feedback: Real-time visual updates during interaction
• Elastic Returns: Smooth snap-back animations
• Accessibility: Respects reduced motion preferences

Seasonal Theme Integration

• Dynamic Colors: FAB adapts to active seasonal themes
• Sparkle Effects: Animated sparkles around logos and text
• Glow Effects: Theme-aware glow and shadow effects
• GitHub Icon Animation: Path drawing and hand waving animations
• Theme-Aware Progress Bars: Progress indicators with dynamic gradients

Professional Footer

• Parallax Scroll Effect: Footer reveals as content scrolls (inspired by modern web design)
• Comprehensive Links: Quick links, learning resources, and support sections
• SparklesText Integration: Animated logo with seasonal theme colors
• Legal Pages: Full Privacy Policy and Terms of Service

For detailed mobile navigation documentation, see docs/Mobile-Navigation.md

👥 Admin Features

User Management

Comprehensive admin dashboard with full user lifecycle management:

• User Overview: View detailed user profiles, progress, and activity
• Role Management: Assign roles (admin, moderator, user) with granular permissions
• User Moderation: Ban/unban users with reason tracking and audit trail
• User Deletion: Secure removal of user data from all Firestore collections
  • Deletes from: userProfiles, userProgress, userPreferences, userFavorites, userActivities, userSessions, adminUsers, bannedUsers
  • Client-side implementation following existing patterns
  • Admin-only permissions enforced
  • Batched atomic operations for data integrity

Statistics & Analytics

• Real-time user statistics dashboard
• Top performers leaderboard
• Recent user activity tracking
• Lesson completion metrics
• Active user monitoring

Content Management

• Feedback and suggestion review system
• Search and filter capabilities
• Animated emoji-based ratings
• Admin response system

Architecture Pattern

Admin operations follow a consistent client-side pattern for simplicity and maintainability:

// Example: All admin operations use Firestore Client SDK
await updateUserRole(uid, 'admin');  // Role management
await banUser(uid, 'Reason');         // User moderation
await deleteUser(uid);                // User deletion

Benefits:

• ✅ Simple, maintainable code
• ✅ Consistent with existing patterns
• ✅ No API route complexity
• ✅ No server-side SDK needed
• ✅ SSR-safe implementations

🔊 Optional: High‑Quality French Text‑to‑Speech (TTS)

We ship with browser TTS (Web Speech API) for zero-cost audio. For more natural, native‑sounding voices, we prepared a fully documented upgrade path using free tiers from Google Cloud TTS and Azure Speech. Per request, the implementation code was removed to keep the app dependency‑free; you can enable it later by following the guides:

• FREE_TTS_GUIDE.md – free‑tier options, quotas, usage
• TTS_SETUP.md – step‑by‑step setup, API routes, and a drop‑in button component

Enable later by:

1. Adding API keys to .env.local
2. Restoring API routes under src/app/api/speech/*
3. Using the documented FreeTTSAudioButton component instead of the basic AudioButton
4. Restarting the dev server

This keeps the core app simple while making high‑quality audio a one‑step future upgrade.

🛠️ Tech Stack

Frontend

• Next.js 15 - React framework with App Router
• TypeScript - Type safety and better DX
• Tailwind CSS - Utility-first styling
• shadcn/ui - High-quality component library
• Framer Motion - Advanced animations and gestures
• Custom UI Components - Animated icons and interactive elements

Backend & Database

• Firebase - Authentication, Firestore, and hosting
• Real-time Updates - Live progress synchronization

Development

• ESLint & Prettier - Code quality and formatting
• Husky - Git hooks for quality control
• Vercel - Deployment and hosting

For complete technical stack details, see TECH_STACK.md

🤝 Contributing

We welcome contributions! Here's how you can help:

Ways to Contribute

• 🐛 Bug Reports: Help us identify and fix issues
• ✨ Feature Requests: Suggest new functionality
• 💻 Code: Improve the codebase and add features
• 📝 Content: Add French lessons and cultural content
• 🌍 Translation: Help translate to other languages

Getting Started

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Make your changes
4. Commit with a clear message (git commit -m 'Add amazing feature')
5. Push to your branch (git push origin feature/amazing-feature)
6. Open a Pull Request

For detailed contribution guidelines, see CONTRIBUTING.md

📊 Roadmap

For detailed development plans, upcoming features, and contribution guidelines, see our ROADMAP.md file.

Quick Overview:

• ✅ Phase 1: Core features completed with enterprise-level architecture
• ✅ Phase 2: Enhanced mobile navigation and UI animations completed
• 🚧 Phase 3: Advanced learning features and community features in progress
• 📋 Phase 4: AI-powered features and advanced analytics planned

📄 Legal & Documentation

Legal Pages

• Privacy Policy: Comprehensive data protection and privacy information
• Terms of Service: Platform usage terms and user agreements
• Open Source: MIT License - see LICENSE file

Key Legal Highlights

• ✅ No Data Selling: We never sell or trade your personal information
• ✅ Secure Storage: Firebase encryption and industry-standard security
• ✅ User Rights: Access, update, or delete your data anytime
• ✅ Transparent: Clear policies on data usage and sharing
• ✅ GDPR Compliant: Respects user privacy and data protection rights

🆘 Support

Getting Help

• GitHub Issues: Report bugs and request features
• GitHub Discussions: Ask questions and share ideas
• Email: [email protected]
• Help Center: Visit /support for FAQs and guides

Community

• GitHub Discussions: Participate in conversations
• Contributing: Help make the platform better
• Feedback: Share suggestions through the in-app feedback system

For comprehensive support information, see SUPPORT.md

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🌟 Acknowledgments

• Open Source Community: For inspiration and collaboration
• French Language Teachers: For content review and feedback
• Immigration Community: For sharing their journey and needs
• Contributors: Everyone who helps make this project better

📞 Contact

• Project Lead: Kasim Kazmi
• Email: [email protected]
• GitHub: @kasimkazmi
• LinkedIn: @KasimKazmi

---

Ready to start your French learning journey?

🌐 Try Français Pro Live | 📖 Get Started Locally 🚀

Last updated: January 2025 - Admin User Management, Mobile Navigation & UI Enhancements