diff --git a/.github/workflows/linter.yml b/.github/workflows/linter.yml
index 1a394d3..634d4b8 100644
--- a/.github/workflows/linter.yml
+++ b/.github/workflows/linter.yml
@@ -22,4 +22,4 @@ jobs:
           VALIDATE_PYTHON_PYLINT: true
           VALIDATE_JAVASCRIPT_ES: true
           DEFAULT_BRANCH: master
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
\ No newline at end of file
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/docker-compose.yml b/docker-compose.yml
index f9e5aac..7eda272 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -56,6 +56,10 @@ services:
     volumes:
       - './visualization:/code'
       - '/code/node_modules'
+    environment:
+      - HOST=0.0.0.0
+      - PORT=8075
+         
     ports:
       - 8008:8075
     depends_on:
@@ -73,6 +77,8 @@ services:
       - 3001:3000
     environment:
       - CHOKIDAR_USEPOLLING=true
+      - REACT_APP_HOST=0.0.0.0
+      - REACT_APP_PORT=3000
     depends_on:
       - yaba_client
       - yaba_visualization
diff --git a/visualization/index.js b/visualization/index.js
index 853f227..cb89889 100644
--- a/visualization/index.js
+++ b/visualization/index.js
@@ -1,201 +1,227 @@
-const express = require('express')
-const app = express()
-const port = 8075
-const host= '0.0.0.0'
-const { getCultivarSites, getExperimentSites, getTreatmentSites, getGeoData, getUser } = require('./pg_joins')
-const { shapeParser }= require('./shape-parser')
-const multer=require('multer')
-const Papa=require('papaparse')
-const upload=multer()
-const decompress = require('decompress')
-const path= require('path')
+const express = require("express");
+const app = express();
+const port = process.env.PORT||8075;
+const host = process.env.HOST||'0.0.0.0';
+const {
+  getCultivarSites,
+  getExperimentSites,
+  getTreatmentSites,
+  getGeoData,
+  getUser,
+} = require("./pg_joins");
+const { shapeParser } = require("./shape-parser");
+const multer = require("multer");
+const Papa = require("papaparse");
+const upload = multer();
+const decompress = require("decompress");
+const path = require("path");
 
-app.use(express.static('dist'))
-app.use(express.json())
+app.use(express.static("dist"));
+app.use(express.json());
 app.use(function (req, res, next) {
-  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3001');
-  res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE,OPTIONS');
-  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Access-Control-Allow-Headers');
+  res.setHeader("Access-Control-Allow-Origin", "http://localhost:3001");
+  res.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,OPTIONS");
+  res.setHeader(
+    "Access-Control-Allow-Headers",
+    "Content-Type, Access-Control-Allow-Headers"
+  );
   next();
 });
 
-let upload1 = upload.fields(
-  [{ name: 'cultivars', maxCount: 1 },
-   { name: 'sites_cultivars', maxCount: 1 },
-   { name: 'sites', maxCount: 1 },
-   { name: 'shp_file', maxCount: 1 }
-  ]);
+let upload1 = upload.fields([
+  { name: "cultivars", maxCount: 1 },
+  { name: "sites_cultivars", maxCount: 1 },
+  { name: "sites", maxCount: 1 },
+  { name: "shp_file", maxCount: 1 },
+]);
 
-let upload2 = upload.fields(
-  [{ name: 'experiments', maxCount: 1 },
-   { name: 'experiments_sites', maxCount: 1 },
-   { name: 'sites', maxCount: 1 },
-   { name: 'shp_file', maxCount: 1 }
-  ]);
+let upload2 = upload.fields([
+  { name: "experiments", maxCount: 1 },
+  { name: "experiments_sites", maxCount: 1 },
+  { name: "sites", maxCount: 1 },
+  { name: "shp_file", maxCount: 1 },
+]);
 
-let upload3 = upload.fields(
-  [{ name: 'experiments', maxCount: 1 },
-   { name: 'treatments', maxCount: 1 },
-   { name: 'experiments_treatments', maxCount: 1 },
-   { name: 'experiments_sites', maxCount: 1 },
-   { name: 'sites', maxCount: 1 },
-   { name: 'shp_file', maxCount: 1 }
-  ]);
+let upload3 = upload.fields([
+  { name: "experiments", maxCount: 1 },
+  { name: "treatments", maxCount: 1 },
+  { name: "experiments_treatments", maxCount: 1 },
+  { name: "experiments_sites", maxCount: 1 },
+  { name: "sites", maxCount: 1 },
+  { name: "shp_file", maxCount: 1 },
+]);
 
-let shp_upload= upload.fields(
-  [{ name: 'shp_file', maxCount: 1 }]);
+let shp_upload = upload.fields([{ name: "shp_file", maxCount: 1 }]);
 
