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
- Feature Roadmap
- Contributing
- Contributors
- Author
- FAQ
- 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.
| Category | Technologies |
|---|---|
| Frontend | React 18, TypeScript, Vite |
| UI & Styling | Tailwind CSS, Radix UI, Shadcn UI, Framer Motion |
| Backend | Node.js, Express.js |
| Database | Supabase, PostgreSQL |
| Authentication | Supabase Authentication |
| State Management & Data Fetching | TanStack React Query |
| Forms & Validation | React Hook Form, Zod |
| Charts & Data Visualization | Chart.js, React Chart.js 2, Recharts |
| API Communication | Axios |
| AI Integration | OpenRouter API |
| Video Conferencing | Jitsi React SDK |
| Testing | Vitest, Playwright, Supertest, Testing Library |
| Code Quality | ESLint |
| Deployment | 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
##Architecture Overview
The Peer Learning Platform follows a modern full-stack architecture designed to provide scalability, maintainability, and real-time collaboration.
- Built using React 18, TypeScript, and Vite.
- Uses reusable UI components powered by Shadcn UI and Radix UI.
- Handles routing, state management, authentication, and user interactions.
- Uses TanStack React Query for efficient server-state management.
- Built with Node.js and Express.js.
- Processes API requests.
- Handles AI assistant communication.
- Performs request validation and middleware processing.
- Supabase provides:
- PostgreSQL database
- Authentication
- Real-time subscriptions
- Row Level Security (RLS)
The backend securely communicates with the OpenRouter API using direct HTTP requests, keeping API keys server-side while providing intelligent learning assistance.
User
|
?
React Frontend
|
?
Express Backend
|
+--------------? AI APIs
|
?
Supabase
|
?
PostgreSQL Database
This layered architecture keeps the frontend, backend, and database responsibilities well separated, making the project easier to maintain and extend.
peer-learning-platform/
|
+-- .github/ # GitHub workflows, issue & PR templates
+-- .gssoc/ # GSSoC related resources and documentation
+-- assets/ # Static assets used across the project
+-- docs/ # Technical documentation (API, Database, etc.)
+-- public/ # Public static files served directly
|
+-- src/ # Frontend source code
| +-- assets/ # Images, icons and static resources
| +-- components/ # Reusable React components
| | +-- chat/ # Chat related UI components
| | +-- dashboard/ # Dashboard components
| | +-- mentor/ # Mentor related components
| | +-- recommendations/ # Recommendation system UI
| | +-- resources/ # Learning resources components
| | +-- ui/ # Shared UI components (Shadcn/Radix)
| | +-- whiteboard/ # Collaborative whiteboard components
| |
| +-- config/ # Application configuration
| +-- contexts/ # React Context providers
| +-- hooks/ # Custom React hooks
| +-- integrations/ # Supabase and third-party integrations
| +-- lib/ # Shared libraries and helper logic
| +-- pages/ # Application pages and routes
| +-- screenshots/ # README screenshots and application previews
| +-- test/ # Frontend tests
| +-- types/ # TypeScript type definitions
| +-- utils/ # Utility/helper functions
| +-- App.tsx # Root React component
| +-- main.tsx # Application entry point
|
+-- backend/ # Backend server
| +-- controllers/ # Request handling logic
| +-- middlewares/ # Authentication & request middleware
| +-- routers/ # API route definitions
| +-- tests/ # Backend tests
| +-- utils/ # Backend utility functions
| +-- validation/ # Request validation schemas
| +-- app.js # Express application
| +-- server.js # Server entry point
|
+-- supabase/ # Database configuration and migrations
+-- package.json # Project dependencies and scripts
+-- vite.config.ts # Vite configuration
+-- tailwind.config.ts # Tailwind CSS configuration
+-- tsconfig.json # TypeScript configuration
+-- CONTRIBUTING.md # Contribution guidelines
+-- TROUBLESHOOTING.md # Common issues and fixes
+-- README.md # Project documentationThe table below helps contributors quickly locate the correct directory based on the feature they want to work on.
| If you want to... | Modify this location |
|---|---|
| Create a new page | src/pages/ |
| Build reusable UI components | src/components/ui/ |
| Modify chat functionality | src/components/chat/ |
| Improve dashboard features | src/components/dashboard/ |
| Work on mentor-related features | src/components/mentor/ |
| Add recommendation features | src/components/recommendations/ |
| Update the collaborative whiteboard | src/components/whiteboard/ |
| Add custom React Hooks | src/hooks/ |
| Manage global state or contexts | src/contexts/ |
| Configure Supabase integration | src/integrations/ |
| Add helper or utility functions | src/utils/ |
| Add backend API endpoints | backend/routers/ |
| Implement backend business logic | backend/controllers/ |
| Create middleware | backend/middlewares/ |
| Add request validation | backend/validation/ |
| Write backend tests | backend/tests/ |
| Update technical documentation | docs/ |
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:
Follow the workflow below when contributing to the project:
Issue Assignment
|
?
Fork the Repository
|
?
Clone Repository
|
?
Create a Feature Branch
|
?
Install Dependencies
|
?
Implement Changes
|
?
Run Tests & Lint
|
?
Commit Changes
|
?
Push Branch
|
?
Open Pull Request
|
?
Code Review
|
?
Merge into Main Branch
- Fork the repository.
- Clone it to your local machine.
- Create a new feature or bug-fix branch.
- Install all required dependencies.
- Implement your changes following the project structure.
- Run linting and tests before committing.
- Commit your changes with a meaningful commit message.
- Push the branch to GitHub.
- Open a Pull Request for review.
- Address review comments (if any) and wait for approval.
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.
- AI-based Peer Recommendations: Smart matching system for peers. (Target: Q3)
- 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 ## Steps to Contribute
- 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.
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
npm install
cp .env.example .env
# Update .env with your Supabase values
npm run devNote: This project standardizes on npm. The committed lockfile is
package-lock.json, and CI/deployment runnpm ci. Please do not commit lockfiles from other package managers (e.g.bun.lock,bun.lockb,yarn.lock,pnpm-lock.yaml).
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.
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.
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 npm run dev for development or npm run build then npm run preview for production preview.
A: Common causes:
.envvariables 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.
A: Check these steps:
- Confirm
.env.examplewas copied to.envand values were filled. - Run
npm installagain after deletingnode_modulesif dependencies appear broken. - Make sure your Node.js version is compatible with the repo (CI uses Node 20.x).
- Look for console errors from the frontend or backend and verify the Supabase credentials.
This project is licensed under the MIT License.
# TODO: [bug]: validation error message doesn't clear after fixing the issue (skills & experience steps) (#1614)