Тестовое задание: Fullstack Developer Portfolio

Небольшой лендинг-презентация с рабочей формой обратной связи, реализованный в рамках тестового задания. В проекте продемонстрированы навыки работы с Frontend (адаптивная верстка, JS-логика), Backend (PHP, валидация, SMTP), а также интеграция с AI API (генерация выжимки из комментария).

Ссылка на деплой (Demo)

---

Какой стек использован

Frontend:

• HTML5 / CSS3 (Использованы нативные CSS-переменные, Flexbox, Grid, BEM-подобная методология)
• Vanilla JavaScript (ES6+), Fetch API для асинхронных запросов.
• Никаких тяжелых фреймворков для максимальной скорости и демонстрации понимания нативных технологий.

Backend & API:

• PHP 8.3
• Nginx
• Библиотеки (Composer):
  • phpmailer/phpmailer - для отправки писем по SMTP.
  • vlucas/phpdotenv - для работы с переменными окружения (.env).
• Интеграция с OpenAI-совместимым API (cURL) для AI-фичи.

Инфраструктура:

• Docker & Docker Compose (контейнеризация для быстрой развертки независимой среды).

---

Как запустить проект

1. Клонируйте репозиторий:

   git clone https://github.com/Nebambuk/labx-test-task/
   cd labx-test-task

2. Настройте переменные окружения: Создайте файл .env в корне проекта и заполните его по примеру ниже (или скопируйте .env.example в .env и поменяйте значения на свои):

   # Режим отладки (если true - письмо дублируется на почту отправителя формы)
   APP_DEBUG=true
   
   # Настройки SMTP (например, Yandex, Mail.ru, Gmail)
   SMTP_HOST=smtp.yandex.ru
   SMTP_PORT=465
   SMTP_USERNAME=[email protected]
   SMTP_PASSWORD=your_app_password        # используйте специальный пароль приложения для SMTP, а не обычный пароль от почты!
   SMTP_FROM_NAME="Portfolio Robot"
   
   # AI Настройки (Генерация выжимки сообщения)
   AI_SUMMARY_ENABLED=true
   AI_API_URL=https://api.openai.com/v1
   AI_API_KEY=sk-your-openai-token
   AI_MODEL=gpt-4o-mini

3. Запустите Docker-контейнеры:

   docker compose up -d

4. Установите PHP-зависимости: Выполните команду внутри контейнера для установки библиотек через Composer:

   docker compose exec app composer install --working-dir=/app

5. Откройте проект в браузере: Перейдите по адресу http://127.0.0.1:8080

---

Как реализована форма

Форма реализует полный цикл отправки данных без перезагрузки страницы (AJAX) с двухфакторной валидацией (на клиенте и на сервере).

1. Frontend (JS):

   • Перехватывается событие submit (preventDefault).
   • Происходит валидация полей: проверка длины имени, регулярное выражение для российских номеров телефона (форматы 89... и +79...), проверка структуры email.
   • Кнопка блокируется, показывается состояние loading ("Отправка...").
   • Данные собираются через FormData и отправляются POST-запросом через fetch к send.php.
   • В зависимости от JSON-ответа сервера (success/error), выводится соответствующее сообщение пользователю, а при успехе форма очищается (reset).

2. Backend (PHP - send.php):

   • Принимает POST-запрос, очищает входные данные (от XSS и инъекций) и проводит серверную валидацию.
   • AI API: Если поле "Комментарий" не пустое, сервер делает cURL-запрос к LLM модели с промптом: "Сделай краткую выжимку... ", получая суть обращения.
   • Формируется HTML-шаблон письма (и запасной AltBody).
   • Письмо отправляется владельцу сайта через PHPMailer (SMTP).
   • Копия пользователю: В зависимости от настройки APP_DEBUG, письмо может дублироваться на email пользователя.

---

Использование AI-инструментов

Какие AI-инструменты использовались:

• LLM для кода: Gemini | Claude.
• LLM в продакшене (API): Groq API (llama-3.3-70b-versatile) интегрирован в обработчик формы.

Что делалось с помощью ИИ:

1. Интеграция "AI Summary" в форму: Написан функционал, который "читает" комментарии пользователей и с помощью запроса к API добавляет в письмо админу блок "Выжимка (ИИ)" (1-2 предложения с главной сутью).
2. Генерация рутины: ИИ использовался для создания базовой HTML-разметки (каркаса лендинга) по предоставленному дизайну, а также для создания boilerplate-кода PHPMailer.
3. Генерация текстового контента: Базовые тексты-заглушки для блоков "Как я работаю" и "Опыт" были сгенерированы нейросетью и затем адаптированы под мои реальные навыки.

Что пришлось исправлять вручную:

1. Ошибки AI в регулярных выражениях: Сгенерированная регулярка для валидации телефона не учитывала замену "8" на "7" при отправке на сервер. Пришлось дописать ручной парсер, очищающий номер от пробелов и скобок перед проверкой preg_replace('/\D/', '', $phone).
2. Адаптивность (CSS): ИИ сделал кривую логику для мобильного бургер-меню и сетки (Grid). Пришлось вручную переписывать медиа-запросы, добавлять некоторые стили и настраивать анимацию открытия меню через JS.
3. Отказоустойчивость API: Изначально ИИ предложил скрипт, где при ошибке от OpenAI API отваливалась вся отправка формы. Я вручную добавил обработку ошибок (CURLOPT_TIMEOUT, try/catch логику): теперь, если AI-сервер недоступен, форма всё равно успешно уходит, просто без выжимки, что критично для UX.
4. Безопасность (XSS): Код от ИИ вставлял данные из формы напрямую в HTML-письмо. Я добавил экранирование через htmlspecialchars($data, ENT_QUOTES) для предотвращения инъекций в почтовых клиентах.