floor7

Inspiration

Since we have a lot of experience with full-stack development, we decided to experiment a lot more with different technologies than what we're used to instead of just making a website. We then explored a lot of different topics that we were interested in, such as video conferencing, computer graphics, and machine learning, but we settled on the idea of "proximity chat." To come up with an outlet for this technology, however, we bounced around a lot of different ideas.

As seniors, we all had one thing in common: the job search. Job fairs and career fairs are nice, but virtual career are sometimes much more convenient - it's easier to both employers and potential employees to connect without needing to travel. However, there are significant drawbacks compared to an in-person career fair.

What it does

Floor7 is a virtual career fair platform which allows university students to engage with recruiters and other attendees in real time, through a video-game like platform. Our goal is to transform how current virtual career fairs are held, making them more fun, interactive, and accessible for everyone involved.

Over the weekend, we managed to create an robust backend:

Extensive real-time multiplayer simulation.
Proximity-based, real-time video calling using WebRTC

Our frontend includes these following features:

Initially created immersive 2D maps with Pixi.js, then pivoting to create our own maps from scratch
Inbuilt collision detection, allowing for players to hop into one-on-one calls and triggering events like popups for different booths
An interactive “Alice in Wonderland” introduction to simulate entering the career fair!
A customizable user experience with avatar customization, a Club-Penguin-like social feature with chats
An interactive UI, allowing for users to walk up to booths to view information

How we built it

We'd like to acknowledge that other than TypeScript and Next.js, which we have extensive experience developing full-stack apps in, we were learning entirely new technologies. Thus we could not have done it without the help from the following technologies:

Gather Clone a major source of inspiration that demonstrated the idea’s technical feasibility. It was a good frame of reference for how to set up some of the socket logic.
Thank you OpenAI for ChatGPT+
Pixi We don’t use any of this anymore, but it was something we did develop on and took inspiration from when developing our own 2D environment and collision detection
Socket.io - this allowed us to have an immersive real-time multiplayer experience
WebRTC - While it's still in extremely early stages, WebRTC formed the core of our live video streaming experience. By synergizing it with socket.io, we're able to create
Next.js - we used its framework and routing, though we don’t have many pages

Initially, we talked at large about the features that we wanted before splitting up into groups. Because we were unfamiliar with technologies, we actually split up into groups that focused on figuring out the tech stack (Loc, Yihui, Won), while others (Fa, Johnny, Clarence) broke down the features down and into lower, schema and data-structure level implementations.

Challenges we ran into

Our unfamiliarity with our tech stack led to a big crisis when trying synchronize the initial websocket multiplayer backend with our work on the Pixi.js frontend. Our data structures were meant to sync up, but unfortunately we failed to realize that there were other factors in the frontend code that we didn't keep track of in our backend, which forced us to create our own implementation of an interactive map from scratch.

Another huge challenge was setting up WebRTC to communicate video chats between users. Hooking this up with socket.io took a lot of trial and error and testing, as the chats and invites were not sending correctly for a long time.

An organizational challenge was the fact that our designs were so tightly coupled it was hard to parallelize working on different tasks - there were many features we could not implement while other features were being worked on, primarily the websocket logic.