Skip to content

Latest commit

 

History

History
69 lines (60 loc) · 2.06 KB

README.md

File metadata and controls

69 lines (60 loc) · 2.06 KB

Udacity Capstone - Travel App

Capstone Project of the Udacity Front End Web Developer Nanodegree Program

The aim of this project is to use multiple APIs and build tools to assist in creating a web application that allows users to fetch the data for an upcoming trip. This data comes from several different APIs/Enpoints. When a user submits a City and a date, the web application makes use of the Geonames API, WeatherBit API, and the Pixabay API to display the location data, weather, and photo of the trip destination.

Technology & Build Tools

  • HTML
  • SASS/CSS
  • JavaScript
  • Node
  • Express
  • Webpack/webpack-dev-server
  • Babel
  • Jest
  • Workbox/Service-Worker
  • Geonames API
  • WeatherBit API
  • Pixabay API

Installation

Install node and npm from your terminal

  1. Clone repo
git clone <repo>
  1. Install npm
npm install
  1. Install required loaders and plugins
# Development mode installations
npm i -D @babel/core @babel/preset-env babel-loader
npm i -D style-loader node-sass css-loader sass-loader
npm i -D clean-webpack-plugin
npm i -D html-webpack-plugin
npm i -D mini-css-extract-plugin
npm i -D optimize-css-assets-webpack-plugin terser-webpack-plugin
npm i -D workbox-webpack-plugin
  1. Sign up for an API key at Geonames, WeatherBit, and Pixabay API websites

  2. Configure environment variables

  npm install dotenv

Create a .env file at root of your project

touch .env

Add API keys to your .env file for each API enpoint:

GEONAMES_API_KEY=***************
WEATHERBIT_API_KEY=***************
PIXABAY_API_KEY=***************
  1. Start the web application npm run build-prod | Build project npm start | Run project

  2. Open browser at http://localhost:8082/

  3. Enter name of city and date in their respective fields.

  4. Hit submit.

Additional Functionality

  • Pull in an image for the country from Pixabay API when the entered location brings up no results (good for obscure localities).