Задача

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

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

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

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

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

После одобрения, я приступил к вёрстке и программированию интерфейса. Для этого я выбрал фреймворк vue. Он лёгок в исполнение таких задач и легко поддерживаем. В дополнение к нему, я использовал Vuex (глобальное хранилище данных), чтобы управлять запросами к REST API, построенным на серверной части.

Поскольку приложение одностраничное, REST API нужно было для запросов к акциям и некоторым данным о пользователе из базы данных. Эту задачу мне помог инструмент DjangoRest Framework.

В вёрстке интерфейса, я думал о доступности экранными дикторами и использовал лучшие практики, о которых знаю.

  • Панель администрирования

  • Главная страница

  • Мобильная версия

  • Личный кабинет

  • Страница регистрации

  • Страница акций