Front-End-Web-Developer-Nanodegree

Project 7: Travel Assistant

Udacity Front End Developer Nanodegree Program

Following are the project prerequisites:

Webserver - Node
Web application framework for routing - Express
Build tool - Webpack. Using webpack, we will set up the app to have dev and prod environments, each with their own set of tools and commands.
External script - Service Worker
External API - Geonames, WeatherBit, Pixabay and Restcountries
HTML structure

Requirements

This project aims to give an opportunity to put all of the skills participant learned into one project to build own custom travel app. Due to the nature of this course, it is very JavaScript heavy, but it is still expected to write clean and appealing HTML/CSS. Participant has 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 done in a Webpack environment, using an express server, and wrapped up with service workers.

Travel Assistant

Travel Assistant is a powerful tool to plan your Trips. You can create travel plans, add flight’s dates, create to do lists. To lists is a good way to Reach new productivity peak! People often forget something importan when planning trip. Plan your trip before time comes and not too late! Here you can create as many to do lists as you want! This app was created as part of Udacity Nano Degree program as final project.

This project helped with :speech_balloon:

Developement Strategy Used :speech_balloon:

Set up with Webpack, Express, Node, and Sass, and Service Workers
Separated dev and prod configurations for Webpack
Developer environment set up with the Webpack dev server
Added one form field
Created request to the Meaningcloud API
Used Sass for styling
Used Minify js and styles in the production environment
Added response from the API to the view for a user to see
Added Service workers to be able to show content offline

Optional tasks completed :speech_balloon:

Added modifications by me :speech_balloon:

Technologies Used

Html
Css
JavaScript
Node
Express
Webpack
Jest
Workbox
API: Geonames, WeatherBit, Pixabay and Restcountries

Results

Profile Icon Selection

Welcome message for the first time joining platform

New Trip Plan with Live Preview

Loaded Trip

Print or Save to Pdf

Create List Section

About Section

Contacts Section

API Used

This project using 4 API Geonames, WeatherBit, Pixabay and Restcountries.

To set API you need to create a file named .env with the following code and your API credentials.
```
API_KEY_GEONAMES = geoname USERNAME
API_KEY_WEATHERBIT = API KEY
API_KEY_PIXABAY = API KEY
```

Deployment

To get the project up and running follow the steps below:

Open Terminal & navigate to project folder
```
cd project-7-travel-app
cd travel-app
```
To set up project environment, make sure that the Node and packages (Express, Cors and Body-Parser) installed, and which are used to create the server. Install all dependencies to run.
```
npm install
```