Skip to content

🎨 Frontend of MenteeConnect – A responsive, modern UI built using React 18, Tailwind CSS, and WebRTC for real-time video meetings.

Notifications You must be signed in to change notification settings

coder-mahi/Mentee_Connect_Frontend

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

59 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸš€ MenteeConnect

🎯 Mentor-Student Management System

A full-stack academic mentorship platform enabling seamless communication, goal tracking, and role-based dashboards for admins, mentors, and students.


✨ Key Highlights

  • Multi-role system: Admin, Mentor, and Student
  • Profile & batch management
  • Mentee progress & attendance tracking
  • Secure authentication using JWT
  • React frontend with Tailwind CSS
  • Real-time notifications via WebSocket
  • Video meet feature planned using WebRTC
  • Mentor can assign goals, share resources & track mentees

πŸ‘₯ User Roles

πŸ›‘οΈ Admin

  • Manage admins, mentors, students
  • Create batches and assign mentors
  • Send notifications to users
  • View reports and analytics

πŸ‘¨β€πŸ« Mentor

  • View assigned mentees
  • Update mentee progress and profiles
  • Assign goals/tasks and share resources
  • View own profile and update info
  • Track mentee attendance
  • Host video meets with mentees

πŸŽ“ Student

  • View personal and mentor details
  • Track progress, goals, and certificates
  • Receive updates from mentors
  • Edit and manage own profile

πŸ› οΈ Tech Stack

Frontend

  • React 18+
  • Tailwind CSS 3+
  • Axios
  • React Router v6
  • WebRTC (Planned)

Backend

  • Java 17+
  • Spring Boot 3+
  • Spring Security + JWT
  • WebSocket for real-time features
  • Redis (Planned)
  • Kafka (Planned)

Database

  • MongoDB 6+
  • MongoDB Compass (GUI)

πŸš€ Getting Started

Prerequisites

  • Java 17+
  • MongoDB 6.0+
  • Maven 3.6+
  • Node.js + npm

Setup Instructions

# Clone the project
cd MenteeConnect

# Backend Setup
cd backend
mvn clean install
mvn spring-boot:run

# Frontend Setup
cd ../frontend
npm install
npm start

Ensure MongoDB is running on port 27017.


πŸ“‚ Project Structure

MenteeConnect/
β”œβ”€β”€ frontend/
β”‚   └── src/
β”‚       β”œβ”€β”€ components/
β”‚       β”œβ”€β”€ pages/
β”‚       β”œβ”€β”€ context/
β”‚       β”œβ”€β”€ hooks/
β”‚       β”œβ”€β”€ services/
β”‚       └── utils/
└── backend/
    └── src/main/java/
        β”œβ”€β”€ controllers/
        β”œβ”€β”€ services/
        β”œβ”€β”€ models/
        β”œβ”€β”€ repositories/
        └── security/

βš™οΈ Configuration

MongoDB (application.yml)

spring:
  data:
    mongodb:
      uri: mongodb://localhost:27017/menteeconnect
      database: menteeconnect

πŸ”’ Always store JWT secrets and database URIs in environment variables.


🧠 Workflow Summary

Admin

  • Dashboard β†’ Manage Users β†’ Create Batches β†’ Assign Mentors β†’ Generate Reports

Mentor

  • View Mentees β†’ Update Progress β†’ Add Notes/Resources β†’ Mark Attendance β†’ Host Video Calls

Student

  • View Mentor β†’ Track Goals β†’ View Updates β†’ Edit Profile

πŸ”§ Future Enhancements

  • Email & Push Notifications
  • OAuth2 Login (Google, GitHub)
  • Video Call Integration
  • Calendar Sync for meets
  • Redis for caching, Kafka for messaging
  • CI/CD Deployment pipeline

πŸ‘¨β€πŸ’» Developer Info

πŸ’‘ This is a personal academic project built with real-world scalability in mind. All rights reserved to the author.

About

🎨 Frontend of MenteeConnect – A responsive, modern UI built using React 18, Tailwind CSS, and WebRTC for real-time video meetings.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages