In this article we are going to cover using Google Cloud’s IAP (Cloud Identity-Aware Proxy) to secure two apps; one is a UI (SPA) application e.g. Angular or React app, and the other is an API which the SPA interacts with using the REST paradigm.

Both are already deployed as services inside GCP’s app engine flexible environment.

NOTE: If you are deploying more than one application inside your GCP project then you must use a flex environment rather than standard.

In it’s simplest form, our architecture could be illustrated like this:


How to backup your Firestore data to cloud storage bucket using Cloud Function and Cloud Scheduler on Google Cloud Platform

In this article we are going to use four features of Google Cloud Platform (in four simple steps) to backup our Firestore database to a storage bucket.

The four steps are as follows:

  1. Create a storage bucket to hold your data using Cloud Storage
  2. Create a method to backup the data using Cloud Functions
  3. Create schedule to run backup using Cloud Scheduler
  4. Enable appropriate permissions in IAM

So, let’s begin…

Create a storage bucket to hold your data

First off, let’s log into GCP web console and browse to Storage, then Browser. Then click on Create Bucket button and use the below values.

  • Name — an unique name…


Taking a look at potential drawbacks of using Microfrontends and when it doesn’t make sense to adopt them.

Frontend development has become complex… a passing awareness of throwing together HTML, CSS and JavaScript is no longer enough to get you by in the world of modern web app development (React/Angular/Vue etc).

The concept of Microfrontends introduces a way of dissecting a huge monolith UI into smaller, more manageable chunks.

Think microservices for the frontend.

It’s no silver bullet though — in this brick-themed article I am going to look at when you shouldn’t consider Microfrontends for your project.

I have published lots of articles on Microfrontends as an architectural design pattern and discussed the many advantages over a…


React, Angular, Vue, Ember, Backbone, Stencil, Preact…. in fact there’s probably another one being released right now!

Like most things in life, a variety of choices informs a toxic culture of mine is better than yours and you’re wrong and I’m right.

Since technology advancements have got us in this mess, is there any chance it could get us out of it as well?

Enter Microfrontends…

Introduction to Microfrontends

Modern UI development regardless of your framework has became all about component composition: you adapt to a framework’s way of doing things by following their patterns and conventions to create components usually underpinned by some sort of data model usually in the form of a service or state object.

For example…


Plus support for Markdown!

Every developers nightmare is keeping documentation up to date, right? There’s never going to be a silver bullet to make that requirement go away, but there are some tools out there that make it a bit more enjoyable… Storybook being one of them.

Storybook is written in React but there is also decent support for Angular and Vue. In this article I am going to explore their support for Angular.

Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organised and efficient.


To the modern UI developer, your “framework of choice” is something deep-rooted within you, that somehow defines your identity and perhaps limits your ability to solve problems. As I’ve said before, wouldn’t it be better if everyone just got along?


If you’d like to build dashboards using drag and drop in Angular then look no further. In this post we will cover how to create a drag and drop dashboard builder project from scratch using Angular!

Don’t worry if you’ve never used Angular before, in fact this is a great place to start as we will cover most of the basics with solid working examples, and this will be much more interesting than another ToDo or Hello world!

What is the end goal?

I want to create a drag and drop dashboard builder enabling users to configure dashboard layouts then drag and drop components onto…


So it be said, that “web components are the future”…. but yes, we have heard these murmurings since 2011 when they were first introduced — and that (in terms of web development) is many moons ago!

What are web components?

Conceptually, “web” components isn’t a new thing — they create reusable components — which is what made frontend frameworks like Angular/React/Vue are so popular.

** Disclaimer: I know React is a library and not a framework, but for the purposes of this post I will refer to it as a framework **

In addition web components don’t offer anything deeper than the UI layer…


Drag and Drop in React!

There is a huge user demand out there for “drag and drop” type behaviour such as building websites (Wix) or interactive applications (Trello). There is no doubt that this type of interaction creates a really cool user experience. Couple this with some of the latest UI technologies and we can create some really nice software.

What is the end goal of this post?

I want to create a drag and drop layout builder giving users the ability to build layouts from a range of customisable UI components, with the end composition being a website or web app.

What tools will we be using?

  1. React
  2. ImmutableJS

Let’s take a moment to explain their roles in…

Chris Kitson

UI Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store