History Dates - интерактивное приложение, позволяющее пролистать наиболее значимые исторические события, произошедшие в разные периоды ХХ века. Приложение имеет шесть исторических промежутков от 1905 до 2022 г., и шесть различных тематик отображаемых событий.

В приложении реализован следующий функционал:

• приложение создано с использованием TypeScript, React и React Hooks (useState). В качестве дополнительных библиотек были использованы Swiper JS (слайдер событий) и react-spring (анимация смены дат);
• приложение имеет адаптивный интерфейс, реализация выполнена по принципу Mobile First с контрольными точками 320 и 768px;
• на десктопной версии приложения смена тематики выполняется вращением "колеса событий", в мобильной версии этот функционал реализован в виде селекта с выпадающими темами. "Колесо событий" и селект имеют взаимную обратную связь.
• слайдер событий выполняет сортировку событий по годам, сортировка по возрастанию;
• разметка приложения выполнена по методологии БЭМ;
• для сборки проекта используется Webpack;

Не удаляйте и не изменяйте папки и файлы: .editorconfig, .gitattributes, .gitignore, package.json.

Директория для размещения статичных ресурсов (шрифты, стили, изображения и так далее). Корневая директория проекта.

Обратите внимание, файл Readme.md, в директории public, содержит описание подготовительного процесса, который вам необходимо выполнить перед тем, как приступать к работе над проектом.

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

После создания проекта вам доступны следующие сценарии. Обратите внимание, для запуска сценария, вы должны находится в директории проекта (./project).

npm start

После запуска, приложение доступно для просмотра в браузере по адресу http://localhost:3000.

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

Обратите внимание, режим разработки настроен таким образом, при котором ошибки, найденные статическим анализатором кода ESLint, отображаются в той же вкладке браузера, в которой запущен проект.

npm test

Запуск тестов приложения в интерактивном режиме.

В данном случае, имеются в виду тесты, которые вынесены в отдельные файлы, в имени которых присутствует суффикс *.test.*. Например, app.test.tsx.

Подробную информацию вы можете найти на странице Запуск тестов.

npm run lint

Запуск проверки проекта статическим анализатором кода ESLint.

Анализ кода производится только в файлах, которые находятся в директории src.

Обратите внимание, при запуске данной команды, ошибки выводятся в терминал.

npm run build

Запуск сборки приложения.

В процессе сборки приложения, код приложения оптимизируется и минимизируется, для достижения наилучшей производительности.

Во время выполнения инструкций по сборке проекта, в корне проекта создается директория build, в которую будут помещены результирующие файлы. После сборки проект готов к публикации.

Подробную информацию вы можете найти на странице Развертывание проекта.

npm run eject

Обратите внимание, при запуске команды npm run eject нет возможности вернуть внесённые изменения обратно!

Выполнение данной команды, react-scripts скопирует все конфигурационные файлы и скрипты в корень проекта. Данный процесс позволяет получить полный контроль над конфигурацией проекта.

Не используйте данную команду, если не уверены как именно она работает или к какому результату приведёт ее выполнение.