Forem: C.B.W.

Covtact: Secure COVID-19 Contact Diary [DO Hackathon submission]

C.B.W. — Sat, 09 Jan 2021 21:35:44 +0000

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.

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.

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.

There is also a calendar date picker. Users can enter data for today, or for any other day if they missed something.

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 .

I implemented it responsively. Covtacts works well on any device factor, mobile, tablet or desktop!

Internationalization is also considered. For now, the default version is english, but I translated it to german (my mother language) as well.

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

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 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 and React Router, which are this apps core pillars 💕. I really love React and its' ecosystem.

Styled components for fine CSS-in-JS. 💅🏾

React Aria to make it more accessible.♿

React Date Picker and React Autosuggest which helped me to build easy to use inputs.💻

React-i18next to translate the app to german.🇩🇪

React-spring to sprinkle some animation in.🎨

Finally, I want to thank dev.to and Digital Ocean for running this hackathon!

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

C.B.W. — Wed, 30 Dec 2020 11:41:15 +0000

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...

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!

Covtact: Secure contact diary to slow down COVID-19 [DO-Hackathon]

C.B.W. — Fri, 25 Dec 2020 11:59:42 +0000

Project recap

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

Softlaunch

I'm pretty happy with the current state featurewise. I'm planning to improve the UI further, and hoping to add some interaction animations. So, just in time for christmas 🎄 I decided to softlaunch the project.

That means I encourage everybody (yes, you to 😉) to try Covtact and track with whom they met outside their closest ones.

Posting it here, on twitter and on hackernews, didn't yield that much of a response for now, but I saw some users in the analytics. (Yes, I turned on self hosted analytics, matomo, but no worries, that doesn't log any personal data nor the added contacts).

So please, if you want, I'd be very happy if you could share this project with others...

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!

Covtact: New name and design [DO-Hackathon]

C.B.W. — Wed, 23 Dec 2020 10:11:01 +0000

Project recap

As mentioned in the last post there is already a working Proof of Concept, hosted on DigitalOcean’s App platform, available: Covtact.

Naming

I decided to go with the singular name: Covtact. in case you didn't notice, it's a word combination on Covid and Contact...

Also, to give this project a proper home, I purchased a brand new domain: covtact.app. Feel free to share this around, this is where it will stay. (In case you get an error, the DNS might take a little while).

I added the domain to DigitalOcean and am using their DNS nameservers. It took some minute to become active, and after some more time all my clients updated their entries as well. Well, that's how it is, I guess.

And, drumroll 🥁, I implemented the new UI I hinted at in the last post! Tell me if you like it, there are some things to improve for sure...

Feedback?

There’s still work to be done, but the app is already useable. 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]. 🙏

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

Covtact: Contact diary with Style [Digital Ocean Hackathon]

C.B.W. — Tue, 22 Dec 2020 19:44:54 +0000

Project recap

As mentioned in the last post there is already a working Proof of Concept, hosted on DigitalOcean’s App platform, available: Covtact.

Creating an UI

I‘m not too satisified with the current design. Honestly, design is not my strongest skill. So for this I jumped in Figma to brainstorm some ideas.

I ended up with a two column layout, one side for adding new contacts and one for displaying them. I choose a greenish main color, which is said to represent nature, health and hope. That‘s what‘s needed, isn‘t it? 😃

Now on to coding this UI, so I can share it. Maybe I will redo it again in the future, but for now I want to move on with this project. 💅✨

Feedback?

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

Covtact: Autosuggest for contact diary [DO-Hackathon]

C.B.W. — Mon, 21 Dec 2020 18:56:03 +0000

Covtact: Secure and simple contact logging

As mentioned in the last post there is already a working Proof of Concept, hosted on DigitalOcean’s App platform, available: Covtact.

To make the process of adding new contacts as seamless as possible, I added an autosuggest feature to the name input. That should make adding recurring contacts a little bit faster. 🚀

Since I‘m building Covtact with React I decided to use React-Autosuggest. That worked out quite well. I managed to integrate it with Styled-Components, which I‘m using to style the rest of the app. 💅✨

Feedback?

There’s still work to be done, especially regarding the UI and the copy, but it’s already useable. 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]. 🙏

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

Fight the pandemic during DO-Hackathon

C.B.W. — Sun, 20 Dec 2020 14:12:37 +0000

I had this little idea for some months already: Building a secure contact tracking / diary app to help prevent the COVID-19 spreading.

