Я в шоці від цього проєкту. Можна ж просто взяти й зробити нормально.
Вставка
- Опубліковано 28 чер 2024
- Кажуть що число 7 щасливе. Сьогодні у нас сьомий розбір проєкту в межах рубрики Show Your Code Saturday (SYCS) і проєкт потрапив дійсно крутецький. Я б сказав що автор передивився усі наші розбори та мої відео на каналі, врахував усі зауваження та недоліки й зробив ідеальний проєкт. Ну майже ідеальний.
Посилання на відео - • Я в шоці від цього про...
Будемо розбирати проєкт від Bohdan Kushnerov - веб-месенджер на основі React та Firebase.
Огляд буде більше корисним не самому автору, а глядачам та читачам. По перше, схожі проєкти - чати, інколи компанії дають як тестове завдання. Даний огляд допоможе з реалізацією таких завдань. По друге, зауважень до проєкту не так багато, тому автору може буде скучно.
Стати спонсором каналу:
/ @maksymrudnyi
Чистий 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). Додаємо декілька мов на сайт. Локалізація та Інтернаціоналізація Це найкраща бібліотека для реалізації кількох мов на сайті.
Ще більше цікавих рішень у відео огляді.
Посилання на код - github.com/BohdanKushnerov/re...
Буду вдячний за підтримку каналу:
Patreon - / rudnyi
BuyMeACoffee - www.buymeacoffee.com/maksymru...
Mono Bank - send.monobank.ua/jar/6oqhydjLGp
або так - 5375 4114 0505 7287
Приват банк - 4627 0551 1331 6110
Давайте дружити:
Telegram ↣ t.me/maksymrudnyi
Telegram чат ↣ t.me/joinchat/H4AF4W4dfGeGepNQ
INSTAGRAM ↣ / maksym_rudnyi
TWITTER ↣ / maksymrudnyi
FACEBOOK ↣ / travelscode
WEB-SITE ↣ travelscode.com/
GITHUB ↣ github.com/MaksymRudnyi/
Другий UA-cam канал ↣ / travelscode - Наука та технологія
Круто, цікавий проект
Однозначно!
12:55 цікавий момент і все тут правильно зроблено дякуючи тайпскріпту. якщо ці літерали прописані як тип з переліченням то нема сенсу його кудись ще виносити, воно вже в типі є. це зайве якесь нагромадження буде. просто при використанні === intelisense не дасть вам щось інше підставити крім типів. і так наочно видно з чим порівнюється і не треба лізти ще кудись дивитись. при порівнянні нажимаєте в vscode ctrl + space / cmd + i -> і зразу бачите всі можливі варіанти. це може для vanilla js так треба робити.
Воно то так, але якщо там текст зміниться то треба все перейменовувати або сподіватись що IDE перепише сама. Я все таки за більш контрольований підхід.
Для vanilla js - це однозначно так треба робити.
@@MaksymRudnyi дійсно не подумав. але з мого досвіду не зустрічав коли змінюють назви. більш вірогідно просто назву додадуть і використають там де треба було замінити. старе залишать знову ж таки щоб не зламати нічого і роботи собі не додавати. якщо змінять назву то напевне і ключ теж треба міняти якщо це константа у вигляді обєкту (а то ключ названий по старому а його значення інше виходить). в будь якому випадку я тоді просто пошуком і автозаміною все заміняю.
Одна мова тута лишня)))) +1
Що є то є)
депрекейтед)) форевер))
Питання не по цьому коду, але все ж. Який правильний підхід у Next Js для реалізації завантаження нових тем для додатку, приблизно так як зроблено на Вордпрес - встановлюється тема, сайт повністю міняє зовнішній вигляд. Досить складно зараз, коли стилі прописані прямо в компонентах або в модулях css. Мабуть це мають бути css модулі, з яких підключаються тільки ті, які належать до включеної теми?
Складне питання. Вордпрес все-таки не фреймворк а CMS з багаторічною історією. Як там зроблена можливість завантаження тем, з точки зору коди, не скажу. Коли користувався вордпресом, лише кілька разів заглядав туди. На NextJS такого механізму просто так не зробиш. Треба писати цілу систему. На або знайти готову бібліотеку )))
До того ж вордпрес на PHP і код повертається при кожному запиті. Формується сторінка. В PHP можна підставляти файли які будуть виконуватись. Next треба буде білдити при зміні теми, швидше за все. Короче, нюансів і завдань там багато. Просто так не скажу як зробити.
Це робота на який рівень? Мідл?
думаю навіть мідл+ але все залежить від компаній. думаю такий достатній рівень розуміння архітектури коду це точно вже не джун!)
Сеніоріті розробника визначають не по написаному коду. Такий код і джун може написати, головне знайти правильні уроки. Я бачив багато розумних джунів які писали код не набагато гірше мене.
Потрібно враховувати досвід, уміння самостійно вирішувати задачі, планування на оцінювання часу та зусиль на задачі. І це ще без комунікації (навіть не з замовниками).
Як на мене дикий бойлерплейт з інтерфейсів, чому не використовувати інтерфейси за місцем використання, в самому компоненті (не враховуючи доменні моделі)?
Також компоненти користувацького інтерфейсу, автор ж юзає tailwind, без цієї допоміжної папки компонент, і все зручно і імпорти в результаті приємніше виглядатимуть.
А як щодо того, що в проекті перемішані js i ts файли?
На скільки я пам'ятаю, там лише сервіс воркер JS. Решта тайпсурипт. Той сервіс воркер може бути на JS. Тут нічого страшного. Може ще десь є і я не побачив?
@@MaksymRudnyi так, там ще було, зараз не згадаю, але думаю 3-4 рази я бачив js файли
Картинки на фоні краще спростити, відволікають.
На функціонал не впливають і то добре. Там з усім дизайном треба попрацювати.
сорі автор, але дизайн десь з 98 року)
Дизайн такий собі, але це не має значення. Його змінити можна за день.
Дякую за комент) Над дизайном я дійсно сильно не заморочувався, основний акцент був на функціональності. Усі зображення згенеровано штучним інтелектом, тому вони можуть бути не найкращої якості. Основна мета проекту наразі - це функціональність, а змінити дизайн пізніше не складе проблеми.
@@BohdanKushnerov Круто, молодець!
@BohdanKushnerov Привіт! можеш глянути в сторону nx, а також юніт тестів. Nx звісно топово працює з ангуляром, але я тестив, і в реакті також є профіт в ізоляції кожної частини проєкту в окреми пакети, які самостійні і можна перевикористовувати будь-де. Наприклад, ти потім захочеш створити віджет чату і в тебе вже буде готова база з мікропакетів, обʼєднавши які можна досягнути поставленої мети (+ так буде легше тестувати проєкт, а nx дуже швидко це зробить для тих модулів, де були тільки зміни).
@@aleksandrsliusarenko2403 Привіт! Я обов'язково зверну увагу на Nx та тестування. Вони дійсно можуть допомогти з ізоляцією та перевикористанням компонентів у проекті, особливо якщо буде достатньо часу для масштабування. Тести - це поки що моя слабка сторона, але я буду працювати над цим у найближчому майбутньому. Дякую за підтримку і чудову ідею!