FEND Capstone Project: Travel Planner

Overview

Travel Planner is the capstone project of Udacity Front End Developer nanodegree program. It requeres to build JavaScript-based SPA than puts together information about your trip.

The goal of the project is to practice with:

• Setting up Webpack
• Webpack loaders and plugins
• Responsive layouts
• Using APIs and creating requests to external URLs
• Dynamic DOM manipulation
• Service workers
• Jest tests

Features

To plan a trip, a user has to specify destination city, destination country, and start date for their trip.

Based on user input, Travel Planner provides the following information:

• Number of days before the trip.
• Typical weather for the start date if trip is less than 16 days away and today's weather otherwise.
• Min and max temperature.
• The picture of destination city (the most popular picture of the specified destination in Pixabay library).

APIs Used

Travel Planner app uses the following APIs:

• Geonames
• Weatherbit
• Pixabay

Getting Started

Prerequisites

1. Download Node.js from here.
2. Clone this repo.
3. cd into project directory.
4. Install project dependencies.

npm install

5. Get Geonames username.
6. Get Weatherbit API key.
7. Get Pixabay API key.
8. In the root of the project, create the .env file.
9. In your env file, specify the credentials you got at steps 5–7.

PIXABAY_API_KEY = <your-pixabay-api-key>
WEATHERBIT_API_KEY = <your-weatherbit-api-key>
GEONAMES_USERNAME = <your-geonames-username>

Running

Test mode

To run the app in test mode, use the following command.

nmp run test

Development mode

To run the app in development mode, use the following command.

npm run build-dev

Production mode

To run the app in production mode, follow the steps below.

1. Build the dist folder.

npm run build-prod

2. Start the server.

npm run start

3. Open localhost:8081 in your browser.

Authors

Alexandra Baturina