Тестовое задание: Лента постов (Yii2 + React)

Полнофункциональное веб-приложение для управления лентой постов.

Описание проекта

Приложение реализует простую ленту постов с возможностью:

Создания новых постов (заголовок + текст)
Просмотра постов в трёх режимах:
- Хронологический — сортировка по дате (старые сверху)
- Последняя минута — только посты за последнюю минуту (новые сверху)
- Случайный — случайный порядок
Автоматическое обновление ленты при создании нового поста (без перезагрузки страницы)

Технологический стек

Backend

Yii2 — микрофреймворк для REST API
PHP 7.4+
MySQL/MariaDB или другая БД, поддерживаемая Yii2
REST контроллеры для обработки запросов
Миграции для управления схемой БД
Сервисный слой (PostService) для бизнес-логики
PSR-12 кодирование

Frontend

React 18+ — компоненты UI
Vite — быстрый сборщик
Fetch API для синхронизации с бэкендом
Стили CSS3 (без фреймворков)

Архитектура

Backend (`backend/`)

backend/
├── config/
│   ├── db.php              # Конфигурация БД
│   └── web.php             # Конфигурация приложения
├── migrations/
│   └── m230001_000001...   # Миграция: создание таблицы post
├── src/
│   ├── controllers/api/
│   │   └── PostController.php  # REST контроллер (GET /api/posts, POST /api/posts)
│   ├── models/
│   │   └── Post.php            # Модель ActiveRecord для таблицы post
│   └── services/
│       └── PostService.php      # Бизнес-логика: создание, фильтрация, сортировка
├── web/
│   └── index.php           # Entry point для веб-сервера
└── composer.json           # PHP зависимости

Frontend (`frontend/`)

frontend/
├── src/
│   ├── components/
│   │   ├── PostForm.jsx    # Компонент формы для создания поста
│   │   └── PostFeed.jsx    # Компонент ленты с переключением режимов
│   ├── styles/
│   │   ├── PostForm.css    # Стили формы
│   │   └── PostFeed.css    # Стили ленты
│   ├── App.jsx             # Главный компонент приложения
│   ├── App.css             # Глобальные стили
│   ├── index.jsx           # Entry point
│   └── index.css           # Базовые стили
├── public/
│   └── index.html          # HTML шаблон
├── package.json            # JavaScript зависимости
└── vite.config.js          # Конфигурация Vite

Требования

PHP 7.4 или выше
Node.js 14+ и npm 6+
MySQL/MariaDB 5.7+ или любая другая БД (SQLite, PostgreSQL и т.д.)
Composer для управления PHP зависимостями

Установка и запуск

1. Backend (Yii2)

Шаг 1.1: Установка PHP зависимостей

cd backend
composer install

Если composer не установлен, скачайте с https://getcomposer.org/

Шаг 1.2: Конфигурация БД

Откройте backend/config/db.php и обновите параметры подключения:

return [
    'class' => 'yii\\db\\Connection',
    'dsn' => 'mysql:host=127.0.0.1;dbname=testtask',
    'username' => 'dbuser',
    'password' => 'dbpass',
    'charset' => 'utf8mb4',
];

Замените:

dbname — имя вашей БД
username — пользователь БД
password — пароль пользователя

Шаг 1.3: Запуск миграций

Создаёт таблицу post:

cd backend
php yii migrate

(Если выдаст ошибку про миграции, убедитесь, что БД подключена и пользователь имеет права)

Шаг 1.4: Запуск бэкенда

Используя встроенный PHP-сервер:

cd backend/web
php -S localhost:8080

Бэкенд будет доступен на http://localhost:8080

REST API эндпоинты:

GET /api/posts?mode=chronological — получить посты (режимы: chronological, last_minute, random)
POST /api/posts — создать пост (body: { title, text })

2. Frontend (React + Vite)

Шаг 2.1: Установка зависимостей

cd frontend
npm install

Шаг 2.2: Запуск dev-сервера

npm run dev

Фронтенд будет доступен на http://localhost:3000

