Back

Vibe-Check

Co-built with Stan Flint ↗, vibe-check is a Chrome Extension and Website that helps make presentations more interactive. Users can react and comment on the presentation in real-time. Presenters can see real-time statistics on the vibe of the room.

After a successful summer of development in 2023, we released the Chrome Extension, opened beta testing, and carried out some user testing.

Origins

The night before Hack The Burgh 2023 hackathon, some friends and I were in my living room complaining about the lack of interaction in our university lectures.

In simple terms, the conversation went like this:

"I'm not sure if I'm the only one, but I find it hard to stay awake in lectures"

We found that lectures felt like low-quality YouTube videos and did not take advantage of the interactive potential that being in the same room as the lecturer offers.

Hack The Burgh

Following on from that night's conversation, along with Paulina Gerchuk ↗, David Higgins ↗, Archie Forster ↗, Wietske Holwerda ↗ and Stan Flint ↗ we decided to build a system that would help us stay awake in lectures.

With only 24 hours to build a proof of concept demo, we focused on the core features of the system. Here is where we got to:

The hackathon was a success. While we did win several smaller prizes, the nicest outcome was getting feedback directly from heads of schools and lecturers. They saw the potential of the system and wanted to see it developed further.

V2

By the end of March 2023, Stan Flint ↗ and I decided to continue working on the project. We had clear ideas of what we wanted to build and how it could help university life. We called it V2.

We planned to showcase our progress and partner with lecturers in September of 2023, our next academic year.

Our timeline gave us a couple of months to build a real MVP. These included:

• Deploy the extension to the Chrome Webstore.
• Build and deploy the website for presenters and audiences, including backend.
• Create a promotional website for lecturers to sign up for updates.

We used Svelte, NextJS, lots of WebSockets and Digital Ocean.

I'll cover the coolest and most unique part of the puzzle:

Monorepo

As a multiplayer game developer, Stan was quite fond of the monorepo structure. It enables consistent logic execution on both client and server sides. For instance, in the multiplayer world, any calculations for player movement need to be calculated on the client (for instant reaction time) and on the server (to verify that movements coming for clients are valid).

When Stan suggested using this same monorepo structure for our Chrome Extension, Website, and Backend, I was extremely skeptical. Would this be useful at all? Would it make everything bloated and complex?

However, my worries were quickly resolved. The monorepo structure proved to be a game-changer for me. While sharing type definitions and helper functions across the three domains was useful, what truly amazed me was the ability to share Svelte components between the Website and the Chrome Extension. No copy-and-pasteing or making a UI library for our repos!

The primary challenge was the extensive configuration and build scripts required to integrate the components smoothly. We created a custom webpack.config.js to enable a unified development experience. With a single npm run dev command, we could start and hot-reload the server, website, and extension simultaneously.

Since then, I have used this structure in all my projects. I cannot recommend it enough.

Chrome Extension

Why not a desktop app?

All computers in the University of Edinburgh have Chrome installed and administrators can install extensions without user interaction. It made setup trivial. As soon as a lecturer would open a computer to display slides, the extension would be installed and running.

It is true that a desktop app would be more versatile, (especially for those lecturers who prefer alternative browsers), but we estimated that 90% of lecturers already use Chrome's PDF viewer in full screen mode.

UX

I think this was the first time I seriously thought of UX (User Experience). I frequently found myself thinking how to make the system more obvious.

It first started when I was pitching the system to a professor in late May 2023. Stan and I had identified that we needed people (lecturers in high places) to vouch for us and become our first users. So, a week before, I had stalked and emailed all possible lecturers that could be interested in supporting us develop the system. In just a few days I had scheduled a meeting with a few professors.

This pitch was awkward. I can vividly remember the professor tilting his head and saying "I'm not sure I understand what this is". While this person was one of the top most influencial people in Computer Science, the idea of Chrome Extensions escaped him. The idea of having an injected overlay over a website seemed out of of this world. Seeing him interact with the system, I could see the confusion.

I dont blame him. The system needed to be way simpler to understand if we wanted it to be adopted, especially within the academic circles.

I got to play with dozens of variations of shapes, layouts, feedback systems, animations...

Where should the comments appear? What if you want to click something under the comments? What if you change tabs? What if the website you are visitng leaks its CSS onto the overlay?

In all honestly, I'm extremely grateful of having to tackle this challenge.

Stats

Part of knowing the vibe of the room is seeing what people are reacting to. As the presenter is delivering a speech, they need to be able to see the overall change in feedback.

The idea was to implement some /stats page to be automatically opened on a new screen and follow in real-time the progress of the resentation.

See you in the future,
Tomas