Руслан Куянец | Reactify – Telegram
Руслан Куянец | Reactify
5.85K subscribers
703 photos
52 videos
39 files
286 links
Я IT-специалист, ментор и основатель проекта YeaHub и сообщества Reactify. Здесь рассказываю про Frontend и IT.

Менторство:
https://reactify.ru

YouTube канал:
https://youtube.com/@reactify-it

YeaHub:
https://yeahub.ru/

Связь:
@ruslan_kuyanets
Download Telegram
Forwarded from YeaHub
[Версия 1.0.14] - Обновление платформы

🔥 Главное нововведение – публичные коллекции вопросов! Теперь вы можете свободно изучать подборки вопросов по разным компаниям и темам без регистрации. А чтобы начать тренировки, достаточно быстро зарегистрироваться. Готовьтесь к собеседованиям эффективнее!

Каждую неделю мы добавляем новые коллекции вопросов.

Исправлено:
- Мелкие баги

Добавлено:
- Публичные Коллекции вопросов. Это подборки вопросов по определенным темам, или компаниям. Теперь можно готовиться к собеседованиям в нужную вам компанию
- Новый лендинг – стал удобнее, информативнее и современнее

Спасибо, что остаетесь с нами — мы продолжаем прокачивать продукт 💪
Пробуйте, тестируйте, делитесь обратной связью!

👍 Обучайтесь, общайтесь, растите вместе с https://yeahub.ru

#release #news #update #yeahub
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥109👍6
🤯 Подборка сложных вопросов с собеседований

1. Какая разница в tree-shaking у CJS и ESM?
ESM (ECMAScript Modules):
- Статический анализ на этапе сборки → можно точно определить неиспользуемый код.
- Импорты (import/export) фиксированы, что позволяет оптимизировать бандл.

CJS (CommonJS):
- Динамические require() → сборщик не может заранее знать, какие части модуля будут использоваться.
- Загружает модуль целиком, что мешает tree-shaking.

2. Какую часть спецификации ES нельзя реализовать через полифиллы и транспиляцию?
Proxy – требует нативной поддержки браузера, так как работает на низком уровне (перехват операций с объектами). Vue 2 для старых браузеров использовал Object.defineProperty вместо Proxy.

3. Для чего используется <picture>, кроме выбора формата изображения?
Адаптивные изображения:
- Разные версии картинки под разные размеры экрана (media-атрибуты).
- Оптимизация под ретину (srcset).
- Fallback для старых браузеров (<img> внутри).
- Разгрузка мобильных сетей (легкие версии).

4. Зачем нужен тег <base>?
Задает базовый URL для всех относительных ссылок на странице.

<base href="https://example.com/assets/">
<img src="logo.png"> <!-- Загрузится https://example.com/assets/logo.png -->


5. Как в runtime проверить поддержку CSS-свойства?
if (CSS.supports('display', 'grid')) {  
console.log('Grid поддерживается!');
}

Альтернатива: @supports в CSS.

6. Как называется реактивность в React?
Не настоящая реактивность (как в Svelte/Solid/Vue). React использует "pull-based" модель (перерисовка по изменению состояния). Гранулярная реактивность (сигналы, Proxy) – когда обновляются только зависимые части.

7. Как определить системную тему (dark/light)?
В JS:

const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

// Следить за изменением темы
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
console.log(e.matches ? 'Тёмная тема' : 'Светлая тема');
});

В CSS:

