Старая добрая 2D игра про самолетик на пути к цели.
- Правила разработки на проекте
- Файловая структура (TODO)
- Видео демонстрация (TODO)
- Описание сборки. (как запустить, установить новые зависимости и тд)
- Обязательно создаем issue по своей задаче. Оно должно быть не слишком большим, чтобы проверяющий мог не тратить много времени.
- Работаем с веткой develop. От неё создаем свою ветку по типу: {№issue}-about-your-feature (пример: 1-add-start-setup-of-project)
- Коммиты именуем следующим образом: '#{№issue} about your feature' (например: '#1 add start setup of project')
- Коммитов в ветке сколько угодно, но каждый осмысленно описываем на латинице
- При заливке фичи в дев создаем МР, его должны проверить 2 человека: член команды и наставник. На ревью без душнки, он для улучшения стиля кода и расширения опыта, не для самоутверждения. Если замечание не обязательно исправлять пишем приставку 'nit:'
- Если тесты при МР не проходят, то нужно постараться решить проблему, если не получается, обратиться за помощью к команде
- Если при МР есть конфликт, то решайте его с человеком, кто писал конфликтующий код, созванивайтесь или предупреждайте как-то его об этом
- Структура папки с компонентом: папка называется с большой буквы по имени компонента, в ней хранится файл с компонентом с таким же именем и index файл, в котором идет экспорт из соседнего файл и дефолтный импорт. Это делается, чтобы была изолированная папка компонента, в которой потенциально будут тесты, стили, еще папки с компонентами, которые не переиспользуются (для декомпозиции), утилиты, константы
- Корневые папки:
- api, здесь всё апи, каждый файл это раздел в свагере
- сomponents, здесь переиспользуемые компоненты, если компонент используется только в одном месте, то он хранится рядом с местом, где используется, если он переиспользуется, то он выносится вверх, например, если он используется на одной странице, то он хранится рядом с этой страницей, если на 2 страницах, то выносим выше (то есть в эту папку).
- constants, здесь будут наши константы, если они глобальные, то храним их здесь, иначе можно хранить возле компонента
- core, здесь хранятся системные компоненты и функции
- HOC, компоненты высшего порядка
- hooks, кастомные реакт хуки
- pages, по папкам страницы нашего проекта
- Старайтесь не делать файлы больше 100 строк, край 150 строк, файлы больше
не пускаем в проект без согласования минимум с 2 членами команды. Старайтесь
разделять логику, чтобы каждый компонент отвечал за своё, но не слишком сильно,
ищем золотую середину
⬆️Правила разработки
root | Корень проекта
├── public | Файлы проекта, кроме JSX и настроек сборки
├── src | Исходные файлы
│ ├── actions | Функции редакса
│ │ └── index.js | Главный файл
│ ├── base-styles | Все стили проекта
│ │ ├── animations | Стилизация анимаций
│ │ │ └── index.scss | Импорты
│ │ ├── helpers | Основные стили
│ │ │ ├── base.scss | Нормалайз
│ │ │ ├── fonts.scss | Подключение шрифтов
│ │ │ ├── grid.scss | Настройка .container
│ │ │ ├── index.scss | Импорты
│ │ │ ├── typo.scss | Типовые классы (например, .bold)
│ │ │ └── vars.scss | Переменные (шрифты, цвета и т. д.)
│ │ ├── libs | библиотеки
│ │ │ └── index.scss | Импорты
│ │ ├── mixins | Миксины
│ │ │ ├── font-face.scss | Миксин подключения шрифта
│ │ │ ├── index.scss | Импорты
│ │ │ └── media.scss | Миксины медиа-запросов
│ │ ├── blocks.scss | Импорты стилей всех компонентов
│ │ └── common.scss | Основной файл стилей
│ ├── components | Папка с React компонентами
│ │ └── example | Пример папки
│ │ ├── Exmaple.js | React компонент
│ │ └── example.scss | Стили компонента
│ ├── fonts | Шрифты
│ ├── images | Изображения
│ │ ├── jpg | Обычные изображения
│ │ ├── png | Изображения с прозрачными частями
│ │ └── svg | Векторные изображения
│ ├── pages | Страницы проекта
│ ├── reducers | Обработка действий Редакс
│ │ └── index.js | Главный файл
│ ├── index.js | Главный файл JS
│ └── store.js | Состояние от редакса
├── .gitignore | Исключенные файлы из git
├── package.json | Список зависимостей
├── package-lock.json | Настройки сборки
└── README.md | Описание проекта
- Убедитесь что у вас установлен
nodeиdocker - Выполните команду
yarn bootstrap- это обязательный шаг, без него ничего работать не будет :) - Выполните команду
yarn dev - Выполните команду
yarn dev --scope=clientчтобы запустить только клиент - Выполните команду
yarn dev --scope=serverчтобы запустить только server
В этом проекте используется monorepo на основе lerna
Чтобы добавить зависимость для клиента
yarn lerna add {your_dep} --scope client
Для сервера
yarn lerna add {your_dep} --scope server
И для клиента и для сервера
yarn lerna add {your_dep}
Если вы хотите добавить dev зависимость, проделайте то же самое, но с флагом dev
yarn lerna add {your_dep} --dev --scope server
Для клиента используется react-testing-library
yarn test
yarn lint
yarn format
yarn build
И чтобы посмотреть что получилось
yarn preview --scope client
yarn preview --scope server
В проекте используется lefthook
Если очень-очень нужно пропустить проверки, используйте --no-verify (но не злоупотребляйте :)
Откройте issue, я приду :)
Зарегистрируйте аккаунт на vercel
Следуйте инструкции
В качестве root directory укажите packages/client
Все ваши PR будут автоматически деплоиться на vercel. URL вам предоставит деплоящий бот
Перед первым запуском выполните node init.js
docker compose up - запустит три сервиса
- nginx, раздающий клиентскую статику (client)
- node, ваш сервер (server)
- postgres, вашу базу данных (postgres)
Если вам понадобится только один сервис, просто уточните какой в команде
docker compose up {sevice_name}, например docker compose up server