QTrip is a travel website aimed at travellers looking for a multitude of adventures in different cities.
- Website URL : https://deb-qtrip-dynamic-frontend.netlify.app/
- 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.
- Deployed the website using Netlify/Vercel for Frontend and Render for Backend.
- 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
- HTML, CSS, JS, Bootstrap, REST APIs, JSON, DOM Manipulation, cURL
- 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
- DOM Manipulation, Bootstrap Flex, Bootstrap Spacing, ES6, localStorage
3. Create the Adventure details page with reservation support and the Reservations page to show all reservations
- 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
- JS, Bootstrap, Conditional rendering, Bootstrap Carousel
- Deployed the QTripDynamic to render
- Configured the QTrip dynamic frontend to use the render deployed backend
- Deployed the QTrip dynamic frontend to Netlify
- Deployment, Render, Netlify
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent