ГОСБЕНЗИН: як я на базі React створив симулятор черг із поінтами та якісним тролінгом русні

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Привіт, спільното! Усі ми знаємо класичний стан інді-розробника: коли хочеться і код пописати, і завайбитись, і водночас знайти привід якісно потролити тих самих персонажів з боліт, у яких бензин на заправках зникає швидше, ніж вода в пустелі Сахара.

На фоні цього вічного паливного колапсу я вирішив: чому б не зробити власний інтерактивний вебпроєкт? Так народився «ГОСБЕНЗИН» (gosbenzin.vercel.app) — сатиричний міні-всесвіт із гейміфікацією, чергами, поінтами та першокласною інді-атмосферою. Сьогодні коротко розповім, як я його зібрав і чому такі проєкти найкраще лікують від професійного вигорання.

Ідея: тренуємо скіли на паливному абсурді

Ідея лежала на поверхні. Раз у них бензин — це предмет розкоші та загадка всесвітнього масштабу, то чому б не перенести це в інтерфейс?

Технічний стек я обрав класичний та зручний для швидкого прототипування: модульні компоненти на React, легкий і стильний Tailwind CSS та оптимізований стейт-менеджмент. Мені важливо було, щоб попри усю сатиру, додаток працював плавно, а кнопки натискалися чітко — якість інді-іронії має підкріплюватися чистим кодом.

Ігрові механіки: черги, поінти та неминучий Reveal

Будь-який симулятор виживання на заправках базується на кількох базових речах. Під капотом я реалізував:

1. Система черг (queue.png): Логіка очікування, щоб кожен «щасливчик» відчув усю глибину процесу.
2. Нарахування поінтів (points.png): Гейміфікація заради візуального фідбеку — клікаєш, накопичуєш ресурси, поки бак порожній.
3. Етапи Reveal (gos-reveal.png): Анімації розгортання екранів та відкриття нових статусів.

Оформлення та кастомний UI

Щоб проєкт виглядало як справжній артхаусний мем, я відмовився від стандартних шаблонів. Застосував кастомні модалки (doc-modal.png), стилізовані сповіщення та попрацював над адаптивністю. Усе це збиралося швидко, весело і з великим задоволенням.

Замість висновку

«ГОСБЕНЗИН» став чудовою практикою і водночас способом підняти настрій собі та ком’юніті. Пет-проєкти — це не обов’язково серйозні ентерпрайз-рішення. Іноді це просто чистий завайб і тролінг тих, хто на нього заслуговує.

Розкажіть у коментарях, чи робите ви фанові проєкти «просто по приколу», і які теми зараз надихають вас найбільше!