How I let Gemini AI write 100% of this React/TypeScript Web App

Хочу поделиться интересным open-source экспериментом, над которым я работал. Уникальность этого проекта не столько в его функционале, сколько в способе его создания.

Практически вся кодовая база (логика фронтенда, UI, CSS) была сгенерирована Google Gemini AI, исключительно под моим руководством через текстовые промпты.

Это своего рода кейс-стади: можно ли создать современный, полнофункциональный продукт, просто «раздавая команды» ИИ-модели?

2. Обзор проекта

• Название: Asking.vn (Репозиторий: https://github.com/kenhgt247/me-be )
• Тематика: Социальная Q&A платформа и блог для семьи (Материнство и Детство).
• Цель: Создать чистое, минималистичное пространство, где родители могут задавать вопросы и читать советы экспертов.

3. Стек технологий

Несмотря на то, что код писал ИИ, я направил его на использование современного и строгого стека:

• Frontend: React (Vite), TypeScript.
• Styling: Tailwind CSS (дизайн Mobile-first).
• Icons: Lucide React.
• AI Integration: Gemini API (для генерации заголовков и контента для пользователей).

4. Чего удалось добиться с помощью ИИ?

Результаты оказались на удивление хорошими:

• UI/UX: ИИ спроектировал интерфейс в стиле «Zen Mode» — чистый, читабельный, очень похожий на платформы вроде Medium или Substack.
• Сложная логика: Без проблем справился с пагинацией, загрузкой изображений (с превью) и логикой «Анонимного входа».
• Рефакторинг: Когда я просил «почистить код» или «разбить на компоненты», ИИ выполнял вполне достойный рефакторинг (хотя структуру папок мне все же пришлось организовывать вручную).

5. Почему Open Source?

Я выложил проект на GitHub по двум причинам:

1. Поделиться опытом: Новички могут посмотреть, как ИИ генерирует React-код и какие промпты для этого используются.
2. Получить фидбек (Code Review): Поскольку код сгенерирован ИИ, в нем наверняка есть избыточность или проблемы с производительностью. Я буду рад любой критике и предложениям по улучшению архитектуры.

6. Планы на будущее (Roadmap)

• Миграция на Next.js для лучшего SEO.
• Реализация полноценного бэкенда (сейчас используется BaaS/Mock).
• Поддержка темной темы (Dark Mode).