Accommodation portals with millions of pageviews a month

Looking for a cottage or cabin to rent for the summer, a nice spot for a ski trip, or maybe a night in a treehouse? The Megaubytko.cz and Megaubytovanie.sk portals will help you find accommodation at thousands of places across Czechia and Slovakia.

For simplicity, we refer to both portals as Megaubytko throughout this case study.

Megaubytko first saw the light of day in 2012. Like many projects of its kind, it grew and evolved gradually, in a very organic way. The portal went through several redesigns, but over time it still ended up in an unsustainable state.

Megaubytko was built on Windows technologies — you couldn't make a frontend change without it affecting the backend, and vice versa. The outdated system couldn't keep up with the latest technology trends. Several different developer teams had also worked on the project over time, which gradually produced what's known as spaghetti code — harder and harder to navigate. The cost of developing any new feature kept climbing to unsustainable amounts.

After more than 10 years of development, we reached a stage where everything took forever. On top of that, the site was built on Windows technologies, where developers charge corporate-level rates, which made development a lot more expensive. We also ran into the fact that developers working with Windows technologies tend to operate in more corporate environments — which are considerably less agile than we'd have liked. To get to the bottom of it, we had an audit done of the site, including its technology and hardware, and the conclusion was that the best option was to rewrite the whole site.

Megaubytko's operators had a website audit done, which gave them a clear picture of what they wanted — above all, to avoid ending up in a similar situation again in another 10 years. They ran a tender for a new website provider, bringing in an expert consultant to help out. The consultant evaluated the tender submissions and asked candidates follow-up questions. Out of 20 participants in the tender, three made it to the shortlist. Superkoders was one of them.

Superkoders was recommended to me by the founder of another online project I'd worked on. I liked their approach from the start. I like specialists who focus narrowly on one thing, and Superkoders presented themselves as React experts, which I consider exclusive know-how. I was glad when Superkoders ended up winning the tender.

After their experience with a monolithic system, the people at Megaubytko were clear that going forward they wanted to separate the frontend from the backend, so that the individual parts of the system wouldn't overlap wherever possible, and changes on one “end” could be made without affecting the other “end.”

At Superkoders, we developed the frontend part for Megaubytko (working closely with the developers handling the backend). We wrote the site in JavaScript.

We designed the system as a headless solution in React on the Next.js framework, which allows (among other things) using JavaScript on both the client side of the site and the backend. That means the same functionality doesn't have to be coded twice, the way it was on the original site. The frontend communicates with the backend via an API.

Figuring out how a web portal works when someone else built it up gradually over more than 10 years is a lot like renovating a house. You never quite know what's waiting for you until you knock a hole in the wall. Then you discover faulty wiring that needs redoing, you find out the roof needs reinforcing, and suddenly you realize you'd need at least double the budget.

In the case of Megaubytko's old site, detailed documentation was missing, some parts of the site were cunningly hidden away, and the whole system was riddled with exceptions popping up all over the place. Classic reverse engineering.

The biggest challenge of the Megaubytko project was making sure the portal transitioned smoothly from the old solution to the new one while keeping all its functionality intact. On top of that, we focused a lot on keeping the site fast so it wouldn't lose its hard-earned search rankings. That turned out to be quite a puzzle — the site offers advanced filtering options and shows users content “tailored” to whatever filters they've set. That's obviously great from a UX standpoint, but it also means the site has something like millions of pages that keep changing dynamically, which makes individual pages practically impossible to cache.

• The standard approach, where a software architect studies the system and then comes up with a proposed solution, wasn't in the cards here. That would have taken about a year, and we couldn't afford that.
• The architect worked on the solution for the first roughly 3 months (on the backend developers' side). He then came up with an initial proposal, after which a lot of things were figured out on the fly.
• Both the backend and frontend were built in parallel, including the analytics part.
• As for the site's design, we at Superkoders organized a workshop with web designer Vojta Kotous to get aligned and see eye to eye on how the site should work. This approach paid off for us — it helps the designer better understand our work and see that sometimes a small design change can save a lot of effort.
• To keep track of who was working on what and make sure everyone stayed in the loop, we set up a system of short (5–10 minute) daily stand-up calls with the whole development team (the client, plus Superkoders for the frontend, plus the backend developers).
• The whole project was run in an agile way, in two-week sprints.

I liked that at the point when three developers from Superkoders were working on the project, co-owner Tomáš Hejč also got actively involved and started effectively coordinating the team to keep everything running smoothly. By the way, the stand-up calls we introduced during development are still running today. Once the site launched, work on it slowed down, but it never stopped. Right now, for example, we're working on pricing adjustments so the portal can better handle total stay pricing, our own solution for A/B testing, connecting data with external booking systems, and so on.

Anyone who's ever migrated a website their business depends on knows how stressful it is. You desperately hope users won't notice a thing (except maybe being pleasantly surprised by new features and improvements), that everything works the way it should, that nothing gets stuck along the way, and of course you need to flip the switch at a moment when traffic is at its lowest.

We migrated Megaubytko from the old site to the new one at night, and everything went more smoothly than expected, with no major hiccups. The entire site moved over, data included. That said, we don't want to hog all the credit for the migration — a lot of the credit for it going smoothly belongs to our backend colleagues.

It made us really happy that our intensive work was appreciated not only by the client and the site's users, but also by the expert jury of the WebTop100 competition. The project won 3rd place in the B2B Portal category, where the judges evaluate:

• user-friendliness,
• ease of choosing services related to purchasing, shipping, payment methods, and so on,
• meeting business goals,
• how innovative the solution is — inspiring for others.