alitehami/Udacity_FEND_Capstone_TravelApp

The Final project of the Udacity Front-End Nanodegree

WetAlert

The Traveler Weather App Front-End Developer, Capstone project, Udacity Nanodegree

---

Introduction

Udacity "This project requires you to build out a travel app that, at a minimum, obtains a desired trip location & date from the user, and displays weather and an image of the location using information obtained from external APIs. Given that this is the Capstone project, it's highly encouraged for you to go above and beyond, adding additional functionality and customization to truly stand out with a project you are proud to have at the top of your portfolio!"

---

Developemnt Process & TO-DO list:

1. Setup the initial project structure. i.e. src, server, client, views, styles, js..etc.
2. Get webpack set up to work with this project.
3. Create an account with Geonames, and setup to pull in Country & Location data.
4. Introduce a countdown from user's entered date of travel.
5. Create an account with Weatherbit, and setup to pull in Weather & Forecast data by Location.
6. Create an account with Pixabay, and setup to pull in images about the Location & Country.
7. (bonus) Adding Users Creation & Authentecation to store data per user and keep the user data stored in the server for future retrieval. (using bcrypt + Cookies/SessionStorage/LocalStorage)
8. (bonus) Integrate the REST Countries API to pull in data for the country being visited.
9. (bonus) Allow the user to add a todo list and/or packing list for their trip.

npm dependencies and libraries used:

• express
• webpack
• babel
• jest
• bcrypt
• dotenv
• nodemon
• node-fetch

---

Dev Notes, References & Resources

1. APIs used in this project:

• Geonames to pull location and country name from user input (i.e. city name)
• Weatherbit to pull in the weather and forecast data.
• Pixabay for pulling images.
• REST Countries API to pull in data for the country in query.

2. Articles and useful resources:

• JWT with Cookies vs browserStorage (Cookies are more secure, article of JWT)
• Regex to extract cookie value by parameter name
• How to Use Local Storage with JavaScript
• All About Cookies! options and usage

2.1 Tutorials for Authentications and web storage:

_{Web Dev Simplified - youtube channel}

• JavaScript Cookies vs Local Storage vs Session
• Build Node.js User Authentication - Password Login (Hashing with bcrypt)
• Node.js Passport Login System Tutorial

3. Issues and fixes:

• Errors in jest testing for async functions:github:bebel, stackoverflow

error     >>    "ReferenceError: regeneratorRuntime is not defined"
solution  >>    install regenerator-runtime, and import it to the async test scripts:
                import "regenerator-runtime/runtime"

4. Other interesting stuff:

• MetaWeather - Open key-free API for weather forecast

---

Author

Ali Tehami

---

Project Structure

Generated with the file-tree-generator vsCode Extension

📦WETALERT
 ┣ 📂src
 ┃ ┣ 📂client
 ┃ ┃ ┣ 📂js
 ┃ ┃ ┃ ┣ 📜formHandler.js
 ┃ ┃ ┃ ┣ 📜nameChecker.js
 ┃ ┃ ┃ ┗ 📜openWeatherMap.js
 ┃ ┃ ┣ 📂styles
 ┃ ┃ ┃ ┣ 📜base.scss
 ┃ ┃ ┃ ┣ 📜footer.scss
 ┃ ┃ ┃ ┣ 📜form.scss
 ┃ ┃ ┃ ┣ 📜header.scss
 ┃ ┃ ┃ ┗ 📜resets.scss
 ┃ ┃ ┣ 📂views
 ┃ ┃ ┃ ┗ 📜index.html
 ┃ ┃ ┗ 📜index.js
 ┃ ┗ 📂server
 ┃ ┃ ┣ 📜index.js
 ┃ ┃ ┣ 📜mockAPI.js
 ┃ ┃ ┗ 📜owmAPI.js
 ┣ 📂__test__
 ┃ ┣ 📜regenrator-runtime-imports.js
 ┃ ┗ 📜testFormHandler.spec.js
 ┣ 📜.babelrc
 ┣ 📜.env
 ┣ 📜.gitignore
 ┣ 📜LICENSE
 ┣ 📜package-lock.json
 ┣ 📜package.json
 ┣ 📜Procfile
 ┣ 📜README.md
 ┣ 📜webpack.dev.js
 ┗ 📜webpack.prod.js