This app implements a basic travel planner app. Given a destination to travel to and a date, it shows a photograph of the place and the weather forecast.
This was developed as a course requirement for Udacity's Frontend Developer Nanodegree Program.
The project goal is to create an asynchronous web app that uses multiple Web Api chaining and user data to dynamically update the UI.
The full rubric for the project is available here.
Sample responsive outputs for desktop and mobile:
- Start the app using the following command sequence:
git clone <repo link>
npm install
- Register on Dark Sky and Pixabay for developer keys. Place them in a .env file at the root of the project. The app will not start if this is not done.
DARK_SKY_KEY=**********
PIXABAY_KEY=***-***-****
- Depending on your need, start the app with one of the commands
described in next section. The most basic command to start is
npm start
. - Visit https://localhost:3000 on a web-browser. This should load the app GUI.
- Enter the destination you want to visit.
- Enter the date you want to visit on.
- Click 'Save Trip' button. It will show up the weather forecast and a small image related to the destination. xn
The app implements the full rubric. It uses:
- Basic
express
server as a proxy for API requests. webpack-dev-server
andnodemon
for development stage. Both can be invoked in parallel usingnpm run start-dev
.webpack
withnode
for production build. The full build can be invoked usingnpm start
command. It invokes the former utilities serially.jest
for testing. Both frontendapp.js
and backendserver.js
are tested in this. Tests can be invoked usingnpm test
command.
The code implements the following items beyond Udacity's basic rubric:
- Implements REST Countries API in
app.js
. - Implements
localStorage
functionality inapp.js
to retain entry between browser sessions. - The entire code is follows
eslint:recommended
style. The linter is integrated into development webpack config (webpack.dev.js
). - Implement
webpack-merge
to keep webpack configurations DRY. webpack-dev-server
is installed with proxy requests toexpress js node
server. This helps by not having to hardcode full endpoint URLs in the frontendfetch
requests. So,fetch(http://localhost:3000/endPoint)
can simply be replaced withfetch(/endPoint)
. This helps with more sustainable code.