State-of-the-art website for one of Vienna's best gynecologists, built as a SSR (server side rendered) and React-powered Progressive Web App.

gesundheitderfrau.at was an already hosted, stable and fast Website built with Wordpress. The site had served duty reliably for the past years, but its design and structure got outdated and required a fresh new paint.

Our client, Prof. Dr. Armin Witt, had invested a significant amount of time and effort during the past years in building up a vast and rich collection of FAQs, tackling a wide range of his customers' everyday questions to detailed technical ones. All data had to be moved over to a new CMS.

Thanks to very good SEO work done, this meant that the then current site was very well listed in Google Search. Extra care would be necessary to ensure that all indices were migrated as well.

We took special care in preparing the implemenation both in regards of porting the SEO listing and migrating the large FAQs away from Wordpress to a new, independent CMS.

After a series of discussions where the new UI/UX was presented and iterated upon, everything was put in place to kick-off the implementation. Thanks to a short kept feedback loop, the fresh PWA (Progressive Web App) grew fast and in best accordance with Dr. Witt.

Some weeks of work later, the 2.0 version of gesundheitderfrau.at was ready for prime time. Thanks to Next.js, we were able to correctly migrate  everything SEO and CMS, making the creation of new blog post and FAQs easy and enjoyable.

We're using Next.js with the SSR (server-side rendered) configuration. As with most of our frontend projects, the React-framework is called for duty to handle everything UI.

Sanity.io is used as the CMS of choice, working very well with Next.js together to deliever fast, responsive and rich content (in fact, this very article you're reading is delivered by Sanity.io).

And because we're using Next.js, our backend completely uses Node.js as runtime.

To enable reliable delivery even in cases of a weak web connection, GdF supports offline usage in a limited manner. 

Gesundheitderfrau.at PWA

Cross-platform app for Windows and macOS that enables a modern, fast and encrypted app for doctors managing their offices.

Managing your office swiftly and efficiently is hard. Doing that while using a fully encrypted database with realtime sync is even harder. Packaging it all with a modern, robust and efficient UX would just be a dream come true.

Designing an application that will be used by doctors to manage their office is quite a hard task: patients's data has to be reliably encrypted, yet query performance should be next to lightspeed. We analyzed the field of databases intensively and tested a wide range of available solutions.

As an additional constraint, the database had to be usable in a Node.js-environment, as the final product would use the Electron framework to enable a cross-platform, React-powered app  that would allow fast iteration and as-is reusability of the client code.

The DB that checked all the boxes was Realm: an encrypted database with very fast queries (especially for complex compound ones) and a realtime sync via a hosted platform, also provided by Realm.

And we're only getting started: as every designer knows, understanding the context your work has to live in is one of the most important aspects during the creation process. It's just a waste of everyone's time, money and effort if your product doesn't fullfill a user's needs 100 %.

We therefore worked in close collaboration with Prof. Dr. Armin Witt, a highly skilled and respected gynaecologist who's also teaching at Vienna's MedUni (medical university). It's thanks to this great and very productive teamwork that we were able to build a medical application for managing a doctor's office with a real user's insight from start to finish.

To ensure the UX behaves realibly and serves the user 100 %, the team built upon the guidelines of Material Design, an open source design system that is trusted and used by many applications. 

After a development time of about 1.5 years, medoboard 1.0 got released. We've created a solution that enables management of a doctor's office as fast, easy and securely as possible, all while providing a great user expierence.

Electron as the cross-platform framework to use a React-driven client in a Node.js environment. Realm DB as the database with a ground-truth-instance in the cloud and realtime sync.

medoboard - manage your office

Manage the whole doctor's office, incl. taxation.

medoboard

PWA to add, update and delete items for a warehouse. The web app supports offline use-cases and can show thousands of products fast and reliable. Based on Firestore as the database, the frontend uses a reactive update-architecture.

What if one of Eastern Austria's largest traders of medical equipment asked you to create a completely new application to manage his company's whole warehouse, incl. processing sales with region-based taxation and automatic invoice as well as delivery note creation? As a modern, progressive web app using the latest in realtime synced database technolgy? Would you say no? Of course not!

First things first, we summoned the mighty gods of the cloud and asked them in typical, professional fashion at a full moon midnight gathering what technolgy we best should use. Firebase, they answered, and Firebase it was!

Switching back to serious mode ©, we took a look at what backend architecture we should implement. It was clear from the get-go to develop a PWA (progressive web app), driven by React for the DOM-manipulations, to enable the best performance modern web has to offer.

To build a reliable backend, we chose the Firebase-SDK: it offers every feature required for this project (fast & scalable NoSQL DB, auth, storage for files, hosting & analytics) and is really well build UI-wise. By using Firestore, we got a synced DB in realtime as well. 

After an initial definition of requirements, the service was being develop over a time of about two months. After first test runs, the RMT frontend and backend were deployed for production and used during the day-to-day tasks managing a warehouse.

In the months following, feedback from staff was implemented to further optimize certain UI-elements and navigation flows as well as refining the lazy list implementation for managing the warehouse's products.

React was used for rendering a PWA. As always we used Typescript as the programming language. Using the Firebase SDK allowed us to quickly bootstrap common backend features - we're building on the shoulders of giants, and Google has done an excellent job with Firebase.

RMT warehouse management

Personal warehouse management for one of Eastern Austria's largest medical equipment traders.

The mission was to deliver a simple solution for the problem:


How can I optimize my personal cloud storage - for free?

So simple - so generic. Enter the world of crypto in the browser.
Spoiler: It's complicated!

 but we wanted to create a seamless experience for the user and lower the hurdles to test our app. And what's easier to access than a slick web app (of course a Progressive Web App).

We choose a rather popular stack (mostly inspired by the great 

 - which is currently undergoing a redesign despite of technical issues, but more on this later).

Wait, what? Yes, you read correct: We decided to erase the backend. Because 

Ok so let's take a closer look what (almost) nothing on the backend means.

Of course there is a server that hosts the website (consisting of JavaScript - transpiled from TypeScript, CSS, assets - like images, etc.).
In the case of 

. There are a ton of pros and cons, we decided very pragmatically: We already had some experience on Firebase, so lets use Firebase Hosting because it fits our (very basic) needs to serve JavaScript files and other assets fast.

: To optimize performance we are currently working on next-gen image formats

Browser HTTP(S) GETs JavaScript, CSS and assets

Progressive Web App is rendered in the browser

As soon as the PWA is ready in the browser - on the average this happens X ms after surfing to 

 to upload the encrypted data chunks to different cloud storage services.

But this is basically all functionality on the backend: 

All other functionality happens right in the PWA - on the client side, to be highly secure and absolutely performant!

Stay tuned how we implemented to frontend or drop us a line if you have any questions or feedback!

Gesundheit der Frau

⏱ tl;dr

🏹 The Challenge

🎯 The Solution

⚙️ Stack