Кейс проекта
VietLand Недвижимость
Современное веб-приложение для местного агентства по продаже недвижимости (Вьетнам). Разработано с применением высокопроизводительных статических компонентов Astro и стратегически размещенных островков компонентов React. Обеспечена низкая стоимость благодаря бесшовной интеграции с Contentful CMS и надежному хостингу на Netlify.
Цели и Требования
Основной целью этого проекта было помочь местному бизнесу установить прочную связь с потенциальными клиентами и создать безупречное первое впечатление, в конечном итоге предоставив бизнесу определенное преимущество в условиях жесткой конкуренции на рынке.
Начальные ограничения, которые нам нужно было учесть:
- Удобный дизайн с пониманием местного языковых и культурных особенностей
- Конкурентоспособная производительность на мобильных устройствах
- Бесперебойная работа и несложные процессы управления контентом
- Ограниченный бюджет 😹
Подход к Разработке
В данном конкретном случае подход заключался в том, чтобы генерировать статические страницы, а не полагаться на рендеринг на стороне клиента или сервера. Клиентский рендеринг был исключен из-за высокой значимости, придаваемой производительности на мобильных устройствах и оптимизации для поисковых систем (SEO). В то же время идея расходов на разработку/хостинг/управление серверной частью исключала и рендеринг на стороне сервера. Вместо чрезмерных инвестиций в серверную инфраструктуру, мы выбрали услуги headless CMS (с щедрыми бесплатными тарифами).
И, хотя статические страницы кажутся ... безжизненными, приложение было разработано, чтобы не выдавать статичную сущность! Весь секрет - применение островков JS-интерактивных компонентов там, где необходимо.
Список Технологий
Этот проект был разработан с использованием тщательно отобранного набора современных технологий и инструментов. Основные из них перечислены ниже. Для полного обзора всех зависимостей, включая точные версии, вы можете ознакомиться с подробностями в файле package.json.
| Название | Применение |
|---|---|
 | Использован для генерации статических страниц с акцентом на быстрое время загрузки и оптимальную производительность. |
 | Интегрирован стратегически для динамичного контента и интерактивных компонентов, обеспечивая живой пользовательский опыт. |
 | Обеспечил надежность и масштабируемость кодовой базы, способствуя общей поддерживаемости приложения. |
 | Выступил в качестве headless CMS, облегчая обновление и управление контентом. |
 | Использован для совместной работы в процессе дизайна, обеспечивая цельный и визуально привлекательный интерфейс пользователя. |
 | Применен для создания стройного и отзывчивого дизайна, улучшая общую эстетику и удобство использования. |
 | Интегрирован для интерактивных карт, улучшая пользовательский опыт и предоставляя ценную информацию на основе местоположения. |
