Weather App Exercise - AmyScript/React_Beyond_The_Basics GitHub Wiki

Now that you have gone through all the resources to learn the basics of React, we are going to put those skills to use and make a small Weather Forecast App!

Requirements of the App:

• have an input box where users can enter the city for the weather forecast they like to see.
• will display the current weather forecast when the user clicks on a button to search. Clears the input field when the user clicks on the button to search.
• when the user clicks on the current weather forecast icon, it will display the current hourly weather.
• get the realtime weather forecast by using the World Weather Online API. Sign up for a free 60 day trail API key here:
  https://developer.worldweatheronline.com/signup.aspx
• use this API endpoint to get the data:
  https://developer.worldweatheronline.com/api/docs/local-city-town-weather-api.aspx
• Watch a Demo of the App here:
  https://www.useloom.com/share/9ac4aa7b97c547d594251ff439bcb5de

Instructions and Hints:

• Use Create React App to start your application so you won't need to configure and install build configurations like Webpack etc. and it will give you a base template of a working React app:
  https://github.com/facebook/create-react-app
• Install the Chrome extension JSONView:
  https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc And use this to take a look at the shape of the data that you will be receiving from the API by going here:
  https://samples.openweathermap.org/data/2.5/forecast?q=M%C3%BCnchen,DE&appid=b6907d289e10d714a6e88b30761fae22
  You can even use this JSON object as your mock data.
• OR you can use World Weather Online site's handy API explorer. This is really convenient if you just want to play around with it but I would still recommend getting the chrome extension above as not all APIs will be as nice as this to provide you with an API explorer.
• Start with making the components with hardcoded/mock data to start. Once you get the components and interactions working then add the live data through the API.
• Try to make re-usable components. You can re-use one component to display the weather card. You will need to manipulate some data in order for this to work. Remember to use those javascript statements in your JSX!
• Console.log is your friend. Use it everywhere to troubleshoot and understand what your code is doing.

Bonus:

• If you have time, style your app. I've used styled-components in my app and it works really well with React. Learn more about it here:
  https://www.styled-components.com/
• Use moment.js to help you translate the time into a more readable format. It is a widely use javascript library to parse, validate, manipulate, and display dates and times:
  https://momentjs.com/
• Add error handling for your API call (both server errors and API returned errors)