A comprehensive, production‑grade Learning Management System (LMS) UI designed to offer an immersive, AI‑powered online education experience. Built with Next.js 16, React 19, Tailwind CSS, and Cutting‑edge AI Integration.
Mentoro bridges the gap between instructors and students by providing a seamless, interactive platform for course creation, discovery, and learning. It empowers educators with robust course management tools—such as dynamic creation forms, media uploads, and structured lessons—while offering students an intuitive dashboard and a 24/7 AI Mentor to aid their learning journey.
Whether you are looking to monetize your expertise or upskill with new knowledge, Mentoro provides the perfect ecosystem with built-in payments, multi-language support, and intelligent search capabilities.
| Feature | Description |
|---|---|
| 🏫 Comprehensive Dashboards | Dedicated intuitive dashboards for Students, Instructors, and Admins. |
| 📚 Course Management | Powerful tools for instructors to create, edit, delete courses, and structure modules and lessons. |
| ☁️ Media Uploads | Seamless image and video uploads integrated with Cloudinary for course thumbnails and previews. |
| 🤖 AI Mentor | Persistent 24/7 AI assistant for instant support and on‑the‑fly content generation to test knowledge. |
| 🔍 Intelligent Search | Semantic AI search with insights, smart course matching, and filtering capabilities. |
| 🌍 Multi‑Language (i18n) | Native support for multiple languages including English, Bengali, Arabic (RTL), French, and Spanish, powered by Intlayer & AI. |
| 💼 Jobs & Careers Board | Dedicated job portal for users to apply to platform careers, with admin application tracking. |
| 📹 Live Sessions | Integrated live session management for instructors to schedule and host real‑time classes. |
| 📊 Advanced Analytics | Comprehensive admin analytics dashboard with data visualization and CSV/PDF export capabilities. |
| ✉️ Dynamic Contact Forms | Fully functional contact pages utilizing EmailJS for reliable communication. |
| 💳 Stripe Integration | Seamless and secure payment flow for paid course enrollments. |
| 🔐 Secure Authentication | Firebase‑powered Email/Password and Google Social Login with state synced via Redux Toolkit. |
| 📱 Responsive & Modern UI | Mobile‑first design, beautiful toast notifications (react‑hot‑toast), interactive maps (react‑leaflet), and full RTL layout support for Arabic users. |
| Technology | Purpose |
|---|---|
| Next.js 16 | React framework (App Router) for SSR and routing |
| React Hook Form & Zod | Dynamic, validated, and performant forms |
| Redux Toolkit (RTK Query) | State management and efficient data fetching |
| Tailwind CSS 4 | Utility‑first styling for a highly customizable UI |
| Intlayer 8.6 & OpenRouter | AI‑Driven Content Management and Automated Translations |
| Stripe | Payment processing |
| EmailJS | Client‑side email sending |
| React Hot Toast | Beautiful, lightweight global notifications |
| React Leaflet | Interactive mapping for contact sections |
| Lucide React | Modern, clean iconography |
- Node.js v20+
- yarn (Preferred package manager)
git clone https://github.com/dev-alauddin-bd/Mentoro_Frontend.git
cd Mentoro_Frontend
yarn installCreate a .env file in the root directory and populate it with the following configuration:
# API Configuration
NEXT_PUBLIC_API_URL=http://localhost:5000
# AI & Content (OpenRouter)
OPENROUTER_API_KEY=your_openrouter_key
# EmailJS Configuration
NEXT_PUBLIC_EMAILJS_SERVICE_ID=your_service_id
NEXT_PUBLIC_EMAILJS_TEMPLATE_ID=your_template_id
NEXT_PUBLIC_EMAILJS_PUBLIC_KEY=your_public_key
# Quick Login Credentials (Development)
NEXT_PUBLIC_ADMIN_EMAIL=admin@mentoro.com
NEXT_PUBLIC_ADMIN_PASSWORD=password123
NEXT_PUBLIC_STUDENT_EMAIL=student1@mentoro.com
NEXT_PUBLIC_STUDENT_PASSWORD=password123
NEXT_PUBLIC_INSTRUCTOR_EMAIL=instructor1@mentoro.com
NEXT_PUBLIC_INSTRUCTOR_PASSWORD=password123Mentoro uses a Server-Side Security Watchdog (middleware.ts) to enforce strict Role-Based Access Control (RBAC).
- API-Synchronized: Every authenticationed request triggers a session verification against the Node.js backend.
- RBAC Enforcement: Prevents students from accessing instructor/admin areas and vice versa.
- Watchdog Logs: Real-time security monitoring in the terminal with stylized status alerts.
- Fail-Safe: Automatically clears invalid cookies and redirects to
/loginor/unauthorizationd.
# Fill missing translations using OpenRouter AI
npx intlayer fill
# Build JSON dictionaries
npx intlayer buildyarn dev| Route | Description | Accessibility |
|---|---|---|
/ |
Landing Page showcasing platform features and top courses | Public |
/courses |
Browse, search, and filter the course catalog | Public |
/courses/[id] |
Detailed course view, curriculum, and enrollment | Public |
/careers |
View and apply for open job positions | Public |
/contact |
Get in touch with platform support via interactive forms | Public |
/unauthorizationd |
Premium "Access Denied" page for RBAC violations | Public |
/login & /signup |
Secure authentication flows | Public |
/dashboard/student/* |
Student progress and enrolled courses | authenticationed |
/dashboard/instructor/* |
Instructor course management, assignments, and live sessions | authenticationed |
/dashboard/admin/* |
Platform administration, advanced analytics, and user management | authenticationed |
Built with ❤️ and AI for modern education.