📝 Markdown Note App

Современное веб-приложение для создания и редактирования заметок в формате Markdown с поддержкой темной темы и feature flags.

✨ Возможности

• 📝 Редактор Markdown с live-превью
• 🎨 Темная и светлая тема
• 🔍 Поиск по заметкам
• 🏷️ Редактирование заголовков прямо в списке
• 🗑️ Удаление заметок (через feature flag)
• 📱 Адаптивный дизайн
• ⚡ Быстрая работа с оптимизацией

🚀 Технологии

• React 19 с TypeScript
• Redux Toolkit для управления состоянием
• Tailwind CSS для стилизации
• Radix UI для компонентов
• Wouter для маршрутизации
• Vite для сборки
• Vitest для тестирования
• Storybook для документации компонентов

📦 Установка и запуск

Локальная разработка

# Установка зависимостей
npm install

# Запуск в режиме разработки
npm run start:dev

# Или по отдельности:
npm run dev          # Frontend
npm run start:dev:server  # Backend (JSON Server)

Docker

# Сборка образа
docker build -t markdown-note:latest .

# Запуск контейнера
docker run -p 3000:8000 markdown-note:latest

🏗️ Архитектура

Проект использует Feature-Sliced Design (FSD):

src/
├── app/          # Инициализация приложения
├── entities/     # Бизнес-сущности (note, user, theme)
├── features/     # Функциональные модули
├── pages/        # Страницы приложения
├── shared/       # Переиспользуемые модули
└── widgets/      # Композитные компоненты

🎛️ Feature Flags

Приложение поддерживает управление функциями через feature flags:

• darkTheme - переключение темной темы
• deleteNote - возможность удаления заметок
• editNote - редактирование заголовков

Управление через кнопку настроек в правом нижнем углу.

🧪 Тестирование

# Запуск всех тестов
npm test

# Unit тесты
npm run test:unit

# Storybook тесты
npm run test:storybook

# Тесты в режиме watch
npm run test:watch

📚 Storybook

# Запуск Storybook
npm run storybook

# Сборка Storybook
npm run build-storybook

🔧 Скрипты

• npm run dev - запуск dev сервера
• npm run build - сборка для продакшена
• npm run preview - предпросмотр сборки
• npm run lint - проверка кода
• npm run lint:fix - автоматическое исправление
• npm run format - форматирование кода
• npm run test - запуск тестов

🌐 API

Приложение использует JSON Server для имитации API:

• GET /notes - получение всех заметок
• POST /notes - создание заметки
• PATCH /notes/:id - обновление заметки
• DELETE /notes/:id - удаление заметки

📝 Структура заметки

interface Note {
  id: string;
  title: string;
  content?: string;
  createdAt: string;
  updatedAt: string;
}

🎨 Темы

Приложение поддерживает автоматическое переключение тем:

• Светлая тема - по умолчанию
• Темная тема - через feature flag или системные настройки

🔍 Поиск

Поиск работает по:

• Заголовкам заметок
• Содержимому заметок
• Результаты отображаются в реальном времени

🚀 Развертывание

Переменные окружения

Создайте файл .env:

VITE_API_URL=http://localhost:8000

Docker Compose

version: '3.8'
services:
  app:
    build: .
    ports:
      - '3000:8000'
    environment:
      - VITE_API_URL=http://localhost:8000

🤝 Вклад в проект

1. Форкните репозиторий
2. Создайте ветку для новой функции
3. Внесите изменения
4. Добавьте тесты
5. Создайте Pull Request

📄 Лицензия

MIT License