CampusConnect

Inspiration

The initial concept for CampusConnect arose from a common frustration: the siloed nature of university faculties. We realized that for example, while an Engineering student might need a logo and an Art student might need a website, there was no central hub to bridge these disciplines effectively.

Existing professional networks felt too corporate and rigid for the student experience. We were inspired to create something that felt "human" and approachable a digital space that captured the spontaneity of a campus common room rather than a boardroom. This drove our decision to adopt the "Claymorphism" design aesthetic, which emphasizes tactile, soft, and friendly interfaces over sterile minimalism.

What it does

Post Requests by Voice or Text: Users can simply speak their request. We use ElevenLabs to process speech input, which is then analyzed by our AI to automatically generate relevant tags and categories.

Find Collaborators: An intelligent matching system suggests relevant users based on skills and bio data.

Engage: A live activity feed ("Pulse") shows real-time collaboration across campus.

How we built it

Frontend: We utilized Next.js 16 (App Router) and React 19 for the core framework. The user interface was built with Tailwind CSS, but we heavily extended it with custom CSS modules to create the distinct Claymorphism effects.

Backend & Database: We used Node.js for server-side logic and implemented Mongo atlas as our cloud database to ensure flexible and scalable data persistence.

AI & Voice Integration:

ElevenLabs: Used for our advanced speech-to-text processing pipeline.
Google Gemini: We integrated the Google Generative AI SDK to take the transcribed text from ElevenLabs and automatically generate "skill tags" and collaborative suggestions, creating a seamless, hands-free posting experience.

Challenges we ran into

Voice Pipeline Latency: chaining multiple AI services (Voice Input -> ElevenLabs -> Gemini -> Frontend) introduced latency challenges. We had to optimize our API calls to ensure the user didn't feel a disconnect between speaking and seeing their tags appear.

AI Determinism: Getting the Google Gemini API to return consistently formatted JSON data for our tagging system was difficult. We had to iterate on our constraints to stop the model from returning conversational text instead of structured data.

Accomplishments that we're proud of

The Design System: We successfully broke away from the standard "Bootstrap/Material" look that dominates many hackathon projects. The site has a unique, cohesive visual identity.

Seamless Voice Integration: The ability to just speak a request and have it perfectly tagged and categorized feels magical and significantly reduces friction for users on mobile devices.

Robust Data Architecture: Implementing MongoDB allowed us to handle complex user relationships and project data without the rigidity of a SQL schema, perfect for a rapidly evolving hackathon project.

What we learned

Advanced CSS: We gained a much deeper understanding of the CSS Box Model, specifically how to layer box-shadow and backdrop-filter to create depth and glass effects.

Cloud Database Management: Integrating MongoDB gave us valuable experience in managing cloud-native data structures and connecting them securely to a Next.js application.

Prompt Engineering: We learned that treating LLMs as "functions" requires very specific, constraint-based prompting to get reliable output for application logic.