Example apps and patterns

Why? And what?

We strongly believe the best way to showcase and learn a tech stack is to see it in action, with actual code, examples, patterns, and design decisions driven by real-world needs and scenarios.

That's why each tech stack comes with two example apps:

1. A simple example app to give you a thorough overview, focused on learning the core of the tech stack by showing you a working app end-to-end, with the design decisions and patterns that drive it.
2. A dedicated patterns example app showcasing even more in-depth capabilities and patterns to bring out the best in that tech stack.

These are built on top of the base template for that tech stack, allowing you to see how the base template can be extended and customized to build real-world features.

Throughout, we explain in detail how you would utilize the various technologies and services of that tech stack to build, test, deploy and manage a progressive web app (PWA).

How do I learn from these example apps?

All the learning content is within the /docs folder in the code repository of each example app. They exist right next to the code and are updated and versioned together, with links to the code where relevant.

In this /docs folder we've documented patterns, architecture decisions, design decisions, data models, tech stack capabilities, learnings, and more. We've described in detail how various app features are put together, and the tradeoffs made. These are representative of real-world products and scenarios, although we focus more on showcasing and learning the tech stack than the product design itself, and on making strong technical decisions whilst weighing up the pros and cons.

Beyond learning the tech stack, these app features and patterns can be used as a starting point for your own apps, as a reference to learn and copy-paste from. Though we encourage only copy-pasting once you understand how and why it works.

High level specs

To provide a consistent and valuable learning experience, we aim to:

• Build the same type of simple example app for each tech stack — a simple logbook app. This allows you to compare and contrast the different tech stacks and see how to build a working app end-to-end in each, all whilst learning specific approaches with their own tradeoffs and benefits.
• Build a dedicated patterns example app that brings out the particular strengths and capabilities of each tech stack. So these patterns will differ from tech stack to tech stack, but with some overlap where it makes sense, allowing for some comparison between tech stacks.

Common functionality from the base template

The following is provided by the base template and is common to all example apps:

• You can view information about the app (i.e. static home and about pages).
• You can log in via a secure link sent to your email (aka passwordless auth).
• You can log out.
• You can install the app to your device as a progressive web app (PWA) (on devices that support this).
  • The app notifies you when there's a new version available (when it's open and only in-app) and allows you to reload for the latest version.

The simple example app

A simple logbook app — keep a single time-ordered log of text entries. With a basic UI, data model and persistence into a database, with real-time updates.

• A log entry is a simple text note, with a timestamp representing the date/time the entry was created.
  • This timestamp is not changeable and always reflects the timestamp the entry was created.
• Log entries can have a category, chosen from a fixed set of categories.
  • The available categories can be extended by an admin without requiring code changes.
• You can add, edit and delete log entries.
• You can add as many log entries as you want, not restricted by date/time.
  • E.g. you can have multiple entries per day.
• You view log entries in a paginated list, ordered by timestamp (descending).
• You can filter log entries by category.
• All entries are private to you and are not accessible by anyone else.
• When there are no entries in the logbook, an onboarding message is shown to encourage you to add one.
• The layout should be optimized for mobile-first but also work well on larger screens.

The patterns example app

As mentioned, each patterns example app will focus on bringing out the particular strengths and capabilities of that tech stack, with some commonalities where it makes sense.

Subscribe to our newsletter to get updates on progress.