tgoop.com/reactify_IT/1466
Last Update:
Одним из ключевых этапов моей работы в LS.Graphics стала миграция бекенда с Firebase Firestore на MongoDB. Это был мой первый такой опыт работы с бекендом и базами данных. Эти улучшения значительно улучшили производительность и масштабируемость сервиса.
Что было сделано:
- Переписал ядро сервиса, оптимизировал запросы и обновил архитектуру.
- Вместе с командой продумали новую схему хранения сущностей, связи между ними и механизмы взаимодействия.
- Добавил кеширование частых запросов и систему ревалидации, что снизило нагрузку на базу и ускорило отклик сервиса.
Этот проект стал для меня важной вехой - создание проекта с нуля. На разработку от начального проектирования до выпуска в продакшен ушло около 7 месяцев.
Впервые в своей практике я полностью самостоятельно:
- Проектировал архитектуру приложения
- Выбирал технологический стек
- Составлял техническую документацию
- Осуществлял полный цикл разработки
Для проекта я выбрал Next.js, нам критически был необходим СЕО. Пришлось знатно перелопатить базу данных, для добавления слагов и упрощения структуры данных. Я реализовал сложный поиск продуктов, внедрил расширенный редактор мокапов. Добился отличных показателей СЕО, а так же неплохую скорость. Большая часть страниц отдавалась с сервера моментально. А так же добавили CDN + внедрили общие практики оптимизации изображений.
Главным и наиболее сложным проектом в моей карьере стал графический редактор для работы с SVG - аналог Figma, который я разрабатывал в течение года. Это было полноценное standalone-решение, интегрированное с нашей платформой мокапов.
Основные возможности редактора:
- Бесконечный холст с поддержкой множества элементов
- Полный набор трансформаций: перемещение, масштабирование, вращение
- Многоуровневая система слоев с возможностью изменения структуры
- Комплексный SVG-парсер, создающий оптимизированную структуру с правильным именованием элементов и свойств
Система управления состояниями:
- Реализация Undo/Redo через IndexedDB
- Поддержка более 300 состояний холста
- Оптимизированный механизм хранения (сжатие данных)
- Минимизация перерисовок для плавной работы
- Работа с растровыми изображениями: Кадрирование, Обрезка, Трансформации.
- Система горячих клавиш: Более 50 комбинаций, Настраиваемые сочетания
- Экспорт результатов: Поддержка множества форматов
- Модуль предпросмотра перед сохранением
Результатом стал профессиональный инструмент, сочетающий богатый функционал с высокой производительностью и удобным интерфейсом.
В рамках работы в LS.Graphics я также реализовал несколько других значимых проектов:
1. Десктопная версия плагина (Electron.js)
2. Единый UI Kit для всех проектов
3. Реализовал 2 AI-сервиса
4. Работал над добавлением новых фич в CRM платформу
Было интересно работать с разными технологиями и продуктами.
В следующем посте я расскажу о своем первом стартапе и о том, как научился создавать приложения полного цикла: фронтенд, бэкенд, администрирование, настройка и деплой.
