Ambiance

• 

  Flashcard upload

• 

  Voice settings

• 

  Main area

When you walk into a library, most students you see are studying alone. Sometimes that’s by choice, but for many, it can feel isolating. We wanted to create something that makes solo studying feel a little less lonely. That’s where Ambiance comes in — our study companion platform designed to bring focus, motivation, and comfort to students studying by themselves.

Ambiance combines several features to make studying more engaging. It offers AI-generated flashcards to keep your mind active, a voice companion powered by ElevenLabs for a sense of presence, a Pomodoro timer to help with focus, and a looping ambient video background to set the right mood. Together, these features create an experience that feels both productive and personal.

Our team divided the work across clear roles. Brian built the flashcard engine powered by Gemini. Winson handled audio integration as our CEAG—Chief Executive Audio Guy. Daniel developed the backend and set up Flask integration. I focused on the frontend design, shaping the user experience and implementing the interface in React, Vite, and TypeScript, starting from a prototype we built in Figma.

We learned how much user experience depends on the small details—how smooth transitions, balanced color palettes, and subtle animations can make a digital space feel calming and human. We also learned to keep tight coordination between frontend and backend, especially when managing asynchronous data from Gemini and ElevenLabs.

The frontend was where most of our challenges came from. Managing real-time audio and video playback while keeping the interface responsive pushed us to optimize React rendering. Handling asynchronous updates between Flask and the UI required careful state management. Designing a layout that was both minimal and visually rich took multiple iterations. Finally, making transitions between onboarding, studying, and break modes feel seamless without disrupting focus tested our design and timing skills.

In the end, Ambiance became more than just a study app—it’s a way to bring company and structure to the often-isolated experience of studying alone. Through building it, we learned not just about tools and frameworks, but about how thoughtful design and AI can make technology feel a little more human.

Built With

• elevenlabs
• figma
• flask
• gemini
• github
• python
• react
• typescript
• vite