https://github.com/vivekshaarma/qtrip-dynamic
QTrip is a travel website aimed at travellers looking for a multitude of adventures in different cities.
https://github.com/vivekshaarma/qtrip-dynamic
conditional-rendering css3 es6 event-handling html5 javascript localstorage responsive-design rest-api
Last synced: 3 months ago
JSON representation
QTrip is a travel website aimed at travellers looking for a multitude of adventures in different cities.
- Host: GitHub
- URL: https://github.com/vivekshaarma/qtrip-dynamic
- Owner: vivekshaarma
- Created: 2025-04-14T06:14:09.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-15T04:23:09.000Z (about 1 year ago)
- Last Synced: 2025-04-15T05:26:10.945Z (about 1 year ago)
- Topics: conditional-rendering, css3, es6, event-handling, html5, javascript, localstorage, responsive-design, rest-api
- Language: JavaScript
- Homepage: https://qtrip-dynamic-vivek-frontend.netlify.app/
- Size: 266 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# QTripDynamic
# During this project
- Created web pages using HTML and CSS and made them dynamic using JavaScript
- Improved UX with multi-select filters and image carouselsImplemented conditional rendering of page elements
- Implemented conditional rendering of page elements
- Utilized localStorage to persist user preferences on the client side and facilitated reservation form submission using fetch API.
- Deployed the website using Netlify for Frontend and Render for Backend.
# QTripDynamic Architecture Diagram
# 1. Fetch data using REST API and dynamically render landing page
### Scope of Work
- Retrieved cities data from the backend REST API endpoint using Javascript’s Fetch API
- Created HTML for the cities grid with Bootstrap class to add responsiveness
- Implemented logic to dynamically plug in city data to the Landing page’s DOM
### Skills used
- HTML, CSS, JS, Bootstrap, REST APIs, JSON, DOM Manipulation, cURL
### Basic Overview
# 2. Implement the adventures page with multi-select filters
### Scope of Work
- Fetched adventures data for the city by invoking the backend API from the page URL’s query parameter
- Inserted HTML populated with API response data to the adventure page’s DOM
- Implemented logic to add both multi-select and single-select filters
- Added logic to persist the filters selected by the user in the browser’s localStorage
### Skills used
- DOM Manipulation, Bootstrap Flex, Bootstrap Spacing, ES6, localStorage
### Basic Overview
# 3. Create the Adventure details page with reservation support and the Reservations page to show all reservations
### Scope of Work
- Added a sleek image carousel using Bootstrap2
- Implemented reservation logic by using Fetch API to send a POST request to the backend, on form submission
- Conditionally rendered the “Sold out” panel and the reservations page based on the API response
### Skills used
- JS, Bootstrap, Conditional rendering, Bootstrap Carousel
### Basic Overview
# 4. Deploy the QTripDynamic website
### Scope of Work
- Deployed the QTripDynamic to render
- Configured the QTrip dynamic frontend to use the render deployed backend
- Deployed the QTrip dynamic frontend to Netlify
### Skills used
- Deployment, Netlify