The Architecture

Before we dive into the coding, I want to give you some sense of the architectural decisions we will be making for this application. We have spent a lot of time in the previous modules discussing theory around project structure, smart/dumb components, reactivity, and more. We will see how these concepts are applied as we build the application, but let’s get a high level sense of the architecture.

The application will be broken up into two main parts:

• Viewing all checklists
• Interacting with individual checklists

These features will be represented by the two routed/smart components in our application:

• home (for viewing all checklists)
• checklist

We will be reusing the home feature that already exists in our default project, but we will be adding checklist later. Each of these features will contain most of the code related to their functionality within their own folder, using the folder structure we discussed before:

• feature (omitted in this case because we have just one smart component per feature)
• data-access
• ui
• utils

For example, our checklist feature will contain the following:

• data-access: checklist-item.service.ts
• ui: checklist-item-header and checklist-item-list (dumb components)

There will also be some shared functionality that we will store in a shared folder:

• data-access: checklist.service and storage.service
• interfaces: checklist-item and checklist
• ui: form-modal and modal (a generic form and modal dumb component used by both features)

That should help give some context, now let’s jump into it!