Чат (Slack)
Напишите real-time приложение на React/Redux, используя AJAX, REST, websockets, React (с хуками) + Redux (@reduxjs/toolkit) + Formik
Цель
Дипломный проект строится на технологиях, используемых в повседневной работе фронтенд-разработчиками в целом и React-разработчиками в частности. Его цель - показать спектр всех стандартных задач, с которыми придётся столкнуться в реальной жизни. Среди них: работа с веб-сокетами, взаимодействие с REST API, использование React (с хуками), Redux (через reduxjs/toolkit), организация роутинга на клиенте, авторизация и аутентификация и, конечно же, сборка (webpack) и деплой.
React - наиболее востребованное решение для создания фронтенда уже много лет. Оставаясь простым в своём базовом использовании, он оброс большим количеством возможностей, которые важно использовать с умом. К ним относятся и хуки, и контекст, и прямое взаимодействие с DOM, и различные механизмы для оптимизации производительности. Большая часть этих тем задействована в проекте и отрабатывается на необходимом для закрепления уровне.
Но для создания по-настоящему больших и легко поддерживаемых приложений одного React недостаточно. Невероятно важно то как происходит управление состоянием. Несмотря на наличие подобного механизма внутри самого React, по разным причинам он используется только для небольших проектов или отдельных компонентов. Общее же состояние приложения хранится в библиотеках, подобных Redux. Сейчас в мире React стандартом для управления состоянием стала библиотека reduxjs/toolkit, которая не только соединяет Redux и React, но так же включает в себя большое количество необходимых дополнений, значительно упрощающих работу и сокращающих шаблонный код.
Программирование форм на фронтенде - сложная задача со множеством нюансов и, как правило, огромными "простынями" кода для реализации даже небольших форм. Валидация, Ajax, сетевые ошибки, запоминание состояния вводимых элементов, вывод ошибок – всё это требует кода, много кода. И количество кода пропорционально количеству полей в форме. К счастью, за годы существования React, сторонние разработчики создали множество важных дополнений и выработали удачные архитектурные подходы для работы с формами. Одна из таких библиотек (Formik) используется в этом проекте.
Для упрощения создания внешнего вида, в этом проекте используется библиотека react-bootstrap. Она состоит из элементов и компонентов бутстрапа переведённых на React. С её помощью гораздо быстрее создавать интерфейсы основанные на бутстрапе, так как готовые компоненты автоматически подставляют необходимые атрибуты (например доступность) и содержат в себе необходимую логику.
Никакая разработка не обходится без продакшена, а там где продакшен там эксплуатация. Сборка бандла, деплой, мониторинг ошибок в продакшене (Rollbar) – это далеко не полный перечень того, с чем придётся столкнуться не только в реальной жизни, но и в этом проекте.
Описание
Необходимо разработать аналог Slack-чата (очень упрощенную версию)
Наставники
Впечатления
Спасибо команде Хекслета за такой проект. Пришлось применить все знания, которые были получены в уроках. Также очень сильно помогли испытания) Конечно же не обошлось без подводных камней. Огромное спасибо Роману Макарову за помощь и советы в конце. Обязательно к ним присмотрюсь)
Ну а теперь - рефакторить и улучшать текущий код. Также попробую написать тесты для проекта. :)
Вот и закончился финальный проект профессии. Лично для меня он стал самым сложным из всех, сказались дедлайны на работе наложившиеся на дедлайн по оплате премиума :). Проект классный, интересный и безумно полезный. Под конец всех проверок решил написать тесты к проекту и после того как я ними разобрался прям почувствовал что в голове случился очередной левел-ап и теперь я понимаю намного больше чем раньше. Хочу выразить огромную благодарность моему наставнику Ирине которая очень сильно помогла советом в самых сложных местах, а так же Кириллу который придумал такой классный проект.
Кирилл, спасибо за проект! Много нового и интересного узнал. Полученные знания подкрепились практикой и начали усваиваться в голове. Также хочу поблагодарить Хекслет за курс в целом. Вы заставили меня пересмотреть взгляды на обучение, программирование и свою профессию в целом.
- Как получить сертификат? :)
Кирилл, спасибо большое за проект и за курс в целом!
4 проект дался как-то легко в том плане, что не было этих зверских полных переписываний, как на 2 и 3 проектах.
Здесь я много думал, 2 дня думал над архитектурой взаимодействия с сервером( отправляем объект, получаем обратно сообщение и данные, эти данные добавляем в редакс, определяя функцию по тексту ответного сообщения).
Завершение наступило совершенно неожиданно, я ожидал опять диких простыней.
Так же спасибо за весь курс. Он постоянно ломает мозг, проекты заставляют мало спать и вырабатывать в себе умение сопротивления ударам судьбы (это помимо становления инженером), когда тебе кажется, что вот все сделал и все работает, но приходит Кирилл и говорит, что это все полная шляпа и надо переписывать полностью. Переписываешь и тут второй круг!
Потом на реакте обретаешь отдохновение и понимание, а redux просто добивает своим обилием инструментов.
Прикольный побочный эффект,когда на собеседовании спрашивают: "назовите стиль программирования на Реакте(как-то так,точную формулировку не помню)". А я не понимаю вопрос. А потом оказывается имелось в виду функциональное. А не понимаю потому,что только так и пишу и не знаю как оно по-другому!
В итоге входишь во вкус, хочется идти дальше и дальше так что впереди курс по бэк.
А вот где учиться дальше-загадка, Hexlet высоко поднял планку!
Спасибо Кирилл за проект:) Ощущение конечно что наговнокодил, но впринципе понимание куда копать и что улучшать есть! Теперь остался шаг трудоустройства, написать историю успеха и Hexlet mission completed :D
Проекты входят в стоимость обучения на любом плане: самостоятельном, групповом и индивидуальном. Дополнительно платить не нужно.
Проекты дают опыт разработки в реальной среде. Проходите каждый проект сразу после изучения курсов, которые стоят в учебном плане перед ним, — это отличный способ глубже разобраться в материале.
Проекты — портфолио программиста. Их код останется в вашем аккаунте на GitHub и будет преимуществом при поиске работы.
Чтобы узнать о том, что такое проекты и в чём их польза, прочитайте нашу статью «Анатомия проектов Хекслета».
Задавайте вопросы в разделе «Обсуждение» на странице шага, на котором возникли трудности, или вашему наставнику. Изучите вопросы других студентов в «Обсуждениях»: там собрана большая база знаний, ей можно и нужно пользоваться.
Автоматизированные тесты и линтер. В групповом и индивидуальном форматах наставник дополнительно проверит то, что тестами проверить невозможно (архитектуру проекта, правильность именования, удачность решений), и проведёт код-ревью, чтобы сделать проект ещё качественнее.
Нажмите на виджет в правом нижнем углу экрана и поищите ответ в нашей справке. Или сразу пишите на support@hexlet.io — вам ответит живой человек из команды Хекслета.