Club Bubbles

Connecting students and clubs through AI-Assisted management.

Comment 1

Inspiration

Even though our team was split across the US and Canada, we were mutually inspired by a common problem within all of our schools. Creating, joining, and managing extracurricular and educational clubs within our student bodies was and continues to be nothing short of an unorganized disaster. Many schools, even those with extensive software-student integrations, still use spreadsheets, lists and web forms to manage their clubs, and the process of creating a student-led club involves tedious iteration of the club's concept. Hearing about and figuring out how to join clubs in school was a feat that required far too much effort for an opportunity that should be easily available for every student.

How We Built It

  • Club Bubble is built with the Vite frontend toolkit, utilizing a react framework.
  • Styling Libraries and Frameworks such as Tailwind CSS, Bootstrap & MagicUI
  • Node.js is utilized for backend APIs and database access
  • Database management is completely hosted by MongoDB Atlas
  • AI integrations are done through the super-fast Cerebras API

Data is created and stored in a MongoDB Cluster, with the use of 2 major collections: users and clubs. The club data follows this template:

{
"_id": //OID,
"name": //Club's name,
"clubRoom": //Club's room number,
"description": //Club's proposal description,
"authenticityScore": //AI-Evaluated scoring of proposal,
"category": //AI-Generated club category (Based off proposal),
"members": //List of current club members
}

Club data is added through the proposal form, and users who create and join clubs are added under the member lists, while also simultaneously adding the club into their club list.

Challenges

PennApps XXV was our entire team's first large-scale hackathon, and 3 members' first ever hackathon. We all came in with varying degrees of experience. Some of us had only ever worked with mobile development prior to the hackathon, and most of us had never used the recommended APIs. 2 members of our team learned React and Node.js in their entirety over the course of the weekend. Additionally, our entire team was composed of High Schoolers who were largely out-skilled by the college competition. However, through the use of several resources, including help from Copilot, API Docs, and a ton of forums, we came through with a finished and functional product.

Takeaways

PennApps XXV taught our team valuable skills and provided us with an unforgettable experience. We learned a countless number of technical skills, including Web App Development, LLM Integration, Database Hosting, and more. However, the experience taught us abilities far beyond the technical, like effective collaboration, outlining a project, and time management. The hackathon gave us valuable interactions, exposure to companies and opportunities, and most importantly, a ton of fun. Our first PennApps was a experience we're sure to never forget, and we wish to attend several more times in the coming years.

Share this project:

Updates