wanderwise

Introduction

Travel cost calculator for a quick overview of trip costs & save potential itineraries 🏖️

Getting Started

• Input your travel plans & hit search!
• Click on one itinerary each from the flights and accommodation categories
• See the total cost of your proposed trip
• Save your potential trip itinerary for later

Made with React, TypeScript, MobX & Express.js / Styled by Material UI

Process

1. Figma Prototyping

Initial UI inspiration from Airbnb -- search bar & map interface

2. Fetching Data from APIs

For this project, (apart from Airtable) I chose to use two other APIs -- SkyScanner API & Hotels.com API for flight itineraries and accommodation listings respectively.

I had tested the endpoints on Bruno & used the return values as dummy data (to not incur additional rates!).

While it was working fine in Bruno, I kept encountering a CORS error in my dev environment. 😫😫😫

Solution (suggested by Waihon): Implement a simple backend proxy server in Express.js to circumvent the "same origin" issue.

This issue was the most challenging part of entire project but also where I learnt the most:

• Understanding CORS error
• Setting up the correct type of backend (ventured into SSR)
• CommonJS vs ESM syntax But Express.js turned out to be quite palatable at this level of implementation.

Overall, working with third-party private APIs can be quite a pain.

3. TypeScript

• TS adds static typing to JS (i.e. types cannot change at runtime!)
• Varying data types and data structures to handle

• TS helps to keep track of how the data should be handled (e.g. applicable methods) & helps to catch errors during development

• But was also not entirely conducive for development at times...

4. MobX

• State management library for JS, commonly used with React apps. End outcome similar to local states & react hooks functionality, but cleaner handling in my opinion
• How it helped me:
  • Store state for use in fetching subsequent API calls
  • Keep track of state for (re)rendering purposes
  • Pass states between components without prop-lifting

Future Development

UI

• More aligned with envisioned UI

Features

• User can see accommodation options + airport locations on a map
• User can group saved trips for comparison of options
• User can sort accommodation options by price & ratings
• User can choose generic times as date range

Dev

• Error catching & making it known to users (e.g. when input origin/destination is invalid)
• Separation of concerns between business logic & UI changes

Takeaways

• Don't be afraid to try, even when you're not entirely sure of the outcome (Config files, Backend set-up)
• Fail quickly (APIs)