JavaScript · Advanced level

Advanced level · Module 6: JavaScript Capstone Project · Lesson 3 of 5

Building the Offline Front End

Build the TypeScript front end with offline storage, the store and views, and accessible forms.

In this lesson you will

  • Implement the front end with typed state and offline storage
  • Build accessible visit forms and lists

Key concepts

IndexedDB storagetyped storeaccessible formsrouting

The lesson

Store visits in IndexedDB as soon as they are saved, marked pending. The app must work fully with the network off.

Use the store, views and router from the architecture module, typed in strict TypeScript. Forms validate input accessibly and lists render safely from data.

Test the front end with unit tests for logic and DOM tests for the main screens.

Step by step

  1. Implement offline storage for visits.
  2. Build the visit form with validation.
  3. Build the visit list with sync states.
  4. Write logic and DOM tests.

Practice activity

Complete milestone 3: the offline front end.

Expected result: Visits can be recorded and listed offline, type checking passes and tests pass.

Check your understanding

  1. When should a visit be written to IndexedDB?

    Show answer

    Immediately when the user saves it, before any sync attempt.

  2. What state does a newly saved visit have?

    Show answer

    Pending.

Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.