Разработали портал машинок Hot Wheels на фрейморке Symfony

Уверен, что у большинства людей, причастных к созданию каких-либо проектов (необязательно web/it), есть желание сделать что-то не по ТЗ. Как архитектор мечтает проектировать без оглядки на ген.план, а режиссер снимать авторское кино.

Начиналось всё как у всех: увидел в магазине машинки hot wheels, вспомнил какими недосягаемыми они казались в детстве. На чувстве ностальгии взял пару штук. Потом ещё пару… Оправдывая себя тем, что покупаю их для сына, в течении пары месяцев набрал более 100 штук. И появилась проблема с дублями. Далее к процессу подключилась жена и проблема только увеличилась: теперь нужно было помнить не только то, что ты когда-то покупал, но и знать не взяла ли тоже самое твоя половина.

Так начался путь длиной в 12 месяцев и 2 недели...

Портал для коллекционеров Hot Wheels должен был решить следующие задачи:

  • сделать удобный архив/каталог всех моделей:
  • дать возможность собрать и показать свою коллекцию;
  • дать по возможности полную информацию о каждой модели.

Кроме чисто мальчишеского азарта, этой идеей мы бросали себе вызов как веб-студии, так как это наш первый проект на фрэймворке Symfony.

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

Структура коллекций

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

Отталкивались от базовых признаков модели: блистер, колеса, детальность и один особенно характерный признак (например, id или character). В итоге получилось 5 категорий:

  • Mainline (пластиковые колеса);
  • ID (встроенный чип);
  • Character (по мотивам мультипликационных персонажей);
  • Premium (резиновые колеса);
  • Exclusive (высокая детализация).

Собрать коллекцию

Основная идея создания портала - возможность поделиться своей коллекцией моделей Hot Wheels с другими коллекционерами. Не разложенной на ковре и сфотканной с табуретки, где ничего нельзя увидеть. А в достойном виде, где все модели можно сортировать, фильтровать и про каждую можно узнать дополнительную информацию. А самые желанные модели из чужой коллекции добавить в свой wishlist.

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

Разработали портал машинок Hot Wheels на фрейморке Symfony

Коллекция пользователя

Разработали портал машинок Hot Wheels на фрейморке Symfony

Рейтинг

По мере пополнения личной коллекции каждому пользователю присваиваются достижения: за собранную коллекцию и за общее количество тачек. Все пользователи участвуют в общем рейтинге ТОП-100.

Разработали портал машинок Hot Wheels на фрейморке Symfony

А что внутри кода?

Со стороны технической части:

  • 90% проекта работает на ajax (подгрузка контента и взаимодействие пользователя с сайтом);
  • для сбора и загрузки данных написана система на node.js с использованием puppeteer;
  • frontend на JS фреймворке Stimulus;
  • backend на PHP фрэймворке Simfony:- twig шаблонизатор (генерация верстки),- webpack (сборщик проекта).

Развитие проекта

Проект запущен в мае 2023. В течении первых двух недель сайт занял ТОП поисковой выдачи по огромному облаку запросов. И начался рост базы пользователей. На момент написания статьи - 21 сентября 2023 года - на портале зарегистрировано 330 коллекционеров.

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

Сейчас на сайт залито около 22 000 артикулов с 2000 года по настоящее время. Каталог будет расширяться моделями из 90х и 80х годов. И в итоге, по машинкам тоже будет свой рейтинг.

33
2 комментария

90% проекта работает на ajax (подгрузка контента и взаимодействие пользователя с сайтом)

Для 2013 года это действительно круто

1
Ответить

Мощный портал машинок на фрейморке - это просто огонь!

1
Ответить