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.
- HTML
- SASS/CSS
- JavaScript
- Node
- Express
- Webpack/webpack-dev-server
- Babel
- Jest
- Workbox/Service-Worker
- Geonames API
- WeatherBit API
- Pixabay API
Install node and npm from your terminal
- Clone repo
git clone <repo>
- Install npm
npm install
- 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
-
Sign up for an API key at Geonames, WeatherBit, and Pixabay API websites
-
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=***************
-
Start the web application
npm run build-prod| Build projectnpm start| Run project -
Open browser at http://localhost:8082/
-
Enter name of city and date in their respective fields.
-
Hit submit.
- Pull in an image for the country from Pixabay API when the entered location brings up no results (good for obscure localities).