🌐 Peer Learning Platform

A modern peer-to-peer learning platform where students can connect, collaborate, share knowledge, and grow together through interactive learning sessions, real-time messaging, AI assistance, and community engagement.

---

---

📑 Table of Contents

• ✨ Features
  • 🔐 Authentication System
  • 👤 User Profiles
  • 🔍 Peer Discovery
  • 📚 Learning Sessions
  • 💬 Real-Time Chat
  • 🤖 AI-Powered Assistance
  • 🏆 Leaderboard System
  • 📊 Personalized Dashboard
  • ⚡ Modern Responsive UI
• 📸 Screenshots
• 📸 Application Preview
  • 🏠 Home Page
  • 🔐 Authentication
  • 👨‍🏫 Become a Mentor
  • 🤖 AI Assistant
  • Demo Video
• 🧠 Problem Statement
• 🛠️ Tech Stack
• 🎨 Frontend
• ⚙️ Backend
• 🔐 Authentication
• 🚀 Deployment
• 🏗️ System Architecture
• 📂 Project Structure
  • 📝 Where to add new features?
• ⚙️ Installation & Setup
  • 1️⃣ Clone the Repository
  • 2️⃣ Navigate to Project Directory
  • 3️⃣ Install Dependencies
  • 4️⃣ Configure Environment Variables
  • 5️⃣ Start Development Server
  • 📚 Technical Documentation
• 🚀 Deployment
  • Build Command
• 🛠️ Troubleshooting
• 🌟 Future Enhancements
• 🤝 Contributing
  • Steps to Contribute
• 💖 Contributors
• 👩‍💻 Author
  • Durdana Sultana
• ❓ FAQ
• ⭐ Support
• 📜 License
  • 🌟 Empowering Students Through Collaborative Learning 🌟

---

✨ Features

🔐 Authentication System

• Secure Signup & Login
• Protected Routes
• User Session Management

👤 User Profiles

• Personalized User Profiles
• Skills & Interests Showcase
• Learning Preferences

🔍 Peer Discovery

• Find peers based on skills
• Connect with learners worldwide
• Smart matching system

📚 Learning Sessions

• Create study sessions
• Join collaborative learning groups
• Interactive peer discussions

💬 Real-Time Chat

• Instant messaging system
• Community interaction
• Smooth communication experience

🤖 AI-Powered Assistance

• AI chatbot for learning support
• Smart recommendations
• Enhanced user guidance

🏆 Leaderboard System

• Rankings based on activity
• Community engagement rewards
• Motivation through gamification

📊 Personalized Dashboard

• Track learning progress
• Session overview
• Activity management

⚡ Modern Responsive UI

• Fully responsive design
• Mobile-friendly interface
• Smooth user experience

---

📸 Screenshots

📸 Application Preview

🏠 Home Page

---

🔐 Authentication

---

👨‍🏫 Become a Mentor

---

🤖 AI Assistant

---

Demo Video

demo.1.mp4

🧠 Problem Statement

Many students struggle to find suitable learning partners, mentors, and collaborative study environments.

The Peer Learning Platform solves this challenge by enabling students to connect, collaborate, and learn together through peer-to-peer knowledge sharing and community interaction.

---

🛠️ Tech Stack

🎨 Frontend

• React.js
• TypeScript
• JavaScript
• Tailwind CSS

⚙️ Backend

• Supabase
• PostgreSQL

🔐 Authentication

• Supabase Authentication

🚀 Deployment

• Vercel

---

🏗️ System Architecture

graph TD
    subgraph Client [Client Side]
        UI[React Frontend]
    end

    subgraph SupabasePlatform [Supabase Platform]
        Auth[Authentication]
        DB[(PostgreSQL Database)]
        Realtime[Real-Time Chat System]
    end

    subgraph NodeBackend [Custom Backend]
        AIAssistant[AI Integration API]
    end

    subgraph ExternalServices [External Services]
        OpenRouter[OpenRouter / OpenAI API]
    end

    UI <-->|JWT Auth & User Sessions| Auth
    UI <-->|CRUD Operations| DB
    UI <-->|WebSockets| Realtime
    UI -->|Ask AI / Summarize| AIAssistant
    
    AIAssistant -->|Verify Token| Auth
    AIAssistant <-->|Generate Text| OpenRouter

Loading

• React Frontend: The client-side application built with React, TypeScript, and Tailwind CSS. Provides the UI for users to interact with the platform.
• Supabase Backend: Handles core backend services.
  • Authentication Flow: Manages user signup, login, and secure sessions via Supabase Auth.
  • PostgreSQL Database: Stores user profiles, learning sessions, and messages securely.
  • Real-Time Chat System: Uses Supabase Realtime for instant messaging and live typing indicators.
• AI Assistant Integration: A custom Node.js/Express server connects to external AI APIs (OpenRouter) to provide smart recommendations and learning support securely.

---

📂 Project Structure

peer-learning-platform/
│
├── public/               # Static assets (images, icons, etc.)
│
├── src/                  # Main application source code
│   ├── components/       # Reusable UI components (buttons, cards, forms)
│   ├── pages/            # Application routes and views (Home, Profile, Chat)
│   ├── hooks/            # Custom React hooks for state and side effects
│   ├── integrations/     # Third-party integrations (Supabase, external APIs)
│   ├── services/         # API calls and business logic
│   ├── utils/            # Helper functions and utilities
│   └── App.tsx           # Main application entry point and routing
│
├── backend/              # Custom Node.js Express server
│   ├── controllers/      # Request handlers (e.g., aiController)
│   ├── routers/          # API route definitions
│   └── server.js         # Backend entry point
│
├── package.json          # Project dependencies and npm scripts
├── tailwind.config.js    # Tailwind CSS configuration
├── tsconfig.json         # TypeScript compiler configuration
└── README.md             # Project documentation

