CodeMap - Визуализация структуры ZIP-архивов

CodeMap — это современное веб-приложение на React для загрузки и визуализации структуры ZIP-архивов проектов. Приложение позволяет интерактивно исследовать файловую иерархию с поддержкой поиска, фильтрации скрытых файлов и плавными анимациями.

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

Загрузка ZIP-файлов

• Drag-and-drop интерфейс
• Кнопка выбора файла
• Поддержка файлов до 100 МБ

Распаковка в браузере

• Полностью клиентская обработка (без сервера)
• Использование JSZip для распаковки
• Быстрая обработка больших архивов

Интерактивное дерево файлов

• Сворачивание/разворачивание папок
• Иконки для разных типов файлов
• Отображение размера файлов при наведении
• Плавные анимации при взаимодействии

Поиск и фильтрация

• Полнотекстовый поиск по имени файла/папки
• Фильтрация скрытых системных файлов (.DS_Store, Thumbs.db, .git и др.)
• Сохранение состояния раскрытых папок в localStorage

Тема оформления

• Светлая и тёмная тема
• Плавное переключение
• Сохранение предпочтений пользователя

Оптимизация производительности

• Ленивая загрузка компонентов
• Эффективная работа с большими деревьями файлов
• Минимальные перерисовки

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

codemap_v2/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── components/
│   │   ├── FileTree.jsx          # Компонент дерева файлов
│   │   ├── FileNode.jsx          # Компонент узла файла/папки
│   │   ├── FileUploader.jsx      # Компонент загрузки ZIP
│   │   ├── SearchBar.jsx         # Компонент поиска
│   │   ├── ThemeToggle.jsx       # Переключатель темы
│   │   └── HiddenFilesToggle.jsx # Переключатель скрытых файлов
│   ├── utils/
│   │   ├── zipParser.js          # Функции распаковки ZIP
│   │   └── storageUtils.js       # Работа с localStorage
│   ├── App.jsx                   # Главный компонент
│   ├── App.css                   # Стили приложения
│   └── index.js                  # Точка входа
├── package.json
└── README.md

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

Требования

• Node.js 14+ и npm 6+
• Современный браузер (Chrome, Firefox, Edge)

Установка

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

git clone <repository-url>
cd codemap_v2

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

npm install

3. Запустите приложение:

npm start

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

Сборка для продакшена

npm run build

Собранные файлы будут в папке build/

Зависимости

Production

• react - Библиотека для создания UI
• react-dom - Рендеринг React в DOM
• framer-motion - Библиотека анимаций
• react-icons - Иконки
• jszip - Распаковка ZIP-архивов

Использование

1. Загрузка ZIP-файла

• Перетащите ZIP-файл в область загрузки
• Или нажмите кнопку "Выбрать файл"
• Приложение автоматически распакует архив

2. Навигация по дереву

• Нажимайте на стрелки для сворачивания/разворачивания папок
• Используйте кнопки "Развернуть всё" и "Свернуть всё"
• При наведении отображается размер файла

3. Поиск файлов

• Введите текст в поле поиска
• Результаты фильтруются в реальном времени
• Результаты поиска выделяются жёлтым цветом

4. Фильтрация скрытых файлов

• Нажмите кнопку "Скрытые файлы" для отображения системных файлов
• По умолчанию скрыты: .DS_Store, Thumbs.db, .git, .env и др.

5. Переключение темы

• Нажмите иконку солнца/луны в верхнем правом углу
• Тема сохраняется в localStorage

🔧 Технические детали

Распаковка ZIP

Функция parseZip() в utils/zipParser.js:

• Использует JSZip для распаковки архива в браузере
• Строит иерархическую структуру файлов и папок
• Фильтрует скрытые системные файлы
• Сортирует папки перед файлами

Анимации

Все анимации реализованы с помощью Framer Motion:

• Появление элементов при загрузке
• Плавное открытие/закрытие папок
• Подсветка при наведении
• Вращение иконок при раскрытии

Хранилище состояния

• localStorage используется для сохранения:
  • Раскрытых папок (для восстановления при перезагрузке)
  • Выбранной темы (светлая/тёмная)

Иконки файлов

Автоматическое определение иконок по расширению файла:

• JavaScript/TypeScript: Code icon
• Python: Code icon
• HTML/CSS: Code icon
• Изображения: Image icon
• Архивы: Archive icon
• И многое другое...

Производительность

• Максимальный размер архива: 100+ МБ
• Время распаковки: зависит от размера и скорости браузера
• Оптимизация: ленивая загрузка, минимизация перерисовок

Известные ограничения

• Некоторые браузеры могут иметь ограничения на размер файлов в памяти
• Очень большие архивы (>500 МБ) могут замедлить браузер
• Поддержка только ZIP-архивов (не RAR, 7z и т.д.)

📝 Лицензия

MIT License - свободно используйте в своих проектах

👨Разработка

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

npm start

Запуск тестов

npm test

Сборка

npm run build

Поддержка

Если у вас есть вопросы или проблемы, обращайтесь на почту alexsobian@gmail.com.

---