Как мы подходим к разработке сайтов-подборщиков

Расскажем на примере нового кейса на React.js ⌨️

Мы разработали сайт для агентства недвижимости ecrz.by. Цель таких сайтов — найти человеку несколько вариантов квартир или домов по определённым критериям. Для этого фильтры должны быть понятными и простыми, но в то же время учитывать необходимую логику и всевозможные пользовательские сценарии. Поэтому больше всего мы думали над фронтенд-архитектурой.

И вот что сделали:

Скейлинг в адаптиве
Мы используем скейлинг в React по умолчанию. Так быстрее — не тратим время на написание доп стилей, а считаем базовую единицу ширины экрана и разрабатываем интерфейс.

На выходе получаем пропорциональное уменьшение/увеличение блоков при любом ресайзе страницы. А ещё в 3 раза меньше кода.

Фильтры и вложенные фильтры
У заказчика несколько типов недвижимости на сайте, поэтому фильтры для дома и квартиры должны отличаться.

Использовали фильтры, которые меняются от типа недвижимости и добавили к каждым свои вложенные фильтры. Информация запрашивается с сервера в зависимости от типа жилья, поэтому данные не дублируются.

— Если это квартира, в фильтрах можно выбрать количество комнат, а в доп фильтрах — ремонт

— Если это дом, в фильтрах можно выбрать тип строения и участок, а в доп фильтрах — материал дома

SEO-френдли
Сделали так, чтобы состояния фильтров сохранялись, когда пользователь делится страницей через ссылку.

Происходит так → рендерим запрос на сервере с базы данных и отдаём пользователю готовую разметку с карточками. Ещё разметку может видеть браузер и спокойно индексировать.