Итоги проекта: что мы создали?
Наш проект подошёл к логическому завершению, и самое время подвести итоги. Мы начали с идеи: создать простое, но удобное и современное приложение для учёта личных финансов. В ходе разработки оно превратилось в полноценную систему, в которой пользователь может:
- Зарегистрироваться и авторизоваться с помощью JWT-токена;
- Добавлять, редактировать и удалять финансовые транзакции;
- Автоматически видеть текущий баланс и типы расходов;
- Категоризировать доходы и расходы;
- Работать с современным UI, адаптивным и оптимизированным;
- Получать и отправлять данные через REST API, обрабатывая их с помощью React Query и Redux.
Это был не просто набор лекций по React — это было создание настоящего проекта с архитектурой, логикой, состоянием, стилями, безопасностью и тестами. А значит, мы прошли полный цикл: от планирования и проектирования до итогового тестирования.
Что мы узнали? Разбор ключевых технологий
Во время работы над приложением мы поэтапно внедряли разные технологии. Теперь — давай посмотрим, как они помогли, и что мы с ними поняли.
Redux Toolkit: глобальное состояние
Redux Toolkit оказался не просто библиотекой, а очень удобным инструментом для централизованного хранения состояния — например, данных о пользователе или списка транзакций. Благодаря createSlice мы избавились от громоздких switch-case, а с типизацией стало легко контролировать структуру стейта. Код получился чистым и предсказуемым.
React Query: данные под контролем
Подключив React Query, мы буквально "отдали" ему заботу об асинхронных запросах. Больше не нужно было хранить isLoading, isError и кэш самостоятельно. При добавлении или удалении транзакций данные просто обновлялись — всё благодаря useMutation и invalidateQueries. Это существенно сократило объём кода и упростило мышление при работе с API.
Axios и REST API: удобная работа с сервером
Мы настроили Axios-инстанс с базовым URL, таймаутом и интерцептором авторизации. Это позволило централизованно прикреплять токен ко всем запросам. Интерцепторы также помогли при обработке ошибок, например, при 401 Unauthorized. Это стало хорошей практикой для любого приложения с API.
Аутентификация с JWT
Аутентификация — важная часть почти любого приложения. Мы реализовали вход, хранение токена, защищённые маршруты и выход из системы. Пользователь попадал на главную страницу только после входа — благодаря компоненту PrivateRoute. Это добавило нашему приложению профессиональный уровень.
Стилизация: CSS Modules и styled-components
Мы начали с CSS Modules для базовых компонентов и перешли на styled-components, когда захотели динамические стили и темизацию. Это дало нам возможность легко применять цветовую схему и создавать UI-компоненты, соответствующие общей визуальной системе. Стили теперь "живут" рядом с логикой, и это делает поддержку удобнее.
Оптимизация: React.memo и useCallback
Когда приложение стало обрастать компонентами, мы обратили внимание на производительность. В TransactionList и других местах начали использовать React.memo, чтобы предотвратить лишние рендеры. А useCallback помог сохранить ссылки на функции между рендерами. Всё это сделало интерфейс отзывчивым и более лёгким для браузера.
Тестирование: уверенность в результате
На завершающем этапе мы написали тесты для ключевых компонентов: авторизации, формы транзакций, списка транзакций, работы с Redux и API. Это позволило убедиться, что приложение работает корректно, и защитило нас от регрессий. Мы использовали @testing-library/react для UI, jest.fn() для моков и ts-jest для поддержки TypeScript.
Что пошло не так? Типичные грабли
Любой проект сталкивается с трудностями, и наш — не исключение.
Типизация
Иногда мы забывали сразу типизировать данные, особенно при получении от сервера. Это приводило к any, неопределённым полям и ошибкам в рендере. Главный урок: не лениться и описывать интерфейсы вовремя, особенно для API.
Обработка ошибок
В начале проекта у нас не всегда были обработчики isLoading и isError. Это приводило к "пустым" экранам и непонятному поведению при проблемах с сетью. Позже, с React Query и Axios-интерцепторами, мы навели порядок.
Избыточный ререндеринг
Без мемоизации функции и компоненты могли перерисовываться слишком часто. Особенно это касалось списков транзакций. Мы это отследили и устранили с помощью React.memo, useMemo и профилирования в DevTools.
Как этот опыт пригодится дальше?
Это приложение — отличный фундамент. Мы использовали самые востребованные технологии, а это значит, что полученные знания легко перенести на любой другой проект: интернет-магазин, CRM, личный кабинет или корпоративный портал.
Вы теперь умеете:
- Проектировать архитектуру React-приложения;
- Работать с REST API и обрабатывать авторизацию;
- Хранить и обновлять данные глобально;
- Разграничивать маршруты и защищать доступ;
- Стилизовать интерфейс с учётом масштабируемости;
- Писать тесты и не бояться менять код.
На собеседовании вы сможете не просто "рассказать", а показать реальный проект. Это бесценно.
Несколько мыслей напоследок
Этот проект дал нам массу практики. Но не меньше — он научил нас мышлению разработчика. То есть умению анализировать задачу, выбирать подходящее решение, понимать, что и зачем мы делаем.
Важно помнить:
- Планируйте структуру заранее, это сэкономит кучу времени в будущем;
- Используйте типизацию как инструмент защиты от ошибок, а не как формальность;
- Работайте с данными асинхронно — но безопасно;
- Пишите тесты, хотя бы минимальные;
- Используйте инструменты только тогда, когда они упрощают, а не усложняют код.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