Тестовое задание для Frontend разработчика

server.js

var express = require('express');
var app = express();

function productCount(){
  return Math.round(Math.random() * 10 + 1);
}

function times(n, callback){
  var list = [];

  for(var i = 0; i < n; ++i)
    list.push(callback(i));

  return list;
}

var categories = [
  { id: 1, parentId: null, title: 'Молоко.Яйца' },
  { id: 2, parentId: 1, title: 'Коровье молоко' },
  { id: 3, parentId: 1, title: 'Козье молоко' },
  { id: 4, parentId: 1, title: 'Яйца' },
  { id: 5, parentId: 1, title: 'Сыры' },
  { id: 6, parentId: null, title: 'Мясо.Птица' },
  { id: 7, parentId: 6, title: 'Говядина' },
  { id: 8, parentId: 6, title: 'Баранина' },
  { id: 9, parentId: 6, title: 'Птица' }
];

var nextProductId = 1;
var products = categories.map(function(category){
  if(category.parentId)
    return times(productCount(), function(i){ return {
      id: nextProductId++,
      categoryId: category.id,
      title: category.title + ' #' + i
    } });
  else
    return [];
});

app.get('/categories', function(req, res){
  res.json(categories);
});

app.get('/products', function(req, res){
  res.json(products);
});

app.listen(3030, function(){
  console.log('Server starting...');
});

task.md

Написать каталог продуктов, который может работать в offline (сохраняет данные в localstorage при первой загрузке). В шапке нужно реализовать индикатор отсутствия подключения к сети. Дополнительно нужно создать две страницы, которые не отображаются без подключения к сети (выводит сообщение, что нужно подключение при попытке зайти на страницу).

Что значит работать в offline? Вы первый раз открываете каталог, данные подтягиваются с сервера, вы отключаете сервер, обновляете страницу - каталог работает.

Список страниц:

Путь	Описание
/catolog	список всех категорий
/category/1	список подкатегорий
/category/2	список продуков
/online/page1	страница, которая недоступна без подключения к сети
/online/page2	аналогично

Список категорий - просто список ссылок. Список продуктов - просто список продуктов. Никаких стилей подключать не нужно (по желанию reset.css и пару строчек, чтобы опрятно смотрелось).

То, что нужно использовать в обязательном порядке:

• react

То, что мы рекомендуем использовать:

• gulp
• react-router
• coffeescript
• superagent
• tuxx (tuxedojs.org)
• lodash
• git (желательно вести нормальную историю коммитов)

В финале должен получиться github-репозиторий со всем кодом. Проект должен запускаться после выполнения:

$ npm install
$ gulp

https://github.com/vasiakorobkin/alexesDev-task