@mashka818/exam-de-template 1.0.0

package/exam-guides/NPM_PACKAGE.md

@@ -0,0 +1,206 @@
+# Шаблон на npm (экзамен **без флешки**)
+
+На экзамене нужны **интернет** и заранее опубликованный пакет на https://www.npmjs.com/
+
+Вы создаёте папку → `npm install` или `npx … init` → шаблон скачивается в `node_modules` → распаковка в проект (или работа из `node_modules`).
+
+Краткая шпаргалка команд: **EXAM_COMMANDS.txt**
+
+---
+
+## 1. Один раз дома: опубликовать пакет
+
+### 1.1. Регистрация
+
+1. Аккаунт: https://www.npmjs.com/~mashka818 (логин `mashka818`)
+2. Подтвердите email
+
+### 1.2. Имя пакета (обязательно scoped)
+
+В корне `examTemplate` откройте **`package.json`** и замените `name`:
+
+```json
+"name": "@mashka818/exam-de-template",
+```
+
+Формат: `@ваш-логин-npm/любое-имя` — так имя почти всегда свободно.
+
+Добавьте (если ещё нет):
+
+```json
+"publishConfig": {
+  "access": "public"
+}
+```
+
+### 1.3. Публикация
+
+**Не** из папки `exam-project` (там другой `package.json`). Из **корня** репозитория:
+
+```powershell
+cd C:\Users\Masha\Desktop\examTemplate
+npm login
+npm run publish:npm
+```
+
+Если включена 2FA на npm — код из приложения:
+
+```powershell
+npm run publish:npm -- --otp=123456
+```
+
+Проверка в браузере: `https://www.npmjs.com/package/@mashka818/exam-de-template`
+
+После правок шаблона увеличьте `"version": "1.0.1"` и снова `npm publish`.
+
+### 1.4. Что запомнить на экзамен
+
+- Полное имя пакета: `@mashka818/exam-de-template`
+- Версия: `1.0.0` (или актуальная)
+
+---
+
+## 2. На экзамене — одна команда
+
+```powershell
+mkdir C:\DE\work
+cd C:\DE\work
+npx @mashka818/exam-de-template@1.0.0 init
+```
+
+Появятся две папки:
+
+```
+C:\DE\work\
+  exam-project\    ← правите и запускаете
+  exam-guides\     ← шпоры (удалить перед сдачей)
+```
+
+`init` ставит зависимости в **exam-project**.
+
+Дальше:
+
+```powershell
+cd exam-project
+copy server\.env.example server\.env
+notepad server\.env
+npm run db:init
+npm run dev
+```
+
+Перед сдачей: удалите папку **exam-guides** (уровнем выше: `cd ..` → `rmdir /s /q exam-guides`).
+
+---
+
+## 3. На экзамене — через `npm install` (как вы просили)
+
+### Вариант А: без своего package.json
+
+```powershell
+mkdir C:\DE\work
+cd C:\DE\work
+npm install @mashka818/exam-de-template@1.0.0
+npx exam-de-unpack --here
+npm install
+npm run install:all
+```
+
+После первой строки пакет лежит в `node_modules/@mashka818/exam-de-template`.  
+`exam-de-unpack` копирует файлы в текущую папку — удобно сдавать проект не из `node_modules`.
+
+### Вариант Б: свой минимальный `package.json`
+
+Скопируйте смысл из **`exam-starter/package.json`** (подставьте свой логин):
+
+```json
+{
+  "name": "de-exam-work",
+  "private": true,
+  "dependencies": {
+    "@mashka818/exam-de-template": "1.0.0"
+  },
+  "scripts": {
+    "postinstall": "exam-de-unpack --here"
+  }
+}
+```
+
+```powershell
+cd C:\DE\work
+npm install
+npm install
+npm run install:all
+```
+
+Два раза `npm install`: после первого `postinstall` подменяет `package.json` полным шаблоном.
+
+### Вариант В: только `node_modules` (как у одногруппника)
+
+```powershell
+mkdir C:\DE\work
+cd C:\DE\work
+npm install @mashka818/exam-de-template@1.0.0
+cd node_modules\@mashka818\exam-de-template
+npm install
+npm run install:all
+npm run dev
+```
+
+Работает, но правки и сдача — внутри `node_modules` (менее удобно).
+
+---
+
+## 4. Команды в пакете (после установки)
+
+| Команда | Действие |
+|---------|----------|
+| `npx exam-de-init` | Распаковать + `npm install` + `install:all` |
+| `npx exam-de-unpack --here` | Только скопировать файлы в папку |
+| `npm run install:all` | Зависимости server + client |
+| `npm run db:init` | Таблицы и админ |
+| `npm run dev` | Сайт + API |
+
+---
+
+## 5. Что на ПК экзамена всё равно нужно
+
+| Программа | Не ставится через npm |
+|-----------|------------------------|
+| Node.js 18+ | да |
+| PostgreSQL | да |
+| Интернет | для `npm install` / `npx` |
+
+См. **TECH_STACK.txt**
+
+---
+
+## 6. Локальная проверка перед экзаменом
+
+```powershell
+mkdir C:\temp\de-test
+cd C:\temp\de-test
+npx @mashka818/exam-de-template@1.0.0 init
+```
+
+Если открывается http://localhost:5173 — на экзамене будет то же самое.
+
+---
+
+## 7. Сборка .tgz (флешка не нужна)
+
+`npm run pack:template` — только для архива/резервной копии, на экзамене **не обязательно**.
+
+---
+
+## 8. Если `npm publish` ругается
+
+| Ошибка | Решение |
+|--------|---------|
+| 402 / scope | `"publishConfig": { "access": "public" }` и `npm publish --access public` |
+| имя занято | используйте `@логин/имя`, не голое `exam-template-...` |
+| не залогинены | `npm login` |
+| 403 | подтвердите email на npm |
+
+---
+
+**Пакет:** `@mashka818/exam-de-template`

