Other developers didn't dare take it on — we built it as a library of React components

Since 2009, Bezrealitky has been connecting people looking for property with their owners, helping handle everything around housing — communication, listings, and legal services — all online. Seven years after the last redesign, we teamed up again to push the site further. We took on more than 400 ready-made wireframes and turned them into a component library for a new website that's modern, intuitive, and built on current technology.

We first got to know Bezrealitky back in 2014, when we helped them with their site's first redesign.

When the next redesign came up, they were initially worried the project would be too large in scope and that finding a vendor would be difficult. So they reached out to several.

Even though it might not look like it from the outside, our site is really complex — it includes things like user profiles, listings, property search, maps, a contract generator, saved-search alerts, an e-wallet, and a lot of other functionality… A lot of companies were put off by how complex and interconnected our site is, but Superkoders was the only one who said right away they were in. On top of that, we'd had a positive experience with them from the previous redesign, so they were the obvious choice.

Based on the materials we were given, we built out a system of UI components in React. Bezrealitky's developers wanted to use the React-Bootstrap library, since it has good community support and can be extended with basic interactive components. That also made the final UI implementation easier and faster.

We developed every component in isolation, atomically. We handled their presentation using the interactive Storybook interface, which let us thoroughly test each state and document what every element could do.

We have plenty of experience building design systems and collaborating on large projects. Usability, accessibility, and load speed are always our priority, which is why we like building everything from scratch. That gives us more control over the code and lets us guarantee a 100% result. But the client's brief comes first, so being asked to use the React-Bootstrap library wasn't a problem for us at all.

We assembled the components into final templates based on the designs or wireframes. That let the Bezrealitky team review our work before it went to 1:1 implementation, which was handled by iD-SIGN. To ensure maximum quality, we simulated a production environment and produced a static HTML build of every template, which we used to test the frontend's speed and accessibility.

Working with Superkoders, I know I'm talking to people who understand both users and technology. That makes it a lot easier to land on the right solution. I appreciate how smooth and fast the communication is, both during development itself and when sharing feedback.

For roughly the first two months, we focused on coding the individual components. Pages were then assembled from those. The component system is built to be flexible enough that new pages can easily be put together from it at any point in the future.

The whole collaboration ran agile — the brief kept expanding and getting more specific as the client's needs evolved. Along the way, we also added elements and entire pages that weren't part of the original plan (things like badges, newsletter sign-up, a page to support Ukraine, and so on). Some pages didn't even have designs prepared for them, but thanks to a well-built design system, we were able to code them without one.

The React-Bootstrap library is monolithic, meaning all its styles live in one single file. So that we'd only load what each page actually needed and speed up the site, we modified the code to include only the elements we actually use. Some components' default styles included states we didn't need, so we wrote our own instead. We used CSS modules technology to handle exactly this. For example, visiting the homepage doesn't needlessly load data meant for logged-in-user pages.

Testing is a given for us whenever we code. We think about every type of device and browser, and about accessibility for people with disabilities. We also make sure the site is fully usable with just a keyboard, so it can be operated without any trouble without a mouse.

We made sure every third-party library we used was kept on its current version, so we wouldn't be creating technical debt before the project even launched. During development, for example, there was a situation where a major new version of a component came out with a lot of changes compared to the one we were using. We could have left it as is and said the component would only run on one version, but instead we decided to rewrite the whole component so it would work on both.

A unique feature on the Bezrealitky site is the viewing calendar, available to logged-in users. Property owners create time slots of varying length that prospective tenants or buyers can book into. Both sides can then easily manage their scheduled viewings. The main challenge was making the calendar fully responsive and usable across devices of all sizes.