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.
- ✨ Features
- 📸 Screenshots
- 📸 Application Preview
- 🧠 Problem Statement
- 🛠️ Tech Stack
- 🎨 Frontend
- ⚙️ Backend
- 🔐 Authentication
- 🚀 Deployment
- 🏗️ System Architecture
- 📂 Project Structure
- ⚙️ Installation & Setup
- 🚀 Deployment
- 🛠️ Troubleshooting
- 🌟 Future Enhancements
- 🤝 Contributing
- 💖 Contributors
- 👩💻 Author
- ⭐ Support
- 📜 License
- Secure Signup & Login
- Protected Routes
- User Session Management
- Personalized User Profiles
- Skills & Interests Showcase
- Learning Preferences
- Find peers based on skills
- Connect with learners worldwide
- Smart matching system
- Create study sessions
- Join collaborative learning groups
- Interactive peer discussions
- Instant messaging system
- Community interaction
- Smooth communication experience
- AI chatbot for learning support
- Smart recommendations
- Enhanced user guidance
- Rankings based on activity
- Community engagement rewards
- Motivation through gamification
- Track learning progress
- Session overview
- Activity management
- Fully responsive design
- Mobile-friendly interface
- Smooth user experience
demo.1.mp4
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.
- React.js
- TypeScript
- JavaScript
- Tailwind CSS
- Supabase
- PostgreSQL
- Supabase Authentication
- Vercel
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
- 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.
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- 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 inApp.tsx. - New Database Query: Add the Supabase logic inside
src/integrations/supabase/orsrc/services/. - New Backend API: Define the route in
backend/routers/and handle logic inbackend/controllers/.
git clone https://github.com/durdana3105/peer-learning.gitcd peer-learningnpm installA .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 .envThen 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_keynpm run devFor deeper technical insights, please refer to our dedicated documentation:
This project can be easily deployed on:
- Vercel
- Netlify
- Render
npm run buildIf you encounter issues during setup, installation, or configuration, please refer to our Troubleshooting Guide for solutions to common problems.
Our development roadmap is structured to provide clear visibility into the project's priorities and progress.
- 🔐 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.
- 📅 Session Scheduling: Plan study sessions ahead of time. (Target: Q3)
- 🧠 AI-based Peer Recommendations: Smart matching system for peers. (Target: Q3)
- 🎥 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)
Contributions are welcome 🚀
- Fork the repository
- Create a new branch
git checkout -b feature-name- Make your changes
- Commit your changes
git commit -m "Add your message"- Push to GitHub
git push origin feature-name- Open a Pull Request 🎉
Thanks to all the amazing people who contribute to Peer Learning 🚀
Computer Science (AI & ML) Student
If you like this project, please give it a ⭐ on GitHub.
This project is licensed under the MIT License.