Исторические даты

1. Исторические даты / Historical Dates (React, TypeScript):

   • Описание
   • Задача
   • Стек и технические требования
   • ✅Результат

Установка

Все команды запускаются из корня проекта:

# Шаг 1 — Клонируем репозиторий
$ https://github.com/M4XPRD/historical-dates

# Шаг 2 — Устанавливаем зависимости и одновременно запускаем проект
$ make start

# Шаг 2.5 — Если нужно просто запустить проект, пишем make dev
$ make dev

# Если у вас yarn, то перед командой пишем "y"
$ make y-start

Проект

Описание

Исторические даты — это SPA, в котором можно посмотреть на памятные даты различных событий в 6 категориях, происходившие за последние 16 лет.

Задача

Реализовать следующий блок в соответствии с макетом.

Блок содержит информацию о временных отрезках, в каждом из которых существует несколько событий.

При переключении временных отрезков изменяются соответствующие числа и под ними показывается новый слайдер, который содержит подробную информацию по ключевым событиям на активном временном отрезке.

Возможно существование от 2 до 6 временных отрезков. Все интерактивные точки на окружности располагаются на одинаковом расстоянии друг от друга.

Все существующие в макете линии — это не разметочная сетка, а часть верстки.

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

• Необходимо использовать Typescript
• Можно использовать React.js или нативный JS на Ваш выбор
• В случае использования нативного JS, можно воспользоваться любым удобным для Вас HTML-шаблонизатором или обычным HTML
• Стилизация с использованием SASS/SCSS (В случае работы с React.js, возможно использование styled-components)
• Сборка проекта с помощью Webpack
• Для работы со слайдерами необходимо использовать библиотеку Swiper
• Для реализации JS-анимаций можно использовать библиотеку GSAP
• Не использовать JQuery
• Не использовать Bootstrap, Tailwind и т.п.
• Не использовать библиотеки с готовыми UI-компонентами такие, как MaterialUI, AntDesign и т.п.

✅ Результат:

Деплой приложения.

Что получилось в итоге:

• Приложение построено в стеке React + TypeScript
• Для хранения состояния использован React Context
• Визуал получится на чистом CSS с использованеим styled-components
• Приложение полностью адаптировано под большинство устройст, включая Galaxy Fold
• Для слайдера использована библиотека Swiper
• Для анимаций переключения категорий дат использован GSAP