diff --git a/frontend/Dockerfile b/frontend/Dockerfile
new file mode 100644
index 0000000000000000000000000000000000000000..fd7c5a87e3931b2df352d43f44799c8762b040d6
--- /dev/null
+++ b/frontend/Dockerfile
@@ -0,0 +1,5 @@
+FROM nginx:latest
+
+COPY ./static /usr/share/nginx/html
+
+COPY nginx.conf /etc/nginx/conf.d/default.conf
diff --git a/frontend/Makefile b/frontend/Makefile
new file mode 100644
index 0000000000000000000000000000000000000000..902e95917881036091df9c1d625bb2dfceed690e
--- /dev/null
+++ b/frontend/Makefile
@@ -0,0 +1,8 @@
+build:
+	docker build . -t avasthi/twitter-app:${VERSION}
+
+push:
+	docker push avasthi/twitter-app:${VERSION}
+
+run:
+	docker run -d -p 80:80 avasthi/twitter-app:${VERSION}
diff --git a/frontend/nginx.conf b/frontend/nginx.conf
new file mode 100644
index 0000000000000000000000000000000000000000..adbca7bcb6476e289d614d18e0ded871542c4bc2
--- /dev/null
+++ b/frontend/nginx.conf
@@ -0,0 +1,22 @@
+server {
+    listen       80;
+    listen  [::]:80;
+    server_name  172.26.131.9;
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+    access_log /var/log/nginx/access.log  main;
+
+    root /usr/share/nginx/html;
+
+    location / {
+        index  index.html index.htm;
+    }
+    location /couchdb {
+        rewrite /couchdb/(.*) /$1 break;
+        proxy_pass http://172.26.130.79:5984;
+        proxy_redirect off;
+        proxy_buffering off;
+        proxy_set_header Host $host;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    }
+}
diff --git a/frontend/static/Sports.css b/frontend/static/Sports.css
new file mode 100644
index 0000000000000000000000000000000000000000..f00cd6fbf9b5cee7d40700e684b236e7b1ac0621
--- /dev/null
+++ b/frontend/static/Sports.css
@@ -0,0 +1,59 @@
+#mynetwork {
+    width: 400px;
+    height: 400px;
+    border: 1px solid lightgray;
+  }
+  .header{
+    text-align: center ;
+    display: block;
+    font-family: sans-serif;
+    margin-bottom: 20px;
+    margin-top :20px;
+    font-size: large;
+}
+
+#mychart{
+    width: 1000px  !important;
+    height: 500px !important;
+    justify-content: center;
+  }
+  #mychart1{
+    width: 800px  !important;;
+    height: 500px !important;
+  }
+  #mychart2{
+    width: 800px  !important;;
+    height: 500px !important;
+  }
+  canvas{
+    margin: 0 auto;
+    justify-content: center;
+    }
+  #cityfilter
+  {
+    margin-top: 20px;
+    margin-bottom: 20px;
+    text-align:center;
+  }
+  #networkcityfilter
+  {
+    margin-top: 20px;
+    margin-bottom: 20px;
+    text-align:center;
+  }
+  #mynetwork
+  {
+    margin-left: 200px;
+    margin-right:100px;
+    width: 1000px  !important;
+    height: 500px !important;
+    justify-content: center;
+    display: inline-block;
+  }
+h1{
+  text-align:center;
+  font-family: sans-serif;
+}
+#center {
+  margin-left: 200px;
+}
\ No newline at end of file
diff --git a/frontend/static/Sports.js b/frontend/static/Sports.js
new file mode 100644
index 0000000000000000000000000000000000000000..e5457cfac9fbc8f2435486c5538551482c2d2294
--- /dev/null
+++ b/frontend/static/Sports.js
@@ -0,0 +1,373 @@
+var sports = [];
+var counts = [];
+
+var sports_by_city = [];
+var counts_by_city = [];
+
+var response_value = function(){
+    $.ajax({
+        async: false,
+        url: 'http://172.26.131.9/couchdb/live_demo2/_design/sports_count/_view/sports_count?group=true&group_level=1',
+        type: 'get',
+        dataType: 'json',
+        headers: {
+            'Authorization': 'Basic ' + btoa('admin:admin'),
+        },
+        xhrFields: {
+            withCredentials: true
+        },
+        success: function(data) {
+            temp = data;
+            console.log(data);
+        },
+        error: function() {
+            alert('Error occurs!');
+        },
+        reduce: false
+    });
+    console.log(temp);
+    return temp;
+}();
+data_rows = response_value["rows"];
+for (row in data_rows) {
+    sports.push(data_rows[row]["key"][0]);
+    counts.push(data_rows[row]["value"]);
+};
+
+var city;
+function setByCity(){
+  city = document.getElementById('city').value;
+  console.log(city);
+
+  var response_by_city = function(){
+    $.ajax({
+        async: false,
+        crossDomain: true,
+        url: 'http://172.26.131.9/couchdb/live_demo2/_design/sports_count/_view/sports_count?group=true&group_level=2',
+        type: 'get',
+        dataType: 'json',
+        headers: {
+            'Authorization': 'Basic ' + btoa('admin:admin'),
+            // 'Access-Control-Allow-Origin': 'localhost',
+            // 'Access-Control-Allow-Credentials' : true,
+        },
+        xhrFields: {
+            withCredentials: true
+        },
+        success: function(data) {
+            temp = data;
+            console.log(data);
+        },
+        error: function() {
+            alert('Error occurs!');
+        },
+        reduce: false
+    });
+    console.log(temp);
+    return temp;
+}();
+console.log("RESPONSE:"+response_by_city);
+for(var i =0;i<sports_by_city.length;i++)
+{
+    removeData(myChart1);
+}
+sports_by_city =[]
+counts_by_city = []
+
+
+
+data_rows = response_by_city["rows"];
+for (row in data_rows) {
+    if(data_rows[row]["key"][1] == city)
+    {
+        console.log(data_rows[row]["key"][1]);
+        sports_by_city.push(data_rows[row]["key"][0]);
+        counts_by_city.push(data_rows[row]["value"]);
+        addData(myChart1,data_rows[row]["key"][0],data_rows[row]["value"]);
+    }
+}
+
+myChart1.update();
+}
+
+var sport;
+var city_by_sport = [];
+var counts_by_sport = [];
+function sendSport(){
+  sport = document.getElementById('sport').value;
+  console.log(sport);
+
+  var response_by_city = function(){
+    $.ajax({
+        async: false,
+        crossDomain: true,
+        url: 'http://172.26.131.9/couchdb/live_demo2/_design/retweets_followers/_view/retweets_followers?group=true',
+        type: 'get',
+        dataType: 'json',
+        headers: {
+            'Authorization': 'Basic ' + btoa('admin:admin'),
+            // 'Access-Control-Allow-Origin': 'localhost',
+            // 'Access-Control-Allow-Credentials' : true,
+        },
+        xhrFields: {
+            withCredentials: true
+        },
+        success: function(data) {
+            temp = data;
+            console.log(data);
+        },
+        error: function() {
+            alert('Error occurs!');
+        },
+        reduce: false
+    });
+    console.log(temp);
+    return temp;
+}();
+console.log("RESPONSE:"+response_by_city);
+for(var i =0;i<city_by_sport.length;i++)
+{
+    removeData(myChart2);
+}
+
+city_by_sport =[]
+counts_by_city = []
+
+data_rows = response_by_city["rows"];
+for (row in data_rows) {
+    console.log(sport);
+    console.log(data_rows[row]["key"][1]);
+    if(data_rows[row]["key"][1] == sport)
+    {
+        city_by_sport.push(data_rows[row]["key"][0]);
+        console.log(data_rows[row]["value"][0]["sum"]);
+        console.log(data_rows[row]["value"][0]["count"]);
+        var avg = data_rows[row]["value"][0]["sum"] / data_rows[row]["value"][0]["count"] ;
+        counts_by_city.push(avg);
+        addData(myChart2,data_rows[row]["key"][0],avg);
+    }
+}
+
+myChart2.update();
+}
+
+var nodes = new vis.DataSet();
+var edges =  new vis.DataSet();
+var ids =[];
+var nodesexist =[];
+function networkGraph()
+{
+    city = document.getElementById('citynetwork').value;
+    sport = document.getElementById('sportnetwork').value;
+
+    var response_network = function(){
+        $.ajax({
+            async: false,
+            crossDomain: true,
+            url: 'http://172.26.131.9/couchdb/live_demo/_design/replies/_view/replies?group=true',
+            type: 'get',
+            dataType: 'json',
+            headers: {
+                'Authorization': 'Basic ' + btoa('admin:admin'),
+                // 'Access-Control-Allow-Origin': '*',
+                // 'Access-Control-Allow-Credentials' : true,
+            },
+            xhrFields: {
+                withCredentials: true
+            },
+            success: function(data) {
+                temp = data;
+                console.log(data);
+            },
+            error: function() {
+                alert('Error occurs!');
+            },
+            reduce: false
+        });
+        console.log(temp);
+        return temp;
+    }();
+    data_rows = response_network["rows"];
+    var i=1;
+    ids =[];
+    nodesexist = [];
+    nodes = new vis.DataSet();
+    edges =  new vis.DataSet();
+    for (row in data_rows) {
+        if(data_rows[row]["key"][0] == city && data_rows[row]["key"][1] == sport )
+        {
+            if(!(data_rows[row]["key"][2] in nodesexist))
+            {
+                nodes.add({id: i,label:data_rows[row]["key"][2]});
+                nodesexist.push(data_rows[row]["key"][2]);
+                ids.push(i);
+                var id1=i;
+                i++;
+            }
+            else
+            {
+                id1  = nodesexist.indexOf(data_rows[row]["key"][2])
+            }
+            if(!(data_rows[row]["key"][3] in nodesexist))
+            {
+                nodes.add({id: i,label:data_rows[row]["key"][3]});
+                nodesexist.push(data_rows[row]["key"][3]);
+                ids.push(i);
+                var id2=i;
+                i++;
+            }
+            else
+            {
+                id2  = nodesexist.indexOf(data_rows[row]["key"][3])
+            }
+
+            edges.add({from:id1,to:id2});
+
+        }
+    };
+    var container = document.getElementById("mynetwork");
+    var data = {
+        nodes: nodes,
+        edges: edges,
+      };
+    var options = {};
+    var network = new vis.Network(container, data, options);
+
+}
+
+var ctx = document.getElementById('myChart').getContext('2d');
+var myChart = new Chart(ctx, {
+    type: 'bar',
+    data: {
+        labels: sports,
+        datasets: [{
+            label: '# of Tweets',
+            data: counts,
+            backgroundColor: [
+                'rgba(255, 99, 132, 0.5)',
+                'rgba(54, 162, 235, 0.5)',
+                'rgba(255, 206, 86, 0.5)',
+                'rgba(75, 192, 192, 0.5)',
+                'rgba(153, 102, 255, 0.5)',
+                'rgba(255, 159, 64, 0.5)'
+            ],
+            borderColor: [
+                'rgba(255, 99, 132, 1)',
+                'rgba(54, 162, 235, 1)',
+                'rgba(255, 206, 86, 1)',
+                'rgba(75, 192, 192, 1)',
+                'rgba(153, 102, 255, 1)',
+                'rgba(255, 159, 64, 1)'
+            ],
+            borderWidth: 1
+        }]
+    },
+    options: {
+        scales: {
+            y: {
+                beginAtZero: true
+            },
+            // yAxes: [{
+            //     ticks: {
+            //         fontSize: 40
+            //     }
+            // }]
+        }
+    }
+});
+
+var ctx = document.getElementById('myChart1').getContext('2d');
+var myChart1 = new Chart(ctx, {
+    type: 'bar',
+    data: {
+        labels: sports_by_city ,
+        datasets: [{
+            label: '# of Tweets',
+            data: counts_by_city,
+            backgroundColor: [
+                'rgba(255, 99, 132, 0.5)',
+                'rgba(54, 162, 235, 0.5)',
+                'rgba(255, 206, 86, 0.5)',
+                'rgba(75, 192, 192, 0.5)',
+                'rgba(153, 102, 255, 0.5)',
+                'rgba(255, 159, 64, 0.5)'
+            ],
+            borderColor: [
+                'rgba(255, 99, 132, 1)',
+                'rgba(54, 162, 235, 1)',
+                'rgba(255, 206, 86, 1)',
+                'rgba(75, 192, 192, 1)',
+                'rgba(153, 102, 255, 1)',
+                'rgba(255, 159, 64, 1)'
+            ],
+            borderWidth: 1
+        }]
+    },
+    options: {
+        scales: {
+            y: {
+                beginAtZero: true
+            },
+            // yAxes: [{
+            //     ticks: {
+            //         fontSize: 40
+            //     }
+            // }]
+        }
+    }
+});
+
+var ctx = document.getElementById('myChart2').getContext('2d');
+var myChart2 = new Chart(ctx, {
+    type: 'bar',
+    data: {
+        labels: city_by_sport,
+        datasets: [{
+            label: '# Average of Tweets',
+            data: counts_by_sport,
+            backgroundColor: [
+                'rgba(255, 99, 132, 0.5)',
+                'rgba(54, 162, 235, 0.5)',
+                'rgba(255, 206, 86, 0.5)',
+                'rgba(75, 192, 192, 0.5)',
+                'rgba(153, 102, 255, 0.5)',
+                'rgba(255, 159, 64, 0.5)'
+            ],
+            borderColor: [
+                'rgba(255, 99, 132, 1)',
+                'rgba(54, 162, 235, 1)',
+                'rgba(255, 206, 86, 1)',
+                'rgba(75, 192, 192, 1)',
+                'rgba(153, 102, 255, 1)',
+                'rgba(255, 159, 64, 1)'
+            ],
+            borderWidth: 1
+        }]
+    },
+    options: {
+        scales: {
+            y: {
+                beginAtZero: true
+            }
+        }
+    }
+});
+
+
+
+
+function removeData(chart) {
+    chart.data.labels.pop();
+    chart.data.datasets.forEach((dataset) => {
+        dataset.data.pop();
+    });
+    chart.update();
+}
+
+function addData(chart, label, data) {
+    chart.data.labels.push(label);
+    chart.data.datasets.forEach((dataset) => {
+        dataset.data.push(data);
+    });
+    chart.update();
+}
diff --git a/frontend/static/aurin.png b/frontend/static/aurin.png
new file mode 100644
index 0000000000000000000000000000000000000000..75da558f09ef1a26d07d52bfbfcdee1e7ff5fe47
Binary files /dev/null and b/frontend/static/aurin.png differ
diff --git a/frontend/static/index.html b/frontend/static/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..8772af2dc45ea737d286f6d7bb75bd7fc7f3ad88
--- /dev/null
+++ b/frontend/static/index.html
@@ -0,0 +1,89 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="Sports.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+  </head>
+<title> Sport Popularity Analytic Tool</title>
+
+<script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
+
+<body>
+    <h1>Sport Popularity Analytic Tool</h1>
+    <label class="header">Bar graph showing the popularity of the sports in Australia</label>
+    <canvas id="myChart" ></canvas>
+
+    <label class="header">Bar graph showing the popularity of the sport in a specific city</label>
+    <div id="cityfilter">
+      <label for="city" >Choose a city:</label>
+      <select id="city" onchange="setByCity()" >
+        <option selected disabled>Choose one</option>
+        <option value="Adelaide">Adelaide</option>
+        <option value="Brisbane">Brisbane</option>
+        <option value="Canberra">Canberra</option>
+        <option value="Hobart">Hobart</option>
+        <option value="Melbourne">Melbourne</option>
+        <option value="Perth">Perth</option>
+        <option value="Sydney">Sydney</option>
+      </select>
+    </div>
+    <canvas id="myChart1" ></canvas>
+    <!-- Display Graph for that date -->
+
+    <!-- <h3>User's Friends Count Specific to Sports they tweet about </h3> -->
+    <!-- Display Graph for friend count and how old the user is -->
+
+    <!-- <canvas id="myChart2" width="200px" height="200px" justify ="right"></canvas> -->
+    <label class="header">Sports Engagement by City</label>
+    <div id="cityfilter">
+      <label for="sport" >Choose a sport:</label>
+      <select id="sport" onchange="sendSport()" >
+        <option selected disabled>Choose one</option>
+        <option value="basketball">Basketball</option>
+        <option value="cricket">Cricket</option>
+        <option value="Footie">Footie</option>
+        <option value="netball">Netball</option>
+        <option value="Rugby">Rugby</option>
+        <option value="soccer">Soccer</option>
+        <option value="swimming">Swimming</option>
+        <option value="Tennis">Tennis</option>
+      </select>
+    </div>
+    <canvas id="myChart2"></canvas>
+
+    <label class="header">Network Of Tweets based on retweets </label>
+    <div id="networkcityfilter">
+      <label for="citynetwork" >Choose a city:</label>
+      <select id="citynetwork">
+        <option selected disabled>Choose one</option>
+        <option value="Adelaide">Adelaide</option>
+        <option value="Brisbane">Brisbane</option>
+        <option value="Canberra">Canberra</option>
+        <option value="Hobart">Hobart</option>
+        <option value="Melbourne">Melbourne</option>
+        <option value="Perth">Perth</option>
+        <option value="Queensland">Queensland</option>
+        <option value="Sydney">Sydney</option>
+      </select>
+      <label for="sportNetwork" >Choose a sport:</label>
+      <select id="sportnetwork">
+        <option selected disabled>Choose one</option>
+        <option value="basketball">Basketball</option>
+        <option value="cricket">Cricket</option>
+        <option value="Footie">Footie</option>
+        <option value="netball">Netball</option>
+        <option value="Rugby">Rugby</option>
+        <option value="soccer">soccer</option>
+        <option value="swimming">swimming</option>
+        <option value="Tennis">Tennis</option>
+      </select>
+      <button onclick="networkGraph()">Search</button>
+    </div>
+    <div id="mynetwork"></div>
+    <label class="header">English Proficiency and Tweets</label>
+    <div id="center"><img src="aurin.png"></div>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src = "Sports.js"> </script>
+    <script type="text/javascript">
+    </script>
+  </body>
+</html>