Вместе с Савелием Сабировым и Максимом Гайворонским закодили самую актуальную базу хакатонов России.
- Что
- Фронтенд и дизайн
- Для кого
- Цифровые кафедры ННГУ
- Стек
- Vue и Vike
- Срок
- Май и июнь 2025-го
На главной странице — свежие хакатоны, мотивация для участников и каталог с фильтрами.
Всегда актуальная база
Парсер, основанный на «Дипсике-Р1», мониторит интернет постоянно. ЛЛМ находит сайты хакатонов и раскладывает конспект по JSON-полям, а мы собираем красивые страницы по шаблону.
На странице хакатона — всё, что нашёл парсер.
Техническое про фронтенд
Мы делали фронт на Vike и Vue. Управляли Гитхаб-хуками с помощью Lefthook и писали запросы на OpenAPI Fetch в связке с Tanstack Query. Вот инсайты из процесса разработки.
Вик — идеальный легковесный Некст
Вик — фреймворк с гибкой архитектурой. Хочешь — пиши на Реакте, хочешь — на Вью или Солиде. Можно собирать CSR, SSR и статику. Мы потратили на SSR ноль минут. Vike
Автогенерация из ОпенАПИ-схемы
Я попросил Савика, нашего бэкендера, запилить схему всех эндпоинтов. Из неё сгенерированы типы, которые ничего не весят на клиенте и не занимают рантайм. OpenAPI Fetch
Архитектурный линтер
Одно из правил архитектурного линтера отслеживает импорты и запрещает тянуть данные из внутренностей модуля, если это не импорт из файла index.ts с публичными экспортами. Dependency Cruiser
Хот релоад на деве
Горячая замена модулей, HMR — это фишка сборщика. Когда ты редактируешь часть кода, она тут же меняется на сайте.
Мы развернули дев-сервер публично, и изменения мгновенно прилетали на устройства коллег — аналитиков и тестировщиков.
Дизайн — сразу кодом
Я сделал дизайн без единого макета — прямо в коде.
В Фигме ты рисуешь статичную картинку, а в коде сразу проектируешь ховер- и фокус-состояния, анимации и переходы.
Дизайнить кодом тупо быстрее, чем в Фигме.
Самый смак в ЦСС
Anchor Positioning, чтобы анимировать подсветку в селекте; Container Queries, чтобы компонент подстраивался под окружение; PostCSS-миксины, чтобы переиспользовать стили и упростить рефакторинг.
Тёмная тема за бесплатно
Мы с самого начала настроили дизайн-систему из семантических ЦСС-токенов. Тема меняется в одном ЦСС-файле. Компоненты адаптируются автоматически.
Генеративный арт
Патерны на главной странице сгенерированы через комбинацию радиальных и линейных градиентов на Яваскрипте.
Спасибо
Неизменно крутой команде:
- Савелий Сабиров сделал лучший бэкенд. Это микросервисы на ФастАПИ с Докером и оповещениями о новых хакатонах через АПИ Телеграма.
- Максим Гайворонский запилил карту, самый запаренный в техническом плане фрагмент сайта, и вынес в НПМ-пакет.