Use the App here - It's Live :)

Inspiration

This application integrates virtual students into the physical space of the classroom, in order to cultivate a more cohesive class community during COVID-19. Instead of letting questions go unanswered, due to the professor not seeing the students’ chats on zoom, this application can be utilized on the smart hub (or other devices) in classrooms to allow students questions to be seen and answered in real-time. By ensuring that no aggie’s voice and questions go unheard, this application is the first step in creating equitable education for all during this difficult time.

What it does

HowdyWave is a Progressive Web Application built to assist students who are learning virtually. With this application students are able to flag down their teachers and feel as if they have a physical presence, as well as assist teachers

How I built it

I used vue, vuetify, websockets, a custom server built from scratch, heroku, and Github Pages to build this application.

Vue and Vuetify handles the data collection and UI presentation.

Data flows in this application like so! Client(Host) <-> Server <->Multiple Clients

The client pings the server to create a room, which then multiple clients can join from the homepage or enter in the room itself!

Messages are then relayed through the server between all of the client, host or regular ones, and the client takes care of the UI!

Custom workflows with Heroku and Github Pages allowed us to easily push the application online.

Challenges I ran into

Websockets. What the heck is a websocket? A websocket is a basic p2p connection in which you can quickly send information. Because websockets are meant for server and client messages and is not really built for client to client handling, I had to figure out a way to "broadcast messages" and to also "filter" the messages out so that the messages would only be dropped into the right rooms. To easily route the messages, instead of the server doing the heavy lifting and routing the messages to the respective client, I coded logic in the client to securely route the messages to it self! With a hashmap (it's the solution for everything tbh) I devised a way to broadcast with Web Sockets, and was able to accomplish what I needed.

Accomplishments that I'm proud of

Learning, understanding, and building an application using WebSockets in one day!

Building a server from scratch, no boilerplate, modules or exterior code! Purely built with node! This made it much more efficient.

What I learned

Technology can be used to connect people, and will continue to connect people. Humans are able to connect to many things, and HowdyWave makes it really easy to feel like you have a physical representation in class. Covid-19 can make people feel very isolated but technology can really bridge this gap and present a sense of community

Websockets is a pretty cool technology and is pretty powerful. The ability to instantly create a connection with anyone is really useful and can have a lot of applications.

What's next for HowdyWave

Maybe some professors could find it useful for engaging their classes! We'd love to see how they could use it!

-Edit, changed video as original computer was unable to screen record, but found computer with capability.

Built With

Share this project:

Updates