Ревью кода - Уник, хакатон, 10/2024

README.md

Ревью кода - Уник, хакатон, 10/2024.md

https://confluence.web-bee.ru/pages/viewpage.action?pageId=212771326

Одинокий странник

Код: https://github.com/Rideuz/Hack_Webbi

Преза: https://drive.google.com/open?id=1LK2OwlqdxQUi2xbUUMiKcoQFcGHVRhnM

Плюсы

• требования выполнены
• подробный readme с запуском и эксплуатацией
• реализована кастомная тема для login страницы keycloak (и прокинута через volume)
• сделано автообновление токена (хоть и дублируется)
• используется react-router

Минусы

• node_modules в git
• лишний package-lock.json в web-bee-app
• для keycloak не прокидывается volume с данными и конфигами
• для client наоборот прокидываются ненужные volumes
• client (Dockerfile) запускается в dev режиме
• в client хардкодится url до keycloak
• в client используют провайдер из @react-keycloak/web, но не используют useKeycloak (а прокидывают инстанс кейклока руками)
• • пока не откроешь home страницу - у тебя не произойдёт авторизация. если открыть adminPage и обновить страницу, то тебя редиректнет на /
• флоу авторизации сделан криво. вместо того, чтобы всё приложение могло авторизовать пользователя, происходит редикрет на / страницу, чтобы она авторизовала и сделала редирект в зависимости от ролей
• дублируется код между компонентами (хуки не используются, хотя попытки были)

Дополнительные баллы

• (+) Код приложения выложен в github и доступен по ссылке
• (+) Написана инструкция по запуску
• (-) Приложение где-то развернуто и доступно по ссылке (без необходимости разворачивать локально)
• (?) Приложение понравится визуально (хорошо отображается на всех устройствах, UX понятен)
• (+) Для сборки и запуска приложения используется Docker
• (+) Предоставлен docker-compose файл, который запускает как приложение, так и Keycloak
• (+) Для написания приложения был использован React.js
• (-) Это приложение можно установить на телефон (progressive web application)

Другое

• заявлено 4 человека, хотя коммиты были только с 3х аккаунтов
• топ 3.

2o3x231

Код: https://github.com/kgaudium/DubnaTech2024

Преза: https://drive.google.com/open?id=1tv3En20CEnvPXuEy-k3FNNFa4xoKN_jk

Плюсы

• требования выполнены
• используется typescript
• требования в основном выполнены
• подробный readme с запуском, учётками и эксплуатацией
• используется next
• есть реализация собственных ui компонентов на базе tailwind

Минусы

• (особо не замечено, если не придираться, т.к. реализация выбрана простая)

Дополнительные баллы

• (+) Код приложения выложен в github и доступен по ссылке
• (+) Написана инструкция по запуску
• (-) (хотя и пишут, что да) Приложение где-то развернуто и доступно по ссылке (без необходимости разворачивать локально)
• (?) Приложение понравится визуально (хорошо отображается на всех устройствах, UX понятен)
• (+) Для сборки и запуска приложения используется Docker
• (+) Предоставлен docker-compose файл, который запускает как приложение, так и Keycloak
• (+) Для написания приложения был использован React.js
• (+) Это приложение можно установить на телефон (progressive web application)

Другое

• ребята пытались сделать деплой, но в итоге "Сервер запущен на локальной машине, поэтому может быть не всегда онлайн - напишите нам в telegram, если нужно запустить" (193.201.90.36:3000). короче не хостится нигде
• ребята использвали next + next-auth, поэтому было сложно ошибиться, т.к. там уже всё настроено. в этом плане ребятам из предыдущей команды пришлось больше разбираться
• • то же самое с next-pwa
• видно, что ребята оба старались, писали, даже PRы были
• топ 1 по коду. топ 3 по сложности реализации. в целом очень неплохо написано, ребята большие молодцы

Sofa Corp.

Код: https://github.com/xeueyysq/keycloak-react

Преза: https://drive.google.com/open?id=1IUZI6fS71aUn2vBYk1wONOVqZQSJ2dMY

Плюсы

• требования выполнены
• неплохой readme с запуском и эксплуатацией
• используется eslint
• написан свой vite конфиг
• используется react-router
• используется mui
• поддержка тёмной/светлой темы (через localStorage)
• немного прикрутили state manager (zustand)

Минусы

• frontend (Dockerfile) запускается в dev режиме
• в frontend прокидываются ненужные volumes
• файл nginx.conf не используется

Дополнительные баллы

• (+) Код приложения выложен в github и доступен по ссылке
• (+) Написана инструкция по запуску
• (-) Приложение где-то развернуто и доступно по ссылке (без необходимости разворачивать локально)
• (?) Приложение понравится визуально (хорошо отображается на всех устройствах, UX понятен)
• (+) Для сборки и запуска приложения используется Docker
• (+) Предоставлен docker-compose файл, который запускает как приложение, так и Keycloak
• (+) Для написания приложения был использован React.js
• (+) Это приложение можно установить на телефон (progressive web application)

Другое

• заявлено 2 человека, хотя коммиты были только с 1го аккаунта
• топ 2 по коду. топ 1 по сложности реализации. в целом очень неплохо написано, ребята (человек) большие молодцы

TRAPEZNIKOV TEAM (появился после проверки остальных)

Код: https://github.com/Kalabass/DubnaTech2024-WebBee

Преза: https://drive.google.com/open?id=1u3HT3Pc28rsBwQfCQBdHOuwqGorUsm59

Плюсы

• требования выполнены
• единственный, кто задеплоил приложение на стенд (https://prismatic-treacle-58b26e.netlify.app/)
  • ссылка на keycloak - localhost:8080, так что не работает авторизация :D
• в инструкции описано подключение realm-export.json
  • неудобно, что в volume сразу не прокинул
• используется styled (emotion)
• используется typescript
• deps в package.json настроены корректно
• написан свой vite конфиг
• используется react-router
• используется eslint
• используется mui
• есть реализация собственных ui компонентов на базе mui
• использует React.Context для прокидывания keycloak инстанса
  • плохо, что пользователь видит белый экран, пока его top-level асинхронный экспорт выполняется
• код хорошо написан, понятно разбит на модули/папочки
• интересно, что руками написан serviceWorkerRegistration.ts, а не через готовый плагин

Минусы

• описал подпунктами в плюсах

Дополнительные баллы

• (+) Код приложения выложен в github и доступен по ссылке
• (+) Написана инструкция по запуску
• (+) Приложение где-то развернуто и доступно по ссылке (без необходимости разворачивать локально)
• (?) Приложение понравится визуально (хорошо отображается на всех устройствах, UX понятен)
• (+) Для сборки и запуска приложения используется Docker
• (+) Предоставлен docker-compose файл, который запускает как приложение, так и Keycloak
• (+) Для написания приложения был использован React.js
• (+) Это приложение можно установить на телефон (progressive web application)

Другое

• посмотрел его github. у него есть ещё один проект, много кода с ними пересекается. отсюда хороший результат в общем-то
• топ 0 по коду. топ 0 по сложности реализации. считаю, что тут самая толковая реализация, т.к. человек явно не первый месяц работает с React

Заключение

Tip

Сложно выбрать между 2й и 3й командой. Надо смотреть UX. Мне, наверное, 3я больше нравится, т.к. у них посложнее реализация

UPD: 4я реализация (по коду) нравится больше других, явно с каким-то опытом человек.