Содержание

• Установка и использование
• Введение
• Описание проекта
• Стек технологий
• Навыки которые я приобрел
• Заключение
• Фотографии из проекта

Установка и использование

1. Скачать

git clone https://github.com/AtaiSamak/Messenger.git

2. cd для перехода в нужную директорию и установка зависимостей npm install

cd .\Messenger\
npm install

3. Запустить в режиме разработчика

npm start

Открываем http://localhost:3000 чтобы посмотреть приложение в браузере.

Введение

Привет, меня зовут Атай! Я React Frontend разработчик, на данный момент обучаюсь в ВУЗе по направлению "информационные системы и технологии". Но увы тут очень мало практики и я решил сделать этот pet-проект, чтобы научиться работать с теми технологиями, которые мне понадобятся в работе. Это мой первый проект который я сделал(но еще много всего можно реализовать), пока что я реализовал только основную функциональность. Мне давно было интересно как работает чат, мессенджер и я считаю что я понял основную концепцию реализации таких приложений. Считаю что делая этот проект, научился тому, чему хотел научиться в начале работы.

Описание проекта

Проект сделан по подобию таких приложений как WhatsApp, Telegram. При открытии веб-приложения мы видим поле для ввода телефона(вне зависимости от того, есть ли у пользователя аккаунт или нет, т.е. нет две формы для входя и для регистрации, как во многих сайтах). Дальше мы вводим код из смс, чтобы войти в наше приложение(есть реализация ошибок, например: неправильный номер или код из смс не совпадает). После открытия мы видим список с контактами, сам чат, бургер для открытия меню, где располагаются кнопки настройки, изменения темы(темный, светлый), также выход из аккаунта.

Стек технологий

• React
• JavaScript
• SASS
• Firebase
• Emoji-picker-react, react-font-awesome

Навыки которые я приобрел

• React - в основном использовал функциональные компоненты, т.к. считаю что у него больше преимуществ чем в классовых компонентах. Понял как работает сам react, props, state, context, useEffect, useMemo, useCallback, ErrorBoundary, научился создавать пользовательские хуки и многое другое.
• Firebase - мне нужно было готовое решение для backend части моего приложения и я нашел замечательную платформу как Firebase. С помощью него я создал авторизацию, хранение данных в realtime-database(для хранения сообщений, статусы пользователей и данные которые часто меняются), storage для хранения фотографий пользователей.
• Async/await - понял как работает эта технология на примере, зачем они вообще нужны, что такое объект Promise. Научился обрабатывать ответы, исключения.

Заключение

Буду продолжать развивать этот pet-проект т.к. есть еще много недостающей функциональности. И считаю что делая этот проект я понял очень многое для себя - как лучше писать компоненты, как структурировать данные, как разделять код и как писать чистый, понятный для других разработчиков код. Пока проект очень сырой и у него есть очень много недостатков, думаю что в будущем узнавая лучшие реализации той или иной функциональности, буду переделывать этот проект. На данное время при написании этого описания, я вижу небольшие недостатки моего проекта может и есть большие, но пока я их не вижу.

Фотографии из проекта