Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/debabrata-pw08-429/qtripdynamic
QTripDynamic : A travel website offering city adventures with features like multi-select filters, reservation support, and backend deployment.
https://github.com/debabrata-pw08-429/qtripdynamic
bootstrap-carousel conditional-rendering curl developer-tools dom-manipulation event-handling localstorage netlify-cli responsive-design
Last synced: 2 days ago
JSON representation
QTripDynamic : A travel website offering city adventures with features like multi-select filters, reservation support, and backend deployment.
- Host: GitHub
- URL: https://github.com/debabrata-pw08-429/qtripdynamic
- Owner: debabrata-pw08-429
- Created: 2024-05-04T16:15:16.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-05-05T14:43:24.000Z (5 months ago)
- Last Synced: 2024-09-25T17:06:37.379Z (2 days ago)
- Topics: bootstrap-carousel, conditional-rendering, curl, developer-tools, dom-manipulation, event-handling, localstorage, netlify-cli, responsive-design
- Language: JavaScript
- Homepage: https://deb-qtrip-dynamic-frontend.netlify.app/
- Size: 233 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# QTripDynamic
QTrip is a travel website aimed at travellers looking for a multitude of adventures in different cities.
- **Website URL :** https://deb-qtrip-dynamic-frontend.netlify.app/
# During the course of this project
- Created web pages using HTML and CSS and made them dynamic using JavaScript
- Improved UX with multi-select filters, image carouselsImplemented conditional rendering of page elements
- Implemented conditional rendering of page elements
- Utilized localStorage to persist user preferences at client-side and facilitated reservation form submission using fetch API.
- Deployed the website using Netlify/Vercel 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, Render, Netlify