Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alexandrabaturina/travel-planner
JavaScript-based SPA than puts together all necessary info about your trip
https://github.com/alexandrabaturina/travel-planner
development-mode express-middleware geonames-api jest-tests node-js pixabay-api production-mode scss service-workers weatherbit-api webpack
Last synced: 8 days ago
JSON representation
JavaScript-based SPA than puts together all necessary info about your trip
- Host: GitHub
- URL: https://github.com/alexandrabaturina/travel-planner
- Owner: alexandrabaturina
- Created: 2020-06-02T22:17:18.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-12-14T05:52:17.000Z (17 days ago)
- Last Synced: 2024-12-14T06:26:18.450Z (17 days ago)
- Topics: development-mode, express-middleware, geonames-api, jest-tests, node-js, pixabay-api, production-mode, scss, service-workers, weatherbit-api, webpack
- Language: JavaScript
- Homepage:
- Size: 2.67 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# FEND Capstone Project: Travel Planner
## Overview
**Travel Planner** is the capstone project of Udacity [Front End Developer](https://www.udacity.com/course/front-end-web-developer-nanodegree--nd0011) nanodegree program. It requeres to build JavaScript-based SPA than puts together information about your trip.
The goal of the project is to practice with:
* Setting up [Webpack](https://webpack.js.org/)
* Webpack loaders and plugins
* Responsive layouts
* Using APIs and creating requests to external URLs
* Dynamic [DOM](https://www.w3schools.com/js/js_htmldom.asp) manipulation
* Service workers
* [Jest](https://jestjs.io/) tests
## Features
To plan a trip, a user has to specify destination city, destination country, and start date for their trip.
Based on user input, **Travel Planner** provides the following information:
* Number of days before the trip.
* Typical weather for the start date if trip is less than 16 days away and today's weather otherwise.
* Min and max temperature.
* The picture of destination city (the most popular picture of the specified destination in [Pixabay](https://pixabay.com/images/search/library/) library).
## APIs Used
**Travel Planner** app uses the following APIs:
* [Geonames](http://www.geonames.org/export/web-services.html)
* [Weatherbit](https://www.weatherbit.io/api/weather-forecast-16-day)
* [Pixabay](https://pixabay.com/api/docs/)
## Getting Started
### Prerequisites
1. Download Node.js from [here](https://nodejs.org/en/).
2. Clone this repo.
3. ```cd``` into project directory.
4. Install project dependencies.
```
npm install
```
5. Get [Geonames](http://www.geonames.org/export/web-services.html) username.
6. Get [Weatherbit](https://www.weatherbit.iohttps://pixabay.com/api/docs//account/create) API key.
7. Get [Pixabay](https://pixabay.com/api/docs/) API key.
8. In the root of the project, create the ```.env``` file.
9. In your ```env``` file, specify the credentials you got at steps 5–7.
```
PIXABAY_API_KEY =
WEATHERBIT_API_KEY =
GEONAMES_USERNAME =
```
### Running
#### Test mode
To run the app in test mode, use the following command.
```
nmp run test
```
#### Development mode
To run the app in development mode, use the following command.
```
npm run build-dev
```
#### Production mode
To run the app in production mode, follow the steps below.
1. Build the ```dist``` folder.
```
npm run build-prod
```
2. Start the server.
```
npm run start
```
3. Open ```localhost:8081``` in your browser.
### Authors
Alexandra Baturina