Logo

dev-resources.site

for different kinds of informations.

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

Published at
12/30/2020
Categories
dohackathon
react
design
illustration
Author
kriswep
Author
7 person written this
kriswep
open
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.

Feedback?

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!

illustration Article's
30 articles in total
Favicon
Streamlining Your Design Workflow: Essential Tools and Techniques for 2024
Favicon
THE DIFFERENT BETWEEN LIBRARY AND FRAMEWORK AND NOT USING BOTH WITH REAL LIFE  ILLUSTRATIONS
Favicon
Mastering the Art of Design: A Dive into Fundamental Principles
Favicon
🎁 Collection of free illustrations for OpenGraph images
Favicon
Ilustrador o profissional dos desenhos
Favicon
Brand Illustration System and Its Impact on Business Identity
Favicon
Illustration Trends to Dominate Over the Web at 2022
Favicon
Adventure Camping Night Illustration
Favicon
Recomendações de sites para baixar ilustrações
Favicon
Design in minutes.
Favicon
Little Koala
Favicon
Garfield bored face using css and html
Favicon
Best resources for #developers
Favicon
FREE 3D ILLUSTRATION LIBRARIES
Favicon
Nice illustrations for websites
Favicon
Covtact: It's about first impressions [DO-Hackathon]
Favicon
17 - Turning static into fantastic with Erica Jacobs
Favicon
Drawing a Giraffe with CSS
Favicon
Illustrated Notes on Advanced JavaScript Fundamentals
Favicon
Children's Book Illustrator Portfolio
Favicon
Illustrating a Book for Young Adults
Favicon
Big Heads - Easily generate characters for your projects
Favicon
One Place to look for sites offering Free Illustration Resources
Favicon
Create a moving BOT illustration using CSS
Favicon
Award-Winning UI UX Design Company
Favicon
5 Reasons to Choose Mobile App Development Company in California
Favicon
A Fresh Serving of JavaScript ES2019
Favicon
CSS Face
Favicon
Git Github Gitflow
Favicon
How to create pure CSS illustrations and animate them - Part 1

Featured ones: