📝 Blog Customizer

Проектная работа по курсу "Фронтенд разработчик" от Яндекс Практикума

Описание проекта

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

Основные возможности

• Интерактивная настройка стилей — изменение параметров блога в реальном времени
• Адаптивный дизайн — корректное отображение на всех устройствах
• Предварительный просмотр — мгновенное отображение изменений
• Модульная архитектура — компонентный подход с использованием React
• Storybook — документация и тестирование компонентов

Технологии

Frontend

• React 18.2.0 — библиотека для создания пользовательских интерфейсов
• TypeScript 5.0.4 — типизированный JavaScript
• Sass — препроцессор CSS с поддержкой модулей

Build Tools

• Webpack 5.81.0 — сборщик модулей
• PostCSS — инструмент для трансформации CSS
• Autoprefixer — автоматическое добавление вендорных префиксов

Development Tools

• Storybook 7.6.10 — среда для разработки и тестирования компонентов
• ESLint — линтер для JavaScript/TypeScript
• Prettier — форматировщик кода
• Stylelint — линтер для CSS/SCSS

Git Hooks & Quality

• Husky — Git hooks
• Commitizen — стандартизация коммитов
• Lint-staged — линтинг только измененных файлов

Быстрый старт

Предварительные требования

• Node.js (версия 16 или выше)
• Yarn или npm

Установка

1. Клонируйте репозиторий

   git clone https://practicum.gitlab.yandexcloud.net/web-faculty-content/project-drafts/sp10_blogcustomizer.git
   cd sp10_blogcustomizer

2. Установите зависимости

   yarn install
   # или
   npm install

3. Запустите проект в режиме разработки

   yarn start
   # или
   npm start

4. Откройте браузер

   http://localhost:8080
   

Доступные команды

Команда	Описание
yarn start	Запуск проекта в режиме разработки
yarn build	Сборка проекта для продакшена
yarn storybook	Запуск Storybook для разработки компонентов
yarn build-storybook	Сборка Storybook
yarn lint	Проверка кода с помощью ESLint
yarn format	Форматирование кода с помощью Prettier
yarn test	Запуск всех проверок качества кода
yarn commit	Создание коммита с помощью Commitizen

Структура проекта

src/
├── components/          # React компоненты
│   ├── arrow-button/    # Кнопка со стрелкой
│   ├── article/         # Компонент статьи
│   ├── article-params-form/ # Форма параметров статьи
│   ├── button/          # Базовая кнопка
│   ├── radio-group/     # Группа радио-кнопок
│   ├── select/          # Компонент выбора
│   ├── separator/       # Разделитель
│   ├── spacing/         # Компонент отступов
│   ├── story-decorator/ # Декоратор для Storybook
│   └── text/            # Текстовые компоненты
├── constants/           # Константы приложения
├── fonts/              # Шрифты проекта
├── images/             # Изображения и иконки
├── styles/             # Глобальные стили
└── index.tsx           # Точка входа приложения

Компоненты

Проект включает в себя набор переиспользуемых компонентов:

• Article — компонент для отображения статей
• ArticleParamsForm — форма для настройки параметров статьи
• Button — универсальная кнопка с различными вариантами
• Select — выпадающий список с кастомным дизайном
• RadioGroup — группа радио-кнопок
• Text — текстовые компоненты с различными стилями

Каждый компонент имеет:

• TypeScript типизацию
• SCSS модули для стилизации
• Storybook истории для документации
• Адаптивный дизайн

Конфигурация

Webpack

Проект использует кастомную конфигурацию Webpack с поддержкой:

• TypeScript
• SCSS модулей
• SVG как React компонентов
• Hot Module Replacement
• Оптимизация для продакшена

ESLint & Prettier

Настроены правила для обеспечения качества кода:

• TypeScript правила
• React правила
• Accessibility правила
• Автоматическое форматирование

Git Hooks

Настроены pre-commit хуки для:

• Автоматического линтинга
• Форматирования кода
• Проверки стилей

Документация

Storybook

Для просмотра документации компонентов запустите:

yarn storybook

Storybook доступен по адресу: http://localhost:6006

Компоненты

Каждый компонент имеет:

• Описание назначения
• Примеры использования
• Параметры (props)
• Интерактивные примеры

---