Tech stacks

Example apps

Each tech stack comes with example apps to showcase the capabilities and help you learn

Purpose

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

That's why each tech stack comes with two example apps: a free simple app to give you a good overview of the tech stack, and a paid advanced app — a more advanced version of the simple app exploring even more capabilities, patterns and practices.

Opinionated, consistent and coherent patterns are used to showcase how you would use the various technologies and services (in the curated 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, so they can exist right next to the code and be updated and versioned together. 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 the /docs folder of each example app's code repository we've documented the architecture, design decisions, data models, patterns, 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, although we focus more on showcasing and learning the tech stack than the product itself, and on making strong technical decisions whilst weighing up the pros and cons.

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

What are the example apps?

To provide a consistent and predictable learning experience, we are planning to build the same example apps across all tech stacks. This will allow you to compare and contrast the different tech stacks and see how they solve the same problems.

All apps are built from the base template for that tech stack (allowing you to see how the base template can be extended and customized to build a real-world app).

The two example apps are:

  1. A simple logbook app with a basic UI, data model and persistence into a database, with real-time updates.
  2. An advanced logbook app that takes the same product concept and re-imagines it into an advanced feature-rich app covering more tech stack capabilities and patterns.

High level specs

Common functionality from the base template

The following is provided by the base template and is common to both 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 advanced example app

An advanced logbook app — keep multiple logbooks of rich daily entries. An advanced feature-rich app covering more tech stack capabilities and patterns.

  • You can have multiple logbooks, each with a title, short description and tags.
    • You can view your list of logbooks, both in a sidebar and on a dedicated index page.
    • You add, edit, reorder and delete them as you want.
    • You can add and remove tags on them.
    • Tags are remembered and can be reused across your logbooks.
    • You can filter logbooks by multiple tags.
    • You can view an individual logbook.
  • A logbook contains daily log entries — i.e. only one entry per calendar day.
    • You can browse log entries by date only, using "back" and "forward" buttons.
    • You can jump to the entry for a particular date.
    • Each entry can contain any number of widgets of different types (more on this below).
    • You can add, edit, reorder and delete widgets.
  • Widget types:
    • A note, with title and text, with basic markdown support (including lists and links).
    • A checklist, with plain text items that can be checked off.
    • A photo, with a title.
  • You can make a logbook public to view by anyone with the shareable link.
  • The layout should be optimized for mobile-first and scale well to different screen sizes.