-
-
Extension popup with button for toggling receiving invitations
-
Call invitation page
-
Call page
-
Extension enabled in Chrome
Inspiration
It's no secret that online learning (especially asynchronously) has made it more difficult to collaboratively learn, and commit to a learning schedule consistently. Students often find themselves completing lectures or related course content at irregular times on any given day. It's also hard to absorb course content without another human available to discuss/clarify it with; of course, based on everyone's learning styles, this affects some more than others.
We were inspired by the platform Omegle, which facilitates spontaneous communication between two or more parties, using common interests to guide friendly online discussions. We designed OmegaLearn, as a spinoff of Omegle, to help groups of students in the same class launch study sessions in real-time, based on lecture content they're viewing in their browser, hosted on https://omegalearn.tech .
What it does
OmegaLearn invites users to a video call when it detects more than one user browsing a website with the extension enabled (the users are matched based on the URL of the website they are visiting). This mechanism leverages existing communities and permission controls (e.g. some websites are only accessible to students at certain universities) on the internet for matching people with common interests and greatly reduces the friction for making new connections. Users can choose to join the call in a separate tab and simply close the tab once they have finished talking. Users can also easily control when they receive invitations by toggling a button in the extension.
How we built it
We used React/Redux on the frontend to establish a stateful Chrome extension that conducts asynchronous background tasks to maintain a socket.io connection with our backend.
On the backend, we maintain a flask server integrated with the popular WebSocket library flask-socket-io. Websocket requests from the frontend are proxied through an NGINX config and delivered to a flask router. With respect to databases, we used CockroachDB to associate users with a URL, emitting an event to users in a socket-io room when two or more users have visited a particular URL. Upon receiving this "session found" message, each involved frontend extension launches a landing page that allows for a call (strictly associated with the URL in question) to be joined via a Vonage Video API session_id.
To establish the SSL certified omegalearn.tech, we leveraged a Google Cloud VM with Compute Engine SSL configurations.
Challenges we ran into
Configuring NGINX to accept both HTTP and WebSocket requests was a huge pain. It was also difficult to setup Chrome tab event handling and the required extension permissions (so we could detect the opening/closing of tabs while the extension is enabled, in order to convey their URLs to the server).
Accomplishments that we're proud of
We were euphoric when our client finally started talking to our server and vice versa (i.e our WebSocket passed the handshake phase for the first time).
What's next for OmegaLearn?
We’re planning to introduce persistent notes, highlights, and annotations for each website, as well as automatic content moderation through image recognition to keep OmegaLearn a friendly environment for all users.
Log in or sign up for Devpost to join the conversation.