In this tutorial, we are going to build a news website called  FNN ( Fake News Network). In order to achieve this, we will build a small expressjs API and that would serve as our fake news data.  On FNN, we will have different categories of news items like Technology, Entertainment, Sports, etc.  

 To increase the complexity of our app in order to demonstrate various uses cases for  Angular and NGRX, we will also have weather data and foreign exchange data on the home page.  A screenshot of our final application is shown below. 

We will then connect the API with NGRX to manage the state on the frontend. This tutorial assumes familiarity with Node.js and basic knowledge of at least one modern front-end framework.  

 If you are not familiar with Express, Angular, and NGRX, we briefly describe these technologies below and link them to their documentation.  Please read through the documentation for these tools before proceeding. 

Express

Express is described as a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. Express is the most popular Node.js application framework and several other web frameworks and products have been built on top of it. 

Angular 

Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps.

NGRX Store

NGRX Store is RxJS powered global state management for Angular applications, inspired by Redux. The store is a controlled state container designed to help write performant, consistent applications on top of Angular.  

NOTE: 

NGRX is a very useful tool but it is complex and for many applications, it is enough to use angular's inbuilt services and inject it into your components. In the first part of this tutorial, we will use this approach. At the end of the tutorial, we will show how to manage your application state using NGRX as your application grows. 

The final repository for the frontend lives here: https://github.com/bretuobay/fnn-angular-base

The backend for this tutorial can be found here:  https://github.com/bretuobay/fnn-base-api