@media (prefers-color-scheme: dark) {
body { background: #000; color: #fff; }
}


8. Что такое CSS Container Query?
Аналог @media, но зависящий от размера контейнера, а не viewport. Позволяет адаптировать стили для компонентов (например, карточка меняет layout в узком контейнере).

.container { container-type: inline-size; }

@container (max-width: 500px) {
.card { flex-direction: column; }
}


9. Что будет с padding: 1,5px?
Непредсказуемо! Это синтаксическая ошибка (запятая вместо точки), но браузер попытается "починить". Может интерпретироваться как 1px, 15px или проигнорироваться.

Вывод: так писать нельзя, только padding: 1.5px.

10. Как из массива [1, 2, 3] получить тип 1 | 2 | 3?
const arr = [1, 2, 3] as const;  // Делаем кортеж  
type T = typeof arr[number]; // 1 | 2 | 3

Без as const тип будет number[].

11. Разница между import { ReactNode } и import { type ReactNode }?
Обычный импорт:

import { ReactNode } from 'react'; // Может попасть в бандл.

Импорт типа (TypeScript 4.5+):

import { type ReactNode } from 'react'; // Удаляется при компиляции.

Полезно для оптимизации бандла (импорты только для типов не включаются в JS-код).

#собеседования #react #javanoscript #typenoscript
👍20🔥52
Я запускаю цикл из 6+ постов для знакомства.
В них я расскажу:
- Как учился,
- Как искал работу,
- Как работал в британской компании,
- Как работал в международной компании, продуктами и сервисами которой пользуются Apple, IBM, Microsoft, Nike и другие крупные корпорации.
- Также поделюсь историями о своих сложных проектах и расскажу, чем занимаюсь сейчас.

Надеюсь, вам будет интересно! И кого-то они замотивируют

Я писал эти посты две недели: искал архивные фото (ещё с 2020 года), материалы о проектах, над которыми работал, и другие детали.😁
🔥13👍104
👷‍♂️ Мой путь в IT. От монтажника до Frontend Разработчика

Привет! Меня зовут Руслан. Я — фронтенд-разработчик, ментор и просто человек, который верит, что упорство меняет жизнь.

У меня есть любящая семья: жена и маленькая дочка, которой недавно исполнился годик. Мы живём в Краснодаре, но моя история началась далеко отсюда…

👶 Кем я был раньше

Я родился в Сибири, а в 16 лет переехал в Краснодар. Здесь я окончил школу и университет — по специальности агрономия и защита растений. Да, я не технарь по образованию, и моя дорога в IT была непростой.

До программирования я работал монтажником окон — таскал тяжелые рамы, лазил по высоткам, дышал пылью на стройках. В 2019 году я уехал на север, чтобы заработать денег, работая на стройке.

Тогда моя жизнь была тяжёлой:
- Работа — физический труд, иногда по 12 часов.
- Быт — холодные общежития, еда на скорую руку.
- Ощущение — «Это не та жизнь, которую я хочу».

Пока мои друзья в Краснодаре ездили на море, путешествовали в горы, праздновали дни рождения, я работал. И именно тогда я понял: пора что-то менять.

🤬 Переломный момент

Тот период на севере стал для меня решающим. Я устал от физического труда, который не приносил развития и забирает у меня доровье

Тогда у меня была затяжная депрессия — около двух лет. Меня не устраивала моя жизнь, но я не знал, чем заняться. Передо мной было два варианта:
- Смириться, перестать мечтать о большем — и тогда неудовлетворённость жизнью пройдёт;
- Менять жизнь, делать что-то, чтобы улучшить своё положение.

Я выбрал второй вариант.

😎 Как я начал меняться

Первым делом я бросил курить и пить (тогда я пил почти каждый день, а без сигарет не представлял жизни — курил каждые 30 минут, вероятно, из-за депрессии);

Снова начал заниматься спортом - купил абонемент в тренажёрный зал. Каждый день совершал длительные прогулки в одиночестве, размышляя о жизни

Начал читать книги. Самые важные для меня:
- «Красная таблетка» Андрея Курпатова (кстати, она помогла мне и с JS — я внушал себе, что смогу его освоить, и в итоге так и произошло);
- «Квантовый воин» Джона Кехо — книга о психологии, самовнушении и вере в себя.

Я всегда хотел создавать что-то новое. IT привлекало возможностями. Когда я видел разработчиков с их макбуками и кофе, то понимал - хочу так же. А потом смотрел на свои рабочие руки в пыли и бетоне... Это мотивировало меня двигаться вперед.

Ну и, конечно же, я начал изучать программирование. Но об этом — в следующем посте.

📌 На картинках я на работе, устанавливаю балконные рамы. А также на подработке, загружаю арбузы в газели. Также фото с трамвая, я начал читать книгу "Квантовый воин".
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍52🔥3516
💻 Как я изучал программирование

Мой путь в IT начался с Python. Я прошел бесплатный курс от Яндекс.Практикума, где в игровой форме изучал синтаксис: писал условия, циклы, функции, будто бы программируя голосового помощника. Но мне было непонятно, чем на самом деле занимаются разработчики. Неужели их работа сводится только к решению задач из учебников?

Я продолжал учиться: смотрел лекции Тимофея Хирьянова, конспектировал, но через три месяца осознал, что топчусь на месте. Не понимал, зачем мне эти знания и куда двигаться дальше. После небольшого перерыва я наткнулся на курс CS50 и впервые узнал о разделении на фронтенд и бэкенд. Это помогло мне определиться: я выбрал фронтенд.

👩‍💻 Фронтенд: первые шаги в верстке

Сначала я прошел два курса по верстке на Stepik, смотрел ролики на YouTube, но информация казалась хаотичной. Я пытался запоминать теги без практики, и прогресс шел медленно.

Переломным моментом стала HTML Academy. Их тренажеры по верстке оказались идеальными для меня: я купил подписку и за три месяца глубоко изучил HTML и CSS. Однако я долго не решался перейти к реальным проектам — не мог себя заставить, было страшно.

Я поставил себе дедлайн: за неделю посмотреть четыре видео с версткой макетов, а затем начать самому. И я сделал это. Наконец-то сел верстать. Оказалось, все было намного проще, чем я думал. 100% нужно было сделать это раньше.

🖥 JavaScript: борьба и прорыв

С JavaScript было сложнее. Даже после курсов на Stepik, HTML Academy и чтения Learn JS я не понимал логику языка. Алгоритмы, DOM-взаимодействия, циклы — все давалось с трудом.

Особенно запомнился один вечер. Я снова пытался написать код для модального окна - всего 4 строчки, блин! Я же делал это уже раз пять по видео, но стоило попробовать самому - и ничего. Пустота.

Тогда я закрыл ноутбук и просто лег. В голове крутилось: "Ну как так? Я же уже столько времени потратил...". Вспомнил про "Красную таблетку", и подумал: "Ладно, я пока просто не дорос. Даю себе неделю. Я обязательно пойму это."

Это не враньё — ровно через неделю произошёл то, что я называю "щелчком". Вы бы только знали, что я чувствовал в тот момент! Это был настоящий дофаминовый взрыв — будто в голове включили свет.


После этого все пошло по-другому. Я будто получил второе дыхание. Я больше не просто повторял за кем-то — я создавал. Пусть криво, пусть с костылями, но это были мои решения. И каждый такой проект давал новую уверенность: "Я могу".

Мои первые проекты (Делал сам):
Курс акций | Киноафиша | Погода | ToDo

Помню, как приходил после работы в семь вечера — голодный, замёрзший — и садился делать проект до полуночи. Вот насколько сильной была мотивация. Я показывал свои проекты друзьям, родным. Очень гордился ими.

👩‍💻 Освоение React

Изучение React далось мне легче, чем JavaScript. Я прошел полный курс "React-Самурай" от Димыча — все 100 уроков — и сразу после этого сделал свое первое приложение полностью самостоятельно: сам нашел API, выбрал макет, реализовал функционал без подсказок.

Дальше я углубился в изучение экосистемы: Redux, React Router и TypeScript. На это ушел еще 1 месяц.

Всего на изучение фронтенда я потратил 7–8 месяцев. Единственное, что я не изучил для работы - Git, это сыграло со мной злую шутку, но об этом в следующем посте. Советую всем сразу загружать проекты в GitHub, а не как я - только для портфолио после выхода на рынок.

📹 МОЕ ПЕРВОЕ ВИДЕО, В КОТОРОМ Я РАССКАЗЫВАЮ ПРО СВОЙ ПУТЬ

📌 На видео презентую другу свой сайт. А на скриншоте прошу друга-разраба провести код ревью
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍22🔥127🤝2
🔍 Как я искал первую работу в 2021 году

Если сравнить рынок труда тогда и сейчас — это небо и земля.
- В 2021 году по всей России было 8000+ вакансий (и много предложений для джунов).
- Сейчас их в 3,5 раза меньше — всего около 2300.

Я вышел на рынок с сырым резюме, но меня завалили тестовыми и звали на скрининги. Результат? 2 недели поиска — и я уже в офисе, слушаю наставления тимлида.

Но обо всём по порядку.

🤡 "А вдруг я не джун?" — синдром самозванца и страх выхода

Я выучил весь необходимый стек (и даже больше). В то время можно было устроиться, зная только React, а я разобрался во всей экосистеме.

Но вместо поиска работы я:
- Долго готовился (учил лишнее, делал пет-проекты, решал задачи).
- Боялся откликаться — синдром самозванца сжирал изнутри.
(Сейчас новички с накрученным опытом выходят мидлами… а я тогда боялся на джуна откикнутся!)

Однажды я 3 часа сидел с открытым HeadHunter, курсор над кнопкой "Опубликовать резюме"… но так и не решался нажать. 😄
В итоге пересилил себя — и поиск начался.

📊 Как прошли мои 2 недели поиска

За две недели поисков я успел: Сделать 2 тестовых, Пообщаться с 2-3 эйчарами, Пройти 2 техсобеса. И в итоге — получил оффер!

Как я и говорил, я реально хорошо подготовился, тянул с выходом на рынок. На собесах я отвечал на все вопросы, причем развернуто и подробно рассказывал про свои пет-проекты, во всех деталях.

🥇 И вот я устроился в аутсорс/аутстаф компанию на стажера.

Как же я был счастлив тогда! Хотя условия были, мягко говоря, не сахар:
- Первый месяц — вообще без оплаты (чисто за опыт)
- Потом три месяца испытательного срока с зарплатой 10/15/25 тысяч — это же копейки!
- Работа в офисе, куда каждый день приходилось тратить по 2 часа на дорогу (час туда, час обратно)

Но мне было всё равно — я же наконец-то работал разработчиком!

За 3-4 месяца я успел:
- Поработать над внутренними проектами — делал сервис отчётов для команд и CRM для управления персоналом
- Мой ментор-тимлид, увидев, что я быстро схватываю, начал подкидывать мне бекенд-задачи
- Так, параллельно с основной работой, я за эти месяцы ещё и неплохо освоил бекенд с базами данных

(Этот момент был особенно важен — я чувствовал, как расту профессионально, и был готов горы свернуть!)

🌧 Но был один кошмар — Git и работа в команде.

Помню, как меня чуть не уволили в первый же месяц.

Проблема была в том, что я не понимал, что от меня хочет Тимлид. Я жестко путался с ветками и делал полнейший бред. Тимлид подумал, что я его не слушаю, хотя я просто не понимал его. Вместо того чтобы переспросить или сказать "Помогите!", молча делал какую-то фигню

Меня вызвали в кабинет и вынесли ультиматум:
"Даём тебе неделю. Если не изменишься — прощаемся."

Это был удар ниже пояса. Но именно он заставил меня взбодриться и в итоге — выжить на первой работе.

📹 КСТАТИ, Я СНЯЛ ОБ ЭТОМ ВИДЕО НА ЮТУБ — КАК МЕНЯ ЧУТЬ НЕ УВОЛИЛИ И КАК ЭТОГО ИЗБЕЖАТЬ НОВИЧКАМ!

📌 На картинке мое общение с HR 4 года назад. Мне отправили тестового задания (оно до сих пор доступно) https://gist.github.com/vmosyaykin/cd3ef13106c4ac16f8e47a13114f39fd

Про мой первый проект в этой компании я расскажу в следующем посте
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥1810👍8
⚙️ Мой первый серьезный проект: как я, джун, работал за мидла в британском финтехе

После четырех месяцев испытательного срока меня наконец отправили на первый настоящий проект — в британскую финтех-компанию Trastra (https://trastra.com). Это был совершенно новый уровень. Мне предстояло разрабатывать основное веб-приложение компании и писать код для мобильного приложения на React Native. При этом я никогда раньше не работал с React Native!

По легенде я был мидлом с 4-летним опытом разработки на React + React Native. Да-да, именно в своей первой компании я впервые столкнулся с накруткой опыта. Меня, джуна без коммерческого опыта, компания продала клиенту как мидла с 4 годами опыта! Клиент платил за меня 3500€ в месяц. Я получал... всего 25 000 рублей

🕯 Первое знакомство с "взрослым" Scrum

Trastra была крупной платформой с большой кодовой базой. Впервые в жизни я увидел, как работает настоящая agile-команда:
- 18 специалистов разного профиля
- Полный набор ролей: скрам-мастер, тимлид, 3 фронтендера, 6 бекендеров, 3 QA, 2 аналитика, дизайнер
- Все ритуалы: ежедневные стендапы, планирование спринтов, ретроспективы

🗓 Первые недели адаптации

Первое время было страшно и сложно. Я терялся в таком большом проекте. Но мне помогал мой тимлид из аутстаф-компании:
- Каждый мой коммит и пул-реквест сначала проходил через него
- Он правил мой код: "Смотри, мидл бы здесь сделал иначе..."

Тимлид со стороны Trastra искренне считал, что имеет дело с опытным разработчиком

Уже через месяц работы:
- 90% задач закрывал самостоятельно
- Научился работать напрямую с командой заказчика
- Мои задачи попадали в продакшен — я гордился этим!

💡 Переломный момент

Но когда после нескольких месяцев успешной работы я попросил повышение до 40 тысяч, мне отказали. Этот момент перевернул мое сознание. Я вдруг осознал несправедливость ситуации: вокруг сидели такие же ребята, которые уже 1-2 года работали за 60-100 тысяч, выполняя задачи мидлов и даже сеньоров, но боялись уйти. В тот же день я обновил резюме. Оказалось, мой реальный опыт уже стоил гораздо больше...

📌 На видео мой первый проект. Радуюсь, что сделал валидацию. Кстати, на сайте Trastra показан интерфейс приложения, а на нём то, что я делал. Как раз таки я разрабатывал функциональность SEPA-переводов, историю переводов, создание платежа с вводом реквизитов. Это всё делал я!

Ну и ещё коллаж из фото, рабочий вайб. Как же я был счастлив тогда. "Мама, я — айтишник!"


Кстати, только сейчас заметил, что мокап (это картинка айфона) — это продукт моей будущей компании. Ничего себе отсылка! 🤯😁
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥33👍7🤝4
🌐 Работа в международной компании

Когда я во второй раз выходил на рынок труда, у меня уже было около 9 месяцев опыта. Я помню, как обновлял резюме и буквально в первые же дни получил множество приглашений на собеседования. Поиск работы тогда занял всего несколько недель.

После собеседований у меня было несколько предложений, но я выбрал вариант с возможностью удалённой работы и, что важнее, действительно интересным проектом. Так я оказался в компании LS.Graphics (https://www.ls.graphics/) на позиции Junior+ с зарплатой 60 тысяч рублей. Для 2022 года, особенно после моей первой работы в аутсорсе (где я получал 25 тысяч), это было круто.

Почему LS.Graphics?

Эта компания создаёт продукты для дизайнеров: графические элементы, мокапы, плагины и целые сервисы, которые помогают в работе. Но самое крутое — масштаб её влияния. Около 90% клиентов — это европейские и американские компании, включая таких гигантов, как Apple, Microsoft, Nike, IBM и Adobe. Если говорить о России, то среди пользователей продуктов LS.Graphics — Сбер, Яндекс, Авито, Т-Банк и другие крупные компании.

А теперь самое интересное: если вы когда-либо видели мокап iPhone в рекламе или на сайте компаний — с вероятностью 80% он был сделан в LS.Graphics. Да, именно их мокапы Apple использует для презентации своих смартфонов.

🎮 Разработка топового Figma-плагина

Мне посчастливилось работать над плагином для Figma, который входит в топ-6 самых популярных с 1,2 млн пользователей. Figma - основной инструмент 90% дизайнеров мира, и плагин неизменно входил во все авторитетные подборки "Топ-10 лучших плагинов Figma". Ежемесячно через наш плагин создавались десятки тысяч дизайн-проектов.

Когда я присоединился к проекту, передо мной стояла амбициозная задача:
- Провести полный рефакторинг кода
- Внедрить TypeScript и новую архитектуру
- Оптимизировать графический движок (Canvas + Three.js)

Особую сложность представляла работа с графическим движком на базе Canvas (Fabric.js) и 3D-визуализацией (Three.js), которые были основной функциональностью плагина.

За 6 месяцев не осталось ни одного файла, который я бы не изменил. Плагин действительно стал работать быстрее, количество багов уменьшилось, а кодовая база сократилась на 70%.

Вообще, плагин я рефакторил в 3 этапа за 2 года. Каждый раз находилось что-то, что можно было улучшить, потому что я развивался.

🔼 Развитие плагина и новые вызовы

Со временем плагин претерпел ещё более масштабные изменения — мы полностью переработали редактор, добавили новые функции и серьёзно улучшили производительность.

Мне удалось глубоко погрузиться в работу с Canvas и Three.js, решая нестандартные задачи.

Одной из ключевых проблем была производительность при работе с большими документами. Я провёл серию оптимизаций:
- Устранил подвисания — переработал алгоритмы обхода дерева элементов, что особенно критично для сложных проектов.
- Ускорил поиск нод — внедрил кеширование, что сократило время обработки запросов.
- Оптимизировал вставку дизайна — раньше на это уходило 3-4 секунды, после доработок время сократилось до 1 секунды.

⚙️ Разработка модуля командной подписки

Помимо работы над самим плагином, я занимался разработкой системы подписки для команд:
- Спроектировал архитектуру — продумал сущности в БД, API и бизнес-логику.
- Реализовал бекенд и фронтенд — от обработки платежей до интерфейса управления подписками.
- Интегрировал платёжную систему — обеспечил безопасное проведение транзакций и автоматическое продление подписок.

Это был полноценный цикл разработки — от идеи и проектирования до релиза и поддержки.

Особенно приятно было, когда этой функцией начали активно пользоваться. В итоге за 7 месяцев купили более 100 командных подписок, а общее количество пользователей в командах достигло около 700. Со временем эта функция стала приносить ещё больше дохода, и всё больше компаний переходили на такой тип подписки.

📌 На картинках — рейтинг плагинов в Figma, а также сам плагин.

В следующих постах я расскажу вам о других проектах, над которыми работал. Будет интересно!
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥21👍74🤝3
➡️ Миграция бекенда и масштабный рефакторинг

Одним из ключевых этапов моей работы в LS.Graphics стала миграция бекенда с Firebase Firestore на MongoDB. Это был мой первый такой опыт работы с бекендом и базами данных. Эти улучшения значительно улучшили производительность и масштабируемость сервиса.

Что было сделано:
- Переписал ядро сервиса, оптимизировал запросы и обновил архитектуру.
- Вместе с командой продумали новую схему хранения сущностей, связи между ними и механизмы взаимодействия.
- Добавил кеширование частых запросов и систему ревалидации, что снизило нагрузку на базу и ускорило отклик сервиса.

🖥 Разработка веб-приложения с графическим редактором

Этот проект стал для меня важной вехой - создание проекта с нуля. На разработку от начального проектирования до выпуска в продакшен ушло около 7 месяцев.

Впервые в своей практике я полностью самостоятельно:
- Проектировал архитектуру приложения
- Выбирал технологический стек
- Составлял техническую документацию
- Осуществлял полный цикл разработки

Для проекта я выбрал Next.js, нам критически был необходим СЕО. Пришлось знатно перелопатить базу данных, для добавления слагов и упрощения структуры данных. Я реализовал сложный поиск продуктов, внедрил расширенный редактор мокапов. Добился отличных показателей СЕО, а так же неплохую скорость. Большая часть страниц отдавалась с сервера моментально. А так же добавили CDN + внедрили общие практики оптимизации изображений.

💎 Разработка графического SVG-редактора

Главным и наиболее сложным проектом в моей карьере стал графический редактор для работы с SVG - аналог Figma, который я разрабатывал в течение года. Это было полноценное standalone-решение, интегрированное с нашей платформой мокапов.

Основные возможности редактора:
- Бесконечный холст с поддержкой множества элементов
- Полный набор трансформаций: перемещение, масштабирование, вращение
- Многоуровневая система слоев с возможностью изменения структуры
- Комплексный SVG-парсер, создающий оптимизированную структуру с правильным именованием элементов и свойств

Система управления состояниями:
- Реализация Undo/Redo через IndexedDB
- Поддержка более 300 состояний холста
- Оптимизированный механизм хранения (сжатие данных)
- Минимизация перерисовок для плавной работы
- Работа с растровыми изображениями: Кадрирование, Обрезка, Трансформации.
- Система горячих клавиш: Более 50 комбинаций, Настраиваемые сочетания
- Экспорт результатов: Поддержка множества форматов
- Модуль предпросмотра перед сохранением

Результатом стал профессиональный инструмент, сочетающий богатый функционал с высокой производительностью и удобным интерфейсом.

Дополнительные проекты и опыт

В рамках работы в LS.Graphics я также реализовал несколько других значимых проектов:

1. Десктопная версия плагина (Electron.js)
2. Единый UI Kit для всех проектов
3. Реализовал 2 AI-сервиса
4. Работал над добавлением новых фич в CRM платформу

Было интересно работать с разными технологиями и продуктами.

📌 На картинках — 3 продукта над которыми я работал

В следующем посте я расскажу о своем первом стартапе и о том, как научился создавать приложения полного цикла: фронтенд, бэкенд, администрирование, настройка и деплой.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥18👍64🤝2
😮 Мой первый стартап — сервис онлайн-записи App-Salute

Навыки, которые я получил на работе, очень пригодились мне. Моя сестра — успешный стилист с собственным бизнесом и большим влиянием в бьюти-сфере своего города. Именно она вдохновила меня на создание приложения, которое было бы дешевле и проще, чем YClients, но удобнее простых аналогов, которыми пользуются небольшие салоны.

Я хотел сделать сервис, в котором не было бы лишних функций — только самое необходимое: зашел, записал клиента, следил за записями в календаре. Никакого сложного обучения — простота и удобство.

Меня мотивировала возможность создать продукт, которым будут пользоваться люди. К тому же, у меня был огромный список технологий, которые я хотел освоить и применить на практике.

Так в декабре 2022 года появился App-Salute.

🖥 Создание бэкенда

Для бэкенда я выбрал знакомый стек: Node.js, Express.js, MongoDB. На разработку ушло около двух месяцев. Я писал код после основной работы — каждый день по 3–4 часа, а иногда и целые выходные.

Тогда я жил в режиме 24/7. Сейчас, вспоминая это, мне становится не по себе. Никакой личной жизни — с девушкой виделись только перед сном, на выходные почти не выходил. И так — первые три года моей карьеры. Очень много работы.

Я разворачивал БД, настраивал сервер, писал API. Я создал около 60 эндпоинтов, тестировал их в Postman, продумывал структуру данных и связи между ними. Это вам не системный дизайн на собеседовании — это реальная разработка.

С первого раза ничего не было идеально — многое пришлось переделывать.

Самым сложным оказалась работа с датами и записями. Нужно было учитывать множество факторов: свободные слоты, длительность услуг, пересечения. Я прописывал десятки сценариев, мозг буквально дымил. Вот где пригодились алгоритмы!

Запись клиентов — ключевая функция проекта, и я очень боялся, что в продакшене начнется путаница из-за ошибок. Но, как показало время, мой алгоритм оказался надежным — за 2 года ни одного сбоя.

👩‍💻 Разработка фронтенда

Фронтенд я делал в жестких временных рамках — сестра хотела перейти на мое приложение уже через 1,5 месяца. У меня был сырой бэкенд и только начало фронтенда.

Эти полтора месяца я жил в постоянном стрессе. Работал с 17:00 до 23:00 каждый день. Но успел — MVP был готов.

👩‍💻 Деплой приложения

С деплоем пришлось сложнее всего. Пришлось разбираться с VPS, DNS, Nginx, PM2, настройкой MongoDB. Я копался в этом днем и ночью, даже взял отпуск на 10 дней на основной работе, чтобы закончить настройку. И вот релиз.

Прикиньте, все мои отпуска эти 3 года были только для того, чтобы делать свои проекты.

👩‍💻 Рефакторинг и улучшения

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

Новый бэкенд я сделал на Nest.js, PostgreSQL, Docker, а фронтенд — React.js, TypeScript, RTK, FSD. Также я использовал опыт с работы и написал собственный UI Kit со Storybook. Это были 2 независимых приложения: для компаний и для клиентов. Представляете - я вёл разработку сразу двух фронтенд-проектов одновременно! 🤪

На доработку ушло 8 месяцев. Я добавил:
- СМС-рассылку
- Полноценную авторизацию (JWT, OAuth)
- Загрузку изображений и интеграцию с S3
- Групповые услуги
- Управление салонами
- Пополнение счета
- Систему ролей и Личный кабинет клиента

И снова режим 24/7. Было тяжело, но я получал кайф от разработки. Мне нравилось чувствовать себя стартапером, фиксить баги и получать фидбек от пользователей.

Отдельным вызовом стал CI/CD с Docker. Я две недели разбирался с деплоем

📌 Что стало с приложением

За 2 года сервисом пользовались 3 компании и около 800 человек (клиенты и сотрудники). У него был простой, но удобный интерфейс. Сестра использовала его почти все это время и говорила, что он лучше многих аналогов.

1 апреля 2025 года я отключил сервер и удалил файлы проекта. Press F, App-Salute.

Ты дал мне веру в себя. Ты показал, что я могу решить любую задачу. И именно благодаря тебе 30 января 2024 года родился YeaHub.

Честно, пока писал — прослезился🥲
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
30🔥12👍7