Show your code Saturday: код-рев’ю #7

Усі статті, обговорення, новини про Front-end — в одному місці. Підписуйтеся на телеграм-канал!

Коментар редакції. Вітаємо вас у рубриці Show your code Saturday! Це інтерактивна рубрика, у якій кожен охочий може поділитися власним проєктом, написавши про нього в коментарях. А ми натомість щосуботи обираємо найцікавіший і розповідатимемо детальніше.

Сьогодні ми хочемо поділитися з вами роботою Богдана Кушнерова.

Наш активний учасник спільноти Максим Рудний зробив код-рев’ю проєкту! Тож далі передаємо слово Максиму 👇

Щаслива сімка

Дисклеймер: я не є автором коду і не знаю причин реалізації будь-якої частини коду таким чином, як це є. Стиль написання коду без ознайомлення з Code Style та Code Convention проєкту не можу критикувати, може це так було задумано.

Кажуть, що число 7 щасливе. Сьогодні у нас сьомий розбір проєкту в межах рубрики Show Your Code Saturday (SYCS), і проєкт потрапив дійсно крутецький. Я б сказав, що автор передивився всі наші розбори та мої відео на каналі, врахував усі зауваження та недоліки й зробив ідеальний проєкт. Ну майже ідеальний.

Будемо розбирати проєкт від Bohdan Kushnerov — вебмесенджер на основі React та Firebase.

Огляд буде більше корисним не самому автору, а глядачам та читачам. По перше, схожі проєкти — чати, інколи компанії дають як тестове завдання. Цей огляд допоможе з реалізацією таких завдань. По друге, зауважень до проєкту не так багато, тому автору може буде нудно.

Ідеальний стек?

Чистий React. Проєкт згенеровано за допомогою Vite. Для хейтерів NextJS — бальзам на душу. Відразу додано й налаштовано Pritter та ESLint — код форматований і вже мінімізована велика кількість помилок та проблем.

Сюрпризом для мене стали налаштовані GitHub Actions із SonarCloud. Про Sonar я уже говорив у SYCS5, де ми розбирали клон Zoom — Yoom.

Для роботи зі стилями обрано Tailwind. Tailwind без prettier-plugin-tailwindcss — «гроші на вітер». На щастя, цей плагін тут є і працює.

Стейт-менеджер — Zustand. Ми його вже бачили в одному з оглядів. На цю тему в мене є окреме відео — Zustand. Ідеальний стейт менеджер для React у 2024 році?

Звісно ж усе написано на TypeScript. Що цікаво, автор описав усі інтерфейси та типи. У відео я їх показую. Їх багато, дуже багато. Можливість типізації — це одна з головних переваг TypeScript, але описування всіх цих типів та інтерфейсів — ще та морока.

Локалізація реалізована за допомогою React-i18next. Про цю бібліотеку в мене також є відео — React-i18next (i18n, l10n). Додаємо декілька мов на сайт. Локалізація та Інтернаціоналізація. Це найкраща бібліотека для реалізації кількох мов на сайті.

Ще більше цікавих рішень у відеоогляді.

Покращення

Тут багато порадити не можу. Перше, що я б рекомендував, — перейменувати папку, де лежить стор. Зараз вона називається Zustand — на честь стейт-менеджера. Не всі його знають та використовують. Для тих, хто вперше знайомиться з проєктом, більш знайомою буде назва Store.

Наступне — робота з кнопками. У проєкті є величезна кількість компонентів кнопок:

Якщо вони структурно не сильно відрізняються, можливо є сенс розглянути використання class-variance-authority. Цю бібліотеку ми вже бачили в SYCS5.

Решта покращень також у відео.

Висновок

Сьогоднішній розбір мене порадував. Код хороший і є чому повчитися. Враховані більшість зауважень, які я робив в попередніх випусках. Якби тут ще Husky був для автоматичного форматування коду перед комітом — було б взагалі шикарно.

Підписуйтесь на мій YouTube канал Maksym Rudnyi та Телеграм групу.