Stayhome.com

Inspiration

Social distancing is a very difficult and frustrating thing. We wanted to build something that will emotionally help each other who are under social distancing.

What it does

We have approached this issue by using a board. All people can leave their name, message, and nation that they live in. It will also show the number of people who have posted the message which will show that you are not alone. In addition, the board will be updated live and if someone posts some message during your visit, it will show that online.

How we built it

For the backend of the product, we made a REST API using SpringBoot and connected the API to MongoDB. The MongoDB is on MongoDB Atlas and the REST API resides on heroku currently. The frontend of the product was implemented using Angular 9. The web app is on the Github Pages.

When a user accesses the web app, the client (Angular app) and the server (Spring Boot API) establish a WebSocket connection. WebSocket protocol allows two-way communication between the server and the client, allowing multiple users to view and comment on the message board at the same time.

The MongoDB stores the most recent 20 messages on the message board and the number of messages posted on the board per nationality. When a new post is added, the server sends out the most recent 20 messages as well as the current number of posts per nationality to the clients so that the message board is always up-to-date.

Challenges we ran into

The hardest challenge we ran into was implementing the WebSocket on both server and client sides and make them communicate. We went through different tutorials, faced many dependency errors, and spent a significant time on it. However, we were able to figure it out at end, and because of that, we were able to finish the product.

Accomplishments that we are proud of

We are proud of finishing the full stack project in a relatively short period of time. With a simple yet efficient UI and a well structured backend, we believe our product was a success.

What I learned

Most of the things were new to us: the idea of WebSocket communications, the connection of Spring Boot API to MongoDB, the deployment of the API onto heroku, and the creation of frontend app using Angular.