{"id":15099174,"url":"https://github.com/debabrata-pw08-429/qtripdynamic","last_synced_at":"2026-02-05T10:31:18.066Z","repository":{"id":238158238,"uuid":"795996341","full_name":"debabrata-pw08-429/QTRIPDYNAMIC","owner":"debabrata-pw08-429","description":"QTripDynamic : A travel website offering city adventures with features like multi-select filters, reservation support, and backend deployment.","archived":false,"fork":false,"pushed_at":"2024-05-05T14:43:24.000Z","size":239,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-20T14:52:56.610Z","etag":null,"topics":["bootstrap-carousel","conditional-rendering","curl","developer-tools","dom-manipulation","event-handling","localstorage","netlify-cli","responsive-design"],"latest_commit_sha":null,"homepage":"https://deb-qtrip-dynamic-frontend.netlify.app/","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/debabrata-pw08-429.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-04T16:15:16.000Z","updated_at":"2024-12-29T05:28:11.000Z","dependencies_parsed_at":"2024-05-04T17:28:28.708Z","dependency_job_id":"7b511f58-1ae5-4266-bcf6-88b5c0bc112a","html_url":"https://github.com/debabrata-pw08-429/QTRIPDYNAMIC","commit_stats":{"total_commits":4,"total_committers":2,"mean_commits":2.0,"dds":0.25,"last_synced_commit":"4d8ef32c76af4afd2cb0cdff2734c9df57b2a532"},"previous_names":["debabrata-pw08-429/qtripdynamic"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/debabrata-pw08-429%2FQTRIPDYNAMIC","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/debabrata-pw08-429%2FQTRIPDYNAMIC/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/debabrata-pw08-429%2FQTRIPDYNAMIC/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/debabrata-pw08-429%2FQTRIPDYNAMIC/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/debabrata-pw08-429","download_url":"https://codeload.github.com/debabrata-pw08-429/QTRIPDYNAMIC/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239859566,"owners_count":19708861,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["bootstrap-carousel","conditional-rendering","curl","developer-tools","dom-manipulation","event-handling","localstorage","netlify-cli","responsive-design"],"created_at":"2024-09-25T17:07:00.655Z","updated_at":"2026-02-05T10:31:18.012Z","avatar_url":"https://github.com/debabrata-pw08-429.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# QTripDynamic\n\nQTrip is a travel website aimed at travellers looking for a multitude of adventures in different cities. \n\n- **Website URL :** https://deb-qtrip-dynamic-frontend.netlify.app/\n\n# During the course of this project\n\n- Created web pages using HTML and CSS and made them dynamic using JavaScript\n- Improved UX with multi-select filters, image carouselsImplemented conditional rendering of page elements\n- Implemented conditional rendering of page elements\n- Utilized localStorage to persist user preferences at client-side and facilitated reservation form submission using fetch API.\n- Deployed the website using Netlify/Vercel for Frontend and Render for Backend.    \n\n# QTripDynamic Architecture Diagram\n![Layered Architechture](https://directus.crio.do/assets/5ea9a041-3677-44dd-be8c-2f41b84977e9?)\n\n# 1. Fetch data using REST API and dynamically render landing page\n  ### Scope of Work\n     - Retrieved cities data from the backend REST API endpoint using Javascript’s Fetch API\n     - Created HTML for the cities grid with Bootstrap class to add responsiveness\n     - Implemented logic to dynamically plug in city data to the Landing page’s DOM\n ### Skills used\n     - HTML, CSS, JS, Bootstrap, REST APIs, JSON, DOM Manipulation, cURL\n\n ### Basic Overview\n ![secure-api-endpoints](https://directus.crio.do/assets/2ea56c1c-96f7-4a02-ae6f-6889bad99423?)\n\n# 2. Implement the adventures page with multi-select filters\n  ### Scope of Work\n      - Fetched adventures data for the city by invoking the backend API from the page URL’s query parameter\n      - Inserted HTML populated with API response data to the adventure page’s DOM\n      - Implemented logic to add both multi-select and single-select filters\n      - Added logic to persist the filters selected by the user in the browser’s localStorage\n ### Skills used\n     - DOM Manipulation, Bootstrap Flex, Bootstrap Spacing, ES6, localStorage\n     \n ### Basic Overview\n ![secure-api-endpoints](https://directus.crio.do/assets/f6f858c6-409b-4a0f-bbbd-8bc8b8c59739?)\n\n\n# 3. Create the Adventure details page with reservation support and the Reservations page to show all reservations\n  ### Scope of Work\n     - Added a sleek image carousel using Bootstrap2\n     - Implemented reservation logic by using Fetch API to send a POST request to the backend, on form submission\n     - Conditionally rendered the “Sold out” panel and the reservations page based on the API response\n ### Skills used\n     - JS, Bootstrap, Conditional rendering, Bootstrap Carousel\n     \n ### Basic Overview\n ![secure-api-endpoints](https://directus.crio.do/assets/dd79cabf-8e7d-49a1-bf5c-9013ceafa19a?)\n ![secure-api-endpoints](https://directus.crio.do/assets/dbe1d87d-b815-47dd-929a-1f63a57b58a0?)\n ![secure-api-endpoints](https://directus.crio.do/assets/26d7adc8-3889-411f-9409-0eeef8b4360d?)\n     \n# 4. Deploy the QTripDynamic website\n  ### Scope of Work\n     - Deployed the QTripDynamic to render\n     - Configured the QTrip dynamic frontend to use the render deployed backend\n     - Deployed the QTrip dynamic frontend to Netlify\n ### Skills used\n     - Deployment, Render, Netlify\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdebabrata-pw08-429%2Fqtripdynamic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdebabrata-pw08-429%2Fqtripdynamic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdebabrata-pw08-429%2Fqtripdynamic/lists"}