Real-world project from Front End Web Developer at Udacity.
A dynamic travel weather planning application that helps people plan trips by generating weather forecasts for the places they’re visiting.
It obtains the desired trip location and the date you are leaving, and displays the weather and an image of the location using information obtained from external APIs.
If the trip is within a week, you will get the current weather forecast. If the trip is in the future, you will get a predicted forecast.
demo.mov
This project aims to give us the opportunity to put all of the skills we’ve developed throughout the Front End Web Developer Nanodegree program into one project to build our own custom travel app.
It is very JavaScript heavy, but it is still expected us create clean and appealing HTML/CSS. We will also be targeting the DOM, working with objects, and retrieving data from 3 APIs in which one of those is reliant on another to work.
Finally, this is all going to be done in a Webpack environment, using an express server, and wrapped up with service workers.
- Node.js
- Express
- Asynchronous Javascript
- Sass
- Webpack
- Jest
- Service Worker
- ESLint
The OpenWeather API is fantastic but it doesn’t let us get future data for free and it’s not that flexible with what information we enter.
So we are going to use:
- Weatherbit API: it only takes in coordinates for weather data.
- Geonames API: to get those coordinates.
- Pixabay API: displays an image of the location entered.
Make sure Node.js is installed and in your PATH.
- In the
rootdirectory:
$ git clone https://github.com/Foystor/Travel-Planner-App.git
- Get to the
travel-planner-appdirectory:
$ cd travel-planner-app
- Create a new
.envfile and fill it with your API key:
GEONAMES_KEY = '&maxRows=10&username=********'
WEATHERBIT_KEY = '&key=**************************'
PIXABAY_KEY = '&key=**************************'
- Install packages:
$ npm install
- Build the project:
$ npm run build
- Start the server:
$ npm run start
- Navigate to http://localhost:8000/