package/exam-guides/README.md

@@ -0,0 +1,40 @@
+# exam-guides — удалить перед сдачей
+
+**Всю эту папку `exam-guides` удалите в конце экзамена** (ПКМ → Удалить).  
+На проверку остаётся только соседняя папка **`exam-project`**.
+
+---
+
+## Что здесь лежит
+
+| Раздел | Зачем |
+|--------|--------|
+| **commented-code/** | Ваш `client/` и `server/` **с комментариями** — подсматривать при работе |
+| **GUIDE_PAGES.md** и др. | Тексты, кнопки, картинки, БД, «Банкетам.Нет» |
+| **EXAM_COMMANDS.txt** | Команды npm на экзамене |
+| **NPM_PACKAGE.md** | Публикация шаблона на npm |
+| **exam-starter/** | Пример `package.json` для `npm install` |
+
+---
+
+## Как работать на экзамене
+
+1. Открыть в редакторе **две папки** рядом: `exam-project` и `exam-guides`.
+2. **Править и запускать** только **`exam-project`** (`npm run dev` из неё).
+3. Если забыли подсказку — смотреть **`exam-guides/commented-code`** или `.md` файлы.
+4. **Закончили задание** → удалить папку **`exam-guides`** целиком.
+5. Сдаёте / показываете только **`exam-project`**.
+
+---
+
+## Дома
+
+Правки с комментариями — в **`client/`** и **`server/`** в корне репозитория (рядом с этими папками).
+
+Потом:
+
+```powershell
+npm run sync:project
+```
+
+Обновятся и чистый `exam-project`, и `exam-guides/commented-code`.

package/exam-guides/RESPONSIVE.md

@@ -0,0 +1,224 @@
+# Адаптив: мобильный (390px) и ПК
+
+Сейчас проект заточен под **мобильный макет** (как в задании модуля 2: 390×844).  
+На большом экране контент **не растягивается на всю ширину** — остаётся узкой колонкой по центру.
+
+Ниже — как это устроено и как добавить **версию под ПК**.
+
+---
+
+## 1. Почему на ПК выглядит «как телефон»
+
+Главное ограничение — класс Tailwind **`max-w-lg`** в `client/src/components/Layout.jsx`:
+
+| Класс | Ширина | Смысл |
+|-------|--------|--------|
+| `max-w-lg` | ~512px | узкая колонка (мобильный макет + поля по бокам) |
+| `max-w-xl` | ~576px | чуть шире |
+| `max-w-4xl` | ~896px | комфортно для ПК |
+| `max-w-6xl` | ~1152px | широкий десктоп |
+| `max-w-full` | 100% | на всю ширину окна |
+
+Строки в Layout:
+
+```jsx
+<div className="mx-auto max-w-lg ...">   {/* шапка */}
+<main className="... max-w-lg ...">     {/* контент */}
+```
+
+Пока стоит только `max-w-lg`, на мониторе сайт будет узкой «полоской» по центру — это **ожидаемо** для сдачи мобильного дизайна.
+
+---
+
+## 2. Брейкпоинты Tailwind (кратко)
+
+Tailwind использует **mobile-first**: сначала стили для телефона, потом с префиксом — для больших экранов.
+
+| Префикс | Минимальная ширина | Обычно |
+|---------|-------------------|--------|
+| *(нет)* | 0px | телефон |
+| `sm:` | 640px | большой телефон |
+| `md:` | 768px | планшет |
+| `lg:` | 1024px | ноутбук / ПК |
+| `xl:` | 1280px | широкий монитор |
+
+Пример:
+
+```html
+<div class="max-w-lg lg:max-w-4xl">
+```
+
+- до 1024px — колонка как сейчас (`max-w-lg`);
+- от 1024px — шире (`max-w-4xl`).
+
+Проверка: откройте сайт → `F12` → иконка телефона / изменение ширины окна.
+
+---
+
+## 3. Шаг 1 — расширить Layout под ПК
+
+Файл: **`client/src/components/Layout.jsx`**
+
+**Было (только мобильный):**
+
+```jsx
+<div className="mx-auto max-w-lg px-4 py-3 ...">
+<main className="flex-1 mx-auto w-full max-w-lg px-4 py-6">
+```
+
+**Стало (мобильный + ПК):**
+
+```jsx
+<div className="mx-auto w-full max-w-lg lg:max-w-5xl px-4 lg:px-8 py-3 ...">
+<main className="flex-1 mx-auto w-full max-w-lg lg:max-w-5xl px-4 lg:px-8 py-6 lg:py-10">
+```
+
+Что меняется на ПК:
+- `lg:max-w-5xl` — шире контент;
+- `lg:px-8` — больше отступы;
+- `lg:py-10` — больше воздуха по вертикали.
+
+Для экзамена по модулю 2/3 **мобильную версию не убирайте** — добавляйте `lg:` **дополнительно**.
+
+---
+
+## 4. Шаг 2 — картинки на ПК
+
+Файлы страниц, например `HomePage.jsx`:
+
+```jsx
+<PageImage imageKey="homeHero" className="w-full h-40 object-cover ..." />
+```
+
+Для ПК увеличьте высоту:
+
+```jsx
+className="w-full h-40 lg:h-56 object-cover rounded-2xl mb-6 shadow"
+```
+
+Логотип в Layout:
+
+```jsx
+className="h-9 lg:h-11 w-auto shrink-0"
+```
+
+---
+
+## 5. Шаг 3 — формы (п.1, п.4)
+
+На ПК форму часто делают в **две колонки**.
+
+`RegisterPage.jsx` / `RequestFormPage.jsx` — оберните поля:
+
+```jsx
+<div className="grid grid-cols-1 md:grid-cols-2 gap-x-4">
+  <FormField label="ФИО" ...>...</FormField>
+  <FormField label="Телефон" ...>...</FormField>
+```
+
+`grid-cols-1` — на телефоне одна колонка.  
+`md:grid-cols-2` — с планшета/ПК два поля в ряд.
+
+Кнопку «Отправить» лучше на всю ширину оставить:
+
+```jsx
+<div className="md:col-span-2">
+  <button className="w-full ...">...</button>
+```
+
+---
+
+## 6. Шаг 4 — п.3 история заявок
+
+`RequestsPage.jsx` — список карточек в сетку на ПК:
+
+```jsx
+<ul className="space-y-3 lg:grid lg:grid-cols-2 lg:gap-4 lg:space-y-0">
+```
+
+Карточка «Оставить новую заявку»:
+
+```jsx
+className="block mb-8 ... lg:mb-10 lg:p-8"
+```
+
+---
+
+## 7. Шаг 5 — п.5 админ-панель
+
+`AdminPage.jsx` — заявки в 2–3 колонки:
+
+```jsx
+<div className="space-y-4 lg:grid lg:grid-cols-2 xl:grid-cols-3 lg:gap-6 lg:space-y-0">
+```
+
+---
+
+## 8. Шаг 6 — главная страница
+
+`HomePage.jsx` — кнопки в ряд на ПК:
+
+```jsx
+<div className="flex flex-col gap-3 sm:flex-row sm:justify-center sm:gap-4">
+```
+
+---
+
+## 9. Шаг 7 — навигация в шапке
+
+`UserNav.jsx` — на очень узком экране подписи можно скрыть:
+
+```jsx
+<NavLink ...>
+  <span className="lg:hidden">Заявки</span>
+  <span className="hidden lg:inline">Мои заявки</span>
+</NavLink>
+```
+
+(по желанию)
+
+---
+
+## 10. Глобальные настройки (опционально)
+
+Файл: **`client/src/index.css`**
+
+Можно задать свои брейкпоинты в `@theme` (Tailwind v4), но для экзамена **достаточно стандартных** `sm` / `md` / `lg`.
+
+Фон на широком мониторе уже серый (`bg-slate-50` на `body`) — узкая колонка визуально отделяется от краёв.
+
+---
+
+## 11. Что сдавать на ДЭ
+
+| Модуль | Что нужно |
+|--------|-----------|
+| Модуль 2 | Макеты **390×844** (Figma → PNG), в код не обязательно |
+| Модуль 3 | **Интегрировать мобильный** дизайн + анимации |
+| Модуль 1 | Рабочий UI, адаптив «не ломается» на ПК |
+
+**Рекомендация:** оставить мобильную вёрстку как основную, для ПК добавить только `lg:max-w-*` и сетки — так выполнены оба требования.
+
+---
+
+## 12. Чек-лист перед сдачей
+
+- [ ] В DevTools ширина **390px** — как макет Figma  
+- [ ] Ширина **1024px+** — контент читаемый, нет горизонтальной прокрутки  
+- [ ] Формы: все поля доступны, ошибки видны  
+- [ ] Картинки из `public/images/` не вылезают за экран (`w-full`, `object-cover`)
+
+---
+
+## 13. Файлы, которые чаще всего правят
+
+| Файл | Задача |
+|------|--------|
+| `components/Layout.jsx` | ширина всего сайта |
+| `pages/HomePage.jsx` | hero, кнопки |
+| `pages/RegisterPage.jsx`, `RequestFormPage.jsx` | сетка полей |
+| `pages/RequestsPage.jsx` | список заявок |
+| `pages/AdminPage.jsx` | карточки админа |
+| `index.css` | общий фон, анимации |
+
+Подробнее по смене темы: `COMMENTS_GUIDE.md`.

package/exam-guides/TECH_STACK.txt

@@ -0,0 +1,142 @@
+================================================================================
+ТЕХНОЛОГИИ ПРОЕКТА — ЧТО УСТАНОВИТЬ НА ПК К ЭКЗАМЕНУ
+================================================================================
+Шаблон ДЭ: портал заявок (Мой Не Сам / Банкетам.Нет)
+Стек: Node.js, Express, PostgreSQL, React, Vite, Tailwind CSS
+
+Подробная версия с таблицами: TECH_STACK.md
+Пошаговый запуск: README.md
+
+================================================================================
+1. ОБЯЗАТЕЛЬНО УСТАНОВИТЬ НА ПК (ДО ЭКЗАМЕНА)
+================================================================================
+
+  Node.js .............. версия 18+ (лучше 20 LTS)
+                         Зачем: сервер, фронт, npm
+                         Проверка: node -v
+                         Скачать: https://nodejs.org/
+
+  npm .................. идёт вместе с Node.js
+                         Проверка: npm -v
+
+  PostgreSQL ........... версия 14+
+                         Зачем: база данных
+                         Служба postgresql должна быть запущена
+                         Пароль postgres — для server/.env
+                         Скачать: https://www.postgresql.org/download/windows/
+
+  Браузер .............. Chrome / Edge / Firefox
+                         Адрес сайта: http://localhost:5173
+
+================================================================================
+2. РЕКОМЕНДУЕТСЯ (НЕ ОБЯЗАТЕЛЬНО)
+================================================================================
+
+  VS Code или Cursor .... редактирование кода
+  pgAdmin или psql ...... CREATE DATABASE имя_базы;
+  Git ................... если проект с репозитория
+
+================================================================================
+3. УСТАНАВЛИВАЕТСЯ КОМАНДОЙ В ПРОЕКТЕ (НЕ ВРУЧНУЮ С САЙТОВ)
+================================================================================
+
+  cd C:\путь\к\examTemplate
+  npm run install:all
+
+--- Корень ---
+  concurrently .......... npm run dev (API + фронт вместе)
+
+--- Сервер (server/) ---
+  Node.js ............... среда выполнения
+  Express 5 ............. API /api/...
+  pg .................... драйвер PostgreSQL
+  dotenv ................ server/.env
+  cors .................. запросы с фронта
+  bcryptjs .............. хеш паролей
+  jsonwebtoken .......... JWT после входа
+
+--- Клиент (client/) ---
+  React 19 .............. интерфейс
+  react-dom ............. отрисовка в браузере
+  react-router-dom 7 .... маршруты страниц
+  Vite 6 ................ dev-сервер и сборка
+  @vitejs/plugin-react .. JSX
+  Tailwind CSS 4 ........ стили (className)
+  @tailwindcss/vite ..... Tailwind в Vite
+
+================================================================================
+4. ЯЗЫКИ (ОТДЕЛЬНО НЕ СТАВЯТСЯ)
+================================================================================
+
+  JavaScript (ES modules) ... .js, .jsx, import/export
+  JSX ....................... React-компоненты
+  HTML ...................... client/index.html
+  CSS + Tailwind ............ client/src/index.css
+  SQL ....................... server/db/schema.sql, seed.sql
+  JSON ...................... package.json, ответы API
+  REST API .................. GET, POST, PATCH /api/...
+  JWT ....................... токен в localStorage
+
+================================================================================
+5. ПОРТЫ
+================================================================================
+
+  Фронт (Vite) ........... 5173   http://localhost:5173
+  API (Express) ............ 3001   http://localhost:3001
+  PostgreSQL ............... 5432   localhost (по умолчанию)
+
+  Порт API: server/.env (PORT) и client/vite.config.js (proxy)
+
+================================================================================
+6. ЧЕК-ЛИСТ НА ЭКЗАМЕНЕ
+================================================================================
+
+  [ ] Node.js и PostgreSQL установлены, PostgreSQL запущен
+  [ ] Создана БД (moy_ne_sam или banketam_net)
+  [ ] Настроен server/.env (DATABASE_URL, JWT_SECRET)
+  [ ] npm run install:all
+  [ ] npm run db:init
+  [ ] npm run dev
+  [ ] Браузер: http://localhost:5173
+
+================================================================================
+7. ЧТО НЕ НУЖНО УСТАНАВЛИВАТЬ
+================================================================================
+
+  React, Express, Tailwind — только через npm в проекте
+  Apache, Nginx, IIS — не нужны
+  Docker, Redis, MongoDB — не используются
+  TypeScript — проект на JavaScript
+
+================================================================================
+8. КОМАНДЫ NPM
+================================================================================
+
+  npm run install:all ... установить зависимости
+  npm run db:init ....... таблицы + seed + админ
+  npm run dev ........... API + фронт
+  npm run dev:server .... только API
+  npm run dev:client .... только фронт
+  npm run build ......... сборка client/dist
+
+================================================================================
+9. ЛОГИН АДМИНА (ШАБЛОН)
+================================================================================
+
+  Логин: adminka    Пароль: password
+  Файл: server/db/init.js
+
+  Банкетам.Нет: Admin26 / Demo20 — см. THEME_BANQUETAM_NET.md
+
+================================================================================
+10. ДОКУМЕНТАЦИЯ В ПРОЕКТЕ
+================================================================================
+
+  README.md ................ запуск, .env
+  GUIDE_PAGES.md ............. страницы, кнопки, картинки
+  THEME_BANQUETAM_NET.md ..... тема Банкетам.Нет
+  COMMENTS_GUIDE.md .......... что менять в коде
+  RESPONSIVE.md .............. мобильная и ПК вёрстка
+  TECH_STACK.md .............. этот список (формат Markdown)
+
+================================================================================