## Inspiration

Most international students have been through the same 14-day quarantine period before: Getting off the plane after a 10+ hour flight, riding on a bus to a random hotel in the city, and then having to stay in the same room for 14 days with no physical contact with the outside world. This is quite a challenge to people's mental health, which is why our team had built a web application where people can communicate with one another whilst obtaining care during quarantine.
___
## Function of Application
The main purpose of the web application is to create and develop connections during the 14-day period, hence the name **CoronaConnect**. In our application, the main connections we are concerned with are the interactions between the different customers and the relations between the staff and the customers, which is why there will be 2 different paths for logging in for different users.

For our **first connection (Customer to Customer)**, we want the customers to be able to feel a sense of communication while undergoing quarantine. Staying in one room is quite boring for one day, so dragging that period of time to 2 weeks would be tormenting. Thus, our app plans to bring people who are quarantining in the same hotel together through different functions including a message board or a chatting group. In addition to being able to fill their time during the 14-day period, the customers might be able to develop strong friendships such that they might plan to meet one another after the quarantine period.

For our **second connection (Customer to Staff)**, we hope for the customers to feel a sense of safety and care while undergoing quarantine. Therefore, through the application, customers will also have direct contact with the staff, in which they could ask for special needs or ways to improve their living quality. On the other hand, the staff will be able to use the app manage data, the transfer of data, the management of the distribution of staff and materials, as well as monitor the well-being of those in quarantine. Through our app, the customers will feel a greater sense of care while the staff will be able to better monitor the conditions within the hotel.
___
## How It's Built
Our web application was designed separately, through the front-end and the back-end, and finally pieced together such that the application would function.

Front-End
- The main structures and design of front-end are constructed with `Vue`. We separately designed the user dashboard, login page, and communication page, etc.

Back-End
- `Node.js` is used for back-end functionalities and database front-end communication. User login and communication is a large part of the project so we focused on handling user registration and login.

Database
- Furthermore, since the application would need to store data for both the customers and the staff, such as room number or location of the hotel, we connected `Node.js` code with `MongoDB` using `mongoose` as a database to store the data.
___
## How to Install/Run
1. Download the Zip file from https://github.com/zhou010706/corona
2. Unzip the folder
3. Set the console directory to ~/corona-main/vueclient
4. If running for the first time, run `npm install` to install dependencies
5. Run `npm run dev`
6. The console should display `Your Application is running here: http://localhost:8080`. Copy that link to a browser and the application will run.

___
## Challenges
- Workflow & Collaboration
- As we are all new to the hackathon, collaborating together from different parts of the country was a challenge.
- Technical Challenges
- Back-end user authentication: The login and registration sytem is key to our web application, so working out a complete system containing cookies, web caches, and redirects was challenging. However, we were able to get help from our mentor and gain a better understanding on user information storage with `node.js` and `mongoDB`.
- Back-end to front-end connection: Connecting front-end html files with back-end js files was also a challenge. We therefore experimented with `express`, `ejs`, and `jade` to solve this problem.
___
## What We Learned & Accomplishments
In addition to learning the languages and tools necessary for the project, we also learned:
- The basic structure of a web application and the necessary components of a dynamic website
- Frameworks such as `Node.js`, `Express`, and `Vue`
- Database basics, connection, and usage, specifically MongoDB

Despite being new to the event, we still collaborated quite well and managed to develop a project we were proud of. Furthermore, most of us are new to back-end and front-end development, so learning new languages and techniques was quite an accomplishment. Based on our experience on this hackathon, we are much more experienced to thrive in other hackathons in the future.

___
## So What's Next for CoronaConnect?
While CoronaConnect is a great start, there are many other functions that could be implemented which weren't included due to the brevity of the competition. For example, our current application'd chat function is limited to one-to-one communication. However, with more time, we could perhaps create a **chat room** such that more people in the same hotel could connect with one another. Furthermore, a **recommendation system** can also be created in order for the customers to have something to do every day during quarantine. Our app **aims to develop connections whilst receiving care during quarantine**, so there are many functions that can be implemented.