Covtact: Secure COVID-19 Contact Diary [DO Hackathon submission]
Tags: dohackathon
Published: 2021-01-09 21:35:44

## What I built
Covtact is a contact diary, allowing you to log and remember your contacts to lower the spreading of COVID-19, and potentially other infection diseases afterwards. 😷


### Category Submission: 
**Program for the People**

### App Link
https://covtact.app

### Screenshots
The start screen, explaining the app and allowing users to enter a password for decryption.
![Covtacts start screen. It informs users, what Covtact is about and prominently asked them to enter a password to decrypt their data](https://dev-to-uploads.s3.amazonaws.com/i/cjzv5ujlrbc1eileys2u.png)
 
After a user opens the app for the first time and has no data logged, I greet them by showing a nice illustration, encouraging them to start using the app.
![If nothing was entered yet, Covtact greets the users with a nice illustration of a woman looking through a windo at the dark sky](https://dev-to-uploads.s3.amazonaws.com/i/gi5y99hacxucxfeoh8ca.png)

To lower friction, adding a contact can be done from every screen and with minimal required data. A typeahed namefield helps you to enter names of persons added before.
![The screen to add a new contact, the name field is about to be filled out](https://dev-to-uploads.s3.amazonaws.com/i/guye3utqkojtni9cklpm.png)

There is also a calendar date picker. Users can enter data for today, or for any other day if they missed something.
![The screen to add a new contact, with the calendar date picker opened](https://dev-to-uploads.s3.amazonaws.com/i/y7y1xaqegnt5kefxufk5.png)

After the users logged a contact, they are grouped by date. This makes it easy to grasp when you had contact with somebody, and in what timeframe. Clicking any of the card would open a detail screen with all contacts during that timeframe  .
![Added contacts are grouped by date](https://dev-to-uploads.s3.amazonaws.com/i/uc6gedzw7iwsriv69g97.png)

I implemented it responsively. Covtacts works well on any device factor, mobile, tablet or desktop!
![The contact adding screen in a mobile resolution](https://dev-to-uploads.s3.amazonaws.com/i/z838ge4bosai7qslw9h5.png)

Internationalization is also considered. For now, the default version is english, but I translated it to german (my mother language) as well.
![The home screen translated to German.](https://dev-to-uploads.s3.amazonaws.com/i/k9zujlxra4vw0io3pgld.png)
 
 
### Description
Covtact is a WebApp, which allows people to securely log with whom they had close contact during the day. People then can, in case they find themselves infected by COVID-19, warn each other and prevent further spreading.

Minimising contacts is one of the most powerful weapons against the coronavirus. When we meet somebody, we should at least be prepared to warn them afterwards, in case we got infected earlier. Covtact aims to help you with that.

It is different from other contact trackers, in that it does not automatically log who you met. Instead, it trusts you to do that responsibly and allows you to decide, if a contact was close.

Covtacts is also very secure. All data get saved on the users device and never is transferred anywhere else. It is also fully encrypted and password protected.

### Link to Source Code
https://github.com/kriswep/covtacts

### Permissive License
[MIT](https://github.com/kriswep/covtacts/blob/main/LICENSE)

## Background
COVID-19 is a terrible illness. I hope to help at least a little bit to slow it down. If Covtact only helps one person to warn their contacts and stop them form spreading COVID-19 further, building it was totally worth it.

I had this idea a little while back. Seeing the announcement of the DigitalOcean App Platform Hackathon motivated me to finally execute on this and finish the project. My personal goal was to have a working version before christmas, which I had!🚀

### How I built it 
Covtact is a Single Page App built using React. I'm very familiar with JavaScript and React, so that was a safe bet for me. I also decided to use TypeScript, to solidify my knowledge about that. I didn't use any 'proper' state management solution for this. Instead, I relied on useState and context for the main data store.

Security was very important for this project. I read an [article](https://dev.to/voraciousdev/a-practical-guide-to-the-web-cryptography-api-4o8n) about the web cryptography API, which I relied on. This article was my very first inspiration for this project. Awesome to know what the web is capable of.🌍

Being a SPA, covtact does basically only require static hosting. So I didn't need very much of all the services Digital Ocean App Platform offers. I'm using ther static hosting and DNS offering. That worked very well and was fast to start.

### Additional Resources/Info
As with most frontend porjects these days, I could benefit from a lot of open source work. Let me point out some of them.

Obviously [React](https://reactjs.org/) and [React Router](https://reactrouter.com/), which are this apps core pillars 💕. I really love React and its' ecosystem.

[Styled components](https://styled-components.com/) for fine CSS-in-JS. 💅🏾

[React Aria](https://react-spectrum.adobe.com/react-aria/index.html) to make it more accessible.♿

[React Date Picker](https://github.com/Hacker0x01/react-datepicker) and [React Autosuggest](https://github.com/moroshko/react-autosuggest) which helped me to build easy to use inputs.💻

[React-i18next](https://github.com/i18next/react-i18next) to translate the app to german.🇩🇪

[React-spring](https://www.react-spring.io/) to sprinkle some animation in.🎨

Finally, I want to thank [dev.to](https://dev.to/) and [Digital Ocean](https://www.digitalocean.com/) for running this hackathon!