The app integrates data parsed from the responses of four APIs to generate a trip summary card and PDF containing itinerary information input by the user.

• Use of Express as a back-end framework
• Use of Fetch API for web requests
• Use of Webpack module bundler as a build tool, in concert with the following plugins:
  • Babel, to translate ES6 JavaScript into vanilla JS compatible with any browser
  • Loaders, to translate Sass stylesheets into vanilla CSS
  • Minimizers, to reduce file sizes of built assets for browser optimization
  • Webpack Dev Server, to view live updates during development
  • dotenv, to keep private information (like API keys) hidden from client view in production
• Unit testing with Jest

• Project Requirements
• Additional Features
• Dependencies
• Installation
• Development Mode

(Back to top)

This project was completed for the Udacity Front End Web Developer Nanodegree Program.

Criteria are listed in this rubric. Some of the key requirements are:

• Retrieval of data from at least 3 APIs
• Implementation of service-workers for pre-caching
• A countdown to the departure date for each trip
• Fully responsive styling

(Back to top)

Beyond the minimum requirements listed above, I have implemented:

• Option to change the app "theme" (background image & color scheme)
• A default image to display on the trip card for cases where no photo exists for that city in Pixabay
• Validation of the user's travel dates
• Automatic reformatting of the input destination city into proper noun styling
• Animations during load time after adding a new trip
• Option to remove a trip
• Ability to add and edit key information in an itinerary for each trip
• Ability to view itinerary data in a one-page PDF display alongside the 5-day weather forecast for the trip destination (Note that ability to print this PDF has not yet been implemented)

(Back to top)

To run this app, you'll need the following installed globally on your machine:

• Node.js
• NPM

Additional dependencies (build tools & plugins, all listed in package.json) will be installed locally within the directory containing the project files.

(Back to top)

1. Clone this repo into the directory of your choice:

git clone https://github.com/neutralpearl/TravelApp.git

2. From that directory, use the following command to initiate installation of each of the project dependencies listed in the package.json folder:

npm install

3. Obtain API keys / webservices permissions from:

• Geonames
• Weatherbit Current Weather
• Weatherbit 16-Day Forecast
• Pixabay .

4. From the 'src' folder for the project, create a new file named ".env". (Do not modify this filename!) In this new file, copy-paste the following, replacing the asterisks with your own API keys. (Note that your key for Geonames is your username!)

GEONAMES_KEY=**************************

WEATHERBIT_KEY=**************************

PIXABAY_KEY=**************************

3. Run the Express server by inputting this command into one terminal:

npm run start

The server will then start running on port 3000.

4. Open a 2nd terminal and build the production version of the app using this command;

npm run build-prod

5. View the live app

In a browser window (ideally in incognito mode), navigate to http://localhost:3000.

(Back to top)

If you'd like to make adjustments to this project and see the impact of those changes in real time, first start the server with:

npm run start

...otherwise the app will not be able to fetch your stored API key from the server.

Then, enter this command in a 2nd terminal:

npm run build-dev

This will launch the app using Webpack Dev Server on port 4000. Navigate to http://localhost:4000 to view the app.

Note that the dev server automatically reloads the app when changes are made to JS or CSS files within the project, but you will have to manually refresh the page in your browser to see any changes made to the src/client/views/index.html file.