Table 1. Heroes App on StackBlitz
App

https://heroes-314.stackblitz.io
Source

https://stackblitz.com/edit/heroes-314
Table 2. NodeJS backend exported from API Express
Building a Production Ready Node.js JSON API

https://thinkster.io/tutorials/node-json-api
RealWorld example apps

https://github.com/gothinkster/realworld

Steps

  1. Make changes to the application: https://angular.io/tutorial/toh-pt0#make-changes-to-the-application

  2. Create the heroes component: https://angular.io/tutorial/toh-pt1#create-the-heroes-component

  3. Show the HeroesComponent view: https://angular.io/tutorial/toh-pt1#show-the-heroescomponent-view

  4. Create a Hero interface: https://angular.io/tutorial/toh-pt1#create-a-hero-interface

  5. Show the hero object: https://angular.io/tutorial/toh-pt1#show-the-hero-object

  6. Format with the UppercasePipe: https://angular.io/tutorial/toh-pt1#format-with-the-uppercasepipe

  7. Edit the hero: https://angular.io/tutorial/toh-pt1#edit-the-hero

  8. Create mock heroes: https://angular.io/tutorial/toh-pt2#create-mock-heroes

  9. Displaying heroes: https://angular.io/tutorial/toh-pt2#displaying-heroes

  10. Master/Detail: https://angular.io/tutorial/toh-pt2#masterdetail

  11. Make the HeroDetailComponent: https://angular.io/tutorial/toh-pt3#make-the-herodetailcomponent

  12. Show the HeroDetailComponent: https://angular.io/tutorial/toh-pt3#show-the-herodetailcomponent

  13. Create the HeroService: https://angular.io/tutorial/toh-pt4#create-the-heroservice

  14. Provide the HeroService: https://angular.io/tutorial/toh-pt4#provide-the-heroservice

  15. Update HeroesComponent: https://angular.io/tutorial/toh-pt4#update-heroescomponent

  16. Observable data: https://angular.io/tutorial/toh-pt4#observable-data

  17. Show messages: https://angular.io/tutorial/toh-pt4#show-messages

  18. Add additional messages to hero service: https://angular.io/tutorial/toh-pt4#add-additional-messages-to-hero-service

  19. Add the AppRoutingModule: https://angular.io/tutorial/toh-pt5#add-the-approutingmodule

  20. Add RouterOutlet: https://angular.io/tutorial/toh-pt5#add-routeroutlet

  21. Add a navigation link (routerLink): https://angular.io/tutorial/toh-pt5#add-a-navigation-link-routerlink

  22. Add a dashboard view: https://angular.io/tutorial/toh-pt5#add-a-dashboard-view

  23. Navigating to hero details: https://angular.io/tutorial/toh-pt5#navigating-to-hero-details

  24. Routable HeroDetailComponent: https://angular.io/tutorial/toh-pt5#routable-herodetailcomponent

  25. Enable HTTP services: https://angular.io/tutorial/toh-pt6#enable-http-services

  26. Simulate a data server: https://angular.io/tutorial/toh-pt6#simulate-a-data-server

  27. Heroes and HTTP: https://angular.io/tutorial/toh-pt6#heroes-and-http

  28. Update heroes: https://angular.io/tutorial/toh-pt6#update-heroes

  29. Add a new hero: https://angular.io/tutorial/toh-pt6#add-a-new-hero

  30. Delete a hero: https://angular.io/tutorial/toh-pt6#delete-a-hero

  31. Search by name: https://angular.io/tutorial/toh-pt6#search-by-name