Lovavle https://lovable.dev/invite/QDNYDMF (за цим посиланням дадут 10 кредитів) + будуть кредити при реєстрації (далі за підпискою 25$ на місяць)
Google AI Studio https://aistudio.google.com/apps є безкоштовні ліміти (далі знімає за використання)
На цьому уроці ми не програмуємо - ми проєктуємо та збираємо додаток із допомогою ШІ. Ви описуєте словами, що хочете - ШІ генерує код - ви дивитесь результат і коригуєте.
Уявіть, що ви наймаєте будівельну бригаду. Ви не кладете цеглу самі - ви кажете: «тут стіна, тут двері, тут вікно». Але вам треба знати, що таке стіна і двері, щоб перевірити, чи правильно їх поставили. Ось це ми і вчимося - розуміти, що просити і як перевіряти.
Веб-додаток - це сайт, який вміє щось робити. Gmail, Trello, Notion - це все веб-додатки.
Фреймворк - як набір LEGO з інструкцією. Замість того щоб робити все з нуля, платформа бере готовий набір і збирає з нього.
Правила проєкту - це інструкція для ШІ: «що робити, що НЕ робити». Без них ШІ може додати 50 непотрібних речей «на всяк випадок».
Створи веб-додаток «Mini GTD UA» — простий персональний менеджер задач
українською мовою за методологією GTD (Getting Things Done).
Це додаток для одного користувача.
Вимоги до першої версії:
- Темна тема за замовчуванням
- Мова інтерфейсу — українська
- Поки що лише одна сторінка з текстом "Mini GTD UA — менеджер задач"
- Не додавай авторизацію, базу даних чи будь-яку складну логіку
- Це лише каркас, решту зробимо покроково
PROJECT_RULES - це інструкція для ШІ: «що робити, а що НЕ робити». Без неї ШІ може додати 50 непотрібних речей «про запас».
PRD (Product Requirements Document) - це «меню ресторану». Список усього, що має вміти наш додаток. Якщо страви немає в меню - ми її не готуємо. ШІ теж дивитиметься на цей документ і не буде додавати зайвого.
ARCHITECTURE - це «план будинку зверху». Де які кімнати, де двері, де вікна. Допомагає не заблукати в проєкті, коли він росте.
Створи два документи для проєкту Mini GTD UA.
1. Файл PROJECT_RULES.md — правила розробки:
- Мова інтерфейсу — українська
- Не додавати зайвих файлів чи бібліотек без потреби
- Кожен компонент — в окремому файлі
- Кольори — лише через CSS-змінні (дизайн-токени), ніяких
хардкодних text-white чи bg-gray-900 у компонентах
- Не додавати фічі, яких нема в плані
- Бізнес-логіка не живе в UI-компонентах
2. Файл docs/PRD.md — опис продукту:
- Що це: простий персональний менеджер задач для одного
користувача, українська мова, методологія GTD
- Функції:
• 5 списків задач: Вхідні, Наступні, Читати/Дивитись,
Колись, Архів
• Кожна задача має: назву, нотатку, теги, дату, статус
• Переміщення задач між списками
• Кошик (м'яке видалення)
- Поза скоупом:
• Командна робота
• Складний календар
• Email-повідомлення
Дотримуйся PROJECT_RULES у всіх наступних задачах.
Створи файл docs/ARCHITECTURE.md — опис технічної архітектури
проєкту Mini GTD UA.
Опиши:
1. Технологічний стек (які інструменти використовуємо)
2. Структура папок (де що лежить у проєкті)
3. Маршрути додатку (які є сторінки і за якими адресами)
4. Дизайн-система (де зберігаються кольори та стилі)
5. Що ще не реалізовано (база даних, авторизація, AI —
буде на наступних уроках)
Мова — українська. Тримай документ актуальним.
Маршрутизація (routing) - коли ви відкриваєте різні адреси в браузері (/inbox, /trash), додаток показує різні сторінки. Як двері в будинку - кожні ведуть в іншу кімнату.
Layout - це «рамка» навколо сторінок. Наприклад, меню зверху є на КОЖНІЙ сторінці - це layout. Без нього довелося б копіювати меню на кожну сторінку окремо.
Responsive дизайн — коли додаток виглядає добре і на телефоні, і на ноутбуці. Меню на широкому екрані — горизонтальне, на вузькому — ховається в «бургер» ☰.