• 

  SkillSyncAi-Automated AI team formation

As students, we realized that working on projects is one of the fastest ways to learn — yet finding the right teammates is always the hardest part. People struggle with:

Mismatched skills Unavailable teammates Random team assignments No clear idea of what they need to learn next

We asked ourselves: “What if forming teams could be as smart as using AI, and as fun as taking a quiz?”

That question inspired SkillSync AI — a platform that uses AI to automate learning, build smarter study groups, and help students grow together.

What We Learned

During the hackathon, we explored topics we had never used in a real project before:

React + TypeScript Tailwind CSS + multi-theme UI (Light, Dark, Pink mode) Designing AI-driven workflows Integrating GitHub skill analysis Authentication & state management Building a quiz-based matching engine Recommender systems for personalised learning

We especially learned how to design systems that guide users to grow, not just match them randomly.

How We Built It

SkillSync AI was built using a modern full-stack workflow:

Frontend React + TypeScript

Figma → for design

3 Themes: Light (Blue), Dark (Purple), Pink (Fun Mode)

Interactive pages: Dashboard, Quiz, Gap Finder, Team Assignment

AI Features

Gap Finder AI: Takes project details and identifies missing features, skill gaps, and role optimization.

Quiz-Based Team Formation: Matches users using vector scoring:

Match Score

𝛼 𝑆 + 𝛽 𝑃 + 𝛾 𝐴 Match Score=αS+βP+γA

where S = skills, P = personality, A = availability.

Learning Recommendations AI: Suggests courses, project ideas, and GitHub contributions.

Backend

Node + Express API

GitHub profile analyser

Matching engine

MongoDB for user data

Discord Automation

When a project is created, our Discord bot auto-creates a private team channel using:

Channel

TeamName +

ProjectID Channel=TeamName+#ProjectID

Challenges We Faced

1. Designing a Multi-Theme System

Figma generated hundreds of styles — implementing them manually caused conflicting CSS variables and broken dark mode. We rewrote the entire theme engine using:

[data-theme="dark"] { ... } [data-theme="pink"] { ... }

1. Debugging a Broken UI Export

AI-generated components were inconsistent; many buttons didn't work, states were missing, and navigation failed. Fixing this taught us:

Component structuring

Prop drilling

Conditional rendering

1. Matching Algorithm Complexity

Creating fair team assignments was hard. We finally built a weighted scoring system that balances:

Skill-fit

Personality compatibility

Availability

Project requirements

1. Time Pressure

Integrating AI + UI + backend + Discord automation within hackathon time was extremely challenging — but also the most valuable learning experience.

Final Thoughts

SkillSync AI is more than a project — it’s our attempt to make learning collaborative, smart, and fun again. We built it because we believe students learn fastest when they learn together, and AI can make that process smoother, fairer, and more exciting.

drive link : https://drive.google.com/drive/folders/1Q9mYq84OGMnDDq2sQvG252AF1h5pHmQA?usp=drive_link

Built With

• css3
• dark
• express.js
• figma
• github
• mongodb
• node.js
• personality-&-availability)-ai-gap-finder-(project-analysis-&-missing-features-detection)-ai-recommendation-engine-(courses
• pink)-lucide-icons-figma-?-react-ui-export-backend-node.js-express.js-mongodb-/-mongoose-jwt-authentication-ai-&-algorithms-custom-matching-engine-(weighted-score-using-skills
• react
• replit
• tailwind
• typescript
• vercel
• vite