Skip to content

Latest commit

 

History

History
247 lines (190 loc) · 25.8 KB

travel-app.md

File metadata and controls

247 lines (190 loc) · 25.8 KB
Raw

travel-app

Deadline Repo name Branch name
17.03.2021 23:59 travel-app travel-app

travel-app - приложение для виртуальных путешествий по странам мира.

Формирование команд

  • задание выполняется в команде, оптимальное количество участников команды - 4 человека
  • допустимо выполнение задания в одиночку, но так вы лишаете себя ценного опыта командной работы
  • команды формируются по желанию студентов
  • организация командной работы описана в Документации курса
  • постарайтесь распределить работу в команде так, чтобы каждый участник получил опыт работы со всеми используемыми технологиями

Структура приложения

  • приложение состоит из главной страницы и страницы страны.
  • у каждой страницы приложения есть header и footer
  • header содержит логотип приложения со ссылкой на главную страницу, поле поиска, поле для выбора языка локализации страницы. В header страницы страны поле поиска отсутствует.
  • footer содержит ссылки на гитхабы авторов приложения, год создания приложения, логотип курса со ссылкой на курс.

Главная страница приложения

На главной странице размещаются карточки стран (не меньше восьми). Каждая карточка содержит фото страны, название страны, название её столицы.

Страница страны

Страница страны содержит:

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

Также на странице страны есть виджеты*:

  • информер погоды в столице страны
  • курс местной валюты по отношению к доллару, евро, рублю
  • дата и время в столице страны

* Виджет — небольшой информационный блок, размещённый в боковой колонке сайта.

Функциональность приложения

  • Поиск
    • поиск работает только на главной странице приложения, на странице страны поле поиска отсутствует
    • при открытии приложения курсор находится в поле ввода
    • автозаполнение поля ввода отключено (нет выпадающего списка с предыдущими запросами)
    • есть placeholder
    • есть динамический поиск: по мере ввода поискового запроса на странице остаются только карточки стран, в названиях которых или в названиях их столиц есть указанные в поиске буквы в указанном порядке. При этом не обязательно, чтобы буквы были в начале слова
    • поисковый запрос также можно ввести как нажатием клавиши Enter, так и кликом по кнопке Search или аналогичной. В данном случае на странице остаются только карточки стран, названия которых или названия их столиц полностью соответствуют введенному в поиск запросу (при запросе "Александр" город "Александрия" не выведется, поскольку отсутствуют несколько букв).
    • поиск происходит на языке отображения страницы
    • поиск может происходить по названиям стран или по названиям их столиц
    • в поле поиска есть крестик, позволяющий очистить поле поиска
  • Локализация
    • для переключения языка используется тег select. Стилизация этого тега является частью задания
    • необходим перевод приложения минимум на три языка. Два из них - английский и русский. Третий язык локализации выбираете сами
    • переводится весь контент страницы, в том числе названия дней недели и месяца в дате, описание погоды в информере погоды, названия валют
    • при перезагрузке страницы сохраняется выбранный пользователем язык
  • Карточки стран
    • при наведении курсора на карточку страны, карточка подсвечивается (меняется её стиль)
    • при клике по карточке страны открывается страница страны
    • страница страны открывается с верхней части страницы
  • Фотогалерея достопримечательностей
    • для отображения фото достопримечательностей страны и информации о них может использоваться как фотогалерея, так и слайдер, выбор за вами
    • фотогалерею можно развернуть во весь экран
    • есть превью всех достопримечательностей или только части из них, если достопримечательностей больше шести. Превью текущей достопримечательности подсвечено (выделено стилем)
    • стрелки, которые используются для перелистывания фото, подсвечиваются при наведении и при клике
    • плавная смена фото при перелистывании, либо смена фото происходит с эффектами анимации
  • Видео
    • видео можно развернуть во весь экран
    • у видео есть панель управления, которая скрывается при просмотре
  • Карта
    • для отображения карты используется бесплатное API, которое не требует для использования подключения платёжных документов
    • предпочтение отдавайте API, в которых есть режим просмотра улиц
    • карта переводится на язык отображения страницы, если такая возможность есть в используемом API
    • карту можно развернуть во весь экран
    • карта интерактивная, её можно перетаскивать, увеличивать и уменьшать масштаб
    • страна, о которой идёт речь, подсвечена
    • для стилизации карты используются кастомные (пользовательские) стили, если такая возможность есть в используемом API
    • столица страны на карте отмечена маркером
  • Информер погоды в столице страны
    • отображается иконка погоды, температура, краткое описание погоды
    • могут отображаться другие показатели погоды на ваше усмотрение
  • Дата и время в столице страны
    • отображается число, название месяца, название дня недели, время в формате часы-минуты-секунды
    • часы идут, время обновляется каждую секунду
    • для отображения даты и времени в столице страны воспользуйтесь встроенными возможностями JavaScript, API для этой цели использовать не нужно
    • для перевода даты и времени на язык локализации страницы воспользуйтесь встроенными возможностями JavaScript. Обратите внимание, что локализация даты на белорусской язык в браузере Google Chrome работает некорректно

