Тази страница е за хората, на които им е любопитно как е направен сайтът. RUSE AI HACK не е само landing page, а малка платформа за събитието: публичен сайт, регистрации, билети, админ панел и showcase режим в една кодова база.
Тук ще намериш стека, библиотеките, техниките и част от решенията зад проекта: как е направен, как е оптимизиран и какво използваме за анимации, дизайн, performance и backend логика.
Кодът е публичен под MIT лиценз. Ако ти хрумне подобрение или откриеш нещо интересно, issues и PR-и са добре дошли.
Преди да говорим за библиотеки, по-важно е да е ясно какъв проблем решава проектът. Това не е просто “сайт за събитието”, а цялостен event flow.
Начална страница, програма, жури, спонсори, правила и цялата информация, която трябва да е ясна още преди регистрацията.
Форма с валидация, проверка на статуса на регистрацията, обработка на дублирани имейли и плавен преход към личен билет.
Автоматично генериран ticket number, GitHub avatar, PNG export и споделяне. Това е и най-разпознаваемата UI част на проекта.
Скрита секция за преглед на регистрации, смяна на статуси, статистики, CSV export, имейли и контрол върху отварянето на регистрацията.
Същата кодова база може да се превключи от registration mode към archive/showcase mode и да покаже победители, снимки и recap съдържание.
Технологиите тук не са подбрани, за да звучат модерно, а защото вършат конкретна работа добре за малък, бърз и поддържим продукт.
src/app/(site) държи публичните страници.src/app/(admin) е отделен route group за организаторските инструменти.src/components/views съдържа page-level изгледите, а src/components/sections разбива landing page-а на преизползваеми секции.src/lib и src/hooks пазят бизнес логиката отделно от UI.Сайтът изглежда ефектно, но идеята не е да се жертва скоростта заради визуалности. Точно обратното: по-тежките неща са изолирани така, че да не пречат на първото зареждане.
dotted-surface.tsx зарежда three вътре в useEffect, а не още при първия render. ticket-visual.tsx активира vanilla-tilt само ако устройството има fine pointer. За download на билета html-to-image се вика чак при натискане на бутона, не предварително.
При форма за събиране на лични данни и админ достъп не е достатъчно всичко да изглежда добре. Трябва да има и разумни защитни слоеве.
Това не превръща приложението в банков софтуер, но е добър пример как дори малък проект може да мисли за сигурност от самото начало, а не чак когато стане проблем.
Визията е важна, защото сайтът е част от преживяването на хакатона. Добрата новина е, че много от по-интересните идеи вътре са напълно разглобяеми и можеш да ги изучиш поотделно.