After reading the Digital Ocean Hackathon announcement earlier this this month, I decided to sat down and execute on this project.

The idea is, you log with whom you had close contact. In case you get infected (and I hope you wont), you can warn your contacts, without forgetting one. Then they in turn can isolate and stop spreading the disease further. 🎉

Since security and data protection is very important, especially for health related apps, I decided to save the logged contacts on the users' devices. And I'm planning to go one step further:
Reading

Article No Longer Available

and tinkering around with Web Crypto I was eager to use that somewhere. 🔐

That means, the logged contacts will be stored encrypted locally on users device, not sent in the cloud, or analyzed anywhere else. It also means, I won't need much of Digital Oceans app platform resources, only static hosting and DNS. Luckily, that's also part of their platform, so we're golden.

Oh, and for the interested ones: There's already a working Proof of Concept available at covtact.app. Don't get scared by the WIP UI, set a Encryption password and log ahead! It's all working as of now.
🚀🔥👍

And for the even more interested ones:

kriswep / covtacts

Stop the COVID-19 spread by tracking your contacts.

For feedback, comment down here and/or connect with me on twitter.

Last Weeks' Top 5 Unseen articles

C.B.W. — Mon, 17 Feb 2020 21:18:19 +0000

dev.to is a great place to share your ideas, projects, content and start a good discussion. However, due to the large amont of published artices every day, some good articles get lost.

So here are the articles I enjoyed reading last week which didn't get a ton of reaction (probably becase nobody saw them). Maybe there is something interesting for you to read and start your week.

UI 🖼️

Everybody loves great UI, right? Lets' face it, getting time to optimze your UI can be a hard sell at a busy company. Vani Shivanand gives some tips to negotiate for UI optimization, focusing on performance improvements.

Negotiating For UI Optimization

Vani Shivanand ・ Feb 14 '20 ・ 2 min read

#javascript #beginners #webdev #css

IndieWeb 🕸️

IndieWeb is a movement focusing on making better and more connected experiences for publishing and consuming content. One part of that are webmontions, a way to inform content creators when and where their articles get discussed. Shawn swyx wang published a good piece on how to implement webmentions clientside using webmentions.io in Svelte.

Clientside Webmentions

swyx ・ Feb 12 '20 ・ 4 min read

#indieweb #svelte #webmentions

UX 🤕

You know these header bars which move away when scrolling down and appear when scrolling up? Waylon Walker shares his experiences doing that in a React app, using React Headroom. Spoiler: It seemed to have been an awesome experience.

Save screen real estate with react-headroom

Waylon Walker ・ Feb 11 '20 ・ 2 min read

#webdev #showdev #gatsby #todayilearned

Career boost 🏎️

There can be a misalignment between the wish to learn new technologies and the work you do at work. Ndy gives us his thoughts on the topic. One motivating point he makes is, that with the vast landscape in tech related jobs there's probably some need for everything you may be great at.

Experience is all about learning and opportunities

Ndy ・ Feb 15 '20 ・ 2 min read

#developer #jobsearch #softwareengineering #hiring

Work-Life balance 🌅

So you have the possibility to work from home? That's fantastic, but there may be some challenges to that. Nazanin Delam has a list with tips on how to be productive in a Work From Home setting.

How to be effective when Working from Home (WFH)

Naz Delam ・ Feb 12 '20 ・ 2 min read

#productivity #career

Did you find something you missed in that list? Have your own Unseen Articles, which are worth a read? Let me know in the comments!

Last Weeks' Top 5 Unseen Articles

C.B.W. — Mon, 10 Feb 2020 20:26:28 +0000

Day after day, people like you write fantastic articles here on dev.to. But, due to the sheersize of this platform, not every article gets the attention it may deserve. So, this is my attempt to highlight the best articles published last week, which haven't got a lot of reactions (yet).

What makes them the Best? 🤔 Well, I chose them, so they covered a topic I liked.

Shameless plug: Consider following me on twitter.

Carreer boosting 🚀

This one from Raúl Sánchez isn't really an article but rather a discussion. Nonetheless there are a lot of great insights in the comments there, check it out or add your own tips!

Advice for an introvert jr dev who wants to give talks at local meetups?

Raúl Sánchez ・ Feb 9 '20 ・ 1 min read

#discuss

Design 🎨

Clicking a button on an UI should do something, and it should give immediate feedback that something happened.
Brian Neville-O'Neill wrote a thorough explanation about designing a ripple effect for buttons. This article comes with a lot of explanations and an example. Worth the read.

