← All projects

Full-stack

Gruuper

A web app that takes the headache out of forming student groups. Teachers create a class, students fill out a profile, and Gruuper generates balanced, compatible teams.

Visit live site ↗ View code ↗
Gruuper home screen with the Join or Create a Class form
Type
Team of 3 · Capstone
Category
Full-stack
Stack
React · Firebase · Firestore · Material UI · Vercel

How it fits together

Architecture diagram: React app to Firebase Auth (sign up / log in); React app and Firestore (profiles, groups); React app to Firebase Storage (upload); React app to SmartMatch API (grouping, emails)

A classroom moves through Lobby, Grouping and LiveGrouping. Groups come from a random split or from the SmartMatch service, and can then be edited by drag and drop.

The problem

Forming project groups by hand is slow and often unfair: friends cluster together, skills end up lopsided and schedules clash. Gruuper uses what students say about themselves to build balanced teams automatically, while keeping the teacher in control of the final result.

Approach

  • Teachers create a class and share an invite link; students join with a class code
  • Each student fills out a profile with their skills, availability and preferences
  • A matching algorithm uses that data to generate balanced, compatible groups
  • Professors see students appear in real time and can review the groups and drag and drop students to adjust them before finalizing
  • Built with React on the front end and Firebase Auth and Firestore on the back end, deployed on Vercel

Highlights

  • Live at gruuper.vercel.app
  • Adopted beyond the original course
  • Real-time class rosters with Firestore
  • Built as a CS capstone project with a team of 3