I prototyped, designed and developed a SexTech Startup - BDSM and Fetish Marketplace
Tools are being used in this project
LARAVEL
Использовался для бэкэнда
MySQL
Стандартный подходящий вариант хранения данных
TNT SEARCH
Использовался для индексируемого полнотекстового поиска
VUE+VUEX
Использовался компонентно для интерактивных элементов. В разделе личных сообщений с VUEX
WebSocket
Условные сокеты использовались для realtime личных сообщений с Pusher
API
Использовалось для писем, pusher и работы с Telegram ботом
Ph + Illustrator
Использовались для работы с изображениями и векторами
GIT+BitBucket
Контроль версий
Gallery
Few words about the project
Хороший большой проект, который полностью реализован мной. Согласно ТЗ, требовалось создать площадку, на которой любой посетитель мог создавать собственный магазин и продавать свои товары
Фронтэнд
По дизайну и проектированию стояло много задач. Требовалось решить дилемму с курицей и яйцом: площадка должна быть проста и понятна как для продавцов, так и случайных посетителей-покупателей.
Цветовые сочетания были выбраны близкие к классическим в тематике БДСМ и фетиш-ниши. Для удобства была создана параллельно и светлая тема, которая не отличается красотой, но и служит для другого.
Начнем с того, что все поля ввода максимально валидируются с помощью VUE при вводе информации и не дадут ошибиться пользователю. Уведомления, которые помогают контролировать ситуацию выглядят, например вот так:
Уведомление при создании магазина
При этом во всем интерфейсе я следил за классическими канонами проектирования и дизайна: например, обратите внимание на кнопки в моменте с созданием магазина выше.
Общие элементы, настройка и навигация
Не смотря на кажущуюся простоту, на экране всегда располагается множество элементов: переключатель языка, переключатель валюты, переключатель темы, поле поиска, личное меню. И потому блок настройки темы, валюты и доступ информации вынесен в правый верхний угол - удобно, везде доступно. При этом требовалось подчеркнуть, что сервис международный и не отпугнуть не англоговорящих - переключатель языка сразу по центру.
Первоначально неизвестно количество категорий и подкатегорий, которые могут быть и потому был выбран вариант с Amazon-кнопкой, которая выпадает с умышленной задержкой:
Главное меню категорий сайта
Страница категории
Кроме UX стояли требования и по SEO. Потому страница категории выполнена именно так: лаконично и функционально:
Страница категории товара
Карточка товара
В карточке товара следовало так же проработать как UX, так и хорошую перелинковку и SEO в целом. При этом конечно не скатиться в AliExpress:
Карточка товара
Страница магазина
Довольно болезненная ситуация была с первым экраном страницы магазина, который создает пользователь. Мы не можем знать, какую обложку он загрузит. И для себя тяжело, но обязательно надо было принять то, что качество этой обложки будет ужасное... Но UGC есть UGC. Первый экран важен и содержит самую важную информацию. При разработке я ссылался на AliExpress, FetLife и Etsy.
Функционал поиска
Поле поиска раздвигается по нажатию и подгружает нужную информацию через axios. При наличии вариантов происходит отображение магазинов/товаров:
Выпадающий поиск
Далее идет переход на отдельную страницу поиска
Личные сообщения
Раздел личных сообщений реализован с помощью VUE + VUEX в качестве стора. Помимо этого реалтайм функционала не планировалось и потому все было сделано через Pusher. При желании посетителя купить товар экшн происходит через личные сообщения: с помощью "#" парсер подставляет ссылки на товары на сайте.
Личный кабинет, создание магазина и публикация товаров
Личный кабинет стандартен и имеет кучу классических элементов. Для простоты все было максимально выделено:
Пример редактирования личной информации
Ну и наконец, создание магазина и работа с товарами - самая активная часть...
В наиболее "сложной" части для посетителя работа реализована пошагово. Это максимально просто и понятно. Пройдя через три простых шага, посетитель получает магазин и предложение о его настройке:
Первоначальная настройка магазина
В целом создание магазина занимает не более одной минуты
Создание и редактирование товаров выглядит вот так. При этом доступно быстрое меню для экономии кликов и ускорения работы:
Блок работы с товарами
В динамике это выглядит так:
Быстрое редактирование товара
Если с товаром есть какие-то проблемы, то посетитель это не пропустит:
Страница товара при нарушении
Само же создание товара максимально линейно и завалидировано. Вот фрагмент:
Фрагмент страницы создания товара
Бэкэнд
Со стороны бэкэнда реализовано следующее:
Авторизация, разделение прав пользователей
Система категорий/подкатегорий
Создание/редактирование магазинов/товаров с заданными характеристиками и изображениями
Личные сообщения между пользователями с пагинацией-скроллом
Кэширование
Мультиязычность и мультивалютность
Фильтрация товаров, магазинов и пользователей
Полнотекстовый поиск с использованием TNT SEARCH
API для поиска, валидации и прочего
Интеграция с Pusher, MailGun
Интеграция с Telegram ботом, который отслеживает публикацию товаров и прочее (бот тоже сделан мной)
