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

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

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

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

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

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

Сьогодні у нас на огляді цікавий проєкт, побудований на базі AI для роботи з текстами. Ось як автор описав його:

Тема цікава і я уже бачив кілька схожих проєктів. Його суть в тому, що потрібно згодувати модельці текст і питаємо в АІ усе, що нас цікавить по цьому тексту. Зручно для роботи з договорами чи NDA, наприклад.

Інструменти забезпечення якості коду

Перше, що бачимо — нема GitHub Actions, тобто не налаштований CI/CD хоча б на мінімалках. Сумніваюсь, що десь використовується якийсь інший інструмент. Також по коду та командах з package.json видно, що нема юніт тестів.

Разом з тим, автор додав ESLint, Prettier та Husky. Це корисні і must have інструменти. З цікавого, тут використовується модуль pretty-quick — альтернатива для lint-staged, який є більш популярним.

Зауважу, що в проєкті використовується старіша версія ESLint. Поточна версія 9.9.1, в ній змінено підхід до конфігурації. В проєкті ще використовується 8.57.0. Думаю, що це не оновлений генератор проєкту NextJS. Але зі змінами в ESLint потрібно ознайомитись.

Для Prettier встановлено @trivago/prettier-plugin-sort-imports плагін для сортування імпортів, але він не налаштований.

Також зручно, що автор додав .env.example файл з прикладами змінних оточення, які потрібно налаштувати в проєкті. І при цьому, readme.md залишився стандартний, без змін.

По коду

Код чистий. Особливо придертись немає до чого. Одне зауваження, навіть не в мене, а в Роберта Мартіна з його «чистим кодом» — не потрібно забувати додавати відступи (порожні рядки) між частинами коду. Декларацію змінних (констант) відділити від коду використання їх. Перед return поставити також порожній рядок. Читати код стане зручніше.

Суттєвою проблемою, на яку варто звернути увагу, є відсутність page.tsx файлу в dashboard директорії, що відповідає за однойменний URL. Виходить що в браузері /dashboard повертає 404, а /dashboard/documents/ уже валідну сторінку і статус 200. Це дивно і з погляду SEO може викликати проблеми.

Цікаві рішення

Convex — платформа для розробки back-end та управління базами даних. Я її ніколи раніше не використовував і не чув, тому було б цікаво дізнатись відгук користувачів. Думаю, вона може бути новим цікавим інструментом, на який варто звернути увагу.

LangChain — це фреймворк для розробки застосунків, що використовують мовні моделі (LLMs). Його також не використовував. Схоже що спрощує роботу з OpenAI API, але це не точно.

Висновок

Проєкт цікавий і вартий уваги. Для себе узяв кілька нових бібліотек (фреймворків), з якими бажано ознайомитись. Автору дякую, що поділився кодом. Успіхів з розвитком проєкту!

Якщо пропустив якусь важливу чи кричущу проблему або маєте рекомендації для автора — залишайте коментарі. Якщо цікавий чи корисний огляд — підписуйтесь на мій YouTube або слідкуйте за спільнотою в Telegram. Там ще більше корисних матеріалів.