Веб-сервис Полка

Задача

Наши интересы, увлечения и сфера деятельности часто выражаются через любимые книги. По коллекции книг на полке можно сделать портрет человека — что он любит и чем занимается. Нашей целью было помочь людям находить новые интересные знакомства в контексте книг, собирать вокруг себя людей с похожими интересами, дать возможность взять книгу «на прокат» — сэкономить на покупке новой книги.

Решение

Спроектировали и разработали MVP версию социальной сети для любителей бумажных книг. Тут люди могут искать книги в своём городе, договариваться в чате, чтобы взять почитать. Могут создавать полки — группы по интересам. И просто общаться.

Так же разработали логотип и визуальный стиль, вдохновленный иллюстрациями из старых книг.

1. Понимание задачи

Изначально заказчик пришел с концепцией полок по подъездам. Нам показалась такая идея очень локальной — редко попадаются соседи с книгами, которые хотелось бы почитать.

Мы предложили более глобальную концепцию, которую можно масштабировать. Концепцию социальной сети, где люди могут создавать полки без привязки к подъезду. Так же предложили сместить акцент с обмена книг на общение и поиск знакомств.

2. Информационная архитектура

Далее мы начали работать над архитектурой и сценариями. Схему правили много раз, старались сделать все просто, без витиеватых сценариев. Основной сложностью было — как организовать обмен книгами. В итоге решили не усложнять продукт и отдать это под ответственность самих пользователей — сами договариваются где и когда передать книгу.

В ходе проектирования накопилась масса идей, которые оставили на развитие. Сейчас же фокус был на MVP.

3. Прототипы

Затем основные сценарии представили в виде низко-детализированных прототипов, чтобы обкатать и пощупать будущий продукт.

4. Дизайн

При создании визуала мы вдохновлялись старыми бумажными книгами — светлыми теплыми тонами бумаги и гравюрными иллюстрациями.

Сами интерфейсы кристально чистые и лаконичные. Что позволяет пользователю сфокусироваться на главном и не отвлекаться.

Так же, мы разработали простой логотип, который в будущем планируем развивать и масштабировать в полноценный брендинг.

5. Выбор технологического стека

Исходя из поставленных задач, сервис требует высокой реактивности, то есть пользователи совершают на странице множество действий, которые отражаются на ней и визуально меняют ее. Это обязывает нас использовать библиотеку React для реализации этого функционала. Но в своей сути сервис — это социальная сеть, требуется обеспечить уверенную индексацию книг сервиса и оптимизацию под поисковых роботов. Пользователи должны приходить и из органического поиска. А как известно, SPA-приложения плохо или совсем не индексируются. Что же делать? Для таких задач в нашей веб-студии мы используем фронтенд-фреймворк NextJs. За счет технологии server-side rendering мы получаем отличное SEO и при этом не теряем реактивную функциональность.

6. Разработка MVP

В MVP-версии нашего проекта мы реализовали следующий функционал, который стал основой для дальнейшего развития сервиса:

1. Выбор города и добавление новых городов через админ-панель.
Пользователи могут выбирать город из списка, а администраторы имеют возможность добавлять новые города через удобную админ-панель. Это позволяет гибко масштабировать сервис в зависимости от географии пользователей.

2. Карта с книгами на основе OpenStreetMap.

Для отображения книг на карте мы использовали OpenStreetMap как бесплатное и надежное решение. В будущем, когда проект наберет популярность и охват, планируем перейти на платные Яндекс.Карты для более детализированной и функциональной картографии.

3. Определение адреса на карте через сервис Dadata.

Для удобства пользователей мы интегрировали сервис Dadata, который помогает автоматически определять и подсказывать адреса при добавлении книг. Это упрощает процесс и минимизирует ошибки ввода.

4. Регистрация и авторизация пользователей.

Мы предусмотрели два способа авторизации:

— Стандартная регистрация по email, где код для входа приходит на указанный адрес.

— Авторизация через социальную сеть ВКонтакте для удобства пользователей.

5. Добавление книг.

Процесс добавления книг максимально упрощен: пользователь вводит основную информацию вручную. В будущем планируем подключить сервис, который по ISBN будет автоматически подтягивать данные о книге, включая название, автора, описание и обложку.

6. Редактор фотографий книг.

При загрузке изображений книг пользователи могут использовать встроенный редактор, который позволяет обрезать, повернуть и отразить фото. Это помогает загружать качественные и аккуратные изображения.

7. Собственный чат на веб-сокетах.

Реализация чата стала одной из самых сложных задач. Мы создали функциональный чат, который включает:

— Личное общение между пользователями.

— Общий чат для обсуждения книг на конкретной полке.

— Уведомления о статусах книг (например, запрос на чтение или напоминание о возврате).

— Звуковые уведомления для оперативного оповещения.

В планах — добавить поддержку эмодзи, настройку уведомлений о новых сообщениях на email и другие улучшения.

8. Уведомления и напоминания.

Мы реализовали систему уведомлений, которая напоминает пользователям о важных событиях:

— Запрос на чтение книги.

— Срок сдачи книги.

— Новые сообщения в чате.

9. Функционал бронирования книги.

Владелец книги самостоятельно выбирает, кому отдать книгу из списка желающих. Это решение основано на личном общении и симпатии, так как книги — это личное, и делиться ими хочется только с теми, кто вызывает доверие.

10. Страница с правилами сервиса и форма обратной связи.

Мы создали страницу с четкими правилами использования сервиса, а также форму обратной связи. Это позволяет пользователям задавать вопросы, предлагать улучшения и оперативно решать возникающие проблемы.

Этот MVP стал важным шагом в развитии проекта, и мы продолжаем работать над улучшением функционала, чтобы сделать сервис еще более удобным и полезным для наших пользователей.

7. Лендинг

Чтобы будущие пользователи соцсети могли с ней познакомиться, мы разработали небольшой лендиг-презентацию.

Результат

Разработали MVP версию веб-сервиса. На данный момент он проходит стадию тестирования на реальных пользователях и первичного наполнения, а так же осуществляется сбор обратной связи.