Skip to content

Latest commit

 

History

History
76 lines (52 loc) · 4.55 KB

README.md

File metadata and controls

76 lines (52 loc) · 4.55 KB

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

  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 и т.п.

✅ Результат:

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

historical-dates-gif

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

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