Skip to content

README.md

Latest commit

 

History

History
128 lines (85 loc) · 13.6 KB

README.md

File metadata and controls

128 lines (85 loc) · 13.6 KB

Требования по направлению Frontend

Цель

Разработать современное web-приложение, новостной портал.

Описание

Представьте, что вы присоединяетесь к IT-отделу государственной организации, и ваш первый проект – это создание клиента для обычных пользователей государственного новостного портала. Встретившись с руководителем проекта, вы обсудили лично, какой функционал от вас требуется, поэтому уже знаете, что должна уметь делать система.

Требования

Все требования к сервису вы узнали от своего руководителя, это должен быть современный и красивый новостной портал использующий возможности браузера, и при этом реализованный при помощи современных фреймворков/инструментов:

  • Обязательные требования

    • Мобильный адаптив
    • UI - сайт должен быть привлекательным за счёт красоты, и при этом понятным и неперегруженным. Для выполнения данного пункта, вам необходимо будет использовать готовую UI-библиотеку или готовую дизайн-систему, однако вам никто не запрещает использовать собственную дизайн-систему или вашего друга. (стиль любой, включая минимализм)
    • Framework - вы должны при реализации сайта использовать возможности и инструменты выбранного вами фреймворка/библиотеки. Использование дополнительных библиотек расширяющие функционал или облегчающие реализацию проекта на выбранном вами инструменте, будет также считаться как выполнение данного пункта.
    • Язык программирования - для выполнения данной задачи необходимо использовать язык программирования JavaScript или TypeScript, либо любой другой скриптовый язык, соответствующий спецификации ECMAScript (например, CoffeeScript). Однако следует учитывать, что не все подобные языки программирования поддерживают актуальные инструменты и фреймворки для разработки frontend/fullstack приложений на сегодняшний день. Задания, реализованные на других языках программирования, таких как Java, Python, C#, и соответствующих инструментах и фреймворках, не рассматриваются в данном контексте.

  • 1 уровень

    • API - данные ваших новостей не должны храниться на клиенте, поэтому ваш клиент должен их запрашивать с API.
    • Поле поиска новостей.
    • Выбор просматриваемой категории новостей.

  • 2 уровень

    • Секция/страница/компонент с погодой, с авто определением геолокации.
    • Секция/страница/компонент с часами - реализовать часы с возможностью выбора разных часовых поясов, изменением формата времени, а также другие функции (включить отображение секунд, даты, дня недели, таймер/секундомер и т.д.)
    • Переключатель темы - реализовать переключатель темы со следующими вариантами для пользователя: светлая/тёмная/системная.

  • 3 уровень

    • Карусель/Слайдер с возможностью горизонтального скроллинга при помощи мыши (лкм)(в данном задании вам необходимо реализовать собственный вариант карусели, то есть при использовании готовых библиотек, данное задание не будет засчитано)
    • Секция/страница/компонент со спортивными матчами - необходимо реализовать блок со спортивными матчами, с информацией о них, а также добавить функционал подписки на матч, и получения PUSH уведомления (необходимо реализовать через service worker и, либо использовать свой бэкенд или FCM).
    • Избранное - реализовать возможность добавления новостей в избранное, с сохранением этой информации на клиенте и секцию/страницу/компонент, где можно посмотреть избранные новости или их удалить. (вам необходимо использовать в данном задание localstorage или cookie, при передаче данных на сервер/БД, данное задание не будет засчитано)

Допущения

  1. Для работы большинства сайтов требуется бэкенд, предоставляющий данные. В рамках выполнения данного задания нет необходимости создавать полноценный бэкенд. Можно, например, использовать json-server, mockapi, express.js попросить написать бэкенд знакомого, использовать статичные данные, открытое API и так далее.
  2. В случае использования какого-либо бэкенда необходимо кроме ссылки на решение приложить ссылку на бэкенд и инструкцию, как им пользоваться.
  3. Специально для задания с PUSH-уведомлениями, мы подготовили для вас готовый бэкенд сервер на Express.js

Критерии

  • Выполнение требований

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

  • Производительность

    К данному критерию относится скорость работы сайта на устройствах пользователей. Сюда, в том числе входит время отрисовки сайта, отсутствие зависаний и так далее.

  • Оригинальность и цельность идеи

    Создаваемое решение не должно копировать уже существующие сайты, но при этом все его компоненты необходимо связать единой мыслью (проблематикой).

Как отправить работу на проверку

  • git

    Ваш проект обязательно должен быть реализован с использованием инструмента git. Также необходимо опубликовать его на одном из веб-сервисов, основанных на системе git (например, github), и обеспечить доступность проекта путем создания публичного репозитория. Помните: важно применять инструмент git на протяжении всего процесса разработки. Проекты, в которых присутствует всего один коммит, будут рассмотрены во вторую очередь.

  • README.md

    В репозитории проекта, обязательно оставьте файл в формате markdown под названием readme.md. В этом файле должно быть краткое описание проекта, несколько скриншотов, а также инструкция по установке всех необходимых зависимостей и запуску проекта.

  • Видеоролик

    Также необходимо записать 5-10 минутный видеоролик, посвященный презентации вашего проекта. Видеоролик может быть как в формате полноценной презентации, где вы сидите перед камерой, показываете сайт и рассказываете о проделанной работе. Так и возможен в формат трейлера, в котором выдается захват экрана веб-браузера, на котором вы проходите по сайту и демонстрируете его функционал. Также видеоролик может быть записан в любом другом формате.

Полезные материалы