📝 Where to add new features?

• New UI Element: Add a reusable component in src/components/.
• New Page/Route: Create a new view in src/pages/ and add it to the router in App.tsx.
• New Database Query: Add the Supabase logic inside src/integrations/supabase/ or src/services/.
• New Backend API: Define the route in backend/routers/ and handle logic in backend/controllers/.

---

⚙️ Installation & Setup

1️⃣ Clone the Repository

git clone https://github.com/durdana3105/peer-learning.git

---

2️⃣ Navigate to Project Directory

cd peer-learning

---

3️⃣ Install Dependencies

npm install

---

4️⃣ Configure Environment Variables

A .env.example file is provided in the root of the repository with all required variable names and placeholder values. Copy it to .env before running the project:

cp .env.example .env

Then fill in your actual values in .env. You can get your Supabase credentials from https://supabase.com/dashboard.

Create a .env file in the root directory and add:

VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

---

5️⃣ Start Development Server

npm run dev

---

📚 Technical Documentation

For deeper technical insights, please refer to our dedicated documentation:

• 🗄️ Database Architecture & Schema
• 🔌 API Documentation

---

🚀 Deployment

This project can be easily deployed on:

• Vercel
• Netlify
• Render

Build Command

npm run build

---

🛠️ Troubleshooting

If you encounter issues during setup, installation, or configuration, please refer to our Troubleshooting Guide for solutions to common problems.

---

🗺️ Feature Roadmap

Our development roadmap is structured to provide clear visibility into the project's priorities and progress.

Completed ✅

• 🔐 Secure Authentication: Email/Password and OAuth integration.
• 📚 Real-Time Chat & Study Sessions: Live messaging and collaborative learning environments.
• 🏆 Gamification System: XP, levels, leaderboards, and streak counts.

In Progress 🚧

• 📅 Session Scheduling: Plan study sessions ahead of time. (Target: Q3)
• 🧠 AI-based Peer Recommendations: Smart matching system for peers. (Target: Q3)

Planned 📌

• 🎥 Video Calling Integration: Seamless face-to-face peer collaboration. (Target: Q4)
• 🔔 Real-time Notifications: Alerts for new messages and upcoming sessions. (Target: Q4)
• 🧑‍🏫 Mentor Matching System: Dedicated workflows for connecting students with mentors. (Target: Q1 2027)
• 🌍 Multi-language Support: Expanding accessibility for a global audience. (Target: Q1 2027)
• 📱 Dedicated Mobile App: Native applications for iOS and Android. (Target: 2027)

---

🤝 Contributing

Contributions are welcome 🚀

Steps to Contribute

1. Fork the repository
2. Create a new branch

git checkout -b feature-name

3. Make your changes
4. Commit your changes

git commit -m "Add your message"

5. Push to GitHub

git push origin feature-name

6. Open a Pull Request 🎉

---

💖 Contributors

Thanks to all the amazing people who contribute to Peer Learning 🚀

---

👩‍💻 Author

Durdana Sultana

Computer Science (AI & ML) Student

---

⭐ Support

If you like this project, please give it a ⭐ on GitHub.

❓ FAQ

Q: How do I set up the project locally?

A: Clone the repo, install dependencies, copy .env.example to .env, fill in Supabase values, then run the development server.

git clone https://github.com/durdana3105/peer-learning.git
cd peer-learning
bun install
cp .env.example .env
# Update .env with your Supabase values
bun run dev

If you do not use Bun, npm install and npm run dev are valid alternatives.

Q: What environment variables are required?

A: Your frontend needs VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY (or supported aliases such as NEXT_PUBLIC_SUPABASE_URL / NEXT_PUBLIC_SUPABASE_ANON_KEY).

The backend uses SUPABASE_URL and either SUPABASE_SERVICE_ROLE_KEY or SUPABASE_ANON_KEY as well as OPENROUTER_API_KEY for AI chat and SITE_URL where applicable.

Q: How should I configure Supabase?

A: Create a Supabase project and copy the project URL and anon key into .env. Enable Supabase Auth, add the required authentication providers, and make sure your auth redirect URL matches your local or deployed site.

Q: How can I deploy this project?

A: This repository is configured for Vercel deployment. Deploy the frontend and backend to Vercel, then add the same Supabase environment variables to your Vercel project settings.

For local deployment, ensure your .env variables are correct and run bun run dev for development or bun run build then bun run preview for production preview.

Q: Why does authentication fail even though I set up Supabase?

A: Common causes:

• .env variables are missing, wrong, or not loaded.
• The site URL in Supabase Auth settings does not match your local URL (http://localhost:5173) or deployed URL.
• OAuth provider callback URLs are not configured correctly.

Verify the keys and URLs carefully in both Supabase and the app.

Q: What should I do if the app still fails to start?

A: Check these steps:

• Confirm .env.example was copied to .env and values were filled.
• Run bun install again after deleting node_modules if dependencies appear broken.
• Make sure Node/Bun versions are compatible with the repo.
• Look for console errors from the frontend or backend and verify the Supabase credentials.

---

📜 License

This project is licensed under the MIT License.

---

🌟 Empowering Students Through Collaborative Learning 🌟

Made with ❤️ by the Open Source Community