Build Test Report Dashboard using MERN stack 
Tags: javascript, react, mongodb, dashboard
Published: 2022-01-04 16:35:34

A test report dashboard is an organized summary of results. It is created and used to help stakeholders (product managers, analysts, testing teams, and developers) understand product quality and decide whether a product, feature or defect resolution is on track for release.

The idea is to build a Dashboard that quickly encapsulates test results from browser UI tests, windows UI tests, API tests, performance tests, etc., performed by a particular build.

I used **MongoDB** because its flexible schema makes it easy to evolve and store data. **React** and **Express.js** for building the web application and API. 

So, the different testing frameworks would make the REST API call with the test results in JSON format to our application as soon as the test execution is completed. 

Our App which will be running on a server would store this data and display it to all the stakeholders in real-time.

#### Let's get started !!

You can clone my code repository for GitHub for your reference : [Link](https://github.com/akshayca/Dashboard) 

<u>**Step 1**</u>

_Prerequisite:_
You need Docker installed on your machine. 

You need `mongo` and `mongo-express`. So, create a *docker-compose.yml* file, add the below content. 
```
version: '3'
services:
  mongodb:
    image: mongo
    ports:
     - 27017:27017
    environment:
     - MONGO_INITDB_ROOT_USERNAME=admin
     - MONGO_INITDB_ROOT_PASSWORD=password
    volumes:
     - mongo-data:/data/db
  mongo-express:
    image: mongo-express
    ports:
     - 8081:8081
    environment:
     - ME_CONFIG_MONGODB_ADMINUSERNAME=admin
     - ME_CONFIG_MONGODB_ADMINPASSWORD=password
     - ME_CONFIG_MONGODB_SERVER=mongodb
volumes:
  mongo-data:
    driver: local
```
Run the Docker compose command -
```
$ docker-compose -f docker-compose.yml up 
```
You should be able to access it on localhost port- 8081.
Go ahead and create the database and name it `DashboardApp`
![description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sc3qxw5kmugewqqf09k4.png)
 
<u>**Step 2**</u>

_Prerequisite:_
You need Node installed on your machine. 

Create the React application by running this command
`npx create-react-app <app-name>`
Now navigate into the App and create the *backend* folder. 
Inside this folder, we will create the backend 
`npm init -y`. 
So, that it connects to the MongoDB then we will come back and write the React later. 

We will install these dependencies for our backend.
`npm install express cors mongoose dotenv`

Create the *server.js* file to connect to the database and the *.env* file to store the environment variables.

Now you can start the server and the console should look something like this - 
![description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/287ceql4wu4wxczswjrj.png)

<u>**Step 3**</u>

Now let's create the database schema. Create a new directory called `models`. 
Add all the different schemas you want to create in the `model.js` files.
Once this is done, we need to add the API endpoints routes to perform the **CRUD** operations.
Inside the backend folder, create another folder called routes and the CRUD operations code in it.

You can test the server by making an API call. 

![description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7u3om38olwkr21zfk0sf.png)

![description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q2e2f0ehun2wra1hvta8.png)
  
<u>**Step 4**</u>
 
Now it's time to build the front end using React.
You also npm install `axios`, `bootstrap`, `react-bootstrap`, `react-icons`, `react-router-dom:5.0.0` and `react-scripts:4.0.3`.

You need to edit the default template provided by React in `index.html`, `index.js`, and in `App.js` files

You use components to tell what we want to see on the screen.
So, create a folder called _components_ inside the _src_ folder.
Create the components files or projects as per your project needs.

Once, this is done you can start the Dashboard by running the `npm start` command. 
The App should start running at localhost port- 3000. 

Added some more data into the database and the Dashboard UI should look something like this.

![description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y8yekfnv9rjnvtnt866a.png)
 
![description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yeo3tzs5xbn7ehdazis8.png)
 
<u>**Step 5**</u>

Now, let's Dockerize our Dashboard application. So, it will be easy to start our app or run on only server easily.

We need to create a Dockerfile for the server and the client. The Dockerfile essentially contains the build instructions to build the image.

And it using the docker build command 

``` 
$ docker build -t <image-name> .
```

To run our entire application together, i.e run all containers parallelly, we need to configure the docker-compose file.
So, I will be editing the existing docker-compose file.

To start the entire application services we need to run the following command: 

```
$ docker-compose up
```

Note: You need to update the .env file in the backend since we are running the services within the docker container.
i.e `MONGO_URI=mongodb://mongodb:27017/DashboardApp`

You can access the application at localhost port- 3000.

![description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nyu8vhz80f2debiflh7l.png)
 
Well, that's it!

You can run this Dashboard App on your machine by following these steps

Clone the repo

```
$ git clone https://github.com/akshayca/Dashboard.git
$ cd Dashboard
```

Start the app

Go to the project directory and run

```bash
$ docker-compose up --build
```

The app will start running at `localhost:3000`

Let me know if you need any help :)

Here are the links which you might find useful:

[Learn the MERN Stack](https://youtu.be/7CqJlxBYj-M)
[Dockerizing a MERN Stack Web Application](https://medium.com/mozilla-club-bbsr/dockerizing-a-mern-stack-web-application-ebf78babf136)


Thank you!