Tripodream

Demo • Description • Key Features • Demonstration • Technologies Used • Getting Started • Testing • Error Handling

Deployed Version

For live demo please visit 👉 https://tripodream.herokuapp.com/

Description

TRIPODREAM is a single-page web application that allows users to perform trip planning. The app obtains a desired trip location & date from the user and displays weather forecast or predictions and an image of the location using information obtained from external APIs. Users can add flights, packing list and notes for the upcoming trip. All information is stored in local storage so that when they close, then revisit the page, their information is still there. Users can edit they trips and export them to PDF.

This project was final capstone project for Udacity Frontend Web Developer Nanodegree which I graduated from on December 14, 2021.

Key Features

• Add new trip
  • Display forecasted or predicted weather from VisualCrossing API
  • Incorporate icons into forecast
  • Display image of the location (or the country) from Pixabay API
  • Display trip countdown
• Add additional information for the trip
  • Multiple flights, for each flight extra data is pulled from Amadeus API
  • Todo list/packing list
  • Notes
• Multiple trips
  • Use Local Storage to save the data
  • Automatically sort additional trips by countdown
  • Next upcoming flight is displayed
  • Move expired trips to bottom and have them greyed out
  • Allow the user to remove the trip
• Export
  • Allow user to export they trip to PDF
• Travel inspirations
  • Tag cloud with random destinations is displayed, onclick this destination is added to the search form

Demonstration

Home Page :

Add new trip:

Edit saved trips :

Print pdf :

Technologies Used

• JavaScript
• Node.js / Express.js
• HTML / SASS
• Webpack
• axios
• jsPDF
• TagCloud
• Amadeus API
• Geonames API
• Pixabay API
• VisualCrossing API
• Workbox
• Jest

Getting Started

Prerequisites

Make sure Node and npm are installed from the terminal

$ node -v
$ npm -v

---

Installation

1. Fork this repo, then clone the app down to your computer:

   $ git clone  https://github.com/hkzone/Tripodream.git

2. cd into your new folder and install all the dependencies by running:

   $ npm i

3. Sign up for API keys with:

• Amadeus API
• Geonames API
• Pixabay API
• VisualCrossing API
  

4. Configure environment variables by creating new .env file in the root of your project. Fill the file with variables as bellow:

   PORT=3000
   AmadeusAPIKey=*******************************
   AmadeusAPISecret=****************************
   apiKeyGeonames=******************************
   apiKeyPixabay=*******************************
   apiKeyVisualCrossing=************************

5. Run the app in development mode at http://localhost:8081/, in production mode at http://localhost:8080/

   Command	Action
   npm run build-prod	Build project
   npm start	Run project
   npm run dev	Run webpack dev server

---

Testing

Testing is done with Jest. This project has a Testing Units that can be found at __test__ folder in the root directory. To run tests you can use the following NPM command:

$ npm run test

---

Error handling

• User will be informed about uncomplete data for the search.
• There will be notification with description for all errors returned by APIs.
• If no images are found for user-entered city by Pixabay, image of country will be used instead.
• There will be notification for any other errors.