PeerMentor

• 

  Role Selection | Allows users to choose their experience: join as a mentor or mentee. This sets their dashboard and app flow.

• 

  Login / Signup | Authenticates users via email or social login (Google & Facebook), while capturing their selected role.

• 

  Home Page | Branded intro page with mission highlights, platform values, and UI welcome visuals.

• 

  Profile Page | Displays user info, learning goals, and editable fields for preferences to improve match recommendations.

• 

  Dashboard (Mentee) | Personalized space for mentees featuring mentorship schedules, recent activity, and match insights.

• 

  Dashboard (Mentor) | Tailored view for mentors to manage mentee requests, availability, and future session setup.

💡 Inspiration

So many learners and aspiring professionals want mentorship — but don’t know where to start. We realized that mentorship platforms are either too formal, costly, or impersonal. PeerMentor was born to create an inclusive space where people can connect based on shared goals, availability, and passion.

🛠️ What it does

PeerMentor is a dynamic platform that helps users:

• 🔐 Sign in securely with Email, Google, or Facebook
• 🧑‍💼 Create or edit personalized profiles
• 🤝 Get matched with mentors/mentees using smart compatibility scoring
• 💬 Chat in real-time with matched peers
• 📊 Track mentorship goals
• 🧭 Navigate using a responsive, modern dashboard with sidebar and top navbar

🧪 How we built it

• ⚛️ React for the front end
• 🔥 Firebase (Auth, Firestore, Hosting) for the backend
• 💻 Custom Matching Algorithm to pair mentees with relevant mentors
• 🎨 Styled with modern CSS and gradient UI
• 🚀 Firebase CLI + GitHub Actions for CI/CD deployment
• 🧩 react-router-dom with persistent layout and protected routes

😅 Challenges we ran into

• Google sign-in popups disappearing due to browser security
• Routing issues — pages rendering without layout or navbar
• Firebase auth + session persistence bugs
• Navigating and preserving state after login
• CSS scaling across screen sizes

🏆 Accomplishments we’re proud of

• ✅ Seamless login with email and OAuth
• ✅ Beautiful, responsive two-panel login design
• ✅ Auth-guarded routes with persistent layout
• ✅ Real-time Firestore integration
• ✅ Modular, scalable codebase with reusable components
• ✅ Fully deployed with auto-build via GitHub + Firebase

📚 What we learned

• How to manage and persist Firebase user sessions
• The difference between <Navigate /> and navigate() in routing
• Getting OAuth (Google/Facebook) working smoothly across environments
• Building an engaging, professional UI with modern CSS
• Importance of feedback loops — alerts, errors, loading, redirects

🔮 What’s next

• 📨 Email notifications for match updates
• 📅 Session scheduling inside the app
• ⭐ Mentorship rating and feedback
• 🤖 AI-based mentor recommendations
• 📱 PWA version for mobile mentorship
• 🧑‍🤝‍🧑 Community breakout sessions & group mentoring

🚀 Try it out

🧪 Currently in development! Firebase-hosted demo : [https://peermentor-66bf8.web.app/] 🔗 GitHub: https://github.com/Maxine-ai/PeerMentor

Built With

• chatgpt
• copilot
• css
• firebase
• html
• html5
• react
• vscode