ПРОМПТ. создание блога.

Нейросети Просмотров: 67

Дуальный промпт: Создание современного блога с админ-панелью и базой знаний

Цель: Создать полнофункциональное, визуально привлекательное и безопасное веб-приложение для ведения блога и базы знаний.

Технический стек:

  • Фреймворк: Next.js 15+ (App Router)

  • Язык: TypeScript

  • Стилизация: Tailwind CSS с кастомными темами

  • UI-компоненты: shadcn/ui

  • База данных: PostgreSQL

  • ORM: Prisma

  • Аутентификация: JWT, хранимый в httpOnly cookies

  • Сервер: Единый порт (3000)

Ключевые принципы:

  • Модульность: Код должен быть организован так, чтобы новые функции (плагины) можно было легко добавлять и удалять.

  • Безопасность: Строгая валидация данных, защита от SQL-инъекций, XSS и CSRF.

  • UX/UI: Интерфейс должен быть интуитивно понятным, современным и отзывчивым.

План реализации (Разбивка на подзадачи)

Задача 1: Инициализация проекта и базовая структура

  • Создай новый Next.js 15+ проект с TypeScript и App Router.

  • Настрой tailwind.config.js с кастомными цветами (primary, secondary, accent) и шрифтами (например, Inter).

  • Инициализируй shadcn/ui и установи базовые компоненты: button, input, label, card, form.

  • Создай базовую структуру папок:

    text
    src/
  app/
    (public)/          # Публичные маршруты
      blog/
      knowledge-base/
    (admin)/           # Защищенные маршруты (требуют auth)
      admin/
    (auth)/            # Маршруты для аутентификации
      login/
      register/
    api/               # API endpoints
      auth/
      admin/
      public/
      install/
    data/              # Не обслуживается Next.js (нужна для файлов конфига)
  lib/                 # Утилиты, конфиги
  components/          # React-компоненты (ui, shared, admin)
  types/               # Global TypeScript types

  • Инициализируй Prisma: npx prisma init. Схема Prisma будет создана на этапе установки.

Задача 2: Установочный процесс (первый запуск)
(Этот этап должен быть выполнен одним из первых, как ты и указал)

Цель: Реализовать безопасный процесс первоначальной настройки приложения.

Шаги для реализации:

  1. Мидлвар для проверки установки:

    • Создай файл src/middleware.ts.

    • В логике мидлвара проверяй существование файла src/data/install.lock.

    • Если файл не существует и пользователь пытается получить доступ к любому маршруту, кроме /install и API-эндпоинтов установки, — перенаправь его на /install.

    • Если файл существует, маршрут /install должен быть недоступен (редирект на главную).

  2. Страница установки (/install):

    • Создай страницу src/app/install/page.tsx.

    • Разработай интуитивно понятную форму с использованием компонентов shadcn/ui (Form, Input, Label, Button).

    • Поля формы:

      • dbHost (хост БД)

      • dbPort (порт)

      • dbUser (пользователь)

      • dbPassword (пароль)

      • dbName (имя базы данных)

      • adminEmail (email первого администратора)

      • adminPassword (пароль первого администратора)

  3. API-эндпоинты для установки (/api/install/...):

    • POST /api/install/test-connection

      • Прими поля для подключения к БД из тела запроса.

      • Попробуй установить подключение к PostgreSQL с помощью Prisma (или напрямую с помощью pg).

      • Верни JSON-ответ { success: boolean, message: string }.

    • POST /api/install/setup

      • Прими все данные из формы (как для теста соединения, так и учётные данные админа).

      • Протестируй подключение. В случае неудачи — верни ошибку.

      • Сгенерируй schema.prisma: На основе принятых данных БД динамически сгенерируй содержимое для prisma/schema.prisma. Это должна быть базовая схема с моделями User, Post, Category и т.д.

      • Примени миграции: Выполни команду prisma db push или prisma migrate dev программно (например, с помощью execSync или пакета @prisma/client с динамическим подключением).

      • Создай первого пользователя: Захешируй пароль (используй bcryptjs) и создай запись в таблице User с ролью ADMIN.

      • Сохрани конфиг: Запиши данные для подключения к БД (зашифруй пароль, если возможно) в файл src/data/config.json.

      • Создай lock-файл: Если все шаги выполнены успешно, создай пустой файл src/data/install.lock.

      • Верни успешный ответ. После этого мидлвар начнёт пропускать пользователей на основные маршруты.

  4. Безопасность:

    • После успешной установки все эндпоинты /api/install/* должны стать недоступными (возвращать 404).

    • Папка src/data/ должна быть добавлена в .gitignore.

Задача 3: Система аутентификации и авторизации

  • Реализуйте API-эндпоинты POST /api/auth/login и POST /api/auth/register (если регистрация открыта).

  • Используйте bcryptjs для хеширования паролей и jsonwebtoken для создания JWT.

  • Настройте отправку JWT в httpOnly cookie при успешном логине.

  • Создайте хелпер-функцию getUserFromSession для извлечения и верификации пользователя из cookie на сервере.

  • Создайте Client Component AuthProvider для управления состоянием аутентификации на клиенте.

  • Реализуйте механизм Protected Routes для папки (admin) с помощью мидлвара или проверок на layout уровне.

Задача 4: Базовая структура Блог и База знаний (Публичная часть)

  • Опиши в Prisma модели: Post (id, title, content, published, author, categories, createdAt), Category, User.

  • Создай API-эндпоинты для получения статей: GET /api/public/posts, GET /api/public/posts/[id].

  • Реализуй страницы: /blog (список постов), /blog/[slug] (один пост).

  • Реализуй раздел /knowledge-base по аналогии, но, возможно, с другой структурой (например, с древовидной категоризацией). Модель KbArticle может иметь поля parentId для построения иерархии.

Задача 5: Админ-панель

  • Создай layout для /admin с боковой навигацией (Sidebar).

  • Реализуй дашборд (/admin) с общей статистикой (количество статей, пользователей и т.д.).

  • CRUD для статей:

    • Страница /admin/posts с таблицей (используй DataTable от shadcn/ui) всех статей и кнопкой "Создать".

    • Страница /admin/posts/edit/[id] с богатым текстовым редактором (добавь библиотеку, например TipTap или Lexical).

    • Возможность сохранять черновик и публиковать.

  • CRUD для категорий и тегов.

  • Управление пользователями (для админов с высшими привилегиями).

Задача 6: Дополнительные функции (по твоему усмотрению)

  • Поиск: Полнотекстовый поиск по статьям базы знаний и блогу (используй возможности PostgreSQL или подключи Meilisearch/Algolia).

  • Комментарии: Система комментариев (например, с использованием Utterances или самописная на базе новой модели Prisma).

  • Лайки/Реакции: Возможность для авторизованных пользователей ставить лайки статьям.

  • Валидация: Подробная валидация всех форм с помощью zod и интеграцией с shadcn/ui.

  • Тегирование: Система тегов для статей.

  • SEO: Генерация sitemap.xml и robots.txt динамически через API-роуты. Настройка мета-тегов для каждой страницы.

  • Кэширование: Настройка revalidate для страниц блога для повышения производительности.

Задача 7: Финальные штрихи и деплой

  • Настрой кастомную тему (light/dark mode) с помощью Tailwind и shadcn/ui.

  • Проведи тестирование всех критических функций: установка, вход, создание статьи, публичный доступ.

  • Настрой next.config.js для корректной работы с API-роутами и статическими файлами.

  • Подготовь инструкцию по деплою (например, на Vercel или Railway), включая настройку переменных окружения для production-базы данных.