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 Vue + Vuex, 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 Vuex 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, Vue, and Vuex, 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. 

Vue

Vue (pronounced /vjuː/, like view) is described as a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable.

Vuex

Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.

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

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