diff --git a/.gitignore b/.gitignore
index d30f40e..f53349d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,6 +11,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local
diff --git a/package-lock.json b/package-lock.json
index c57287a..ead6065 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2475,11 +2475,6 @@
         "is-obj": "1.0.1"
       }
     },
-    "dotenv": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-4.0.0.tgz",
-      "integrity": "sha1-hk7xN5rO1Vzm+V3r7NzhefegzR0="
-    },
     "dotenv-expand": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-4.0.1.tgz",
@@ -4112,13 +4107,6 @@
             }
           }
         },
-        "string_decoder": {
-          "version": "1.0.1",
-          "bundled": true,
-          "requires": {
-            "safe-buffer": "5.0.1"
-          }
-        },
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
@@ -4128,6 +4116,13 @@
             "strip-ansi": "3.0.1"
           }
         },
+        "string_decoder": {
+          "version": "1.0.1",
+          "bundled": true,
+          "requires": {
+            "safe-buffer": "5.0.1"
+          }
+        },
         "stringstream": {
           "version": "0.0.5",
           "bundled": true,
@@ -8155,6 +8150,11 @@
         "whatwg-fetch": "2.0.3"
       },
       "dependencies": {
+        "dotenv": {
+          "version": "4.0.0",
+          "resolved": "http://registry.npmjs.org/dotenv/-/dotenv-4.0.0.tgz",
+          "integrity": "sha1-hk7xN5rO1Vzm+V3r7NzhefegzR0="
+        },
         "promise": {
           "version": "8.0.1",
           "resolved": "https://registry.npmjs.org/promise/-/promise-8.0.1.tgz",
@@ -8961,14 +8961,6 @@
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
     },
-    "string_decoder": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
-      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
-      "requires": {
-        "safe-buffer": "5.1.1"
-      }
-    },
     "string-length": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-1.0.1.tgz",
@@ -9001,6 +8993,14 @@
         }
       }
     },
+    "string_decoder": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
+      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+      "requires": {
+        "safe-buffer": "5.1.1"
+      }
+    },
     "stringstream": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
diff --git a/package.json b/package.json
index d3f2b10..fbcb703 100644
--- a/package.json
+++ b/package.json
@@ -13,5 +13,6 @@
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
-  }
+  },
+  "devDependencies": {}
 }
diff --git a/sample.env b/sample.env
new file mode 100644
index 0000000..4fb21f7
--- /dev/null
+++ b/sample.env
@@ -0,0 +1 @@
+REACT_APP_API_KEY = <enter API key>
diff --git a/src/App.js b/src/App.js
index 3f1c29a..c45aeed 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,7 +4,10 @@ import Titles from "./components/Titles";
 import Form from "./components/Form";
 import Weather from "./components/Weather";
 
-const API_KEY = "3585775f387b0d0cba6c5b3dc41b8167";
+// You can add an API key for production and replace null
+const API_KEY = process.env.NODE_ENV === 'development' ? process.env.REACT_APP_API_KEY : null;
+
+console.log(process.env);
 
 class App extends React.Component {
   state = {
@@ -21,6 +24,7 @@ class App extends React.Component {
     const country = e.target.elements.country.value;
     const api_call = await fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city},${country}&appid=${API_KEY}&units=metric`);
     const data = await api_call.json();
+
     if (city && country) {
       this.setState({
         temperature: data.main.temp,
diff --git a/src/components/Form.js b/src/components/Form.js
index b32d16f..6d8dfa9 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -2,8 +2,8 @@ import React from "react";
 
 const Form = props => (
 	<form onSubmit={props.getWeather}>
-		<input type="text" name="city" placeholder="City..."/>
-		<input type="text" name="country" placeholder="Country..."/>
+		<input type="text" name="city" placeholder="City"/>
+		<input type="text" name="country" placeholder="Country e.g. 'USA'"/>
 		<button>Get Weather</button>
 	</form>
 );