pixelplex/0.task.md Secret

## 0.task.md

      
    Raw
  

              0.task.md
            
          
Тестовое задание для Junior Web Development Engineer

На что мы будем обращать внимание?

Отношение к деталям. Старайтесь учесть все нюансы, описанные ниже. Чем больше будет неточностей, тем ниже итоговая оценка.
Стиль кода. Старайтесь следовать одному стилю. Подключенный в вашем коде линтер однозначно вам в этом поможет.
Следование общепринятым паттернам программирования. Наличие антипаттернов в коде приведет к снижению оценки.

На что мы НЕ будем обращать внимание?

Время выполнения задания. Наша цель - получить качество, а не скорость.
Опыт работы. Не обязательно где-то работать до этого, чтобы получить свой шанс. На итоговую оценку никак не будет влиять наличие или отсутствие опыта работы.
Комментарии относительно улучшения приложения, полученного в результате тестового задания. Если вы считаете, что какой-то элемент вашего кода можно оптимизировать - стоит это сделать сразу.

Выполнить задачу по созданию API с использованием Node.js и MongoDB

Базовые требования


Версия Node.js >= 8
Необходимо использовать фреймворк, например express
Необходимо использовать БД MongoDB
API должно по умолчанию запускаться на http://localhost:8080 с помощью следующей последовательности команд в консоли из папки проекта:

npm i # установка пакетов
npm start # старт API

API должно иметь 4 метода:


Метод
Описание


POST v1/articles
создание статьи


PUT v1/articles/:id
обновление статьи


GET v1/articles?page=:pageNumber&limit=:limit
получение статей


GET v1/articles/:id
получение статьи


POST v1/articles - создание статьи

При создании статьи должны дополнительно устанавливаться поля created_at - дата создания статьи, updated_at - дата обновления статьи. При создании статьи, поля updated_at и created_at имеют одинаковую дату.
Параметры тела запроса


title - заголовок статьи
body - тело статьи

Параметры ответа


id - уникальный идентификатор
title - заголовок статьи
body - тело статьи
updated_at - время обновления статьи
created_at - время создания статьи

Например, делаем запрос:
{
    "title": "Article #1",
    "body": "Body ..."
}
в ответ на запрос получаем,
{
    "id": "5b15395fb5ff829e402cd0e4",
    "title": "Article #1",
    "body": "Body ...",
    "updated_at": "2019-02-22T08:17:34.805Z",
    "created_at": "2019-02-22T08:17:34.805Z"
}
Предусмотреть валидацию полей:

title  - обязательное поле, а также не может быть пустым полем
body - обязательное поле, а также не может быть пустым полем

В случае запроса с пустым полем или его отсутствием необходимо вернуть ошибки с HTTP Status Code равным 422 и телом ответа, например, при пустом title:
{
    "errors": [{  
        "field": "title",
        "error": "title is required"
    }]
}
PUT v1/articles/:id - обновление статьи

Параметры


id - уникальный идентификатор созданной статьи

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


title - заголовок статьи
body - тело статьи

Параметры ответа


id - уникальный идентификатор
title - заголовок статьи
body - тело статьи
updated_at - время обновления статьи
created_at - время создания статьи

Например, делаем PUT запрос:
{
    "title": "Updated Article #1",
    "body": "Updated Body ..."
}
в ответ получаем
{
    "id": "5b15395fb5ff829e402cd0e4",
    "title": "Updated Article #1",
    "body": "Updated Body ...",
    "updated_at": "2019-02-23T00:10:00.000Z",
    "created_at": "2019-02-22T08:17:34.805Z"
}
Предусмотреть при обновлении статьи обновление поля updated_at.
Предусмотреть валидацию и ответ при ошибке такими же, как и в методе создания статьи POST v1/articles.
GET v1/articles?page=:pageNumber&limit=:limit

Получение статей, отсортированных в порядке убывания по дате создания статьи, с возможностью в query-параметрах передачи параметров для постраничного получения данных и возможностью ограничить количество получаемых статей.
Параметры


page - необязательное поле по умолчание равное 1.
limit - необязательное поле по умолчание равное максимальному значению. Максимальное значение для limit равно 10.

Например, делаем запрос GET /v1/articles?page=1&limit=2, в ответ получаем первую страницу (query параметр page равен 1) и 2 статьи (query параметр limit равен 2) и параметр count - общее количество статей:
{
    "count": 25,
    "page": 1,
    "limit": 2,
    "articles": [{
        "id": "5b15395fb5ff829e402cd0e4",
        "title": "Updated Article #1",
        "body": "Updated Body ...",
        "updated_at": "2019-02-23T00:10:00.000Z",
        "created_at": "2019-02-22T08:17:34.805Z"
    }, {
        "id": "5b15395fb5ff829e402cd0e4",
        "title": "Article #2",
        "body": "Body ...",
        "updated_at": "2019-02-22T08:17:34.805Z",
        "created_at": "2019-02-22T08:17:34.805Z"
    }]
}
Описание ответа


