Разработать часть сайта на Angular

Цена договорная • безналичный расчёт, электронные деньги
19 февраля 2019, 14:32 • 3 отклика • 47 просмотров
Частью функционала будущего сайта, что сейчас в разработке у разных команд, является и социальный профиль - назовем его так. Базовый функционал социальной сети. В качестве эталона можно рассматривать ВК, а лучше FB

Каждый участник проекта, имеет профиль, который по своим функциональным возможностям приближен к социальной сети: фото, основные данные о человеке, стена с его постами, на которой другие могут оставлять свои лайки и комментарии.

В качестве первого шага к реализации, предлагается следующее задание:


Сверстать макет https://drive.google.com/open?id=1NTPhOjr039kwrtzD...

и на его основе создать одностраничное приложение (SPA). На сверстанной странице должны быть все элементы что и на макете (кроме верхнего синего блока, с плеером, поиском и кнопкой - их не надо и верстать).

Верстать “пиксел в пиксел” не нужно. Главное требование - аккуратно, ровно не только на десткопе, но и на мобильном. На мобильном, допустимо двигать и скрывать элементы как угодно - не в ущерб функциональности в разумных пределах.


Стек технологий строго: Angular (SPA, последняя версия), NodeJS (уведомления о событиях, websocket)


Функциональность описана по этой схеме: https://drive.google.com/open?id=1obwQLzCavjjvNIvw...


Блок 1: Статичный, все данные в нем демонстрационные. По кнопке Show more открывается продолжение перечня информации о пользователе (еще несколько строк с любым содержимым, для демонстрации работы кнопки). Кнопки дружбы и отправки сообщения не работают.


Блок 2: Большое фото цельное (не много отдельных). При нажатии ничего не происходит. Просто картинка.


Блок 3: Список друзей, сообществ, видео - при клике ничего не происходит, но сам список необходимо выводить из контроллера, дробя если необходимо каждый элемент на компонент.


Блок 4: Пример поста пользователя. Для вывода даты используйте moment js (подключен в остальной части проекта). Пост можно откомментировать, можно использовать смайлы (добавьте несколько смайлов для демонстрации).

Работает отметка “мне нравится” с подсчетом нажавших, но без вывода кто это сделал конкретно, как это делает ВК (упрощаем немного). Отметить можно не только пост, но и комментарий.

Этот блок посылает уведомления всем подписчикам по websocket при любых изменениях - в нашем примере, это: новый комментарий, новый лайк. При наступлении события, комментарий добавляется, количество лайков изменяется, соответственно. Использовать для уведомлений сторонние сервисы (вроде Firebase) нельзя (санкции и простота задачи)


Блок 5: Реализовать компонент вывода нескольких фотографий к посту. Сделать можно по аналогии с ВК: две фото - пополам, три - слева половину занимается одна, две других справа меньше. 4 - показано в макете. 5 (максимум) - верхняя справа (по макету) будет состоять из двух. Компонент принимает массив фото для вывода, и сам разбирается что ему надо сделать - посчитает и соответственно разметке, выведет.

Предлагайте свою цену.