Бекенд

  • при создании приложения рекомендуется создание и использование бекенда
  1. создайте API для получения данных о стране
  2. добавьте в приложение возможность авторизоваться, указав своё имя и загрузив фото
  3. добавьте в приложение возможность проставить и сохранить в бекенде рейтинг достопримечательностей страны, увидеть других проголосовавших и какой рейтинг указал каждый из них. Отображение рейтинга может быть в виде звёздочек с возможностью проголосовать выбрав нужное их количество от 1 до 5
  • Для ознакомления создана демо-версия API.
  • Разрешается использование демо в качестве отправной точки создания вашего API. Описание структуры проекта и некоторые полезные материалы можно нати в wiki.

Требования к репозиторию

  • разработка игры ведётся в личном приватном репозитории тим лида, коллаборантом в который он приглашает второго участника своей команды
  • особенности командной работы с репозиторием описаны в Документации курса
  • название репозитория: travel-app, название ветки, в которой ведётся разработка - develop, ветка main пустая, содержит только README.md
  • в файл README.md нужно добавить инструкцию по запуску приложения
  • история коммитов должна отображать процесс разработки приложения Требования к коммитам
  • демо-версия приложения размещается на gh-pages, netlify, heroku либо на другом подобном хостинге.
    Для демоверсий, размещённых на netlify и heroku, название страницы дайте по схеме: имя гитхаб аккаунта - название таска
  • после окончания разработки или при наступлении дедлайна, создайте pull request из ветки разработки в ветку main. Требования к pull request. Мержить Pull Request не нужно
  • для тех, кто будет делать бекенд, добавьте в репозиторий ссылку на созданное API, папку с бекендом, или добавьте в описание pull request ссылку на репозиторий с бекендом
  • репозиторий, в котором велась работа над проектом, после наступления дедлайна нужно сделать публичным.

Технические требования

  • работа приложения проверяется в браузере Google Chrome последней версии
  • необходимо использовать React
  • можно использовать bootstrap, material design, css-фреймворки, html и css препроцессоры
  • можно использовать js-библиотеки
  • разрешается использовать jQuery только в качесте подключаемой зависимости для UI библиотек. Использование jQuery в основном коде приложения не допускается
  • рекомендуется использовать TypeScript
  • рекомендуется создать и использовать бекенд. Данная рекомендация связана с очень высоким спросом на фронтенд-разработчиков, знакомых хотя бы с основами node.js.
  • запрещено копировать код других студентов, демо, примеров, которые приводятся в задании. Этот запрет касается html, css, js кода. Можно использовать небольшие фрагменты кода со Stack Overflow, других самостоятельно найденных источников в интернете, за исключением github-репозиториев студентов курса. Возле использованного чужого фрагмента кода в комментарии указывается ссылка на источник.

