QTrip💻

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 and facilitated reservation form submission using fetch API.

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

QTrip Landing 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

QTrip Adventures page

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

QTrip Adventure Details

Image carousel on the Adventures page

QTrip Reservations page