Last year a client wanted to develop an app that focuses on getting soon-to-be mothers vaccinated for whooping cough (which would also protect their baby when it is born). It was an interesting and educational process that encompassed most steps of a user-centred design approach and in my opinion very suitable for a case study. It's a challenging case since vaccination can be an opinionated topic. I will discuss the approach, the challenges I faced (and tried to solve) and show some mockups and designs as the final product.

Stage 1: Empathize & Define

The client wanted to help and support pregnant women by offering…


Recently a new client asked to redesign an old application that was built around 2010. They want to rebuild the application with modern technology and, before they started developing, asked me to look at the current UX/UI. The budget and time were limited, so I focused on the quick-wins. The application helps doctors to appoint hospitals rooms/beds to patients. The doctor can make an event for a room that will ‘host’ a patient for a certain date. Below is the old agenda-view with example-data of such events.

Image for post
Image for post
The old system with dummy data

The main functionalities of the current system for this screen are:

  • Switching between…


In my last story, I described how to implement an authentication system with Sapper and Firebase Auth on the client-side. An alternative way is to use server-side sessions with the help of Firebase Admin and the Firebase REST API. Before I show you some code, a little background story about the idea behind this authentication flow.

0. Overview & explanation

Developing an authentication system with Firebase can be done in two ways: handling the session client-side or make it use your own session-based back-end. Some advantages of using Back-End only are:

  • No front-end bloat (saving precious KB's…)
  • Secure (when done right). The user won't…


Image for post
Image for post

While it's great to work with Firebase and Sapper separately, joining these two can be a bit of a hassle. It took me a few days to figure out how to implement an authentication system with Firebase and Sapper which met the following criteria:

  • No flash of content (due to redirects or page protections).
  • Protected routes are still available when an authenticated user refreshes the page.
  • SSR (server-side rendering) still works when the firebase token expires and refreshes.

This tutorial will be barebone and quick since I myself don't like long fancy tutorials. So strap in and learn with me.

Step 0: Sapper installation

Marek van der Hoeven

UI designer & developer #javascript #design #sapper. Follow me at https://twitter.com/marekhoeven

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