Virtual Campus

Students have felt socially isolated during COVID, which affected their mental health and education. We provide a virtual solution to help rebuild their communities and to bring back their motivation.

Comment

Inspiration

The goal of our program is to bring the joy of campus life interactions back to students through audio and video. We have been isolated socially and we aren’t able to hang out and hold study together freely to learn from each other. We are unable to feel a genuine connection with other students in our virtual classes because unlike in-person classes, we don’t have any breaks to chat and to catch up with our classmates.

What it does

Our program is to imitate real-life interactions through audio and video. You can create your own avatar and you are able to move around the map and explore different areas. If you meet a person, the closer you get to them, the more you can hear their audio and if you are close enough, you are able to see their video. You will be able to have live conversations and explore the map together. You can also meet new people and make new friends. You can create study groups, host games, and hang out virtually to create a community.

How we built it

We built the program models using GDevelop to create the maps and drew our own pixel art using Pixel Studio. We designed the website model using Figma to create what our website would be like. We built this app with the help of frontend javascript libraries like Phaser, simple-peer, and Webpack, and sockets (the real MVP). We also used AWS services like EC2, Application ELB, Route 53, and ACM Certificate Manager.

Challenges we ran into

It was difficult to figure out how to use GDevelop for the first time to create an environment with different groupings and layers. The program was often laggy and slow in addition, the curser and the paste methods are not smooth and calibrated. And while I was comfortable with the AWS services I was using, I had no idea how to do frontend or backend javascript. It took me a long time to finally get myself into some position of comfortability with sockets, webpack, simple-peer, and Phaser. Simple-peer (ironically) was especially difficult for me to wrap my head around. The complication of using sockets and rendering things properly proved difficult at first, but the added overhead of also requiring an SSL cert termination to connect made the process of getting simple-peer to work a long one.

Accomplishments that we're proud of

We are proud to be able to utilize our own Pixel designs and also our accomplishments with GDevelop to help us utilize the map designs. In addition, I’m proud of all the things I learned in the process - specifically websockets, but also Phaser, webpack, and javascript in general. It was a big list of things we had to learn and we managed to make it happen with very little frontend experience. In the end, we managed to get an MVP that represents the kernel of our vision for a working product and it's inspiring enough that I'll surely be working on it the rest of this spring break.

What we learned

The number #1 thing we learned is tenacity. There was a moment when I thought I wouldn't get simple-peer working, and I felt on the verge of giving up on it and getting some rest. We kept going and worked out a solution that ended up working really well. In addition, we learned how to use GDevelop better and to create an environment for game development and interactions between characters/avatars.

What's next for Virtual Campus

We want to expand to schools and other campuses in order to get more students involved in our program to help them ease their social isolation and to help improve their educational goals/careers. Our mission is to be able to provide support where it is most needed and to give a solution to help students become more productive and focused through building a community virtually. We can also see this being helpful for people with disabilities that prevent them from meeting new people and they can still be a part of a diverse community.

Built With

Share this project:

Updates