-let api_key= upload.fields(
-  [{ name: 'api_key', maxCount: 1 }]);
-  
-let parseCsv= (file)=>{
-  let buf= Buffer.from(file.buffer)
-  let txt= buf.toString();
-  let res= Papa.parse(txt).data.slice(1).map((item,idx)=>{
-    if (item.length> 1)
-      return item;
-    return null;
-  } );
-  if(res.includes(null))
-    res.pop()
-  return res
-}
+let api_key = upload.fields([{ name: "api_key", maxCount: 1 }]);
+
+let parseCsv = (file) => {
+  let buf = Buffer.from(file.buffer);
+  let txt = buf.toString();
+  let res = Papa.parse(txt)
+    .data.slice(1)
+    .map((item, idx) => {
+      if (item.length > 1) return item;
+      return null;
+    });
+  if (res.includes(null)) res.pop();
+  return res;
+};
 
 //sends plots for cultivars
-app.post('/getCultivarSites',upload1 ,async (req, res) => {
-  let cultivars= parseCsv(req.files['cultivars'][0])
-  let sites_cultivars= parseCsv(req.files['sites_cultivars'][0])
-  let sites= parseCsv(req.files['sites'][0])
-  let val=[];
-  let file= Buffer.from(req.files['shp_file'][0].buffer);
-  let geoJSON= await shapeParser(file);
-  let getval=(value)=>{ 
-    val.push(value.map((data)=>{
-      data.polygon= JSON.parse(data.polygon);
-      return data;
-    })) 
-  }
-  try{
-  await getCultivarSites(cultivars, sites_cultivars, sites, geoJSON.features).then((value)=> getval(value))
-  console.log(val)
-  res.status(200).send(val[0]);
-  }
-  catch(err){
-    res.status(400).send({"error": err.message});
+app.post("/getCultivarSites", upload1, async (req, res) => {
+  let cultivars = parseCsv(req.files["cultivars"][0]);
+  let sites_cultivars = parseCsv(req.files["sites_cultivars"][0]);
+  let sites = parseCsv(req.files["sites"][0]);
+  let val = [];
+  let file = Buffer.from(req.files["shp_file"][0].buffer);
+  let geoJSON = await shapeParser(file);
+  let getval = (value) => {
+    val.push(
+      value.map((data) => {
+        data.polygon = JSON.parse(data.polygon);
+        return data;
+      })
+    );
+  };
+  try {
+    await getCultivarSites(
+      cultivars,
+      sites_cultivars,
+      sites,
+      geoJSON.features
+    ).then((value) => getval(value));
+    console.log(val);
+    res.status(200).send(val[0]);
+  } catch (err) {
+    res.status(400).send({ error: err.message });
   }
-})
+});
 
 //sends plots for experiments
-app.post('/getExperimentSites', upload2, async (req, res) => {
-  let experiments= parseCsv(req.files['experiments'][0])
-  let experiments_sites= parseCsv(req.files['experiments_sites'][0])
-  let sites= parseCsv(req.files['sites'][0])
-  let file= Buffer.from(req.files['shp_file'][0].buffer);
-  let geoJSON= await shapeParser(file);
-  let username= req.body.username;
-  let val=[]
-  let getval=(value)=>{ 
-    val.push(value.map((data)=>{
-      data.polygon= JSON.parse(data.polygon);
-      return data;
-    }))
-  } 
-  try{
-    await getExperimentSites(username, experiments, experiments_sites, sites, geoJSON.features).then(value=> getval(value))
-    console.log(val)
+app.post("/getExperimentSites", upload2, async (req, res) => {
+  let experiments = parseCsv(req.files["experiments"][0]);
+  let experiments_sites = parseCsv(req.files["experiments_sites"][0]);
+  let sites = parseCsv(req.files["sites"][0]);
+  let file = Buffer.from(req.files["shp_file"][0].buffer);
+  let geoJSON = await shapeParser(file);
+  let username = req.body.username;
+  let val = [];
+  let getval = (value) => {
+    val.push(
+      value.map((data) => {
+        data.polygon = JSON.parse(data.polygon);
+        return data;
+      })
+    );
+  };
+  try {
+    await getExperimentSites(
+      username,
+      experiments,
+      experiments_sites,
+      sites,
+      geoJSON.features
+    ).then((value) => getval(value));
+    console.log(val);
     res.status(200).send(val[0]);
-    }
-    catch(err){
-      console.log(err)
-      res.status(400).send({"error": err.message});
-    }
-})
+  } catch (err) {
+    console.log(err);
+    res.status(400).send({ error: err.message });
+  }
+});
 
 //sends plots for treatments
-app.post('/getTreatmentSites', upload3, async(req, res) => {
-  let experiments= parseCsv(req.files['experiments'][0])
-  let treatments= parseCsv(req.files['treatments'][0])
-  let experiments_treatments= parseCsv(req.files['experiments_treatments'][0])
-  let experiments_sites= parseCsv(req.files['experiments_sites'][0])
-  let sites= parseCsv(req.files['sites'][0])
-  let file= Buffer.from(req.files['shp_file'][0].buffer);
-  let geoJSON= await shapeParser(file);
-  let username= req.body.username;
-  let val=[]
-  let getval=(value)=>{ 
-    val.push(value.map((data)=>{
-      data.polygon= JSON.parse(data.polygon);
-      return data;
-    })) 
-  }
-  try{
-    await getTreatmentSites(username, treatments, experiments_treatments, sites, experiments, experiments_sites, geoJSON.features).then(value=> getval(value))
-    console.log(val)
+app.post("/getTreatmentSites", upload3, async (req, res) => {
+  let experiments = parseCsv(req.files["experiments"][0]);
+  let treatments = parseCsv(req.files["treatments"][0]);
+  let experiments_treatments = parseCsv(req.files["experiments_treatments"][0]);
+  let experiments_sites = parseCsv(req.files["experiments_sites"][0]);
+  let sites = parseCsv(req.files["sites"][0]);
+  let file = Buffer.from(req.files["shp_file"][0].buffer);
+  let geoJSON = await shapeParser(file);
+  let username = req.body.username;
+  let val = [];
+  let getval = (value) => {
+    val.push(
+      value.map((data) => {
+        data.polygon = JSON.parse(data.polygon);
+        return data;
+      })
+    );
+  };
+  try {
+    await getTreatmentSites(
+      username,
+      treatments,
+      experiments_treatments,
+      sites,
+      experiments,
+      experiments_sites,
+      geoJSON.features
+    ).then((value) => getval(value));
+    console.log(val);
     res.status(200).send(val[0]);
-    }
-    catch(err){
-      console.log(err)
-      res.status(400).send({"error": err.message});
-    }
-})
+  } catch (err) {
+    console.log(err);
+    res.status(400).send({ error: err.message });
+  }
+});
 
 //sends the Username for the valid api key
-app.post('/getUser', api_key, async(req, res) => {
-  let apikey= req.body.apikey;
-  try{
-    let user= await getUser(apikey);
-    res.status(200).send({"user":user});
-  }
-  catch(err){
-    console.log(err)
-    res.status(400).send({"error": err.message});
+app.post("/getUser", api_key, async (req, res) => {
+  let apikey = req.body.apikey;
+  try {
+    let user = await getUser(apikey);
+    res.status(200).send({ user: user });
+  } catch (err) {
+    console.log(err);
+    res.status(400).send({ error: err.message });
   }
-})
+});
 
-//sends the GeoJSON data after parsing the shapefile 
-app.post('/getGeoJSON', shp_upload, async(req, res) => {
-  let file= Buffer.from(req.files['shp_file'][0].buffer);
-  let geoJSON= await shapeParser(file)
-  let geoData={"type":"FeatureCollection"}
-  try{
-    geoData.features= await getGeoData(geoJSON);
-    console.log(geoData)
+//sends the GeoJSON data after parsing the shapefile
+app.post("/getGeoJSON", shp_upload, async (req, res) => {
+  let file = Buffer.from(req.files["shp_file"][0].buffer);
+  let geoJSON = await shapeParser(file);
+  let geoData = { type: "FeatureCollection" };
+  try {
+    geoData.features = await getGeoData(geoJSON);
+    console.log(geoData);
     res.status(200).send(geoData);
+  } catch (err) {
+    console.log(err);
+    res.status(400).send({ error: err.message });
   }
-  catch(err){
-    console.log(err)
-    res.status(400).send({"error": err.message});
-  }
-})
+});
 
 //extracts the shapefile zip and sends each file separately
-app.post('/getGeoFile', shp_upload, async(req, res) => {
-  try{
-    let file= Buffer.from(req.files['shp_file'][0].buffer);
-    let type= req.body.type;
-    const name= `${type}_file.${type}`
-    decompress(file, 'dist', {
-      filter: file => path.extname(file.path) == `.${type}`,
-      map: file => {
+app.post("/getGeoFile", shp_upload, async (req, res) => {
+  try {
+    let file = Buffer.from(req.files["shp_file"][0].buffer);
+    let type = req.body.type;
+    const name = `${type}_file.${type}`;
+    decompress(file, "dist", {
+      filter: (file) => path.extname(file.path) == `.${type}`,
+      map: (file) => {
         file.path = `${name}`;
         return file;
-    }
-    }).then(files => {
-      console.log(files)
-  });
-    res.status(200).sendFile(__dirname+`/dist/${name}`);
-  }
-  catch(err){
-    console.log(err)
+      },
+    }).then((files) => {
+      console.log(files);
+    });
+    res.status(200).sendFile(__dirname + `/dist/${name}`);
+  } catch (err) {
+    console.log(err);
     res.status(400).send("File not acceptable.Check its format");
   }
-})
+});
 
-app.post('/sheetToCsv', async(req, res) => {
-  let sheet=req.body.sheet;
-  let csvFile= await sheetToCsv(sheet)
-})
+app.post("/sheetToCsv", async (req, res) => {
+  let sheet = req.body.sheet;
+  let csvFile = await sheetToCsv(sheet);
+});
 
-app.listen(port, host,() => {
-  console.log(`App running on port ${port}.`)
-})
\ No newline at end of file
+app.listen(port, host, () => {
+  console.log(`App running on port ${port}.`);
+});