Side by Side

Landing page (Dark mode)
Landing page (Light mode)
GIF

Inspiration

We got inspired by the newly released game On-Together, which makes studying and focusing on tasks a fun experience.
We wanted to bring a similar vibe to our app by creating a web app that allows you to meet with friends, talk to them, and study together.

What It Does

Copium Friends is a collaborative study web app where friends join shared servers and learn together as animated cats.

Current features include:

3 playable cat characters: Jojo, Mimi, Cici
3 cat action states for in-session expression
Server creation and join-by-code flow
Real-time member list, chat, and draggable character presence
Study tools: Talk with Cat, Flashcards, and Quizzes
A production-ready turn-based voice workflow with real-time mode foundations

How We Built It

With lots of love and head bashing.
No really, we used:

Frontend: Vite + React + Tailwind CSS
Backend: Node.js + Express
Realtime: Socket.IO
AI: Gemini API + ElevenLabs API

Best Use of Gemini API

We use Gemini as the core reasoning engine behind every study feature, with a backend-first design focused on quality, consistency, and reliability.

Core Features

Flashcards: Gemini turns a study topic into clean, structured Q/A cards.
Quizzes: Gemini generates MCQ, short-answer, and long-answer quizzes with user-selected question counts.
Grading + Feedback: Gemini evaluates responses and returns clear scoring, including near-correct handling for text answers.
Talk with Cat: Gemini powers the cat’s responses with context-aware, study-focused guidance.

Production Reliability Layer

Structured Output Enforcement: Responses are constrained to JSON-style schemas for predictable parsing.
Server-Side Validation: We validate structure, completeness, and response quality before returning to clients.
Quality Safeguards: Weak or low-signal responses are filtered, with retry/fallback handling for better stability.
Backend-First Security: API keys and model calls stay server-side; clients only consume validated results.
Consistent UX: Unified prompting + validation keeps behavior aligned across flashcards, quizzes, grading, and chat.

Best Use of ElevenLabs

We use ElevenLabs as a dedicated real-time voice infrastructure layer, integrated with a backend-orchestrated AI pipeline for reliability and low-latency interaction.

Scribe STT for microphone speech-to-text
TTS for the cat’s spoken replies
WebRTC session/token plumbing for low-latency conversational transport and live voice session control.

Current voice pipeline:
Voice capture -> STT transcription -> Gemini reasoning/orchestration -> TTS synthesis -> client playback

Implementation quality and maturity:

Reliable structured turn-based voice interactions are fully integrated
Live WebRTC mode is active with connection lifecycle handling (session state + reconnect strategy).
Architecture is designed for evolution toward full-duplex conversational audio with interruption/barge-in optimization.

Accomplishments That We’re Proud Of

Definitely the art. Most definitely the art. It’s so damn pretty. Go take a look at the cats. I want to hug them.
Also:

Smooth multi-page cat flow
Realtime synced study server experience
AI-assisted study tools integrated directly into the app flow

What We Learned

Making overlays is really complicated and often better suited for browser extensions.
Embedding arbitrary websites is limited by browser/security headers (CSP, X-Frame-Options), auth restrictions, and cross-site behavior.