count - общее количество статей
page - страница по которой отдан ответ
limit - ограничение с которым отдан ответ
articles - массив статей

Предусмотреть валидацию в методе на поля:

page - число, необязательное поле
limit - число, необязательное поле. Максимальный limit равен 10.

В случае неверных данных для page и limit отдавать в ответ структуру ошибок такую же, как и в методе создания статьи POST v1/articles.
GET v1/articles/:id - получение статьи по id

Параметры


id - уникальный идентификатор статьи

Параметры ответа


id - уникальный идентификатор
title - заголовок статьи
body - тело статьи
updated_at - время обновления статьи
created_at - время создания статьи

Например, делаем запрос GET v1/articles/5b15395fb5ff829e402cd0e4 получаем ответ:
{
    "id": "5b15395fb5ff829e402cd0e4",
    "title": "Article #1",
    "body": "Body ...",
    "updated_at": "2019-02-22T08:17:34.805Z",
    "created_at": "2019-02-22T08:17:34.805Z"
}
В случае отсутствия статьи с передаваемой :id возвращать HTTP Status Code равным 404 и телом ответа:
{
    "errors": [{
        "field": "id",
        "error": "Not Found"
    }]
}
Выполнить задачу по созданию Web UI с использованием React и Redux

Базовые требования


Для Web UI должно использоваться API из задания №1.
Обязательно использование React и Redux
Обязательно использование Bootstrap
Web UI должно по умолчанию запускаться на http://localhost:8081 с помощью следующей последовательности команд в консоли из папки проекта и использовать API, находящееся по адресу http://localhost:8080:

npm i # установка пакетов
npm start # старт Web UI
Web UI имеет следующий функционал

Вверху страницы (в хедере) вставить логотип PixelPlex https://image.ibb.co/k7cmVT/logo_w.png. По клику на логотип открывается окно в новой вкладке, которая ведет на сайт https://pixelplex.io/

Страница статей с пагинацией /articles. По клику на кнопки пагинации происходит загрузка данных по необходимой странице через API метод получения статей GET v1/articles?page=:pageNumber&limit=:limit.
Предусмотреть изменение query параметра в браузере, т.е., например, перейдя на страницу номер 3 - URL в браузере изменится на /articles?page=3.
Предусмотреть после прямого перехода на страницу /articles?page=3 открытие страницы с номером 3.

Прототип страницы просмотра статей с пагинацией на странице номер 3 /articles?page=3
Страница создания статьи /articles/create. По клику на странице /articles кнопки “Create” открывать страницу /articles/create. После заполнения полей title и body и нажатия на кнопку “Create” создавать статью через API метод POST v1/articles. После создания статьи делать перенаправление(редирект) на страницу /articles. Предусмотреть вывод ошибок в случае пустых полей title и body (Например, Title is required, в случае пустого поля title). По клику на кнопку “Cancel” перенаправлять на страницу /articles.

Прототип страницы создания статьи /articles/create после нажатия на кнопку “Create” и пустом поле title
Модальное окно просмотра статьи. По клику по кнопке “View” на странице /articles открывать модальное окно с данными по статье, полученными через API метод GET /articles/:id. Выводим поля title, body, created_at, updated_at.

Прототип страницы просмотра статьи в модальном окне на странице /articles
Страница редактирования статьи /articles/:id/edit. По клику на странице /articles кнопки “Edit” открывать страницу /articles/:id/edit, где :id - это уникальный номер статьи по которой происходил переход. После ввода title и body и нажатия на кнопку “Update” обновлять статью через API метод PUT v1/articles/:id. После обновления статьи делать перенаправление на страницу /articles. Предусмотреть вывод ошибок в случае пустых полей title и body, как и на странице создания статьи. По клику на кнопку “Cancel” перенаправлять на страницу /articles.

Прототип страницы редактирования статьи /articles/:id/edit после нажатия на кнопку “Update” и пустом поле title

Обратите внимание!
Выполненное тестовое задание необходимо передать в ввиде ссылки на ваши репозитории на github.

  
## 1.logo.png

      
    Raw
  

              1.logo.png
            
          
## 2.articles-list.png

      
    Raw
  

              2.articles-list.png
            
          
## 3.create-article.png

      
    Raw
  

              3.create-article.png
            
          
## 4.view-article.png

      
    Raw
  

              4.view-article.png
            
          
## 5.edit-article.png

      
    Raw
  

              5.edit-article.png
Метод	Описание
POST `v1/articles`	создание статьи
PUT `v1/articles/:id`	обновление статьи
GET `v1/articles?page=:pageNumber&limit=:limit`	получение статей
GET `v1/articles/:id`	получение статьи