Vite автоматически проксирует запросы к /api/* на http://localhost:8080 (см. frontend/vite.config.js)

Шаг 2.3 (опционально): Сборка для продакшена

npm run build

Собранные файлы будут в frontend/dist

API документация

GET /api/posts

Получить список постов с фильтрацией по режиму.

Параметры запроса:

mode (string, опционально) — режим сортировки:
- chronological (по умолчанию) — старые посты сверху
- last_minute — посты за последнюю минуту, новые наверху
- random — случайный порядок

Примеры:

# Хронологический порядок
curl http://localhost:8080/api/posts?mode=chronological

# Последняя минута
curl http://localhost:8080/api/posts?mode=last_minute

# Случайный
curl http://localhost:8080/api/posts?mode=random

Ответ (200 OK):

[
  {
    "id": 1,
    "title": "Первый пост",
    "text": "Содержание поста",
    "created_at": "2024-11-25 10:30:45"
  }
]

POST /api/posts

Создать новый пост.

Body (JSON):

{
  "title": "Заголовок поста",
  "text": "Текст поста"
}

Примеры:

curl -X POST http://localhost:8080/api/posts `
  -H "Content-Type: application/json" `
  -d '{"title":"Hello","text":"World"}'

Ответ (201 Created):

{
  "id": 2,
  "title": "Hello",
  "text": "World",
  "created_at": "2024-11-25 10:35:12"
}

Быстрый старт (all-in-one)

Если всё уже установлено:

# Терминал 1: Backend
cd backend
composer install
php yii migrate
cd web
php -S localhost:8080

# Терминал 2: Frontend
cd frontend
npm install
npm run dev

Откройте http://localhost:3000 в браузере.

Примеры использования

Создать пост через UI

Откройте http://localhost:3000
Заполните "Заголовок" и "Текст"
Нажмите "Создать пост"
Лента автоматически обновится

Переключить режим ленты

Используйте кнопки:

"Хронологический порядок" — старые посты первыми
"Последняя минута" — только свежие (< 60 сек)
"Случайный порядок" — перемешано

Возможные проблемы и решения

Ошибка при подключении к БД: "SQLSTATE[HY000]"

Решение: Проверьте:

БД запущена (MySQL слушает на 127.0.0.1:3306)
Параметры в backend/config/db.php верны
БД и пользователь существуют

Фронтенд не может подключиться к бэкенду (CORS, 404 на /api/posts)

Решение:

Убедитесь, бэкенд запущен на http://localhost:8080
Проверьте frontend/vite.config.js — proxy должен указывать на 8080
Перезагрузите фронтенд (Ctrl+Shift+R в браузере)

Посты не отображаются

Решение:

Проверьте таблицу БД: SELECT * FROM post;
Проверьте консоль браузера (F12 → Console) на ошибки fetch

"php: command not found"

Решение: PHP не в PATH. Используйте полный путь или добавьте PHP в PATH

Качество кода

Backend:

✅ PSR-12 кодирование (declare(strict_types=1), правильные отступы)
✅ Использование инструментов Yii2: миграции, модели ActiveRecord
✅ MVC архитектура: модели → сервис → контроллер
✅ REST контроллер с правильными HTTP статусами (201, 400)
✅ CORS включен для фронтенда

Frontend:

✅ React компоненты (функциональные с hooks)
✅ Fetch API для синхронизации
✅ Без перезагрузки страницы (SPA)
✅ Автоматическое обновление ленты
✅ Обработка ошибок и состояния загрузки

Использование AI

Скелет проекта был сгенерирован AI, но:

Исправлено: Миграция (DEFAULT CURRENT_TIMESTAMP), модель (убрана ручная установка created_at)
Добавлено: Полная React реализация (компоненты, стили, Vite конфиг)
Улучшено: CORS, конфигурация Yii2, документация

Затраченное время

Анализ требований: 10 мин
Исправление backend: 15 мин
React компоненты и стили: 25 мин
Vite конфигурация: 15 мин
Документация: 20 мин
Итого: ~85 минут

Автор: Разработано для тестового задания Itr
Дата: Ноябрь 2024
Версия: 1.0.0

Name		Name	Last commit message	Last commit date
Latest commit History 4 Commits
backend		backend
frontend		frontend
README.md		README.md

WADVahag/testtaskLti

Folders and files

Latest commit

History

Repository files navigation