This is implementation for Project: Travel Planner App The Travel Planner App is a web tool that allows users to plan his next trip.
The goal of this project is to practice with:
- Setting up Webpack
- Sass styles
- Webpack Loaders and Plugins
- Creating layouts and page design
- Using APIs and creating requests to external URLs
The Application features
- Search for city and return city data
- Get Weather Forecast for arrived date
- Get Destination images and make it as slider.
- Get all trip Weather Forecast
- Show current Weather icon
- Calculate Duration time
- Calculate Days Left to the trip
- Save trip to Saved tab (Local storge)
- Add more information about trip like: Flight ,Lodging ,List ,Notes
- Update data trip by save find it by geonameId
- Remove trip from the (Local storge)
npm install
if you face problem use this:
npm install --legacy-peer-deps
node v20.11.0
npm 10.2.4
To run Server side on dev environment:
npm run start
this will run serve on port 8888
To run client side use:
npm run build-dev
you can now check this URL to access the project
http://localhost:3000/
you can run jest for unit test using:
npm run test
Expected result
Test Suites: 3 passed, 3 total
Tests: 5 passed, 5 total
Snapshots: 0 total
You need to creat account for https://www.weatherbit.io , https://geonames.org, https://pixabay.com and change the .env to your API key
API_KEY = 647*********************
WEATHERBIT_URL = 'https://api.weatherbit.io/v2.0/forecast/daily'
WEATHERBIT_KEY = '&key=63e49*********************'
# API URL for geonames
GEONAMES_URL = 'http://api.geonames.org/searchJSON?q='
GEONAMES_KEY = '&maxRows=10&username=zei**********b'
# API URL fro pixabay
PIXABAY_URL = 'https://pixabay.com/api/?&image_type=photo&q='
PIXABAY_KEY = '&key=33701545-f6503********************'
I already deployed the project to this url
https://travel-planner-app-kappa.vercel.app/
Links
Thank you so much already for using my projects! If you want to go a step further and support my open source work, buy me a coffee:
