skill-swap

landing page
messaage
request
histroy
dashbaord
login
sessions
browse skill page
request
vidio session

💡 Inspiration

Money shouldn't be the only way to access knowledge. A developer who can't afford a guitar teacher, a designer who needs coding help — these people have skills worth trading. SkillSwap was built on one simple idea: everyone has something to teach, and something to learn.

We wanted to create a platform where value is exchanged through expertise, not currency — making learning accessible to anyone, anywhere.

🔧 What It Does

SkillSwap is a full-stack skill exchange platform where users offer and request skills in a marketplace — no money involved.

Key features:

📋 Bid Marketplace — Post skill requests or offers. Browse, like, and comment on bids from others.
💬 Real-Time Chat — Instant messaging powered by Socket.io between matched users.
🎥 Peer-to-Peer Video Sessions — Live skill sessions via WebRTC with screen sharing support.
🔐 Secure Authentication — OTP email verification, Google OAuth, and JWT-based sessions.
👤 Profile & Portfolio — Upload a profile picture, list your skills, track your exchange history.
🔔 Notifications — Real-time alerts for bids, messages, and session updates.
🛡️ Admin Panel — Manage users, reports, and platform activity.
⚙️ Settings Page — Update profile, change password, manage preferences.

🛠️ How We Built It

Layer	Technology
Frontend	React (Vite) + Tailwind CSS v4
Backend	Node.js + Express.js
Database	PostgreSQL via Supabase
ORM	Drizzle ORM (13-table schema)
Real-Time	Socket.io
Video	WebRTC (peer-to-peer)
Auth	JWT + Google OAuth (Passport.js) + OTP via Nodemailer
Storage	Supabase Storage (profile pictures)

The architecture is a clean separation between client and server, with a REST API for core operations and Socket.io handling real-time events.

🚧 Challenges We Faced

1. Cross-Domain Authentication Deploying frontend on Vercel and backend on Render meant Google OAuth redirect URIs had to be perfectly matched — a single typo broke everything.

2. Real-Time Across Domains Socket.io connections fail silently when CORS isn't configured correctly for separate domains. Debugging this took significant time.

3. Ephemeral File Storage Render's free tier has no persistent disk — file uploads vanished on every redeploy. Solved by integrating Supabase Storage.

4. Session Planning Logic Both users get a fair, auto-calculated exchange plan — ensuring equal time investment from both sides regardless of skill type..

5. Database Connection Pooling Supabase required prepare: false in the Drizzle config to prevent prepared statement conflicts under connection pooling.

🏆 Accomplishments We're Proud Of

Built a fully functional video calling feature with screen sharing from scratch using WebRTC.
Designed and implemented a 13-table relational schema covering users, bids, exchanges, sessions, conversations, messages, streaks, reports, and more.
Delivered a polished dark glassmorphism UI with a consistent design system (indigo-to-cyan gradients, Syne typography).
Shipped a working admin panel with user management and report handling.

📚 What We Learned

How to integrate WebRTC signaling over Socket.io for real-time video.
Drizzle ORM's schema-first approach and its quirks with serverless databases.
Building scalable real-time systems with Socket.io rooms and namespaces.
The importance of a strong design system — having consistent colors, fonts, and spacing saved us hours.