Вызовы и Решения
Путь воплощения этого проекта в жизнь был сопряжен с рядом проблем. Применяя стратегию разделяй и властвуй, я систематически решала каждую проблему, выполняя требования проекта, придерживаясь при этом бюджетных и временных ограничений. С моей точки зрения, чем больше трудностей, тем больше возможностей для инноваций и улучшений — каждое препятствие становится ступенькой на пути к общему росту и совершенству.
Вызов 1: Дизайн, удобный для пользователя
В качестве первого шага я провела углубленный анализ ведущих решений на местном рынке, таких, как batdongan, nhatot и alonhadat, чтобы выявить общие особенности, привычные местным пользователям. На всех этих платформах представлены обширные списки земельных участков с фотографиями и важной информацией, такой как цена, размер площади и адрес. Кроме того, они предлагают расширенные фильтры для настраиваемого поиска:
Хотя структура страниц с листингами на разных платформах довольно схожа, на главных страницах есть вариации, каждая из которых содержит основную информацию о площадке, подборку избранных предложений и различные навигационные ссылки.
На этапе создания макета акцент был сделан на сохранении этих общих элементов для интуитивного размещения информации и удобства навигации для пользователей. Эти первоначальные макеты стали холстом для интеграции современных элементов дизайна и функционала, вдохновением для чего послужили такие платформы как Dribbble. Заметные улучшения включают в себя настраиваемую карту и функции, запрошенные клиентом, такие как слайдер, демонстрирующий продвигаемые участки.
Дизайн стал ключевым вызовом проекта, заняв наибольшее время по сравнению с остальными работами. Со временем появился набор вариантов:
- первая версия
- вторая версия (адаптивный дизайн)
- третья версия (переработанный дизайн), сейчас доступна как v1
Но и она не стала финальной. Статистика использования и поведение реальных посетителей показали, что основную идею можно донести яснее и убедительнее. Это переосмысление переросло в полный редизайн — текущую версию, доступную как v2.
Инструмент дизайна Figma ускорил превращение идей в превью версии. Его способность быстрого прототипирования сыграла решающую роль в улучшении цикла обратной связи с клиентом, гарантируя, что клиент остается хорошо информированным о ходе разработки, и способствуя совместному и обоснованному процессу принятия решений.
Вызов 2: Конкурентоспособная производительность на мобильных устройствах
Так как более чем 86% интернет-трафика на местном рынке, генерируется через смартфоны, оптимизация для мобильных устройств стала ключевым требованием для проекта.
Для решения этой проблемы я использовала двухсторонний подход. Во-первых, я применила генерацию статических страниц с использованием Astro, обеспечивая минимальные задержки при генерации кода как на стороне сервера, так и на стороне браузера. Параллельно была реализована стратегия дизайна с приоритетом мобильных устройств с использованием Tailwind. Каждый компонент изначально разрабатывался для мобильных страниц, а затем настраивался по мере необходимости для более крупных экранов с использованием стандартных медиа-запросов Tailwind.
Что касается оптимизации, отдельно стоит выделить оптимизацию изображений. В данном проекте, изображения были тщательно подогнаны для различных размеров экранов благодаря Contentful Image API.
В целом, даже без дополнительных оптимизаций, получено веб-приложение, которое выглядит корректно на различных устройствах, но при этом обеспечивает оптимальную производительность. Выбранный стратегический подход успешно отвечает высокому спросу на мобильную производительность на местном рынке.
Вызов 3: Бесперебойная работа и несложные процессы управления контентом
В поисках понимания того, как обеспечить бесперебойный процесс доставки контента и простой опыт управления контентом, я исследовала популярные платформы для создания сайтов, такие как WordPress, Joomla и Shopify. Широкая популярность этих платформ обусловлена, среди прочего, их минимальными техническими требованиями. Пользователи могут легко управлять контентом, вводя данные в соответствующие поля, нажимая отправить или опубликовать и немедленно просматривая обновленный веб-сайт.
Этот проект стремился к аналогичному опыту управления контентом, но без тяжелого фронтенда. Среди вариантов headless CMS Contentful оказался оптимальным выбором, превосходным с точки зрения пользовательского опыта и бюджета. Хотя первоначальные конфигурации требовали хотя бы минимального понимания концепций баз данных и типов данных, последующие обновления данных в режиме управления контентом стали такими же простыми, как заполнение веб-форм, включая форматирование текста.
Назначенные контент-менеджеры теперь могут легко обновлять содержимое сайта и практически сразу же просматривать результаты, что повторяет удобство использования традиционных CMS-платформ.
Вызов 4: Ограниченный бюджет
Решение бюджетной проблемы включало в себя использование щедрых бесплатных тарифов выбранных технологий. Этот подход позволил разработать и поставить высококачественный продукт при минимальных бюджетных ограничениях, сохраняя при этом значительный потенциал для будущей масштабируемости.
Основные выводы 🍬
В итоге проект успешно расширил присутствие местного бизнеса в сфере недвижимости в онлайн сфере, обеспечивая новые контракты и производя положительное впечатление на потенциальных клиентов. Ценные уроки включают в себя важность точной расстановки приоритетов и активного взаимодействия с клиентами. В планах - устранение мелких ошибок и внедрение тестов как ключевые приоритеты для обеспечения долгосрочной стабильности и надежности в развитии проекта.
Достигнутые результаты
Проект успешно установил сильное онлайн-присутствие местного бизнеса в сфере недвижимости, укрепив значимые связи с клиентами и преодолевая бюджетные ограничения.
В то время как работа по разработке продолжается для удовлетворения новых требований, проект уже принес значительные бизнес-результаты. Как минимум пять потенциальных клиентов выразили впечатление от "профессионального внешнего вида сайта" и рассматривают возможность сотрудничества. Более того, заключен новый контракт 🥂, и веб-сайт сыграл главную роль в первичной презентации земельного участка. В целом, я довольна достигнутыми результатами.
Извлеченные уроки
Как разработчик этого проекта, я извлекла ценные уроки, одним из которых является важность точного определения приоритетов и активного участия в обратной связи с клиентами. Разработка некоторого функционала, реализация которого потребовала значительного времени и усилий, в конечном итоге оказалась пустой тратой времени. Так, целые разделы сайта были удалены как 'несущественные для бизнеса'. Одновременно непредвиденные требования бизнеса потребовали дополнительных доработок. С более эффективной стратегией планирования есть потенциал для существенного сокращения времени разработки на более чем 20%.
Данный опыт подчеркивает динамический характер проектных требований и важность эффективных коммуникаций и адаптивного планирования для достижения оптимальных результатов.
Планы на будущее
Работа над проектом продолжается, с основным акцентом на устранение мелких проблем, таких как слайдер изображений для мобильных устройств или обеспечение доступности.
Одной из функций, которую я намеренно пропустила как одиночный разработчик, были тесты. Тем не менее, оглядываясь назад, я осознала, что по мере развития проекта даже минимальные изменения могут потенциально повлиять на уже реализованные функции. Без каких-либо средств обеспечения безопасности при объединении PR, мне приходится выполнять ручные проверки после каждого обновления или ждать сообщения об ошибках 🫣. Следовательно, внедрение тестов стало следующим наиважнейшим этапом на горизонте для улучшения стабильности проекта и поддержания надежного процесса разработки.