JavaScript · Intermediate level

Intermediate level · Module 6: Intermediate JavaScript Project · Lesson 1 of 3

Designing the Budget App

Plan the modules, state, data flow and screens of the budget app before coding.

In this lesson you will

  • Design the module structure and the app's state
  • Plan the user flows and offline behaviour

Key concepts

module responsibilitiesapplication statedata flowoffline plan

The lesson

Decide the modules: api.js for fetching and caching rates, store.js for budget entries and persistence, calc.js for conversions and totals, ui.js for rendering and events, and main.js to connect them.

Describe the application state in one object — entries, rates, rates date, view state — and make the UI render from it. Any change updates the state and triggers a render.

Write down the offline behaviour before coding: which data is cached, how its age is shown and what the user can still do without a connection.

Step by step

  1. List the modules and their exports.
  2. Write the shape of the state object.
  3. Sketch the screens and user flows.
  4. Write the offline behaviour rules.

Practice activity

Submit the design document and a module skeleton that runs without errors.

Expected result: An approved design and a skeleton served from a local server with no console errors.

Check your understanding

  1. Why keep the application state in one object?

    Show answer

    So the UI can be rendered from one source of truth and changes are easy to follow.

  2. Which module should know about fetch?

    Show answer

    Only the API module.

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.