Sleek and simple, yet information-rich and largely customizable-by-the-customer PWA for a new vet clinic in Vienna.

Since the day joining team expressFlow during a stormy night onboard an 18th century galleon fighting one of the seven legendary creatures of the ocean all while trying to save the duke's princess' life (but that's a story for another day), I've had the pleasure to design, develop and distribute a wide range of applications, both cloud and native.

The most challenging and rewarding projects were those where the team was responsible for creating the customer's application as well as branding, e.g. logo, colors, typography, design language - you name it.

Realizing Tierarztzentrum am Seepark's project was one of those.

Building on years of expierence with creating various applications in a variety of domains, we know how an app or website should look and behave to feel natural and intuitive to the user.

The team created many different logo, color and typography variations and combinations. After about two to three weeks, the branding and website layout were finalized, kicking off the actual implementation process.

The released product treats the CMS as an integral part of the overall site by avoiding directly written text in most cases and instead loading content dynamically from the backend. This enables the customer a very detailed control over what to display when, both for text and media such as images and video.

Next.js & React are used to deliver the frontend as well as backend. Sanity.io is used to author the CMS.

Modern PWA for tierarztzentrumamseepark.at

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.

Server-side rendered PWA for Samsung's premium partner for medical equipment trading, Lysis GmbH.

As a regular reader of our fine selection of blog posts and project behind-the-scenes, you know what's about to come: we want to challenge ourselves everyday and with every project, this one was no different.

The team was tasked to migrate an existing static website to the latest and greatest stack web has to offer. To facilitate the customer's vast collection of product data, a CMS had to be created, which was fast on the frontend and easy to use for curators.

Next.js offers a great foundation for building state-of-the-art web apps. We set up a CMS solution with Sanity.io with richt and easy to extend data schemas.

The frontend got a fresh new paint, reflecting the modern and clean brand Lysis embodies, yet respecting the company's origin and design heritage. One mayor part in the UX remaster was the addition of a responsive layout, enabling mobile-optimized views not possible with the original site.

To best deliver the large collection of product data, we developed a completely new UI and navigation structure, which helps visitors of the site discover what they're looking for.

The final product is SSR (server site rendered) and delievers great performance on evevery device. Thanks to offline-usage, the PWA can even be called with limited capabilites when no connection to the web is available.

Lysis - modern medical trading

Lysis

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

State-of-the-art Website for one of Vienna's best gynecologists.

Tierarztzentrum am Seepark

⏱ tl;dr

🏹 The Challenge

🎯 The Solution

⚙️ Stack