Designing a ripple effect for UI feedback

Brian Neville-O'Neill ・ Feb 7 '20 ・ 12 min read

#featuredposts #ui #tutorial #javascript

GraphQL 📈

Hasura, a company building an really impressive open source GraphQL engine introduced their Paid Pro Plan. Surely an important step for them on the way to be an lucrative company. (The main offering is still Open source and free). The article details the new offer, including some video demos.

Introducing Hasura Pro

Hasura for Hasura ・ Feb 6 '20 ・ 4 min read

#enterprise #graphql #postgres #announcements

Wait is almost over ⏳

React Suspense is Reacts' long awaited new feature/paradigm. Jake Lumetta introduces us to the concepts and shows a lot of code examples while showing us how to build great user experiences with suspense.

Building Great User Experience with React Suspense

Jake Lumetta ・ Feb 6 '20 ・ 4 min read

Motivation 👏

Sometimes you need a little push.
James Wade makes some points why it can be a good idea to be bold. What he mostly means be that is go and do the things you think should be done.

Be bold

James Wade ・ Feb 7 '20 ・ 2 min read

#personal #people #philosophy

That's my pick. There were a lot of great articles last week, so I'd be happy if you could chime in and share your Unseen Articles in the comments.

Flexing your HTML footer to the screen bottom

C.B.W. — Tue, 04 Feb 2020 16:19:09 +0000

Howto make your footer stick to the bottom with flexbox

Having a footer at the bottom of your HTML page can be very useful. Traditionally, forcing the footer down there was a quite hard task if the page content didn't fill the whole browser height. But nowadays using flexbox and some auto-margin can save the day.

When designing a HTML page you often want to add a footer with some additional but secondary information. Logically, the footer should be at the very bottom of the page. One could just add the footer markup as the last piece in the document and call it a day. That'll work, mostly. But what happens when the page content doesn't fill the entire height of your users screen? Well, the footer be rendered directly after your content and hang somewhere in the middle of the screen. That's not what we wanted. Luckily, flexbox can save the day here, without relying on obsure hacks!

Want to see the code and end result right away? Here's a codesandox.

Let me walk you through that. We start with a minimal HTML setup, just to have something to work with.

<!DOCTYPE html>
<html>
  <head>
    <title>Sticky Footer</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./styles.css" />
  </head>

  <body>
    <section>
      <h1>🔥Hello Footer down there🔥</h1>
      <p>
        ⬇️This content does not fill a whole page height. The footer belongs
        down there. ⬇️
      </p>
    </section>
    <footer>🔥I'm the footer. My margin pushes me down.🔥</footer>
  </body>
</html>

All we have here is a short main section and a footer. This will create the undesired effect of having a floating footer in the middle of your screen. To make that footer sticky, we need some CSS.

Making the footer sticky

We'll use flexbox and margin to push the footer at the bottom of the screen.

Set the container to display: flex;. The container is the body in our example.
Change the containers' flex-direction: column. This lets the footer flow below the content.
Give the container full height with min-height: 100vh;. The container is now large enough, but the footer still floats somewhere in the middle.
Finally, give the footer enough margin with margin-top: auto;. That pushes the footer down to the bottom.

That's it, the footer will be at the pages' bottom, even with small content. Note that when the content gets larger than the users screen, the footer will flow normally at your pages bottom as well, no extra work there.

Here's the relevant CSS.

/* Use flex and set auto margin */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  margin-top: auto;
}

Thanks to webflow for the video inspiration to this article.

Hope this helps you to create your next HTML layout. Follow me on twitter or leave a comment.

^{First published as Flexing your HTML footer to the page bottom.}

Detailed Guide to creating your own Create React App template

C.B.W. — Mon, 13 Jan 2020 14:56:18 +0000

Detailed Guide to creating your own Create react App template

Tl,dr: Since December '19 Create React App (also known as CRA) allows you to write custom templates. That can help you to quickly create projects with your preferred stack. Templates can be published as npm modules and are used to create a new React project.

Motivation

CRA (Create React App) is a tool from Facebook helping you building modern React applications, without having to worry about configuring the dev environment. Up until recently, they created a small 'Hello World' like application to help getting you started. You then had to install and integrate most of the libraries you wanted to use. Think of adding a CSS-in-JS styling library, your State Management solution and the like.

Nowadays they added the possibility to write and use your own custom template. This allows you, to bootstrap your CRA project with exactly the stack you prefer and go from there. CRA templates can be used with npx create-react-app your-app --template your-published-template.

