The simple example apps

Why?

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 a simple example app that gives 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. Built on top of the base template.

To provide a consistent and valuable learning experience, each is a simple logbook app, following the same set of specs (below). This allows you to compare and contrast the different tech stacks and see how to build a working Progressive Web App (PWA) end-to-end in each, all whilst learning specific approaches with their own tradeoffs and benefits.

How do I learn from these?

Each comes with extensive learning content, within the /docs folder in the code repository for the app. They exist right next to the code and are updated and versioned together, with links to the code where relevant.

Tip: You can use GitHub’s UI to navigate and read the docs, with useful tools like the tree view sidebar, table of contents sidebar and repository search.

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.

Common functionality from the base template

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

• 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.

App specs

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.

Must cover the following functionality:

• 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.