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

Привет, Пикабу!
Решил рассказать, как я делал свой маленький проект — злит.рф часть 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://злит.рф


Показать полностью

Вайб коддинг с ИИ от идеи до реализации

Каждый день кто-то раздражает — новости, операторы связи, чиновники, соседи с перфоратором в субботу.
Хочется выговориться, но не ссориться.
Так появилась идея — сделать место, где можно просто сказать:
“Вот что меня злит.”

Я не программист в классическом смысле, просто люблю возиться с кодом.
Начал с формы и textarea — написал пару строк на HTML и JS.
Потом подумал: а было бы круто, если бы люди могли голосовать — “злит” или “не злит”.
Посты с рейтингом, капча, счётчик символов — всё добавлял по чуть-чуть.

Когда-то я попросил помощи у нейросети — просто спросил, как сделать красивый счётчик символов.
А дальше закрутилось.
В целом вышло где-то 2.5к строк кода, 14 файлов всего, 3 js файла с основными скриптами и 1 css файл с стилями к страницам, 10 php страниц что-бы разбросать функции ну и собственно говоря 5 страниц для посещения.
Простая авторизация, база mysql.
ИИ подкинул идеи, помог с анимацией placeholder’а, со структурой базы, с тем, чтобы всё выглядело аккуратно.
По сути, я только ставил задачи, но как будто с умным напарником, который не спит и не ноет.

Теперь на злит.рф можно написать, что тебя злит —
например: “курьер обещал через 10 минут, а приехал через два часа”,
или “билет купил, а концерт отменили без возврата”.
Люди читают, жмут “😡 Злит” или “🙂 Не злит”,
и из этих реакций рождается рейтинг.
Топ злитов — это срез народного раздражения,
а комментарии иногда превращаются в добрые мини-форумы поддержки.

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

В планах было-бы здорово добавить интерактивную карту России где отображались бы настроения.

В целом приятный опыт, программирование вышло на какой-то автоматизированный уровень. Использовал ChatGPT
Если есть идеи, буду рад что-то добавить, хотя это скорее просто забить свободное время.

Вайб коддинг с ИИ от идеи до реализации
Показать полностью 1
Отличная работа, все прочитано!

Темы

Политика

Теги

Популярные авторы

Сообщества

18+

Теги

Популярные авторы

Сообщества

Игры

Теги

Популярные авторы

Сообщества

Юмор

Теги

Популярные авторы

Сообщества

Отношения

Теги

Популярные авторы

Сообщества

Здоровье

Теги

Популярные авторы

Сообщества

Путешествия

Теги

Популярные авторы

Сообщества

Спорт

Теги

Популярные авторы

Сообщества

Хобби

Теги

Популярные авторы

Сообщества

Сервис

Теги

Популярные авторы

Сообщества

Природа

Теги

Популярные авторы

Сообщества

Бизнес

Теги

Популярные авторы

Сообщества

Транспорт

Теги

Популярные авторы

Сообщества

Общение

Теги

Популярные авторы

Сообщества

Юриспруденция

Теги

Популярные авторы

Сообщества

Наука

Теги

Популярные авторы

Сообщества

IT

Теги

Популярные авторы

Сообщества

Животные

Теги

Популярные авторы

Сообщества

Кино и сериалы

Теги

Популярные авторы

Сообщества

Экономика

Теги

Популярные авторы

Сообщества

Кулинария

Теги

Популярные авторы

Сообщества

История

Теги

Популярные авторы

Сообщества