Skip to content

This is the Front End Developer Capstone Project for Udacity, which is for me to build out a Travel App that obtains a desired trip location & date from the user, and displays the weather and an image of the location using information obtained from external APIs.

lly03/travel-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Travel App

Project Description

This is the capstone project for Udacity, where I am required to build a Travel App that obtains a desired trip location & date from the user. That information will then display the weather and an image of the location using information obtained from external APIs. The APIs that I used are Geonames API, Weatherbit API and Pixabay API.

Features included in the App:

  • Ability to add multiple trips
  • Ability to delete a trip
  • Each trip has a "To do" note taker
  • User can generate a pdf file for each trip
  • Retrieves weather data depending on the trip's length
  • A relevant image will appear depending on the trip's location

Dependencies and Packages

Usage

This project does not have the API Keys for Weatherbit API and Pixabay API. So if you want to run this project in your desktop, you will need to register for the API Keys and have them saved in the .env file as:

WEATHER_API_KEY=****************
PIXABAY_API_KEY=*****************

To run the project, you'll need to have NodeJS in your desktop. In the project's directory, in the terminal, you'll need to run:

npm install

and afterwards,

npm run build-prod

This is so that your project's folder will have a dist folder containing all the files bundled by webpack. The server also points to this folder, so running those commands is necessary.

To run the web application you can run the following command line in your terminal.

npm start

Then in your browser, go to localhost:8080 where your web app is at.

Screenshots of the Travel App

travel app

"The travel app when you first enter upon the site"


modal form for add trip

"The modal form, where users enter their trip destination"


trip card with the current weather

"The card that displays the trip: Current Weather"


trip card with the forecast weather

"The card that displays the trip: Forecast Weather"


to do list

"The to-do-list"


mobile view for travel app

"Responsive Design: Mobile View"


mobile view for travel app with modal

"Responsive Design: Mobile View with Modal Form"

About

This is the Front End Developer Capstone Project for Udacity, which is for me to build out a Travel App that obtains a desired trip location & date from the user, and displays the weather and an image of the location using information obtained from external APIs.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published