Разработка проекта для «Додо Пицца»

Задизайнил, сверстал и запрограммировал сервис для добавления своей рифмы в стиле «Додо». 1900+ пользователей и 324+ рифм за первые 9 дней.

О проекте

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

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

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

К удивлению Федор ответил через 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
Хочешь такой же результат?
Имя
Контакт для связи
Подробнее о проекте

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

Вопрос-ответ

Работаете с NDA?

Да, работаю с договором NDA и не выкладываю такие проекты в портфолио и в соц.сетях. Если вы планируете подписывать со мной NDA, нужно быть готовым к повышению стоимости проекта.

Вы отвечаете за сроки?

Я не планирую впритык. Закладываю время на коммуникацию и детальную проработку. За каждый день просрочки по моей вине вычитаю 3% от моей оплаты. Прописываю это в договоре.

Работаете по договору?

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

Какие этапы разработки сайта?

  1. Знакомство с задачей, ЦА и целью сайта.
  2. Заключение договора
  3. Предоплата 50%
  4. Изучение конкурентов, сильных и слабых мест.
  5. Создание структуры сайта
  6. Написание текстов
  7. Создание прототипа
  8. Создание дизайна
  9. Вёрстка сайта
  10. Создание админ. панели сайта
  11. Постоплата 50%
  12. Предоставление доступов и исходных материалов

Сможем ли мы самостоятельно редактировать сайт?

Да, сможете. В процессе разработки сайту будет добавлена возможно редактирования текста, изображений, блоков.

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

Нужно ли платить за сайт ежемесячно?

Разработка сайта выполняется за единовременную оплату. Постоянное отображение в интернете с уникальным адресом требует небольших ежемесячных вложений.

Нужно будет приобрести хостинг и домен. Хостинг — место хранения сайта в интернете. Домен — красивое название сайта. В среднем стоимость домена — 250 рублей в год, хостинга — 1800 рублей в год.

Если вы заказали разработку сайта на Тильде, вместо хостинга нужно будет оплачивать аккаунт в Тильде. Стоимость ежемесячной платы от 500 до 1200 в зависимостей от требования проекта.

Работаете по предоплате?

Размер предоплаты — 30−50%.

Можем договориться об разделении разработки на этапы. Каждый этап делится на предоплату и постоплату.

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

Вы создаете сайты на конструкторе?

Я работаю с конструктором Тильда. Работаю в основном в zero-блоке, он позволяет создать уникальный дизайн для каждого блока. Для большинства лендингов и корпоративных сайтов сайт на конструкторе более экономный и быстрый вариант.

Какие способы оплаты?

Qiwi, Яндекс деньги, Paypal, перевод на карту банка, перевод на юр. лицо, безопасные сделки через сторонние сервисы.

Вы продвигаете сайт после создания?

Я не занимаюсь продвижением. После создания сайта передаю клиента на продвижение профессионалам в области.

За какой срок выполняется создание сайта?

Срок выполнения работ зависит от объема и сложности задачи. В среднем — 14 дней. Крупные порталы могут создаваться 6 месяцев, а одностраничный сайт может быть готов уже спустя 10 дней.