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

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

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

Сьогодні ми хочемо поділитися з вами проєктом Артема Захарова, який створив вебсайт, де люди можуть робити власні тризуби та завантажувати їх у будь-якому кольорі чи розмірі.

У коментарях Артем описав проєкт так:

Я знайшов крутий дизайн на Figma з великою кількістю тризубів. Ну, і я подумав, що було б прикольно створити вебсайт, де люди могли б робити власні тризуби та завантажувати їх у будь-якому кольорі чи розмірі, який вони хочуть ) Не всі знають історію власного герба, тому було б непогано зробити сторінки, де люди також могли б прочитати про нього.

Я все ще роблю цей вебсайт, але вже можна створити та завантажити пару тризубів.
coat-of-arms-of-ukraine.vercel.app

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

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

Посилання на код.

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

Проєкт створений на основі Next.js — це дає простоту та зручність при старті нового проєкту та економію в часі на розробку. З коробки йде підтримка SEO, що буде плюсом для проєкту, оскільки цей сайт повинен індексуватися та шукатися через пошукові системи.

На сайті можна вибирати варіант герба і змінювати його колір. Реалізація зміни кольору трішки дивна. При виборі кольору йде запит на бекенд і він повертає нову згенеровану картинку. При цьому на клієнті відображається лоадер. Чому б не змінювати колір на клієнтській частині? По коду видно що сервер лише отримує колір і підставляє його у SVG зображення. З погляду UX та продуктивності це краще зробити на клієнті, а завантаження фінального зображення уже залишити на бек.

Перше що бачите в коді — доданий Prettier. Автоматично форматований код набагато зручніше читати та забирає менше часу та зусиль на code review. Я ще б додав Husky, щоб форматування відбувалось перед кожним коммітом.

Дублікати коду

Кожен ендпойнт на отримання нового зображення дублює код валідації, який можна було б винести в middleware.

const validationResult = validateGetImageRequest(req);
if (!validationResult.success) {
 return NextResponse.json(validationResult.errors);
}

Схоже проблема й у компонентах SelectColor та SelectSize, де код кожної кнопки або серектора дублюється.

Стейт-менеджер

Тут використовується Zustand. Я тільки не дуже зрозумів, чому стор розташовується у папці hooks. Спочатку подумав, що то кастомний хук врапер, але ні, це просто стор. Можливо його треба винести на рівень вище і зберігати в папці store. Тоді і знайти його буде легше.

Single Responsibility

Є одна утиліта validateGetImageRequest, яка, згідно з назвою, має робити валідацію коду і повертати значення віладний чи ні. Можна ще було б помилку повернути. А в середині функція мутує дані і повертає їх. Ця логіка вже не відповідає назві функції:

let data = validationResult.data;
data.fill = "#" + data.fill;
return { success: true, data };

Висновок

Код виглядає чистим та якісним, за винятком вище згаданого та ще кількох дрібниць які згадую у відео. Ще б додати юніт-тести й було б взагалі за Робертом Мартіном.