Проект модуля #6

Чат (Slack)

Fullstack-разработчик

Напишите real-time приложение на React/Redux, используя AJAX, REST, websockets, React (с хуками) + Redux (@reduxjs/toolkit) + Formik

2-4
недели

Цель

Дипломный проект строится на технологиях, используемых в повседневной работе фронтенд-разработчиками в целом и React-разработчиками в частности. Его цель - показать спектр всех стандартных задач, с которыми придётся столкнуться в реальной жизни. Среди них: работа с веб-сокетами, взаимодействие с REST API, использование React (с хуками), Redux (через reduxjs/toolkit), организация роутинга на клиента, авторизация и аутентификация и, конечно же, сборка (webpack) и деплой (heroku).

React - наиболее востребованное решение для создания фронтенда уже много лет. Оставаясь простым в своём базовом использовании, он оброс большим количеством возможностей, которые важно использовать с умом. К ним относятся и хуки, и контекст, и прямое взаимодействие с DOM, и различные механизмы для оптимизации производительности. Большая часть этих тем задействована в проекте и отрабатывается на необходимом для закрепления уровне.

Но для создания по-настоящему больших и легко поддерживаемых приложений одного React недостаточно. Невероятно важно то как происходит управление состоянием. Несмотря на наличие подобного механизма внутри самого React, по разным причинам он используется только для небольших проектов или отдельных компонентов. Общее же состояние приложения хранится в библиотеках, подобных Redux. Сейчас в мире React стандартом для управления состоянием стала библиотека reduxjs/toolkit, которая не только соединяет Redux и React, но так же включает в себя большое количество необходимых дополнений, значительно упрощающих работу и сокращающих шаблонный код.

Программирование форм на фронтенде - сложная задача со множеством нюансов и, как правило, огромными "простынями" кода для реализации даже небольших форм. Валидация, Ajax, сетевые ошибки, запоминание состояния вводимых элементов, вывод ошибок – всё это требует кода, много кода. И количество кода пропорционально количеству полей в форме. К счастью, за годы существования React, сторонние разработчики создали множество важных дополнений и выработали удачные архитектурные подходы для работы с формами. Одна из таких библиотек (Formik) используется в этом проекте.

Для упрощения создания внешнего вида, в этом проекте используется библиотека react-bootstrap. Она состоит из элементов и компонентов бутстрапа переведённых на React. С её помощью гораздо быстрее создавать интерфейсы основанные на бутстрапе, так как готовые компоненты автоматически подставляют необходимые атрибуты (например доступность) и содержат в себе необходимую логику.

Никакая разработка не обходится без продакшена, а там где продакшен там эксплуатация. Сборка бандла, деплой, мониторинг ошибок в продакшене (Rollbar) – это далеко не полный перечень того, с чем придётся столкнуться не только в реальной жизни, но и в этом проекте.

Описание

Необходимо разработать аналог Slack-чата (очень упрощенную версию)

Hexlet Chat Hexlet Chat

Наставники

Аватар наставника Айдар Шайхутдинов
Айдар Шайхутдинов
По образованию радиофизик, в веб-разработке с 2014 года. Имеет опыт работы как на фрилансе, так и в распределённых командах. Разрабатывал проекты для «Ростелекома», фронт для системы распределения доступа в «Газпром-нефть»
Аватар наставника Александр Колиух
Александр Колиух
Наш выпускник! Стал фулстек-разработчиком на Хекслете. Успел поработать как на аутсорсе, так и в команде продуктовой компании. Сейчас разработчик EPAM Systems. Основной стек – React / Redux / Effector / TypeScript
Аватар наставника Антон Минин
Антон Минин
Работает ведущим программистом JS Frontend. За более чем 10-летний опыт в разработке ПО, попробовал себя в разных ролях. Кроме JS Frontend, интересуется также: backend-разработкой, проектированием и управлением разработкой ПО
Аватар наставника Роман Гафуров
Роман Гафуров
8 лет в разработке веб-приложений на JavaScript. Знает всё о подходах в построении высоконагруженных и поддерживаемых продуктов. Имеет опыт управления командами. Убежден, что разработчик должен непрерывно совершенствоваться и переосмысливать полученный опыт.
Сколько стоят проекты?

Проекты входят в стоимость обучения на любом плане: самостоятельном, групповом и индивидуальном. Дополнительно платить не нужно.

Зачем проходить проекты?

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

Проекты — портфолио программиста. Их код останется в вашем аккаунте на GitHub и будет преимуществом при поиске работы.

Чтобы узнать о том, что такое проекты и в чём их польза, прочитайте нашу статью «Анатомия проектов Хекслета».

Что делать, если возникли трудности во время выполнения проекта?

Задавайте вопросы в разделе «Обсуждение» на странице шага, на котором возникли трудности, или вашему наставнику. Изучите вопросы других студентов в «Обсуждениях»: там собрана большая база знаний, ей можно и нужно пользоваться. Попросите о помощи в нашем Slack-чате в канале #hexlet-projects.

Кто проверяет проекты?

Автоматизированные тесты и линтер. В групповом и индивидуальном форматах наставник дополнительно проверит то, что тестами проверить невозможно (архитектуру проекта, правильность именования, удачность решений), и проведёт код-ревью, чтобы сделать проект ещё качественнее.

У меня другой вопрос

Нажмите на виджет в правом нижнем углу экрана и поищите ответ в нашей справке. Или сразу пишите на support@hexlet.io — вам ответит живой человек из команды Хекслета.