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

Аватар автора
PurpleSchool
В выпуске разберем реальный проект подписчика — аналог таск-менеджера 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 Если вы ищете разбор реального проекта на React, хотите понять, как устроить Trello‑clone, освоить Feature Sliced Design, прокачать навыки performance optimization, drag‑and‑drop, memoization и React DevTools, разобраться с Radix UI...

Скачать Видео с Дзена / Dzen

Рекомендуем!

0/0


0/0

0/0

0/0