Я в шоці від цього проєкту. Можна ж просто взяти й зробити нормально.

Кажуть що число 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). Додаємо декілька мов на сайт. Локалізація та Інтернаціоналізація Це найкраща бібліотека для реалізації кількох мов на сайті.

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

Буду вдячний за підтримку каналу:
або так - 5375 4114 0505 7287
Приват банк - 4627 0551 1331 6110

Давайте дружити:

[MaksymRudnyi]

Важливо. YouTube видаляє усі підозрілі або довгі коментарі. Переконайтеся що ваш коментар додано і збережено. Особливо це стосується авторів проєктів, які описують що і чому так зробили. Дуже прикро втрачати цю інформацію, адже на ній інші навчаються.

[jeremiah-we]

12:55 цікавий момент і все тут правильно зроблено дякуючи тайпскріпту. якщо ці літерали прописані як тип з переліченням то нема сенсу його кудись ще виносити, воно вже в типі є. це зайве якесь нагромадження буде. просто при використанні === intelisense не дасть вам щось інше підставити крім типів. і так наочно видно з чим порівнюється і не треба лізти ще кудись дивитись. при порівнянні нажимаєте в vscode ctrl + space / cmd + i -> і зразу бачите всі можливі варіанти. це може для vanilla js так треба робити.

[CodeBeep]

Питання не по цьому коду, але все ж. Який правильний підхід у Next Js для реалізації завантаження нових тем для додатку, приблизно так як зроблено на Вордпрес - встановлюється тема, сайт повністю міняє зовнішній вигляд. Досить складно зараз, коли стилі прописані прямо в компонентах або в модулях css. Мабуть це мають бути css модулі, з яких підключаються тільки ті, які належать до включеної теми?

[CodeBeep]

А як щодо того, що в проекті перемішані js i ts файли?

[pillow]

Як на мене дикий бойлерплейт з інтерфейсів, чому не використовувати інтерфейси за місцем використання, в самому компоненті (не враховуючи доменні моделі)?

Також компоненти користувацького інтерфейсу, автор ж юзає tailwind, без цієї допоміжної папки компонент, і все зручно і імпорти в результаті приємніше виглядатимуть.

[boyywnkobe]

сорі автор, але дизайн десь з 98 року)

[dimapopov]

Картинки на фоні краще спростити, відволікають.