Как сабмитить задание

  • Участникам команд необходимо записаться в таблицу, ссылка на которую будет размещена в анонсах
  • Ссылку на pull request в rs app сабмитит только тимлид
  • Убедитесь, что pull request доступен для проверки. Для этого откройте ссылку, которую сабмитите в rs app, в режиме инкогнито браузера.
  • Если задание не засабмитить до дедлайна, оно не попадёт на распределение при кросс-чеке и за него не будут выставлены баллы.

Требования к оформлению приложения

  • особое внимание обратите внимание на качество оформление приложения. Как прототип можно использовать подходящие шаблоны, размещённые на behance, dribbble, pinterest
  • качественное приложение характеризуется проработанностью деталей, вниманием к типографике (не больше трёх шрифтов на странице, размер шрифта не меньше 14 рх, оптимальная контрастность шрифта и фона), тщательно подобранным контентом
  • вёрстка адаптивная. Минимальная ширина страницы, при которой проверяется корректность отображения приложения - 320рх
  • интерактивность элементов, с которыми пользователи могут взаимодействовать, изменение внешнего вида самого элемента и состояния курсора при наведении, использование разных стилей для активного и неактивного состояния элемента, плавные анимации
  • единое стилевое оформление всех страниц приложения

Критерии оценки:

Максимальный балл за задание: 200 баллов.

Для удобства проверки необходимо записать и разместить на YouTube небольшое (3-5 мин) видео для проверяющих с объяснением как реализован каждый пункт из перечисленных в критериях оценки. Ссылку на видео можно добавить в описание pull request или в footer приложения добавить иконку YouTube со ссылкой на видео.

При оценивании приложения проверяются все требования, описанные в пунктах Структура приложения, Функциональность приложения, Требования к оформлению приложения. Если какие-то из перечисленных требований не выполняются, снимаем часть баллов. В комментарии к оценке необходимо указать какие пункты не выполнены или выполнены частично.

Вёрстка, дизайн, UI +30

  • вёрстка, дизайн, UI главной страницы приложения +10
  • вёрстка, дизайн, UI страницы страны +10
  • оригинальный интересный качественный дизайн приложения, используются анимации, сложные элементы оформления, например, эффект параллакса, полноэкранное видео, синемаграфы и т.д. +10

Главная страница приложения +30

  • поиск +10
  • локализация главной страницы приложения на три языка +10
  • карточки стран +10

Страница страны +80

  • локализация страницы страны на три языка +10
  • фото страны, название страны, название её столицы, краткая информация о стране +10
  • фотогалерея достопримечательностей +10
  • видео +10
  • карта +10
  • информер погоды +10
  • виджет даты и времени в столице страны +10
  • курс местной валюты +10

Бекенд +40

  • создано API для получения данных о стране +10 (API создаётся с использованием фреймворка express/koa/nest и тд. При использовании json-server и подобных инструментов пункт выполненным не считается.)
  • при регистрации нового пользователя можно указать его имя и загрузить фото +10
  • реализована авторизация и разавторизация пользователя. Основная часть приложения доступна без авторизации. При перезагрузке приложения данные о пользователе сохраняются +10
  • есть возможность проставить и сохранить в бекенде рейтинг достопримечательностям страны, увидеть других проголосовавших и какой рейтинг указал каждый из них +10

Дополнительный функционал +20

  • продуман и реализован не предусмотренный заданием сложный в реализации дополнительный функционал, который существенно улучшает качество приложения +10
  • написано не меньше 10 юнит-тестов, использующих различные методы jest +10

Материалы

Библиотеки

Асинхронные запросы, fetch/async/await

Дата и время

API погоды

Тестирование. Юнит-тесты. Jest

Курсы по Node.js

Cross-check