Relivator's ROADMAP.md

Дорожня карта Relivator та Reliverse

Наведена нижче дорожня карта може бути застарілою. Ми повністю оновимо цей файл README.md зі стабільними випусками Reliverse 1.0.0 та Relivator 1.3.0.. Наведена нижче дорожня карта описує ключові функції та покращення, заплановані для цього початкового Reliverse Next.js та Reliverse CLI. Елементи, які не позначені, можуть бути вже налаштовані, але не були ретельно протестовані. Якщо ви помітили будь-які проблеми, будь ласка, створіть проблему.

• 1. Збирайте на основі Next.js 15 App Router та Route Handlers, з підтримкою Million Lint та Turbopack (з додатковим Turborepo v2 для швидшої збірки). Використовуйте React 19 (з новим React Compiler та eslint-plugin-react-compiler), TailwindCSS та TypeScript 5 як основні технології.
• 2. Реалізувати Drizzle ORM для підтримки баз даних MySQL та PostgreSQL та інтегрувати з сервісами Neon, Railway, PlanetScale та Vercel.
• 3. Налаштуйте next.config.js з i18n, MDX, з підтримкою Million.js Compiler & Million Lint. Увімкніть ці круті експерименти: after, forceSwcTransforms, instrumentationHook (вимкнено за замовчуванням), mdxRs, optimisticClientCache, optimizePackageImports, optimizeServerReact, ppr (Partial Prerendering), reactCompiler (вимкнено за замовчуванням), serverMinification, turbo.
• 4. Прагніть до ретельної документації та дружнього до початківців підходу протягом усього проекту.
• 5. Налаштувати та прокоментувати middleware.ts для i18n та next-auth.
• 6. Налаштування системи Content-Security-Policy (CSP) для запобігання XSS-атакам (за замовчуванням вимкнено).
• 7. Налаштуйте параметри VSCode та рекомендовані розширення (встановіть «extensions.ignoreRecommendations» у значення true, якщо ви не хочете бачити рекомендації).
• 8. Оптимізуйте Next.js Metadata API для SEO, інтегрувавши обробники файлової системи.
• 9. Інтегрувати індикатор розміру екрану TailwindCSS для локальних запусків проекту.
• 10. Реалізувати широку інтернаціоналізацію на 11 мовах (англійська, німецька, іспанська, перська, французька, хінді, італійська, польська, турецька, українська, китайська) за допомогою бібліотеки next-intl, яка працює як на сервері, так і на клієнті, та включити підтримку next dev --turbo.
• 11. Реалізувати автентифікацію за допомогою як Clerk, так і Auth.js (next-auth@beta/NextAuth.js).
• 12. Реалізувати tRPC та TanStack Query (з React Normy) для розширеної вибірки даних з сервера та клієнта.
• 13. Створити систему підписки та оплати за допомогою Stripe.
• 14. Забезпечити перевірку безпеки типів для схем проекту та полів інтерфейсу за допомогою бібліотеки zod.
• 15. Використовуйте ESLint v9 з TypeScript-ESLint v8 і налаштуйте eslint.config.js (Налагодження може зайняти деякий час, тому будьте терплячі) для роботи як з Biome , так і з Prettier (включно з плагіном Sort Imports Prettier) для отримання читабельного, чистого і безпечного коду. Наразі недоступно | ЗАВДАННЯ: скористайтеся pnpm ui:eslint, щоб відкрити інструмент інтерфейсу ESLint Flat Config Viewer. Примітка: Починаючи з Relivator 1.3.0 Prettier можна додати вручну за допомогою команди reliverse (прочитайте оголошення).
• 16. Елегантно реалізовано систему шрифтів, використовуючи Inter та додаткові шрифти.
• 17. Розробити вітрину магазину з функціоналом товарів, категорій та підкатегорій.
• 18. Розробити сучасний, чітко скомпонований інтерфейс користувача, використовуючи Radix, з привабливими компонентами інтерфейсу з shadcn/ui.
• 19. Скласти вичерпний, зручний для початківців README.md, включно з описами змінних середовища.
• 20. Реалізувати функціональність блогу за допомогою файлів MDX.
• 21. Використовувати абсолютні шляхи скрізь, де вони застосовуються в проекті. Проект має передбачувану та послідовну логіку імпорту, без зайвого використання речей на кшталт import * as React.
• 22. Використовуйте Kysely з Drizzle для досягнення повної типової безпеки конструктора SQL-запитів TypeScript.
• 23. Перекладіть README.md та пов’язані файли іншими мовами.
• 24. Перетворитися з простого магазину електронної комерції на універсальний засіб для створення веб-сайтів.
• 25. Привести до ладу package.json з правильно встановленими і впорядковано відсортованими пакунками у dependencies і devDependencies.
• 26. Автору проекту слід опублікувати серію детальних відео про те, як користуватися цим проектом. Також мають знайтися ентузіасти, готові опублікувати власні відео про проект на своїх ресурсах.
• 27. Максимально зменшити кількість пакунків проекту, конфігураційних файлів тощо.
• 28. Зменшити вкладеність HTML-тегів та забезпечити коректне використання HTML-тегів, коли це можливо.
• 29. Надавайте пріоритет доступності в усьому, як для користувачів програми UI (User Interface) і UX (User Experience), так і для розробників DX (Developer Experience). Підтримуйте юзабіліті без шкоди для естетики.
• 30. Надавайте перевагу використанню const-arrow та type над function та interface, де це можливо, і навпаки, де це можливо, відповідно, з використанням корисного плагіна ESLint arrow-functions, щоб підтримувати читабельний і чистий код, дотримуючись конкретних рекомендацій для функціонального програмування.
• 31. Оптимізуйте всі елементи програми для покращення швидкості холодного запуску та збірки.
• 32. Перемістіть кожну пов’язану систему у спеціальну папку (у папку src/core), щоб будь-яку систему можна було легко видалити з проекту за потреби.
• 33. Перенести стилі компонентів у файли .css або .scss, або використовувати пакети, які надають «синтаксичний цукор» для стилів у файлах .tsx за допомогою бібліотеки CSS tokenami. Реалізуйте можливість впровадження Figma Tokens System для безперешкодної роботи з проектом. Порада: перейдіть до пункту #90 цієї дорожньої карти, щоб дізнатися більше про нові способи використання CSS в JS.
• 34. Перехід на Auth.js (next-auth@beta/NextAuth.js)’ next-auth@beta (обговорення) і на React 19.
• 35. Керуйте перевіркою електронної пошти, підпискою на розсилки та email-маркетингом за допомогою Resend та React Email.
• 36. Переконайтеся, що кожна сторінка та проміжне програмне забезпечення мають зелений або жовтий, але не червоний колір після збірки в терміналі розробки.
• 37. Зробіть кожну змінну оточення необов’язковою, що дозволить додатку працювати без будь-яких налаштувань, просто опускаючи певні ділянки коду за необхідності.
• 38. Підтримуйте проект на найкращому можливому шляху написання хорошого і чистого коду, дотримуючись таких рекомендацій, як Airbnb JavaScript Style Guide / Airbnb React/JSX Style Guide. Використовуйте ?? (нульове об’єднання) всюди замість || (логічне АБО) (якщо немає вагомих причин використовувати його в конкретних випадках) - чому ми повинні використовувати нульове об’єднання; (Чи є якесь правило/плагін ESLint для цього?).
• 39. Зберігайте проект вільним від таких речей, як @ts-expect-error, eslint-disable, biome-ignore та інших, пов’язаних з не дуже безпечними речами.
• 40. Зменшити кількість файлів cookie до мінімуму, підготуватися до майбутнього без файлів cookie, впровадити управління файлами cookie та сповіщення.
• 41. Впровадити систему коментарів до продуктів, включаючи типи «Відгук» та «Питання».
• 42. Інтегруйте цінні речі з Next.js’ Examples в цей проект.
• 43. Інтегруйте цінні ідеї з Next.js Weekly в цей стартап.
• 44. Реалізувати типо-безпечну підтримку GraphQL за допомогою фреймворку Fuse.js.
• 45. Реалізувати найкраще з Payload CMS з покращеннями Relivator.
• 46. Реалізувати підтримку Storybook 8.x (прочитайте анонс «Storybook for React Server Components»).
• 47. Реалізувати розумну та уніфіковану систему журналювання, як для розробки, так і для виробництва, як для консолі, так і для запису у певні файли.
• 48. Реалізувати Sentry для обробки помилок та звітів CSP для програми.
• 49. Реалізувати Relivator’s/Reliverse власну версію Saas UI для повної сумісності з нашим проектом з лише необхідною функціональністю, з використанням Tailwind та Shadcn замість Chakra.
• 50. Реалізувати наш власний форк бібліотеки Radix Themes з налаштуванням <main> як обгортки замість поточного <section>; АБО реалізувати наше власне рішення, яке генерує Tailwind замість класів Radix.
• 51. Реалізувати повну підтримку Million.js (прочитайте Million 3.0 Announcement, щоб дізнатися більше).
• 52. Реалізувати завантаження файлів за допомогою UploadThing та Cloudinary (ПРИМІТКА: «res.cloudinary.com» та «utfs.io» слід додати до nextConfig.images.remotePatterns).
• 53. Реалізувати динамічне перемикання між функціями програми, наприклад, провайдером баз даних, зробивши відповідні перевірки змінних оточення.
• 54. Реалізувати документацію до проекту та перенести кожне пояснення з коду у цю документацію.
• 55. Реалізувати глибоку сумісність функцій та легку міграцію з Reliverse.
• 56. Реалізувати можливості співпраці за допомогою таких речей, як liveblocks.
• 57. Реалізувати CLI для швидкого отримання Relivator лише з вибраними опціями; спробуйте використати Charm для створення Reliverse CLI.
• 58. Реалізуйте функції штучного інтелекту, подібні до функцій чату GPT, за допомогою Vercel AI SDK (див.: Представлення Vercel AI SDK).
• 59. Реалізувати просунуте перемикання тем без перезавантаження, використовуючи Tailwind Dark Mode з підтримкою React Server Side support та динамічні файли cookie.
• 60. Реалізовано тестування Jest, оптимізоване для Next.js.
• 61. Гарантувати, що кожна можлива сторінка буде обгорнута за допомогою попередньо визначених обгорток оболонки.
• 62. Щедро пишіть коментарі, тільки якщо вони дійсно потрібні. Перепишіть весь код таким чином, щоб усунути необхідність описувати код у коментарях (докладніше про це читайте у книзі Роберта Сесіла Мартіна «Чистий код»). Розгляньте можливість використання блочного коментаря /** */ тільки у файлах .mjs та .js.
• 63. Повністю розробити просунуті сторінки реєстрації та входу, інтегруючи як соціальні мережі, так і класичні методи форм.
• 64. Дотримуйтесь найкращих практик зі статей та відео, таких як «[10 React-антипаттернів, яких слід уникати](https://youtube.com/watch?v=b0IZo2Aho9Y)» (також перевірте їхній розділ коментарів).
• 65. Дотримуйтесь рекомендацій з Material Design 3 та інших систем дизайну, коли це доречно.
• 66. Встановіть, задокументуйте і дотримуйтеся угод, таких як підтримка єдиного стилю регістру імен для файлів і змінних.
• 67. Створити всеосяжний i18n, використовуючи коди країни та місцевості, і підтримувати ще більше мов. Переконайтеся, що носії мови перевіряють кожну мову після машинного перекладу. Розгляньте можливість використання бібліотеки next-international.
• 68. Забезпечити максимальну безпеку типів, використовуючи суворий режим у TypeScript, включаючи рекомендації «Робити і не робити» (без використання небезпечних тверджень про тип і з необов’язковим коректним використанням типів, також використовуючи pnpm typestat - після запуску TypeStat почне автоматичне виправлення типізації TS); а також забезпечити безпеку типів за допомогою typedRoutes, zod, проміжного ПЗ, тощо).
• 69. Переконайтеся, що у проекті немає невикористовуваних елементів, таких як пакунки, бібліотеки та змінні. Також переконайтеся, що код проекту відповідає принципам Never Nester principles. Тому що, як колись сказав Лінус Торвальдс, Якщо вам потрібно більше 3 рівнів відступів, ви в будь-якому випадку облажалися і повинні виправити програму.
• 70. Переконайтеся, що проект має повну підтримку бібліотеки GSAP (GreenSock Animation Platform), зі зручними способами використання @gsap/react useGSAP() hook.
• 71. Забезпечити повну підтримку та сумісність Next.js Edge.
• 72. Забезпечити повну підтримку та сумісність Biome, Bun та Docker.
• 73. Переконайтеся, що всі мови веб-сайту граматично правильні та відповідають останнім правилам для кожної мови.
• 74. Переконайтеся, що всі елементи в проекті відсортовані в порядку зростання, якщо інше сортування не вимагається деінде.
• 75. Переконайтеся, що проект уникає використання надлишкового імпорту, наприклад, імпорту всього з React, коли достатньо імпортувати лише необхідні хуки. Проект не використовує речі, які автоматично обробляються компілятором React (тільки там, де він не справляється), що робить код набагато більш читабельним. Million Lint має безперешкодно працювати з React Compiler.
• 76. Забезпечити доступність для користувачів, розробників (як початківців, так і експертів), ботів (таких як Googlebot або PageSpeed Insights Crawler), для кожного.
• 77. Вдосконалити конфігурацію middleware.ts з реалізацією мультипроміжного програмного забезпечення.
• 78. Використовувати усі відповідні бібліотеки TanStack.
• 79. Усунути всі вимкнення у файлі eslint.config.js, налаштувати конфігурацію на сувору, але дружню до початківців.
• 80. Елегантно налаштувати app.ts, запропонувавши єдиний конфіг замість усіх можливих інших.
• 81. Розробити робочі процеси як для продавців, так і для клієнтів.
• 82. Розробити ще більш складну реалізацію підписок користувачів і системи оформлення замовлення через Stripe; а також написати Jest/Ava тести для Stripe і використовувати файли даних .thing/hooks/stripe_*.json webhookthing для цих тестів.
• 83. Розробити розширену вітрину магазину з продуктами, категоріями та підкатегоріями.
• 84. Розробити вдосконалену сторінку 404 «Не знайдено» з повною підтримкою інтернаціоналізації.
• 85. Розробити розширені функції реєстрації, входу та відновлення за допомогою електронної пошти-пароля та магічних посилань.
• 86. Зменшити кількість файлів шляхом об’єднання схожих елементів тощо.
• 87. Створіть максимально дружній до новачків і естетично привабливий стартовий екран.
• 88. Створити розширену систему сповіщень, включаючи тостери, спливаючі вікна та сторінки.
• 89. Створити нову цільову сторінку з виразним дизайном та оновленими компонентами, а також повністю переробити всі інші сторінки та компоненти.
• 90. Розгляньте можливість додавання [StyleX] від Facebook (https://stylexjs.com/blog/introducing-stylex). Однак StyleX наразі вимагає встановлення Babel/Webpack у проекті, чого ми уникаємо, щоб підтримувати повну підтримку Turbopack. Як альтернативу можна розглянути Tokenami від jjenzz або Panda CSS від Chakra. Можливо, ми зможемо зробити вибір між ними під час завантаження проекту за допомогою Reliverse CLI. Ці бібліотеки допоможуть уникнути застарілої початкової ідеї для CSS-in-JS. Дізнайтеся більше тут і в Next.js docs.
• 91. Переконайтеся, що проект не містить дублікатів, таких як файли, компоненти тощо.
• 92. Проведіть корисні тести, включаючи можливі стрес-тести, щоб змоделювати та оцінити продуктивність додатку в умовах високого трафіку.
• 93. Комплексно налаштовувати RSC і всі інші нові функції Next.js 13-15. Легко переміщайте вибірку даних між клієнтською та серверною сторонами за допомогою useSWR.
• 94. Заповнити контрольний список BA11YC (Bleverse Accessibility Convention); який в майбутньому може спиратися на наступний принцип: DesignPrototype-CodePrototype-CodeTests-HqDesign-TDD-HqCode-CI.
• 95. Заповнити частини контрольного списку BA11YC (Bleverse Accessibility Convention). Це включає використання програмного забезпечення Design Patterns для рефакторингу коду.
• 96. Перевірте всі компоненти з побічними ефектами на предмет перерендерингу, рекомендується перерендерити кожен компонент максимум 2 рази (гарне відео про це (українською мовою)).
• 97. Підвищуйте показники продуктивності додатку на таких платформах, як Google PageSpeed Insights. Переконайтеся, що додаток проходить всі суворі тести.
• 98. Застосовуйте бібліотеку nuqs там, де це доречно; для старих версій «next-usequerystate» (стара назва пакета) прочитайте статтю.
• 99. Всі сторонні бібліотеки та компоненти React повинні бути належним чином ізольовані. Це включає перевірку даних з цих бібліотек, таких як Clerk, та обгортання компонентів директивою «use client» за необхідності.
• 100. Додайте розділ відгуків на цільову сторінку. Отримайте відгуки про Relivator від п’яти широко відомих людей в Інтернеті.
• 101. Додайте інформаційну панель адміністратора, яка включає магазини, продукти, замовлення, підписки та платежі.
• 102. Додати глобальні змінні кольору до всіх місць, де вони застосовуються, замість жорстко закодованих кольорів.
• 103. Додати спливаючі вікна для сповіщень про файли cookie/GDPR (з відповідною сторінкою налаштувань управління), а також плаваючі сповіщення Google для швидкого входу в систему тощо.
• 104. Додайте до проекту кілька цікавих і корисних типів, наприклад, за допомогою бібліотеки type-fest.
• 105. Додати інтеграцію розумної системи git-хуків з різним додатковим корисним функціоналом.
• 106. Додати найцінніші та найкорисніші речі ESLint з колекції awesome-eslint.