🗺️ city-explorer

Author: Aloysious

Version: 2.2.2

• { city-explorer Trello Project Board }

Overview

Getting Started

1. clone repo (or fork)
2. install packackes: npm init
3. install dependencies npom install axios / npm install react-bootstrap bootstrap
4. procure .env keys from: The movie database and WeatherbitIo
5. npm start to run
6. set up your local .env

Architecture

Languages : JavaScript | HTML | CSS | Markdown

Libraries : Axios | LocationIq | React / Bootstrap

Tools : Trello | Github | VS Code / Netlify

Change Log

04-14-2021 11:30pm - Re-deployment on Netlyify : https://confident-thompson-632e1c.netlify.app/

04-14-2021 5:17pm - Re-deployment on Netlyify : https://confident-thompson-632e1c.netlify.app/

04-07-2021 11:22pm - Re-deployment on Netlyify : https://confident-thompson-632e1c.netlify.app/

04-07-2021 11:22pm - Launched on Netlyify : https://confident-thompson-632e1c.netlify.app/

04-06-2021 9:22pm - Repository Created : https://github.com/AL0YSI0US/city-explorer

⏰ T I M E . E S T I M A T E S ⏰

⚙️ React repository & API keys : Feature One

Estimate of time needed to complete: 4 hours

Start time: 12:00

Finish time: 5:45

Actual time needed to complete: 5 hrs 45 mins

Repository Configuration:

• Create a new repo called city-explorer on GitHub, initialized with no files.
• Use create-react-app to setup a new React application named city-explorer in your local projects directory.
• Ensure repository matches file configuration map
• Connect your GitHub repo to your local repo using the directions on GitHub.
• Convert the README.md file to be documentation regarding your lab and its current state of development.
• post on deployed app web address in github settings
• Add a .gitignore file with React configurations, including ignoring of .env.
• Create a package.json file 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 your main branch. 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 Netlify app url as an HTTP Referrer to your API token settings. This step is necessary to prevent any unauthorized use of your token.
  • To add that HTTP Referrer, you'll want to look at your API token on LocationIQ, then click the "Update" button and add in your Netlify site's URL to the HTTP Referrers textbox. It'll add another layer of protection, to make sure nobody else can steal your API key
• Create an .env file: 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.

⚙️ Locations : Feature Two

As a user of City Explorer, I want to enter the name of a location so that I can see the exact latitude and longitude of that location.

• Given that a user enters a valid location in the input
• When the user clicks the "Explore!" button
• Then the latitude and longitude will be displayed on the page

Estimate of time needed to complete: 120 minutes

Start time: 12:00 

Finish time: 4:20

Actual time needed to complete: 240 minutes

⚙️ Map : Feature Three

As a user, I want to see a map of the city so that I can see the layout of the area I want to explore.

• Given that a user enters a valid location in the input
• When the user clicks the "Explore!" button
• Then the map of the city is displayed on the page.

Estimate of time needed to complete: 30 minutes

Start time: 9:00

Finish time: 9:30

Actual time needed to complete: 30 minutes

⚙️ Errors : Feature Four

As a user, I want clear messages if something goes wrong so I know if I need to make any changes or try again in a different manner.

• Given that a user does not enter a valid location (eg: empty string) in the input
• When the user clicks the "Explore!" button
• Then the user will receive an error message on the page and the data will not be rendered properly

Estimate of time needed to complete: 120 minutes

Start time: 12:00

Finish time: 2:00

Actual time needed to complete: 120 minutes

⚙️ Movies : Feature Five

As a user of City Explorer, I want to see info about movies related to the city I searched, so that I can learn more about the destination.

• Given that a user enters a valid location in the input
• When the user clicks the "Explore!" button
• Then the top twenty movies set in the area will be displayed in the browser

Estimate of time needed to complete: 120 minutes

Start time: 12:00

Finish time: 2:00

Actual time needed to complete: 120 minutes

❤️ Credit and Collaborations 👥

Shout out to { Lorenzo } for helping me understand form handling on a deeper level.

Shout out to { Tom } for breaking down component handling for me.

Shout out to { TA Chance } for working with me on degugging my code after I broke it down into seperate components.

Shout out to { TA Joe } for helping me make sense of accessing / displaying error messages.

Shout out to { TA Paul } for helping me make sense of naming conventions while trying to get my front end to access back end data.

Resources

NPM JS

locationiq

Ignoring Files .gitignore / github docs

A collection of useful .gitignore templates github / gitignore

• Specifically, the “Search / Forward GeoCoding” and “Static Maps” sections.
• seattle-code-301n21/class-04/in-form-ation/src
• seattle-code-301n21/class-05/demo/city-explorer-react/
• seattle-code-301n21/class-05/demo/city-demo-city-explorer/
• seattle-code-301n21/class-05/demo/city-passing-functions/src/
• locationiq - docs
• Generating and locating npm-debug.log files
• { Shadows Into Light } - Google Fonts
• { Recursive } - Google Fonts
• { Press Start 2P } - Google Fonts
• { Carosel | Form | Button | List Group } - Bootstrap Components

Reflections ⇒

---

This work by AL0YSI0US is licensed under a Creative Commons Attribution 4.0 International License.

This license lets others distribute, remix, adapt, and build upon your work, even commercially, as long as they credit you for the original creation. This is the most accommodating of licenses offered. Recommended for maximum dissemination and use of licensed materials.