I spend a few days last week, and the weekend, to start my little project up again for an app that you can use with updown.io. If you haven’t heard of it, it’s a website monitoring tool which is, hands down, one of the best tools out there. It’s simple, doesn’t cost you an arm and a leg and gives you enough customisation to really monitor your websites and services with ease.

The project stalled because I just had too much client work, and when you freelance you just have to do those things! However, I’m slowly going back to my zen place of a good mix of client projects and free time just for my own stuff. Nope, this is not my “secret project”.

Saying all that I set up a completely vanilla project last Wednesday. Blank slate, start again, throw away the old. I pretty much used most things I learned from Gluon and took the best bits (the foundation) and got cracking.

The updown.io API is really great and simple, with enough good data. So it was super easy to just get started. For login purpose you’ll have to use the API key that you can find in your account. There is both a full access key and a read-only key.

Whilst Status can work with read-only keys, it will be much better with full-access. Status will lock certain sections of the app depending on which key you use.

It was actually quite fun to code so far, here is the login screen:

It’s got my standard login form that I used on Gluon. However, I actually re-wrote it all. Just kept the styles.

It’ll show you some useful messages when typing in a read-only key, or if your key is wrong. On “Login” the app will make a call to the updown API and try and fetch the checks you have on your account. If there are any problems, it will let you know straight away.

The login flow is pretty fast and your checks will be waiting for you.

Yesterday I spent some time to style the cells, they’re very much updown inspired. It’s a great interface!

It’s quite basic with the right information in front of you. I may add the option to allow you to view the graphs also, although I’ll certainly implement that on the details screen. Note that I’m hiding a few names in the screenshots.

Of note, you can see there are 4 websites that are down/throwing an error. That’s a dedicated section just for those. Your normal Checks screen will also show you any down sites:

You can see a good mix here of errors, disabled and normal sites, including errors that are relevant.

If your site is served via HTTPS, the scheme will be correctly colour coded to tell you if the SSL cert is valid or not. Again, if you’re used to updown, that works in a similar way.

The “Down” screen looks like this when there are errors:

Easy enough and quick to reach. Once you’re all up and running again the header will be green and a small message is shown to say it’s all up and running.

The app also works on Android, here is screenshot of the “Check” screen:

I'm pretty happy with the results so far and it certainly has been fun doing something a bit different. Change of scenery is nice.

I’ll be spending the rest of the week on the details view and perhaps allow you to add/edit checks also (as a stretch goal).

There is also a small API to write for it to allow push notifications for any errors. Updown provide webhooks and Adrien, the creator, kindly added an endpoint to allow you to add web hooks via the API. Nice!

Anyway, so far I’m pretty happy with the result and can’t wait to work on it a bit more this week.