Продолжение поста «Вайб коддинг с ИИ от идеи до реализации»⁠⁠1

Привет, Пикабу!
Решил рассказать, как я делал свой маленький проект — злит.рф часть 2.

Это сайт, где можно просто написать, что тебя раздражает, и люди голосуют:
“😡 Злит” или “🙂 Не злит”.
Никаких аккаунтов, токсичности и рекламы — просто выговориться и полегчало.
________________________________________
💡 Откуда идея
Все вокруг чем-то недовольны — операторы связи, доставка, бюрократия, цены, новости.
А иногда просто хочется сказать “достало” и не устраивать драму.
Так родилась идея сделать сайт, где можно вылить злость в безопасное место, и другие либо поддержат, либо скажут, что “ну не злит”.
________________________________________
⚙️ Как всё начиналось
открыл VS Code и набросал форму:
<textarea placeholder="Напиши, что тебя злит..."></textarea>
<button>Добавить</button>
Добавил JS — чтобы посты сохранялись, капча, лайки/дизлайки, рейтинг.
Всё без фреймворков, просто fetch() и немного PHP на сервере.
Когда стало слишком много повторяющегося кода, я вынес всё в функции — вроде renderPost() для вывода поста.
Вот её короткая выжимка:
function renderPost(p) {
const div = document.createElement('div');
div.innerHTML = `
<div class="meta">${p.time} · Рейтинг: ${p.likes - p.dislikes}</div>
<div class="text">${p.text}</div>
<button>😡 ${p.likes}</button> <button>🙂 ${p.dislikes}</button>
`;
return div;
}
Да, HTML прямо внутри JS — не самое красивое решение, но зато удобно быстро собирать динамический контент.
По сути, это шаблон, который браузер рендерит на лету.
А ещё так проще вставлять данные из сервера, чем гонять куски через innerHTML в разных местах.
________________________________________
📦 Файлы и структура проекта
Проект небольшой, поэтому структура минималистичная:
/index.php — главная страница
/api.php — обработчик запросов (добавить пост, голосовать и т.д.)
/js/main.js — логика, fetch, отрисовка постов
/css/style.css — стили
/favicon.png — иконка сайта
/manifest.json — манифест для web-приложения
/service-worker.js — офлайн и установка на телефон
________________________________________
📱 Zlit как web-приложение (PWA)
Хотелось, чтобы сайт можно было установить на телефон прямо из браузера, как приложение.
Для этого добавил:
• manifest.json — с описанием и иконками
• {
• "name": "Zlit.рф",
• "short_name": "Zlit",
• "start_url": "/index.php",
• "display": "standalone",
• "icons": [
• { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
• { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
• ]
• }
• service-worker.js — чтобы кэшировать странички и показывать офлайн-версию.
Теперь, если зайти с Android-браузера, можно нажать “Установить на экран” — и сайт превращается в полноценное приложение.
________________________________________
🎨 Логотип и визуал
Лого сделал сам — точнее, сгенерировал в Яндекс.AI.
Загрузил промт “эмоциональный минималистичный смайлик злости в красно-оранжевых тонах”, получил PNG, чуть подправил иконку в Figma и сохранил несколько размеров для PWA.
________________________________________
🧭 Манифест проекта
Всё просто:
Злит.рф — это место, где можно безопасно высказать раздражение.
Без политики, без хейта, без споров.
Просто написать, что злит, и увидеть, что ты не один.
________________________________________
🧠 Немного аналитики
После запуска я подключил Яндекс.Метрику — чтобы понять, кто реально заходит, какие страницы открывают, какие посты вызывают больше эмоций.
Оказалось, больше всего злит — поведение служб доставки и ценники 😅.
________________________________________
🚀 Что дальше
Хочу добавить авторизацию, чтобы можно было подписываться на авторов и комментировать без спама.
А пока просто радуюсь, что сайт живёт, и люди туда заходят писать не только “что злит”, но и “что отпустило”.
________________________________________
Ссылка: https://злит.рф