A dynamic travel website that can be used to browse adventures and make reservations.
Back
A dynamic travel website that can be used to browse adventures and make reservations.
QTrip is a travel website aimed at travellers looking for a multitude of adventures in different cities.
During the course of this Micro-Experience, the developer:
Created web pages using HTML and CSS and made them dynamic using JavaScript
Improved UX with multi-select filters, image carousels
Implemented conditional rendering of page elements
Utilized localStorage to persist user preferences at client-side
Used JQuery to facilitate the reservation form submission
Deployed the website using Netlify and Heroku
`
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
Image(s):
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:
JS, Bootstrap Flex, Bootstrap Spacing, ES6, localStorage
Image(s):
Scope of work:
Added a sleek image carousel using Bootstrap
Implemented reservation logic by using JQuery 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, JQuery, Bootstrap, Conditional rendering, Bootstrap Carousel
Image(s):
Scope of work:
Deployed the QTrip backend to Heroku
Configured the QTrip dynamic frontend to use the Heroku deployed backend
Deployed the QTrip dynamic frontend to Netlify
Skills used:
Deployment, Heroku, Netlify