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).
Не плохо, главное не забрасывать, развивайте. Удачи!