Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kvishalrj/qtripdynamic
A dynamic adventure website
https://github.com/kvishalrj/qtripdynamic
Last synced: 11 days ago
JSON representation
A dynamic adventure website
- Host: GitHub
- URL: https://github.com/kvishalrj/qtripdynamic
- Owner: kvishalrj
- Created: 2024-06-13T06:51:28.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-06-14T05:15:22.000Z (7 months ago)
- Last Synced: 2024-06-14T06:29:37.081Z (7 months ago)
- Language: JavaScript
- Homepage: https://qtrip-dynamic-one-dusky.vercel.app/
- Size: 2.45 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# QTripDynamicđź’»
### 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.
- Deployed the website using Netlify/Vercel for Frontend and Render for Backend.
### Q Trip Architecture Diagram
>## 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
>## 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