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
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).
Travel Planner app uses the following APIs:
- Download Node.js from here.
- Clone this repo.
cd
into project directory.- Install project dependencies.
npm install
- Get Geonames username.
- Get Weatherbit API key.
- Get Pixabay API key.
- In the root of the project, create the
.env
file. - 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>
To run the app in test mode, use the following command.
nmp run test
To run the app in development mode, use the following command.
npm run build-dev
To run the app in production mode, follow the steps below.
- Build the
dist
folder.
npm run build-prod
- Start the server.
npm run start
- Open
localhost:8081
in your browser.
Alexandra Baturina