QuickSilver at Yatra.com

QuickSilver was my first project, at my first company. I joined Yatra.com (opens in a new tab) as an intern and started on a full revamp of its flight and hotel booking. This is where I learned React, from the documentation and a couple of Udemy courses.

QuickSilver was the internal name. The product was called Traverse, which is the name you will see in the screenshots and the demos.

My manager Anil Siwach (opens in a new tab) gave me the opportunity to work on it. I built it with my colleague Aakash Sardana, and Mandeep Kumar (opens in a new tab) designed it.

It never launched. Both apps run again now, on the data they captured in 2019. Here is the B2B app (opens in a new tab), and here is the Customer (B2C) app (opens in a new tab).

What we were building

Yatra sold flights and hotels through two very different front doors. Travel agents booked on behalf of customers, and had credit balances, markups and commissions to manage. Consumers booked for themselves.

Both ran on an ageing stack. We rebuilt them together, one design language and one component library across two applications, a B2B app for agents and a Customer (B2C) app.

That component library was ours. We did not use an external one. We built every component in house and styled it with CSS Modules, and each one was written to be reused across both apps.

What I built

Around 28,000 lines of JavaScript across 329 React components and 18 Redux slices, on an ejected Create React App. React 16.8 with class components, Redux with thunks, React Router 4.

The whole flight funnel, in both apps. Airport autosuggest, search, a results page that merges in more flights as they poll, fare rules and fare breakups, traveller details, add-ons, an interactive seat map, payment, confirmation. The B2B app also carries what only agents see, like markups, credit balance and agency-level fare summaries.

Why it still runs

I kept a copy when I left, and eight years later I got both apps working again.

There is no backend. The apps answer their own network calls from JSON captured off the real API in 2019, so the flights, fares, seat maps and confirmations are the responses the code was written against. Nothing leaves the browser.

That took some digging. Files had gone missing from the tree. The Sass compiler it used has no build for Apple silicon. And a few bugs had been sitting in the 2019 code the whole time, waiting for someone to find them. A card expiry field you could not type into. A payment screen that fetched its data and never rendered it. A confirmation screen that was only ever a stub.

It is old code and it looks like it. Class components everywhere, no hooks, a webpack config I ejected because I wanted to see what was inside. That is the point. It is the first thing I built, and apart from what it took to make it run, it is untouched.

None of it was generated. I wrote it in 2018 and 2019, by hand, while I was still learning what React was, and I am proud of it.