{"id":15880757,"url":"https://github.com/sdkdeepa/travplan-app","last_synced_at":"2026-04-13T22:33:50.581Z","repository":{"id":54305745,"uuid":"340581978","full_name":"sdkdeepa/travPlan-App","owner":"sdkdeepa","description":"Udacity FEND Capstone Project: Created travPlan application from scratch which fetches in data from 3 different APIs, uses webpack, service workers and express server.","archived":false,"fork":false,"pushed_at":"2022-01-07T04:41:42.000Z","size":2245,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-02T05:27:39.156Z","etag":null,"topics":["express","front-end-development","geonames-api","pixabay-api","service-worker","weatherbit-api","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sdkdeepa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-02-20T06:37:44.000Z","updated_at":"2023-03-21T17:11:00.000Z","dependencies_parsed_at":"2022-08-13T11:31:06.115Z","dependency_job_id":null,"html_url":"https://github.com/sdkdeepa/travPlan-App","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sdkdeepa/travPlan-App","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sdkdeepa%2FtravPlan-App","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sdkdeepa%2FtravPlan-App/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sdkdeepa%2FtravPlan-App/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sdkdeepa%2FtravPlan-App/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sdkdeepa","download_url":"https://codeload.github.com/sdkdeepa/travPlan-App/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sdkdeepa%2FtravPlan-App/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31774028,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T20:17:16.280Z","status":"ssl_error","status_checked_at":"2026-04-13T20:17:08.216Z","response_time":93,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["express","front-end-development","geonames-api","pixabay-api","service-worker","weatherbit-api","webpack"],"created_at":"2024-10-06T03:21:29.702Z","updated_at":"2026-04-13T22:33:50.563Z","avatar_url":"https://github.com/sdkdeepa.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Trav Plan Website\n\n# How to run this app?\n\n1. Run `npm install` in the terminal to get the packages required\n\n2. Add credentials to env file - You will need to add your own API credentials to '.env' \n3. Development environment\n      - `npm run build-dev`to run the webpack-dev-server with the development config\n      - `npm start` script to start the express server\n4. Prod environment\n     - `npm run build-prod`to run the webpack-dev-server with the development config\n     - `npm start` script to start the express server \n     - App runs in `http://localhost:3000/`\n\n# Screenshot\n\n![alt text](https://github.com/sdkdeepa/Udacity-FEND-capstone-project/blob/main/travPlan-home.png)\n![alt text](https://github.com/sdkdeepa/Udacity-FEND-capstone-project/blob/main/travPlan-example.png)\n![alt text](https://github.com/sdkdeepa/Udacity-FEND-capstone-project/blob/main/jest.png)\n\n## Project Gif and Videos\n\n![alt text](https://github.com/sdkdeepa/Udacity-FEND-capstone-project/blob/main/travPlan.gif)\n\nhttps://www.youtube.com/watch?v=rUg9_IQwLlM\n\n## References used:\n- [Pixabay](https://pixabay.com/)\n- [Logo creation](https://www.freelogodesign.ca/)\n- [Geonames](https://www.geonames.org/)\n- [Heroku Issue solved](https://stackoverflow.com/questions/55889110/how-do-i-have-geonames-api-work-with-https)\n- [Weatherbit](https://www.weatherbit.io/)\n- [W3Schools](https://www.w3schools.com/) `https://www.w3schools.com/howto/howto_css_form_on_image.asp`\n- [App layout](https://wanderlog.com/)\n- [JS Doc](https://jsdoc.app/)\n- [Local storage](https://www.taniarascia.com/how-to-use-local-storage-with-javascript/)\n- [Adding multiple HTML to webpack](https://www.ivarprudnikov.com/static-website-multiple-html-pages-using-webpack-plus-github-example/)\n- [Testing](https://zellwk.com/blog/endpoint-testing/)\n\n## Images used here are from pixa bay\n\n- [Background](https://cdn.pixabay.com/photo/2015/09/13/05/58/nautical-937738_1280.jpg)\n\n# Development Environment and Architecture\n## Architecture:\nThe project should have a structure like the one shown below. All files shown must be present (Webpack may be split into multiple config files, and names may differ) and the app must successfully render a home page with clear design and functionality added when index.html is loaded in the browser. No errors should display in console.\n\n- Root:\n  - `package.json`\n  - `readme.md`\n  - `webpack.config.js`\n  - src folder\n    - server folder\n      - `server.js` (name will vary)\n    - client folder\n      - `index.js`\n      - html/views folder\n        - `index.html`\n      - js folder\n        - `app.js` (name will vary)\n      - styles folder\n        - `style.scss` (name will vary - may be broke into partials)\n\n## Webpack\nWebpack config should contain at least 3 scripts, express server, build and test. Additionally, dev server may be included.\n## Testing\nThere should be at least one test for the express server and application javascript\n## Offline capabilities\nThe project must have service workers installed.\n\n\n# HTML \u0026 CSS\n## Usability\nAll features are usable across modern desktop, tablet, and phone browsers.\n## Styling\nStyling is set up in a logical way. All interactive elements have hover states.\n## HTML Structure\nHTML structure should be indented properly with classes and ID’s that make sense.\n## Visual Design\nThe design should clearly be different from the design used in projects 3 and 4.\n\n# API and JS Integration\n## Server\n`src \u003e server \u003e server.js`\nServer should be a near duplication of project 3 with the exception of additional added member: value pairs.    \n## index.js\n`src \u003e client \u003e index.js`\n- At least one function should be imported.\n- At least one event listener should be imported.\n- (styles referenced in html/css)\n## app.js\n`src \u003e client \u003e js \u003e app.js`\n1. There should be URLS and API Keys for at least 3 APIs, including Geonames, Weatherbit, and Pixabay. You can feel free to use more than 3 APIs.\n2. There should be a primary object with placeholder member value pairs.\n3. There should be a primary function that is exported to index.js.\n## Extend Options / Ways to Stand Out\nAt least one option from the Extend your Project/Ways to Stand Out sections have been added. Please add a Note to your reviewer which one you chose to implement, or add into your `README`.\n\n# Documentation\n## README\nA README file is included detailing the app and all dependencies.\n### Other requirements:\nThe Readme file should have non-default text in it that is specific to this project. It doesn’t have to be thorough, but should have some basic info. Bonus points if correct markdown is used.\n## Comments\nComments are present and effectively explain longer code procedure when necessary.\n## Code Quality\nCode is formatted with consistent, logical, and easy-to-read formatting as described in the Udacity JavaScript Style Guide.\n\n# Suggestions to Make Your Project Stand Out!\nAt least one of these is required, but the rest are great additional ways to further customize and improve your project!\n\n- Add end date and display length of trip.\n- Pull in an image for the country from Pixabay API when the entered location brings up no results (good for obscure localities).\n- Allow user to add multiple destinations on the same trip.\n- Pull in weather for additional locations.\n- Allow the user to add hotel and/or flight data.\n- Multiple places to stay? Multiple flights?\n- Integrate the [REST Countries API](https://restcountries.eu/) to pull in data for the country being visited.\n- Allow the user to remove the trip.\n- Use [Local Storage](https://www.taniarascia.com/how-to-use-local-storage-with-javascript/) to save the data so that when they close, then revisit the page, their information is still there.\n- Instead of just pulling a single day forecast, pull the forecast for multiple days.\n- Incorporate icons into forecast.\n- Allow user to Print their trip and/or export to PDF.\n- Allow the user to add a todo list and/or packing list for their trip.\n- Allow the user to add additional trips(this may take some heavy reworking, but is worth the challenge).\n        a) Automatically sort additional trips by countdown.\n        b) Move expired trips to bottom/have their style change so it’s clear it’s expired.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsdkdeepa%2Ftravplan-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsdkdeepa%2Ftravplan-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsdkdeepa%2Ftravplan-app/lists"}