Код-ревью: Аналог Trello на React + FSD | Полный разбор и библиотеки

❇️ Новый курс по Featured-Sliced Design — https://purpleschool.ru/course/fsd?utm_source=youtube&utm_medium=link&utm_campaign=%D0%BA%D0%BE%D0%B4-%D1%80%D0%B5%D0%B2%D1%8C%D1%8E%3A+%D0%B0%D0%BD%D0%B0%D0%BB%D0%BE%D0%B3+trello&utm_content=course 🚀 Карьера разработчика за 12 месяцев (Frontend / Backend / Fullstack / Mobile / DevOps) — https://purpleschool.ru/catalog?type=career 📨 Присылайте ваши проекты на разбор — https://forms.gle/3Laa9GAgKCdX5F7Y7 В выпуске разберем реальный проект подписчика — аналог таск-менеджера Trello. Будем смотреть не на отдельные элементы, а на весь проект целиком. Разберем запуск, зависимости, библиотеки, архитектуру, качество применения практик FSD, подсветим и разберем решения ошибок и проблем проекта. От автора проекта Проект был напиисан как аналог популярного менеджера задач - Trello. Была идея воплотить все возможные идеи, узнать что-то новое и потренировать лучшие практики. Больше всего проблем было с drag-and-drop, поскольку хотелось сделать его очень плавным и для этого было проделано много работы включая react dev tools, которые помогали отловить компоненты которые зря делают ререндер и их нужно было мемоизировать. Также было в новинку рассмотреть Featured-Sliced Design архитектуру и отнять что-то к себе, понять как она работает и чем хороша. Также применяя radix ui, я хотел быть уверенным что мы не проседаем по accessibility и что у нас есть поддержка для этого. Было бы круто получить ревью как бы "с верхушки" чтобы узнать достигли ли мы потолка или есть еще куда прогрессировать. Спасибо! — Языки: TypeScript — Основные библиотеки: React, dnd-kit, radix ui, react-hook-form, stan.js, valibot, tanstack react query, tanstack react router, axios, date-fns — Репозиторий проекта: https://github.com/chertik77/TaskPro-frontend Если вы ищете разбор реального проекта на React, хотите понять, как устроить Trello‑clone, освоить Feature Sliced Design, прокачать навыки performance optimization, drag‑and‑drop, memoization и React DevTools, разобраться с Radix UI для accessibility, настроить lint и CI‑pipelines, правильно управлять зависимостями, строить API config, использовать React Hooks, организовать entities и cross-imports в FSD, сделать качественную валидацию и routing — приглашаю к просмотру! Содержание 00:00 — Интро 00:33 — О проекте 01:56 — Управление зависимостями 03:29 — Обзор зависимостей 07:09 — Lint и pipilines 09:48 — FSD в проекте 11:28 — Share и hooks 15:12 — Config и API 17:21 — Entities и кросс-импорты 21:05 — Feature и валидация 22:40 — Роутинг и страницы 24:48 — Итоги 25:46 — Аутро #React #TrelloClone #FeatureSlicedDesign #FSD #ReactPerformance #DragAndDrop #Memoization #RadixUI #Accessibility #CodeReview #typescript