Chalo

Overview

You may know or have used Omegle or OmeTv. These platforms are known as random video chat apps that let you have video calls with strangers worldwide.

Traditional random video chat apps match users randomly, without considering their interests. However, conversations become more engaging when users connect with people who share their interests—whether it's hobbies, favorite foods, travel experiences, or other topics. This is where Chalo comes in.

Like other random video chat apps, Chalo enables video communication with strangers. The key difference is that Chalo uses a content-based filtering (CBF) recommender system to match users based on their preferences.

I developed this project as my bachelor's degree thesis, serving as the fullstack developer.

Challenge

As the only developer for my thesis project, I had to handle everything: architecture design, UI implementation, API creation, and deployment. Initially, I thought it would be straightforward.

It's just a video call app with strangers, what could be so hard about it?

Reality quickly proved otherwise. Technical challenges emerged that made me question my initial assumptions. I went through multiple iterations to find the right tech stack. Bugs became constant companions. Plus, I had to write a comprehensive 69-page thesis report.

Despite these challenges, each obstacle led me to valuable resources and expert advice. Through persistent learning and experimentation, I successfully chose appropriate technologies, implemented complex features, and resolved critical bugs. Ultimately, I delivered a working application, conducted user testing, and presented it to my thesis committee.

TechStack, Tools, & Architecture

TechStack

NextJs → A React framework with comprehensive utilities for UI implementation.
Typescript → A statically-typed JavaScript that enhances code reliability and developer experience by catching type errors early.
TailwindCSS → A utility-first CSS framework that streamlines web styling.
Bun → A high-performance JavaScript runtime powering the backend. I chose it for its speed advantage over NodeJs and most important is JavaScript.
Elysia → A Bun backend framework (similar to how NodeJs uses Express) that accelerates backend development.
MongoDB → A NoSQL database storing user data, chosen for its simplicity and suitable free tier.
Firebase Realtime Database → A real-time NoSQL database handling user queuing and synchronization before matching them.
Flask → A Python web framework used for the recommender system API. I separated the recommender system from the backend since Python is better suited to making a recommender system, and integrating Python programs into a JavaScript environment (my backend) would have been unnecessarily complex.
Cloud Run → Google Cloud's serverless platform hosting the frontend, backend, and recommender system API, eliminating infrastructure management concerns.
WebRTC → An open-source technology enabling peer-to-peer video calls and chat functionality.
Twilio Network Traversal Service → Provides reliable STUN/TURN servers for WebRTC connections across different networks and NATs.

Tools

Figma → The design tool used for app interfaces.
Notion → Project management and progress tracking software.

Architecture

And here is the architecture of the Chalo system:

Chalo Architecture

Features

To understand why certain features like user preferences are needed, let's look at how the Chalo system works with diagram bellow.

Chalo user flow

Authentication

User Preferences

Random Video Call, Chat, and Topic Suggestion

Demo

Here is my application demo video for bachelor's degree thesis (delivered in bahasa). You can try it by your self at beta.chalo.fun