Crio Portfolio

Back

QTripDynamic

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

image alt text

QTrip architecture diagram

`

QTripDynamic Modules

1

Fetch data using REST API and dynamically render landing page

Scope of work:

  1. Retrieved cities data from the backend REST API endpoint using Javascript’s Fetch API

  2. Created HTML for the cities grid with Bootstrap class to add responsiveness

  3. 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):

image alt text

QTrip Landing page
2

Implement the adventures page with multi-select filters

Scope of work:

  1. Fetched adventures data for the city by invoking the backend API from the page URL’s query parameter

  2. Inserted HTML populated with API response data to the adventure page’s DOM

  3. Implemented logic to add both multi-select and single-select filters

  4. 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):

image alt text

QTrip Adventures page
3

Create the Adventure details page with reservation support and the Reservations page to show all reservations

Scope of work:

  1. Added a sleek image carousel using Bootstrap

  2. Implemented reservation logic by using JQuery to send a POST request to the backend, on form submission

  3. 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):

image alt text

QTrip Adventure details page

image alt text

Image carousel on the Adventures page

image alt text

QTrip Reservations page
4

Deploy the QTripDynamic website

Scope of work:

  1. Deployed the QTrip backend to Heroku

  2. Configured the QTrip dynamic frontend to use the Heroku deployed backend

  3. Deployed the QTrip dynamic frontend to Netlify

Skills used:

Deployment, Heroku, Netlify