DEV Community

Cover image for Covtact: It's about first impressions [DO-Hackathon]

Posted on


Covtact: It's about first impressions [DO-Hackathon]

Project recap

During the DigitalOcean Hackathon 👨‍💻 I want to build an app which allows you to log with whom you had contact. This is so you can inform people if need be and stop further COVID-19 spreading.

There is already a working version, hosted on DigitalOcean’s App platform, available: Covtact.

Working on the first empression: Empty state with illustrations

After taking it kind of slow during the christmas days, I'm now back on this side project. One thing which needed improving was the 'empty state'. After first setting the encryption password, users obviously couldn't have logged any contacts yet, so there wasn't a lot to show. Users were pretty much greeted with an blank screen. This needed to change. Since there is not much data to show, I decided to add a nice illustration and some copy to tell the user what's going on.

I browsed undraw for a nice illustration. By the way, undraw is awesome! I found one wich just the right vibes, a women standing alone in front of a window and looking in the night. Fitting for the time and this app! After importing it in my React Application, it was straightforward to use. Loving the React ecosystem...

Covtacts' Empty screen, telling users nothing is logged yet, and encouraging them to do so

Next, I want to tackle translation for this app, stay tuned.


Again, try it out, log your contacts if you had any and help stop this pandemic. [Hint: It might become extra important during the holidays, please stay responsible in your actions]. 🙏

And tell me what you think about this project down in the comments, or let‘s connect on twitter!

Top comments (0)