Тестовое задание

Краткая задача: необходимо разработать функционал древовидных комментариев. Используемые технологии: PHP 7.0+, MySql 5.1+, ES5/6 + VueJs/React/Angular, Sass/Less, webpack или аналог, fetch или axios для ajax, MVC Можно выполнять на чистом PHP, либо используя PHP фреймворк CodeIgniter или Laravel.

Задача: Представим, что у нас есть какой-то материал и нужно сделать систему древовидных комментариев к нему.

1. Возможность написать комментарий (анонимно, без авторизации), возможность ответить на комментарий (до 5 уровней вложенности), возможность оценивать комментарии (без перезагрузки страницы).
2. Вновь созданный комментарий должен отображаться без перезагрузки страницы и находиться сразу на своём месте, на нужном уровне вложенности с учётом выбранной сортировки.
3. Сортировка комментариев "Популярные" - больше всего лайков, "Новые" - сверху самые новые, "Старые" - сверху самые старые. При сортировке важно учитывать уровень вложенности. Например, если мы сортируем по лайкам, то сначала сортируются комментарии первого уровня, внутри каждого комментария первого уровня идёт сортировка комментариев второго уровня и так далее. Пример как должна работать сортировка можно посмотреть в любой новости у нас на сайте, например тут: https://dota2.ru/news/15701/
4. Страница должна содержать только блок комментариев и форму ответа. Внешнее оформление согласно макету https://dota2.ru/img/replies.png (вместо аватар можно использовать просто кружки, используемый шрифт Roboto). Оцениваться будет чистота и правильность кода, алгоритма, грамотность сортировки (всё должно работать правильно), оптимизация (чтобы не получилось так, что у вас будет 20 запросов к базе и т.д), в том числе правильное хранение информации в базе данных. А также навыки верстки.

Аннотация от разработчика

Использованные инструменты: Laravel, Vue, Axios для AJAX, Scss, vue-timeago для вывода нечеткого времени. Webpack для сборки фронта. Задание достаточно интересное. Комментарии релизованны рекурсивным vue-компонентом, для передачи состояний принципиально не был использован Vuex. Было интересно реализовать передачу данных по дереву компонентов. База данных довольно простая, без сохранения состояния лайка. Справился с заданием за 3 вечера.

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

База данных

1. Выполнить следующух команду в SQL:

CREATE DATABASE testtask CHARSET=utf8 COLLATE=utf8_unicode_ci

Back-end:

1. В консоли выполнить команду:

composer install

2. Скопировать файл .env.example и переименовать его в .env

3. Редактируем файл .env, настраиваем подключение к бд, используя свои параметры:

DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=testtask DB_USERNAME=root DB_PASSWORD=root

4. В консоли выполнить следующую команду(Генерация ключа для env):

php artisan key:generate

5. Для создания структуры БД выполнить в консоли:

php artisan migrate:fresh

Front-end:

1. В консоли выполнить команду:

npm install

2. Сборка проекта в watch режиме:

npm run watch