Codegram

Home Page
Student Lobby View
Tutor Lobby View
Code View
Project About Page
Project Contact Page

Inspiration

As college students who rely on our abilities to code, we are well aware of how difficult the learning curve can be. Nothing is quite as useful as having a one-on-one conversation with an expert, and therefore we hoped to enable just that.

What it does

We have curated an online webpage that is capable of matching students in need of programming assistance with experts in the related field. They share an editor with webcam, audio, and language functionality to enhance the virtual tutoring experience.

How we built it

The website is built using Next.js. The web editor uses the monaco-editor library which is the same library used by VS Code. Also, we use an Express Node.js server to manage WebSocket connections. Finally, we use WebRTC for real-time peer-to-peer video and audio streaming. Due to WebRTC's architecture, we use the WebSocket connection to the server to manage the WebRTC handshake.

Challenges we ran into

One of the biggest challenges we ran into was combining the WebRTC, WebSockets, and monaco library to provide the editor experience. WebRTC requires non-trivial handshaking code with at least 8 messages sent between each peer to create p2p video/audio.

Accomplishments that we're proud of

As a team, we are proud of our ability to combine several complex components into a single functioning website. There were many aspects of our software that required intricate understanding to perform in an acceptable manner, and it felt like quite the feat to make all such aspects interact seamlessly. Establishing the first p2p connection with complete editor/video/audio capabilities was a huge moment for the whole team.

What we learned

The contributors to Codegram had an opportunity to gain useful experience using new frameworks, APIs, and other technologies implemented into the project. Figuring out how to combine these tools into a working webpage provided practice that will serve as groundwork for project building in our individual careers.

What's next for Codegram

We hope to expand our outreach by implementing more languages into our built-in editor. This will allow many more students to receive aid in an environment that reacts and supports their language of choice. Additionally, we hope to utilize a sophisticated algorithm to allow both tutor and student to alter code in the editor simultaneously.