diff --git a/.gitignore b/.gitignore
index 6704566..7b67e93 100644
--- a/.gitignore
+++ b/.gitignore
@@ -102,3 +102,5 @@ dist
 
 # TernJS port file
 .tern-port
+constants.js
+.DS_Store
diff --git a/README.md b/README.md
index ad42f9a..548040b 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,13 @@
-# weather-api-es
\ No newline at end of file
+# Weather Api
+
+## Installation for development
+- Clone this repo
+- Switch to `develop` branch
+- Run the command in terminal `npm i` to install its modules
+- Now finally run the command `npm start`. It will automatically open the project in borwser new tab. ``` Or ``` You can go manually to `http://localhost:8080/`
+
+## Installation for Production
+- Clone this repo
+- Switch to `develop` branch
+- Run the command in terminal `npm i` to install its modules
+- Now finally run the command `npm run build` and open the `index.html` file in the browser.
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..f1834ef
--- /dev/null
+++ b/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+    <link rel="stylesheet" href="./dist/css/style.min.css">
+</head>
+<body>
+    <div class="wrapper">
+        <div class="search-box">
+            <form action="#" id="searchForm">
+                <div class="input-group">
+                    <input type="search" id="searchInput" placeholder="Enter City Name" class="form-control" aria-label="Text input with segmented dropdown button">
+                    <div class="input-group-append">
+                        <button type="submit" class="btn btn-primary">Search</button>
+                    </div>
+                </div>
+            </form>
+        </div>
+        <div class="main-content">
+            <div class="container">
+                <div class="alert alert-danger" role="alert" id="notFound"  style="display: none;"></div>
+                <div id="weatherDetails" style="display: none;">
+                    <div class="row">
+                        <div class="col">
+                            <span id="date"></span>
+                            <div class="address">
+                                <h1 id="city"></h1>
+                                <span id="country"></span>
+                            </div>
+                        </div>
+                        <div class="col">
+                            <ul class="info-list">
+                                <li>
+                                    <strong>Sun Rises</strong>:
+                                    <span id="sunRize"></span>
+                                </li>
+                                <li>
+                                    <strong>Sun Sets</strong>:
+                                    <span id="sunSet"></span>
+                                </li>
+                                <li>
+                                    <strong>Visibility</strong>:
+                                    <span id="visibility"></span>Km
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div id="weather" class="row"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script src="./dist/js/bundle.js"></script>
+</body>
+</html>
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..58edc21
--- /dev/null
+++ b/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "weather-api-es",
+  "version": "1.0.0",
+  "description": "",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "watch": "webpack --watch",
+    "start": "webpack serve --open",
+    "build": "webpack --env production"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/arbirali/weather-api-es.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/arbirali/weather-api-es/issues"
+  },
+  "homepage": "https://github.com/arbirali/weather-api-es#readme",
+  "devDependencies": {
+    "@babel/core": "^7.17.4",
+    "@babel/preset-env": "^7.16.11",
+    "babel-loader": "^8.2.3",
+    "file-loader": "^6.2.0",
+    "sass": "^1.49.7",
+    "sass-loader": "^12.6.0",
+    "webpack": "^5.69.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.7.4"
+  },
+  "dependencies": {
+    "axios": "^0.26.0",
+    "jquery": "^3.6.0"
+  }
+}
diff --git a/src/js/helper/hanlde-error.js b/src/js/helper/hanlde-error.js
new file mode 100644
index 0000000..c5bb7d1
--- /dev/null
+++ b/src/js/helper/hanlde-error.js
@@ -0,0 +1,8 @@
+import $ from 'jquery';
+
+export default function handleError({response}) {
+    let { message } = JSON.parse(response.request.responseText);
+
+    $('#notFound').text(message).show();
+    $('#weatherDetails').hide();
+}
diff --git a/src/js/helper/weather-details.js b/src/js/helper/weather-details.js
new file mode 100644
index 0000000..cebde46
--- /dev/null
+++ b/src/js/helper/weather-details.js
@@ -0,0 +1,15 @@
+export default function getWeatherDetails (weatherDetails) {
+  return weatherDetails.map( weatherDetail => {
+    return `
+      <div class="col">
+        <div class="card">
+          <div class="card-body">
+            <img src="http://openweathermap.org/img/wn/${weatherDetail.icon}@2x.png" />
+            <h3>${weatherDetail.main}</h3>
+            <span class="description">${weatherDetail.description}</span>
+          </div>
+        </div>
+      </div>
+    `
+  });
+}
diff --git a/src/js/helper/weather.js b/src/js/helper/weather.js
new file mode 100644
index 0000000..903f59d
--- /dev/null
+++ b/src/js/helper/weather.js
@@ -0,0 +1,21 @@
+import $ from 'jquery';
+import getWeatherDetails from './weather-details';
+
+export default function renderWeather({ data }) {
+    let { weather, main, visibility, dt, sys, name } = data;
+
+    let currentDate = new Date(dt * 1000);
+    let sunsetTime = new Date(sys.sunset * 1000);
+    let sunRiseTime = new Date(sys.sunrise * 1000);
+
+    $('#city').html( name );
+    $('#date').html( currentDate.toDateString() );
+    $('#sunRize').html( `${sunRiseTime.getHours()} : ${sunRiseTime.getMinutes()}` );
+    $('#sunSet').html( `${sunsetTime.getHours()} : ${sunsetTime.getMinutes()}` );
+    $('#country').html( sys.country );
+    $('#visibility').html( visibility / 1000 );
+    $('#weather').html( getWeatherDetails(weather) );
+
+    $('#weatherDetails').show();
+    $('#notFound').hide();
+}
diff --git a/src/js/index.js b/src/js/index.js
new file mode 100644
index 0000000..b5a5266
--- /dev/null
+++ b/src/js/index.js
@@ -0,0 +1,23 @@
+import $ from 'jquery';
+import axios from 'axios';
+
+import renderWeather from './helper/weather';
+import handleError from './helper/hanlde-error';
+import constants from './constants';
+
+let { weatherUrl, appid } = constants;
+
+(function () {
+  $('#searchForm').on('submit', function(e) {
+    e.preventDefault();
+
+    axios.get(weatherUrl, {
+      params: {
+        q: $('#searchInput').val(),
+        appid
+      }
+    })
+    .then(renderWeather)
+    .catch(handleError);
+  });
+}) (axios, $);
diff --git a/src/scss/style.scss b/src/scss/style.scss
new file mode 100644
index 0000000..9eea756
--- /dev/null
+++ b/src/scss/style.scss
@@ -0,0 +1,46 @@
+body {
+  background: #eee;
+}
+
+#notFound,
+.description {
+  text-transform: capitalize;
+}
+
+.search-box {
+  max-width: 500px;
+  margin: 0 auto;
+  padding: 2rem 0;
+}
+
+.main-content {
+  max-width: 800px;
+  margin: 0 auto;
+
+  img {
+    max-width: 50px;
+    height: auto;
+  }
+}
+
+.address {
+  h1 {
+    font-size: 4rem;
+    display: inline-block;
+  }
+
+  span {
+    font-size: 1rem;
+    margin-left: 1rem;
+  }
+}
+
+.info-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  li {
+    margin-bottom: 0.6rem;
+  }
+}
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..7431a86
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,53 @@
+const path = require('path');
+
+let base = {
+  mode: 'development',
+  entry: [
+    './src/js/index.js',
+    './src/scss/style.scss',
+  ],
+  output: {
+    filename: 'js/bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+    clean: true
+  },
+  devServer: {
+    static: './',
+    hot: false,
+    devMiddleware: {
+      publicPath: './dist/',
+      writeToDisk: true,
+   },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: [ 'babel-loader' ],
+      }, {
+        test: /\.scss$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: { outputPath: 'css/', name: '[name].min.css'}
+          },
+          'sass-loader'
+        ]
+      }
+    ]
+  }
+};
+
+module.exports = (env) => {
+  const isProduction = env.production;
+
+  return isProduction ? {
+    ...base,
+    mode: 'production'
+  } : {
+    ...base,
+    devtool: 'inline-source-map'
+  }
+};
