Dota Search Frontend

Made with HTML, CSS, TypeScript, ReactJS, MaterialUI
Bootstrapped with Webpack

ℹ️ Зачем нужен проект?

Игроки в Dota 2 часто ищут команды. Обычно они это делают в VK, чатах Discord, Telegram.

На это уходит много времени:

• Приходится читать каждое сообщение
• Нужно найти сообщение, которое подходит под твою роль
• Человеку может быть нужна команда, приходится искать сообщение от людей, которые набирают в команды

На поиск игроков зачастую уходит от 15 мин до 2 часов.

Данный проект решает эти проблемы:

• Помогает находить людей с нужным MMR
• Помогает найти команду или членов команды
• Помогает найти людей с подходящей ролью
• Экономит время на поиске, т.к. все в одном месте и не приходится просматривать кучу площадок

🔮 Планы развития

• Отрефакторить фронт. Переехать на MaterialUI, поправить отображение на мобилках, перевести web socket'ы на RTK Query
• Хостинг. Купить доменное имя, более производительное железо
• Добавить авторизацию
• Добавить чат между пользователями. Чтобы им проще было связаться друг с другом для совместной игры
• Сделать для других игр аналогичный сервис

🔗 Полезные ссылки

• Список задач в Trello. Бэклог задач, над которыми участники сейчас работают
• Backend

🗺 Архитектура проекта и стек технологий

Проект состоит из фронта, бэка и БД. Фронт общается с бэком через вебсокеты.

Сервис	Технологический стек	Комментарий
Frontend	HTML CSS TypeScript ReactJS MaterialUI Websocket
Backend	Go	Использует кэшированную шардированную мапу
Database	PostgreSQL

Общая логика работы

• Запускается веб-приложение
• В конструкторе на фронте инициализируется сокет
• Бэк пишет при подключении сразу все, что у него есть
• Фронт при приходе данных с веб-сокета рисует это все на фронт
• Бэк хранит все данные в кэше, т.е. в оперативной памяти
• Периодически бэк копирует данные из кэша в БД

👤 Команда

Участник	Роль	Описание
Александр Крылов	Product Owner Team Lead Backend Developer Frontend Developer	Автор проекта Можно обращаться по любым вопросам Написал весь бэк и первоначальный фронт
Виталий	Frontend Developer
Никита	Frontend Developer
Александр Горбунов	Frontend Developer

❓ Ответы на вопросы

Как собрать проект?
Запустите команды из терминала:

• npm install - Установит все пакеты
• npm start - Запустит сервис в development режиме, откроет его в новой вкладке в браузере

Убедитесь предварительно, что у вас установлен NodeJS

Почему на Webpack?
Сначала использовали create-react-app, но проект собирался очень долго. Перешел на Webpack с SWC, т.к. это популярные решения. В итоге, собираться стало в разы быстрее

Почему MaterialUI?
Чтобы не заморачиваться со стилями. Все работает хорошо из коробки. До этого был Bootstrap, но MaterialUI кажется более надежным решением.

💡 Как сделать вклад в проект?

• Изучите задачи в Trello (см. выше в полезных ссылках)
• Сделайте fork от репозитория (Инструкция: https://docs.github.com/ru/get-started/quickstart/fork-a-repo)
• Внесите изменения, запушьте их в свой форк
• В основном репозитории создайте Pull request (Инструкция на английском: https://www.youtube.com/watch?v=a_FLqX3vGR4)
• Александр Крылов проревьюит код и если все ок, замерджит изменения