SkillSwap

Dashboard showing people's skills and what they need help with

What inspired us

We were inspired by the idea that everyone has something valuable to teach, but existing platforms often make skill-sharing feel transactional or intimidating. We wanted to design a product that made exchanging skills feel human, local, and approachable, especially for communities where informal learning already happens but isn’t supported by good tech.

What we learned

We learned how to design a full product experience end-to-end, not just individual screens. This project pushed us to think deeply about user flow, clarity of value, and how to communicate “intelligence” and trust through UI. On the technical side, we strengthened our skills in React, TypeScript, component-driven design, and integrating frontend experiences with real backend logic and data.

How we built the project

The frontend is a TypeScript + React single-page application built with Vite and styled using Tailwind CSS. It tells the complete product story—from landing and onboarding to discovery, matching, and chat, using a clean, mobile-first design.

We implemented core product flows such as:

A landing experience that clearly communicates the value

A feed and discovery system for skill swap posts

A guided “create request” flow (UI-only for demo purposes)

An AI-styled matching experience with scores and reasoning

A real-time chat-style interface for conversations

Although this repository contains frontend code only, the full project also includes a backend powered by Python, scikit-learn, and Supabase, which we used to handle NLP-based matching logic, authentication, and data storage. The frontend is wired to reflect this intelligence, even when using demo data for judging.

Challenges we faced

One of the biggest challenges was making AI-driven matching feel believable and intuitive in the UI without overwhelming the user. We also had to balance speed and polish for live demos, ensuring everything felt responsive and reliable. Integrating frontend flows with backend logic, while still presenting this repo as frontend-only, required careful abstraction and thoughtful design decisions.