DeN-Ex-Kit 🚀

УНИВЕРСАЛЬНЫЙ UI-кит для быстрого создания веб-приложений для экзаменов.

⚠️ ВАЖНО: Этот кит НЕ привязан к конкретным темам! Он подходит для ЛЮБОГО задания с регистрацией, авторизацией и CRUD операциями.

Включает готовый бэкенд, красивый фронтенд с анимациями и CLI для быстрого старта.

🎯 Для экзамена

👉 СМОТРИ EXAM_GUIDE.md - пошаговая инструкция для экзамена!

Особенности

• ✅ Универсальный бэкенд на Express + Sequelize + PostgreSQL
• ✅ Красивый UI с GSAP анимациями
• ✅ Готовые компоненты (Button, Input, Table, Modal и др.)
• ✅ Система авторизации с JWT
• ✅ Админ панель
• ✅ CLI для быстрого старта
• ✅ Легко кастомизируется под любую тему

Быстрый старт

Вариант 1: Установка из NPM (рекомендуется)

# Установи глобально
npm install -g den-ex-kit

# Создай проект
den-ex-kit create my-project

Вариант 2: Локальная установка

# Клонируй репозиторий
git clone https://github.com/your-username/den-ex-kit.git
cd den-ex-kit/cli
npm install -g .

Дальнейшие шаги

den-ex-kit create my-project

3. Установка зависимостей

cd my-project
npm run install:all

4. Настройка базы данных

Создайте базу данных PostgreSQL и укажите данные в .env файле.

5. Запуск проекта

npm run dev

Фронтенд: http://localhost:3000 Бэкенд: http://localhost:5000

Структура проекта

my-project/
├── backend/
│   ├── models/         # Sequelize модели
│   ├── routes/         # Express роуты
│   ├── middleware/     # JWT, валидация
│   └── server.js       # Точка входа
├── frontend/
│   ├── src/
│   │   ├── components/ # UI компоненты
│   │   ├── pages/      # Страницы
│   │   ├── utils/      # API, сервисы
│   │   └── animations/ # GSAP анимации
│   └── index.html
└── package.json

Кастомизация

Изменение цветов

Откройте frontend/src/index.css и измените CSS переменные:

:root {
  --color-primary: #ВАШ_ЦВЕТ;
  --color-secondary: #ВАШ_ЦВЕТ;
  /* и т.д. */
}

Добавление полей в модели

Редактируйте файлы в backend/models/:

• User.js - модель пользователя
• Order.js - модель заказа/заявки

Изменение валидации

Редактируйте backend/middleware/validation.js

API Endpoints

Авторизация

• POST /api/auth/register - Регистрация
• POST /api/auth/login - Вход
• GET /api/auth/me - Текущий пользователь

Заказы

• GET /api/orders - Получить заказы пользователя
• POST /api/orders - Создать заказ
• GET /api/orders/:id - Получить заказ по ID

Админ

• POST /api/admin/login - Вход админа
• GET /api/admin/orders - Все заказы
• PATCH /api/admin/orders/:id/status - Изменить статус
• GET /api/admin/stats - Статистика

Компоненты UI

Button

<Button variant="primary" size="md" loading={false}>
  Кнопка
</Button>

Input

<Input
  label="Email"
  type="email"
  error={errors.email}
  {...register('email')}
/>

Modal

<Modal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="Заголовок"
>
  Контент модалки
</Modal>

Table

<Table
  columns={[
    { key: 'id', title: 'ID' },
    { key: 'name', title: 'Название' }
  ]}
  data={data}
/>

Что в коробке?

Готовые страницы:

• ✅ Главная страница - красивый лендинг с галереей из 8 картинок
• ✅ Регистрация - с полной валидацией всех полей
• ✅ Авторизация - вход для пользователей и админов
• ✅ Список заказов - с фильтрами и статусами
• ✅ Создание заказа - универсальная форма с всеми полями
• ✅ Админ панель - управление заказами и статусами
• ✅ Статистика - красивые графики

Крутые фишки:

• 🎆 GSAP анимации на всех элементах
• 🌨️ Красивая главная страница с галереей из 8 картинок
• 🎨 Легко меняющиеся цвета через CSS переменные
• 📦 Универсальная модель Order с всеми возможными полями
• 📱 Адаптивный дизайн (390x844px)

Как использовать на экзамене за 5 минут

Шаг 1: Создай проект

den-ex-kit create exam-project
# Выбери цветовую схему
# Укажи данные БД

Шаг 2: Добавь нужные поля

Открой frontend/src/pages/CreateOrder.jsx и добавь поля из задания:

{/* Примеры полей: */}
<Input label="Адрес" {...register('address')} />
<Input label="Количество" type="number" {...register('quantity')} />
<Select label="Категория" options={options} {...register('category')} />

Все дополнительные поля автоматически сохранятся в JSON поле data

Шаг 3: Поменяй названия

VS Code: Ctrl+Shift+H (поиск и замена)

• Замени "заказ" на то что нужно
• Замени "DeN-Ex-Kit" на название системы

Шаг 4: Настрой админские логины

В .env укажи нужные логины для админа из задания

Шаг 5: Запусти!

npm run install:all
npm run dev

🎉 ГОТОВО! У тебя полностью рабочее приложение!

Как адаптировать?

1. Прочитай задание - определи какие поля нужны
2. Добавь эти поля в CreateOrder.jsx
3. Замени слова на нужные (заказ → что в задании)
4. Настрой цвета и админские логины