This travel app, at a minimum, obtains a desired trip location & date from the user, and displays weather and an image of the location using information obtained from external APIs.
The project includes a simple form where you can enter the location you are traveling to and the date you are leaving. If the trip is within a week, you will get the current weather forecast. If the trip is in the future, you will get a predicted forecast. It uses Weatherbit API which only takes in coordinates for weather data and those coordinates are retrieved from the Geonames API. Once, all of this data is colleted, its displayed in the User Interface along with an image of the location entered; for this, the Pixabay API is used.
- if input value is invalid, a helpful error message is displayed
- if its valid, an API call is done and the result is displayed in UI
- it works offline with the help of service-worker set up in webpack
- it uses the "dotenv" environment variable to hide private API keys
- it has unit-testing done in "Jest" to test the behavior of functions
- it has separate development and production configurations for Webpack
- it has the developer environment set up with the Webpack dev server
- it minifies javascript and style files in the production environment
check out the web app here: https://trawelo.herokuapp.com/
- Backend-Server:
- ExpressJS(NodeJS)
- Async/Await
- UI (Front-end):
- Vanilla Javascript
- Sass
- HTML
- Tools:
- Webpack
- Axios
- Git version Control System
- Github
- Testing:
- Jest
| Command | Action |
|---|---|
1) npm install |
install dependencies |
2) npm run prod |
Build project |
3) npm start |
Run project |
- Webpack
- Dev Configs:
webpack.config.dev.js- not optimized build
- source map
- Production
webpack.config.prod.js- optimized build
- auto generated HTML from template
- Dev Configs:
- Dependency
package.json
Testing is done with Jest. To run test, use the command npm test. To see a full coverage of all the tests, add { "test": "jest --coverage", } to package.json and run npm test to run test and generate a new folder called "coverage". Then, run "Open with Live Server" on index.html in "coverage > Icov-report" in VScode.
-
1) input a desired trip location & (departure) date from the user
-
2) output weather & image of the location using info obtained from external APIs
-
3) Have a countdown to see how soon the trip is & store the data
-
4) Be set up with Webpack, Express, Node, and Sass, & Service Workers
-
5) Have separate dev and prod configurations for Webpack
-
6) Have the developer environment set up with the Webpack dev server
-
7) Make request to at least 3 external APIs: Weatherbit, Pixabay, GeoNames API
-
8) Minify js and Sass styles in the production environment
-
9) Response from the API must be added to the view for a user to see
-
10) Be able to show content offline
-
1) Add end date and display length of trip
-
2) Pull in an image for the country from Pixabay API when the entered location brings up no results (good for obscure localities)
-
3) Integrate the REST Countries API to pull in data for the country being visited
-
4) Use Local Storage to save the data so that when they close, then revisit the page, their info is still there
-
5) Instead of just pulling a single day forecast, pull the forecast for multiple days
-
6) Incorporate icons into forecast
-
7) Allow user to Print their trip and/or export to PDF
-
8) Allow user to add multiple destinations on the same trip
- Pull in weather for additional locations
-
9) Allow user to remove the trip
-
10) Allow user to add hotel and/or flight data
-
11) Allow user to add a todo list and/or packing list for their trip.
-
12) Allow user to add additional trips (this may take some heavy reworking, but is worth the challenge)
-
Automatically sort additional trips by countdown
-
Move expired trips to bottom/have their style change so it’s clear it’s expired
-
-
13) Check past years: get weather on the current day for the past 3 years
-
14) Host the dynamic web app on heroku