Trip-ecstatic

A dynamic travel website that can be used to browse adventures and make reservations.

Inspiration

Wanted to create dynamically rendered web-pages with a functional backend. Fetching data from the back-end and displaying it on the frontend. Also wanted to learn about unit testing to test the functionalities.

Tasks I have completed

This project is more focused on the front-end, with heavy use of REST APIs, POST and GET methods using fetch etc. Nonetheless it has a working backend using node.js and express and unit tests as well.

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

Deployment

• The frontend part of the application is deployed using Netlify.
• The backend is deployed using Heroku.

Link: https://tripecstatic.netlify.app/

Unit Tests

• Clone the project
• Navigate to project folder
• Navigate to /frontend/_ _ tests _ _
• Finally, from the terminal run the tests using: npm test

The tests are made using JEST framework.

After running, the terminal should show something like this:

Architecture

Visuals

Landing Page

Adventures Page

Without Filters

With Filters

Adventure Details Page

Before reservation

After reservation

Reservations Page

Tech Stack