README.md

CRUD application with local store

Author: Thomas Laforge

Information

Communicating and having a global/local state in sync with your backend is the heart of any application. You will need to master those following best practises to build strong and reliable Angular Application.

Statement

In this exercice, you have a small CRUD application, which get a list of TODOS, update and delete some todo.

Currently we have a working exemple but filled with lots of bad practices.

Step 1: refactor with best practices

What you will need to do:

• Avoid any as a type. Using Interface to leverage Typescript type system prevent errors
• Use a separate service for all your http calls and use a BehaviourSubject for your todoList
• Use AsyncPipe to suscribe to your todo list. (Let you handle subscription, unsuscription and refresh of the page when data has changed), avoir manual subscribe when it's not needed
• Don't mutate data

// Avoid this
this.todos[todoUpdated.id - 1] = todoUpdated;

// Prefer something like this, but need to be improved because we still want the same order
this.todos = [...this.todos.filter((t) => t.id !== todoUpdated.id), todoUpdated];

• Use ChangeDectection.OnPush

Step 2: Improve

• Add a Delete button: Doc of fake API
• Handle errors correctly. (Globaly)
• Add a Global loading indicator. You can use MatProgressSpinnerModule

Step 3: Maintainability!! add some test

• Add 2/3 tests

Step 4: Awesomeness!!! master your state.

• Use the component store of ngrx as a local state of your component. (or any other 3rd Party lib)
• Have a localize Loading/Error indicator, e.g. only on the Todo being processed and disable all buttons of the processed Todo. (Hint: you will need to create an ItemComponent)

Submitting your work

1. Fork the project
2. clone it
3. npm ci
4. nx serve crud
5. ...work On it
6. Commit your work
7. Submit a PR with a title beginning with Answer:3 that I will review and other dev can review.

You can ask any question on