Removed public API key - loaded from enviroment variable

.gitignore

@@ -11,6 +11,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

package.json

@@ -13,5 +13,6 @@
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
-  }
+  },
+  "devDependencies": {}
 }

sample.env

@@ -0,0 +1 @@
+REACT_APP_API_KEY = <enter API key>

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,

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>
 );