QTrip-Dynamic

Live Demo https://gurpreetqtripdynamic.netlify.app/

About the Project: Check out this industry-like project created with Crio, https://crio.do/learn/portfolio/gurpreet012guru/ME_QTRIPDYNAMIC/.

Overview

QTrip is a travel website aimed at travellers looking for a multitude of adventures in different cities. 

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
• Used JQuery to facilitate the reservation form submission
• Deployed the website using Netlify and Heroku

QTrip architecture diagram

Deploy the QTripDynamic website

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

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
Image(s)

QTrip Adventure Details

Image carousel on the Adventures page

QTrip Reservations page

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

JS, Bootstrap Flex, Bootstrap Spacing, ES6, localStorage

Image(s)

QTrip Adventures page

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

Image(s)

QTrip Landing page

QTrip Landing page