Local-only and local-first apps

Welcome to this local-only app project 👋

You may be wondering: what is a local-only app? Why would you bother to build one?

A local-only app is a full-featured app that works entirely on the user's device. It stores all the data on the client by embedding a database in the browser.

This architecture brings many advantages:

  • No need to worry about server-side code, as the app is entirely client-side. You can come back to thinking only about the client (SPA)
  • Since the data is stored locally, read and write operations are fast and efficient
  • No need to manage an integration with an external API
  • No need to worry about security, as the data is stored locally
  • No need to worry about scaling your backend infrastructure
  • Faster and more efficient development experience

In this course, we will explore the architecture of a local-only app and how it works.

Local-only calories tracker

The project is a calories tracker app. These are the main features:

  • Create a mean plan with total daily calories and proteins/carbs/fats ratio
  • Create foods with all the nutritional information
  • Log the foods you eat daily by selecting foods from the list
  • Insert, update, and delete foods, servings and plans

Screenshot of the app showing your daily meal plan and the servings added for each meal.
Screenshot of the app showing your daily meal plan and the servings added for each meal.

The project code is open source on Github:

Open source code

Local-only and local-first

Building a local-only app is usually the first step before going full local-first.

In fact, a local-first app starts with offline-first. It must work entirely on the user's device even when there is no internet connection. It must be fast and secure, allowing full control and independence from the server.

These are the main features of a local-only app.

Moving to a local-first app is usually the next step. It requires implementing a syncing layer that synchronizes the data between multiple clients.