How can we write our own template? Take a look at the two official templates in their repo for inspiration: CRA template and CRA template typescript.

The official documentation is still kind of barebones, but will give you a good overview.

Keep reading, if you want a more detailed writeup, of how to create your custom Create React App template.

^{Start building your next React project. Photo by 贝莉儿 DANIST on Unsplash.}

What's needed

A custom Create React App template is a module on npm which has to use a certain folder structure:

your-app/
  README.md
  template.json
  package.json
  template/
    README.md
    gitignore
    public/
      index.html
    src/
      index.js

The template.json file contains the dependencies as well as potential new scripts for the created projects. The /template folder basically becomes the created application, it will be copied during the initialisation phase of Create React App.

Custom templates also have to follow a certain naming convention, they have to use the format cra-template-[your-custom-template]. This comes in the package.json. Quite long? Luckily, we can omit the cra-template prefix and just use the your-custom-template name in the CRA command, like in npx create-react-app your-app --template your-custom-template.

Did you note the missing dot before the template/gitignore file? This is on purpose, the dot will be added by CRA. They also switch all occurrences of npm run with yarn in your scripts and Readme, if you are using yarn. Good to know, right?

Also note that you can add more files and dependencies to your template project as you wish. Keep in mind, that everything in /template will be part of the created project, everything else not.

Create your new template

Alright, time to see how to write our own template.

To start writing a custom Create React App template I find it easiest to bootstrap it with CRA itself. So let's npx create-react-app cra-template-your-custom-template and CRA will do its' thing (substitute your-custom-template with however you want to name your project). The default template will be used.

Now the fun part begins. You can remove stuff you never use (like the rotating logo) and add all your preferred libs, as you would in a plain React app. Want a router? A CSS-in-JS lib? A state management tool? Animation? Something? Let's install whatever you want and import it in your application. My recommendation is to do that in the src folder. Doing that, you can test and run your app normally with npm run test and npm run start. The goal is to get your project to the point you would love to start your future React projects at.

As soon as you consider your project to be at a nice 'starting point', you have to make it a template. For that create the template.json file at your project root:

{
  "dependencies": {
    "styled-components": "^4.4.1"
  },
  "scripts": {
    "custom-start": "npm run start"
  }
}

Copy all dependencies you need from your package.json into the dependencies field, and all custom scripts into the scripts field. All the dependencies here will be installed on the bootstrapped projects. react, react-dom and react-scripts are CRAs' default dependencies, you don't have to include them. Right now, devDependencies are not supported. If you don't have any new dependencies or scripts you can omit the corresponding block. BMake sure you add at least an empty template.json file (with content {}).

Then, create the /template folder and copy your /src and /public folder into it, as well as the .gitignore (and remove the dot from gitignore in the template folder). You should also consider adding a /template/README.md, this will become the initial README of the created projects.

Lastly, we have to make some changes to our package.json file. At the very least, make sure that name starts with cra-template-, remove the private field and add "main": "template.json",. Without these, Create React Apps' template creation will fail. You may also consider adding more fields for a nice npm package, like author, repository, description etc.

Publishing to npm is a topic of its own. To keep the scope small: After registering at npm and authorising on the CLI, you could publish the project with npm publish --access public.

Wow, congratulations, you should now have created and published a Create React App custom template. Bootstrap a new React application with npx create-react-app your-app --template your-custom-template.

Enjoy.

Tips

Create React App can use a local template (on your filesystem). This is useful for development, or if you don't want to publish. Use npx create-react-app your-app --template file:. in your template root folder.

You can also use npm scopes to namespace your template. Then you have to prepend your package name with your scope @your-scope/cra-template-your-custom-template. You can still omit cra-template from the Create React App command like in npx create-react-app your-app --template @your-scope/your-custom-template.

Hope this helps you to create your own CRA template. Feel free to let me know about your templates or if you get stuck along the way. Tweet at me or leave a comment.

^{First published as Write your own Create React App template.}

Hasura GraphQL - First impressions

C.B.W. — Sun, 17 Nov 2019 13:44:44 +0000

Trying the realtime GraphQL API on Postgres from Hasura

Tl,dr: The GraphQL ecosystem is growing quickly, one of its' newer options to get your API going is Hasura. They provide a solid Getting Started experience, expose advanced data access and migration options via a nice UI and also have a great documentation.

