Author: Lorenzo Ortega Version: 1.0.0

Today you will be building a React application that uses the Axios library to make user-initiated reqeusts for data from a thrid-party API.

• Setup Feature

Create a new repo called city-explorer on GitHub, initialized with a README file. Clone it locally, and do all your work on a meaningfully-named feature branch off of main. Use create-react-app to setup a new React application in your lab repo. README.md - with documentation regarding your lab and its current state of development. Check the "documentation" section of the lab assignment for more details on how that should look AT MINIMUM .gitignore - with React configurations, including ignoring of .env package.json - with all dependencies and any associated details related to configuration. The dependencies needed for today's lab include: Axios and Bootstrap. Create a PR of your basic React app to Netlify. Thanks to the "Deploy Preview" feature of Netlify, your branch will be deployed so you can see it live, even before you merge it to main. As you work through the lab, push all your work to the same PR, verifying it's working on Netlify as you go. Procure a LocationIQ free-tier account. From the Dashboard, navigate to your API Access Tokens page. View, then Update the existing token, to change the label to "City Explorer". MOST IMPORTANTLY: Add your deployed Netflify app url as an HTTP Referrer to your API token settings. This step is necessary to prevent any unauthorized use of your token. .env: Your API key goes here for local development. Make sure this file is in your .gitignore. Add your API key to your Netlify deployment. Under "Site settings" > "Build & deploy" > "Environment", you need to add "Edit variables" to add your API key, giving it the same name you used in your local .env file. Add an item

• Location Feauture

Create a route with a method of get and a path of /location. The route callback should invoke a function to convert the search query to a latitude and longitude. The function should use the provided JSON data. Build a form to collect a city name from the user. Give the submit button the text of "Explore!". Use the data from the form to query LocationIQ for the latitude and longitude of the requested city. Update the page with the returned display_name, latitude, and longitude, displayed nicely in an appropriate Bootstrap component. Deploy your updated React app to Netlify by committing and pushing your code to your open pull request on GitHub. Add an item

Built using the following technologies:

• React
• React Bootstrap
• Node.JS and npm
• axios(frontend) -superagent (backend)

API's

• LocationIQ API
• WeatherBit.io API
• Trello Board Manager

2021-04-06 2300 - Began building Repository and API Key Setup per Trello board checklist

• Project Collaborators:

  • Michelle Pannock

• Instructor and TA help:

  • Instructor Ryan Gallaway
  • T.A. Hex King - debug netlify deployment
  • T.A. Paul O’Brien - GET requests

dotenv npm install

Bootstrap React Component Docs

W3 Schools

StackOverflow - to fix submit event handler

Saturn Emoji

Estimate of time needed to complete: 1 hour

Start time: 2130

Finish time: 2330

Actual time needed to complete: 2 hours

Estimate of time needed to complete: 3 hour

Start time: 1430

Finish time: 1757

Actual time needed to complete: 3.45 hours

Estimate of time needed to complete: 1 hour

Start time: 1930

Finish time: 2109

Actual time needed to complete: 1.6 hours

Estimate of time needed to complete: 1 hour

Start time: 2031

Finish time: 2133

Actual time needed to complete: ~ 1 hour

Estimate of time needed to complete: 4 hour

Start time: 1330

Finish time: 1807

Start time: 1501

Finish time: 1702

Actual time needed to complete: ~ 7 hours

Estimate of time needed to complete: 1 hour

Start time: 1622

Finish time: 1737

Actual time needed to complete: 1.25 hours

Estimate of time needed to complete: 1 hour

Start time: 1840

Finish time:2100

Actual time needed to complete: 2.3 hrs

Estimate of time needed to complete: 30 minutes

Start time: 1100

Finish time: 1145

Actual time needed to complete: 45 minutes