Offline-First Apps with Angular, Ionic, PouchDB and CouchDB

Kick off an Ionic Angular todo app, launch a local server, and build a dynamic list using ion-list and ion-item with an input and add button to push todos.

demonstrates two-way binding with ngModel in Angular to clear and manage input for a todo app, and introduces offline persistence with pouchdb and couchdb for local storage and sync.

Introduce Julie's app for waiters, illustrating offline-first architecture with pouchdb for frontend storage and sync to remote couchdb, handling offline as normal and conflicts during sync.

Install and configure CouchDB for offline-first apps, create databases and documents, and design table data as separate documents to simplify syncing and conflict handling.

Set up PouchDB and CouchDB integration in an Angular Ionic app, create db and table services to fetch table documents via selectors, and enable live sync with reactive updates.

Enable four-way binding by subscribing to database changes to reflect back-end updates in real time. Implement a change handler with observable table changes to fetch updates and prevent memory leaks.

Propagate changes from PouchDB by implementing a change handler that updates a behavior subject with the change document, enabling automatic frontend state updates without manual fetches.

Add types to documents using a generic type, define a table doc model, and use a behavior subject to manage an array of table docs, ensuring IDs are strings.

Implement and view consumed products in an offline-first Angular Ionic app by creating a product consumed document and service, subscribing to changes, and displaying items by table ID.

Display available products for ordering by implementing a product view, handling undefined data, and fetching and subscribing to stock updates with Angular and Ionic in an offline-first setup.

Style the products view into a waiter-style interface by building a split-screen layout with scrollable Ionic cards, center-aligned labels, and category filtering.

Compare object type versus primitive in TypeScript by contrasting uppercase and lowercase string examples; use lowercase string primitives to avoid bugs and ensure true primitive types.

Persist consumed product changes by saving updates to PouchDB and CouchDB, using a save added action and a product consumed service in an offline-first Angular app.

Create a new product consumed document when a table has no existing record, using the table ID, a generated UID, and updating the products consumed array in CouchDB.

Enable an edit flow on the table details page by toggling edit mode, adding plus and minus controls to adjust consumed products, and saving or navigating to the pay page.

Implement a pay page that lists consumed products, lets users select items via chips, and tracks selected items with subscriptions and service logic for updating amounts and prices.

Develop the payment page to calculate split amounts per person and let users select the number of payers with a radio interface, while merging selected payments into the bill.

Create a build service to generate bills stored as documents in the database. Link table id and date time, and connect with the products consumed service to fetch builds.

Refactors the billing service to create a new bill for every user and skip updating existing bills, wiring a create bill call with paid products and table id validations.

Design and implement a state machine for every table using XState, tracking free, ordered, prepared, delivered, and dirty states, and update transitions in pouchdb to reflect real-time table status.

Implement styling and continue with state machine by fetching products consumed on the tables page, adding subscriptions and status-based icons and colors for prepared, ordered, and delivered states.

Implement state transitions for kitchen orders using a state machine, visualized with ion chips and buttons from ordered to prepared to delivered, with ability to go back and PouchDB persistence.

Improve the waiter workflow by enabling delivered status updates from the table details view and sorting products by delivered state to keep kitchen and orders synchronized.

Track and reveal pending changes in the waiter view before persisting to the database by implementing a pending changes array, change handlers, and warning color highlighting.