AsifAliJaun / QtripDynamic

QTrip

QTrip is a travel website designed for adventurous travelers seeking various experiences in different cities. This project focuses on creating dynamic web pages using HTML, CSS, and JavaScript, improving the user experience with multi-select filters and image carousels, implementing conditional rendering of page elements, utilizing localStorage for user preferences, and deploying the website using Netlify and Heroku.

Overview

During the course of this project, the following tasks were accomplished:

• Created web pages using HTML and CSS and made them dynamic using JavaScript.
• Improved UX with multi-select filters, image carousels, and conditional rendering of page elements.
• Utilized localStorage to persist user preferences at the client-side.
• Used jQuery to facilitate the submission of the reservation form.
• Deployed the website using Netlify and Heroku.

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 into 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

JavaScript, Bootstrap Flex, Bootstrap Spacing, ES6, localStorage

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 Bootstrap.
• Implemented reservation logic by using the 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

JavaScript, Bootstrap, Conditional rendering, Bootstrap Carousel

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

Fetch data using REST API and dynamically render the 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 classes to add responsiveness.
• Implemented logic to dynamically populate the landing page's DOM with city data.

Skills Used

HTML, CSS, JavaScript, Bootstrap, REST APIs, JSON, DOM Manipulation, cURL