zh-betina / travel-app

PLEASE, NOTE, the CORS solution I applied at the time is not working anymore. Therefore, the app is not working properly. Please, rather see the code than the deployment itself. To be fixed soon. Final capstone project for Udacity's Front End Development Nanodegree. Web app allowing to plan your trip, with weather and hotel info on chosen day and location. Randomly loaded and displayed location's photo. 3 different REST API used.

Trip-Prepper App

Deployed on Heroku

npm install ➡️ will get you all necessary dependencies.
npm run start ➡️ for locally running server.js on port 8081.
npm run test ➡️ for running jest tests.
npm run build-prod ➡️ building production folder (dist).
npm run build-dev ➡️ running the app in the development mode.\

Optional features:

(At least one of these was required)

Applied in the project ⬇️

• • Pull in an image for the country from Pixabay API when the entered location brings up no results (good for obscure localities).
    • Additional feature added by myself: choose random picture from the set of pictures available in the received objects.
• • Integrate the REST Countries API to pull in data for the country being visited.
    • REST Countries API replaced by Amadeus API for cheap hotel deals data.
• • Allow the user to remove the trip.
• • Use Local Storage to save the data so that when they close, then revisit the page, their information is still there.
• • Instead of just pulling a single day forecast, pull the forecast for multiple days.

To be developed in the future for further learning purposes: ⬇️

• • Add end date and display length of trip.
• • Allow user to add multiple destinations on the same trip.
    • Pull in weather for additional locations.
• • Allow the user to add hotel and/or flight data.
• • Incorporate icons into forecast.
• • Allow user to Print their trip and/or export to PDF.
• • Allow the user to add a todo list and/or packing list for their trip.
• • Allow the user to add additional trips.
• • Automatically sort additional trips by countdown.
• • Move expired trips to bottom/have their style change so it’s clear it’s expired.

Useful resources:

Knowledge:

• Three-Line Menu: Worth the Minimal Hamburger Icon?,
• Beginner's Guide to SEO,
• How to use Local Storage with JavaScript,
• Generating multiple html files,
• Window.matchMedia() - MDN,
• 3 ways to fix the CORS error(...),
• CSS Dropdowns,
• How to handle the IF ELSE in promise.then,
• Amadeus API Documentation,
• JavaScript Start-Up Optimization,
• Check if object contains key - JavaScript,
• Plus dozens of StackOverflow threads on various CORS problems, MDN and Jest documentation.

Media:

• Pexels - bgr image,
• Img for logo, Icons8:
• Loader,
• Weather icons

Software:

• Krita,
• Figma,
• Atom,
• Postman,