QTrip is a dynamic travel website designed to cater to adventure seekers exploring various cities. The project involved the creation of web pages using HTML, CSS, and JavaScript to provide a dynamic user experience. User experience was enhanced with features like multi-select filters and image carousels. Conditional rendering of page elements was implemented to provide a more personalized experience. User preferences were stored on the client-side using localStorage, and the reservation form submission was facilitated using the fetch API. The website was deployed using Netlify/Vercel for the frontend and Render for the backend.
The deployment of the QTrip website involved several stages. The backend of QTrip was deployed to Heroku, and the dynamic frontend was configured to use this Heroku deployed backend. The dynamic frontend of QTrip was then deployed to Netlify. The skills used in this phase of the project included deployment, Heroku, and Netlify.
The Adventure details page with reservation support and the Reservations page were created to show all reservations. An image carousel was added using Bootstrap2 to enhance the visual appeal. Reservation logic was implemented using the Fetch API to send a POST request to the backend upon form submission. The 'Sold out' panel and the reservations page were conditionally rendered based on the API response. The skills used in this phase included JavaScript, Bootstrap, conditional rendering, and Bootstrap Carousel.
The adventures page was implemented with multi-select filters. Adventures data for the city was fetched by invoking the backend API from the page URL’s query parameter. HTML populated with API response data was inserted into the adventure page’s DOM. Logic was implemented to add both multi-select and single-select filters. The filters selected by the user were persisted in the browser’s localStorage. The skills used in this phase included JavaScript, Bootstrap Flex, Bootstrap Spacing, ES6, and localStorage.
