Меню

Проект с рифмами для компании «Додо Пицца»

https://dodo-crambo.ru

Срок реализации

  • 10 дней

Этапы работы

    • Верстка
    • Интеграция
    • Дизайн

О проекте

Расскажу вам немного о проекте Додо Рифма. Я со своей девушкой люблю ходить в пиццерию Додо. Сейчас там проходит рекламная акция рифмами, например: «Альбатрос — крутая птица, а доставка — Додо пицца».

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

Но чтобы использовать вторую часть додо-рифмы, нужно было спросить у компании, что они думают. Я нашел контакты основателя Додо Пиццы — Федора Овчинникова и написал ему об этом. Это было волнительно 🙂

К удивлению Федор ответил через 3 минуты и одобрил мой проект, пообещав поддержать меня в соц. сетях — обещание он сдержал: Спасибо, Федор 🙂

Проект с рифмами для компании «Додо Пицца» 1
Запись на стене Федора

Приступаем!

Сначала нужно было определить структуру сайта. Мне нравился вид как на экранах в Додо — слайдер с рифмами.

Потом я подумал что если их будет 300 — люди просто устанут листать этот слайдер, значит нужно сделать еще и список. Римфы так же нужно добавлять и модерировать. Итого по страницам: главная, слайдер, список, добавление, модерирование. Поехали 🙂

Главный экран/слайдер

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

Проект с рифмами для компании «Додо Пицца» 2
Главный экран

Список рифм

Следующая страница в очереди — список рифм.

Нужно сделать отображение той же информации как и на главной, но в компактном виде. Решил сделать сеткой по 3 штуки в ряд.

На странице списка рифм есть сортировка и поиск рифм для того чтобы пользователи могли посмотреть свою рифму и посмотреть какие рифмы самые популярные. Особенность сортировки и поиска — скорость.

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

Проект с рифмами для компании «Додо Пицца» 3
Список рифм

Добавление римфы

Рифмы нужно как-то добавлять. Какие поля сделать?

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

Сделал так чтобы она добавлялась автоматически, надо же уважать время других людей. Особенно если набирать с телефона … я бы на второй рифме ругался на разработчика 🙂 Поэтому я сделал так чтобы не ругались. В начале было просто поле и подсказка внутри поля: «Ой, снежинка на реснице» для того чтобы показать, что нужно добавить первую часть рифмы.

Проведя небольшое тестирование, я понял что это не так понятно как мне казалось, добавил подсказку под полем: «Пишите только первую часть рифмы, к ней автоматически добавится фраза ‘А доставка — Додо пицца'» — сработало, из 200 рифм на данный момент примерно 15 пришли с второй фразой. Поле автора. Пользователь должен вставлять ссылку на свою страницу в вк.

Неизменная часть адреса — vk.com/. Я подумал что пользователям будет удобно вставлять только идентификатор страницы: id123151231. Но когда увидел что добавили 30 рифм с полными ссылками, получилось что-то вроде: «https://vk.com/https://vk.com/postnov_daniil». Ссылки оказались нерабочими и пришлось в базе данных поправлять все вручную. Урок усвоил 🙂

Проект с рифмами для компании «Додо Пицца» 4
Добавление рифмы

Модерация

Не все рифмы должны приходить на сайт, я думаю понятно почему. Рифм, которые не прошли модерацию мало, 20 штук. Спасибо додо-рифмоплеты за вашу культурность 🙂 Страница модерации должна была содержать 2 столбика, слева — на модерации, справа — опубликованные. У каждой рифмы должно выводиться: название, кнопка «на модерацию», «опубликовать» и кнопка «удалить».

Проект с рифмами для компании «Додо Пицца» 5
Страница администратора

Оптимизация

Произошла интересная ситуация. Я ради теста добавил на сайт 250 рифм и стал проверять загрузку — сайт стал загружаться 6 секунд и при переключении страниц стал сильно тормозить. Я не знал что делать, ведь не могу же выпустить проект с такой оптимизацией, а если еще и Федор выложит у себя ссылку — выглядеть я буду не в лучшем виде. Я пришел к небольшой хитрости.

Как было: во время загрузки сайта загружались все рифмы.

Как стало: во время загрузки на главной загружается 6 рифм, в списке рифм — 27. То есть теперь грузится не 250 или 500 рифм, а только 6. А при переходе на список рифм — только 27. Эти цифры прописаны в коде и дают указания обрезать список рифм и показывать только малую часть. Для того чтобы показывать другие рифмы, мне нужна эти цифры увеличивать, когда?

На главной — при клике на стрелку вправо или при перелистывании слайдера. То есть кликнул на правую стрелку — число отображающихся рифм увеличивается на 1. Было 6, кликнул — 7 и так далее. Пользователь даже не догадывается что при первой загрузке показывается только 6 рифм. В списке рифм — когда пользователь прокрутит до конца экрана. То есть прокрутил до конца — я добавил еще 9, уже показывается 36 и так далее. В списке рифм это можно заметить по полосе прокрутки справа. Этот трюк позволил круто оптимизировать загрузку сайта.

Анимация

Крутой сайт без анимации — нее, не пойдет 🙂 Первое — прелоадер, то изображение, которое показывается при загрузке сайта. На это можно смотреть вечно 🙂

Анимация предлоадера

И вторая анимация — падающие кусочки пиццы при клике на лайк. Эта мысль появилась не сразу. Как-то кликнув на лайк я понял что это очень скучно, никакого движения, никакой реакции на мое действие.

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

Мне так захотелось быстрее это реализовать что я по пути в бассейн и во время плавания писал код в голове. На следующий день встал раньше чтобы поскорее приступить 😊 Мне оставалось лишь записать все что я придумал, возникло несколько проблем, которые успешно решились. Можно вечно смотреть на огонь, воду и падающие кусочки пиццы! Теперь сам не хочу уходить сайта и кликаю 😊

Я решил добавить падающие кусочки пиццы сверху, чтобы они крутились, были разного размера и летели с разной скоростью. Мне так захотелось быстрее это реализовать что я по пути в бассейн и во время плавания писал код в голове. На следующий день встал раньше чтобы поскорее приступить 😊 Мне оставалось лишь записать все что я придумал, возникло несколько проблем, которые успешно решились. Можно вечно смотреть на огонь, воду и падающие кусочки пиццы! Теперь сам не хочу уходить сайта и кликаю 😊

Падающие кусочки пиццы

В заключение

Мне понравилось работать над проектом, я кайфовал от каждой строчки кода и уже ищу идею для следующего такого проекта. У вас есть такая? Напишите мне в вконтакте (https://vk.com/postnov_daniil) или на телефон 8(953)085−02−03 (whats’app) 1900+ пользователей и 324+ рифм за 9 дней.

Для разработчиков

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

  • Javascript
  • Google Firebase (firestore)
  • Vue.js
  • Vue-router
  • Vue-masonry
  • npm-lodash.orderby