GraphQL at its' core is a specification for data communication, most commonly used between clients and servers. Originally created and open sourced by Facebook, it quickly grow and got picked up by a lot of companies in all shapes and sizes. Nowadays there's a growing number of startups providing services in the GraphQL space. I've previously explored one of them, Prisma, and have written about their magic GraphQL tricks. Today let's take a look at another service in this space, called Hasura.

Hasura promises you a GraphQL API on existing and new Postgres databases, focusing on realtime features leveraging subscriptions. Hasura engines is strictly limited to Postgres, giving them the advantage to use these databases' features tightly in their engine. For example, instead of resolving each field separately, they transform the whole GraphQL query to a corresponding SQL statement. This helps to avoid unnecessary database request (ever heard of the n+1 problem?). The Hasura team described their architecture further some time ago.

Another key feature is Hasuras' console. This is not only a GUI to Postgres, it also lets you define what tables to expose in your GraphQL engine, add views, access permissions, event hooks and more.

All of this sounds promising to me, so I went ahead an gave Hasura a try.

^{Confetti for the GraphQL ecosystem. Photo by Pablo Heimplatz on Unsplash.}

Getting Started

Hasuras' documentation, which is actually very good, has two Getting Started options described. There is a One-Click option to deploy to Heroku, which hosts your database, as well as your Hasura GraphQL engine there. The other one is to start locally in a docker environment. These option also allows you to easily host your production environment on a lot of different providers. I tried the docker way, which went really smoothly and started in only a few minutes.
No matter what you choose, your first step should be to open the console. That is under http://localhost:8080/console (or under your Heroku URL if you used that), check the docs when in doubt. Take a look around, this is where Hasuras' superpowers shine. I really liked their UI to manage my data. You have an embedded GraphiQL view to explore your API, a data tab to manage your database and more.

The first thing I did was to add a table under the data tab. There you can enter a table name, some columns and a primary key, click Create, and voilà. You not only created a table on postgres like that, you also now have your first types in your GraphQL schema! Check the GraphiQL tab. There are queries, mutations and subscriptions generated according to your table fields. That's impressive and powersome.

From there I created a basic author - post datamodel with some foreign key relations, which can be exposed as relationships for your GraphQL schema. Really nice, if you ask me. By the way, you can check out my experiments on GitHub.

There's also an option to add a third party GraphQL schema (schema-stitching for the win) and another option for exposing events to external services. The latter has a lot of potential, as it allows you to integrate any serverless functions to events happening in your database, and more. Again, Hasuras' documentation is very helpful!

Getting ready for production

Playing around in the console, tweaking tables and relations is fun, but how would we bring our progress from a dev to a production environment? Is there some kind of continous integration?

Luckily, Hasura has an answer in the form of migrations. You can choose to let Hasura log all changes made to the database schema, as well as the Hasura metadata, by using their provided CLI. Using this will generate some yaml files, which you can use to recreate your local dev database in a staging and production environment. This made a really good impression on me. Bringing your data to prod, check!

Next thing one might wonder about is security. The base line of Hasuras' defense is setting an admin secret. This locks the access to your managemnt console down and also enables you to set authentication and access rules. The latter again is a great concept. You can set fine grained rules for every field in your GraphQl schema within an intuitive UI. Preventing access to certain data tables? To certain fields in any table? Only allow to view entries created by the current user? Check, check and check!

Sadly, there are some disadvantages here. Right noe there is no option to guard your GraphQL API against malicous queries integrated. Think deeply nested or expensive queries. But they are working on enabling some options there. Also adding helpful third party tools to your GraphQL server is not possible, at least not directly.

So, what more?

Using the Hasura engine gets you started with your next GraphQL API server quickly. Honestly, I was surprised how seamless and quick it was. But at first it felt quite, well strange, to give the API creation out of my hand. This is something you have to overcome. Granted, you have some options to shape the API via access rules and custom views. Still there are some tools from the wider GraphQL engine which cannot be used directly. Right now, I would consider adding a plain GraphQL gateway server in front of Hasuras engine and delegate query execution from there to Hasura. That would enable using tools for rate limiting, as well as adding monitoring solutions like Apollo engine or anything else you fancy.

Other than that, using Hasura has some great benefits. Their tight integration with Postgres enables performant access to your data. Oh and did I mention they are not only free to use, but also complety open source? Last but not least, their documentation and learning options are great and growing constantly. That should be an important point when evaluating a new tech stack.

I'm eager to try them out in some feature projects of mine!

This article was first published on my blog