https://github.com/kvishalrj/qtrip

A adventure website
https://github.com/kvishalrj/qtrip

Last synced: 11 days ago
JSON representation

A adventure website

• Host: GitHub
• URL: https://github.com/kvishalrj/qtrip
• Owner: kvishalrj
• Created: 2024-06-17T13:53:02.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-08-20T10:18:40.000Z (4 months ago)
• Last Synced: 2024-08-21T12:16:49.001Z (4 months ago)
• Language: HTML
• Homepage: https://qtrip-lfif.onrender.com
• Size: 60.5 MB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

        
# 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

![](/images/Screenshot%20(136).png)

![](/images/Screenshot%20(137).png)

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

![](/images/Screenshot%202024-06-14%20100257.png)

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

![](/images/Screenshot%20(138).png)

### Image carousel on the Adventures page

![](/images/Screenshot%202024-06-14%20100344.png)

### QTrip Reservations page

![](/images/Screenshot%20(139).png)