0%
balqalam Logo
بالقلم
المميزاتالمجتمعالتسعيرالوثائق
تسجيل الدخول
  • مقدمة
  • العرض
  • MVP
  • خارطة الطريق
  • متطلبات المنتج
  • ابدأ الآن
  • البيئة المحلية
  • البنية المعمارية
  • الهيكل
  • الأنماط
  • الحزمة التقنية
  • قاعدة البيانات
  • تعدّد المستأجرين
  • الفهرس (Catalog)
  • العمل دون اتصال
  • المصادقة
  • التهيئة (Onboarding)
  • تدفق التكامل (Integration Flow)
  • التهيئة (Provision)
  • القبول
  • الحضور
  • الامتثال التنظيمي
  • الملف الشخصي
  • الاجتماعات
  • إدارة الرسوم
  • الفاتورة
  • التدويل
  • الترجمة
  • دليل الترجمة
  • أمان قاعدة البيانات
  • المساهمة
  • هَوْغوارتس
  • عرض حي
  • الإلهام
المبيعات والانتشار
  • المبيعات
  • الذهاب إلى السوق
  • التسويق
  • القبول — تسليط الضوء
  • البرنامج التجريبي
  • العملاء المحتملون
  • العرض التجاري
  • قوالب التواصل
  • دراسة الحالة
  • المنافسون
  • نموذج العمل
  • الاقتصاد المشترك
  • الجذب والنمو
التمويل والشراكات
  • الحصول على الدعم
  • عرض المستثمر
  • غرفة البيانات
  • المستثمرون
  • المُسرِّعات
  • الحاضنات
  • المنح
  • الرعاة
  • الشركاء
  • المسابقات والهاكاثونات
  • الجامعات ومراكز التدريب

البنية المعمارية

السابقالتالي

نمط مرآة قائم على الميزات، متعدد المستأجرين افتراضياً، آمن النوع end-to-end. Serverless على Vercel + Neon.

المبادئ

  1. مدفوعة بالمكونات — Radix primitives في القاع، shadcn/ui atoms فوقها، feature blocks في القمة.
  2. قائمة على الميزات — كل ميزة مجلد قائم بذاته، والمسارات تعكس المكونات 1:1.
  3. Serverless-first — Vercel + Neon Postgres، بيئة Edge حيث لا يحتاج Prisma.
  4. آمن النوع end-to-end — Prisma → Zod → TypeScript بلا تسليمات يدوية.
  5. Async-first — PRs صغيرة، قرارات موثّقة، تقدّم ثابت.

طبقات التركيب

  • الأساس: Radix UI → shadcn/ui → نظام shadcn.
  • اللبنات: UI → atoms → templates → blocks → micros → apps.

نمط المرآة

كل مسار URL ينتج مجلدين — أحدهما في app/ للتوجيه واللوايآت، وآخر في components/ لكل منطق الميزة. التطابق 1:1 يعني: إن عرفت الـURL عرفت مكان الكود.

للمسار /abc:

  • app/[lang]/abc/ — page.tsx, layout.tsx
  • components/abc/ — content.tsx, actions.ts, form.tsx, validation.ts, types.ts, use-abc.ts, README.md
src/— Source code directory
app/— Next.js App Router (Routing & Layouts)
[lang]/— i18n support
abc/— URL route: /abc
page.tsx— Route entry point
layout.tsx— Route layout
components/— Component Logic (Mirrors app structure)
abc/— Mirrors app/[lang]/abc/
content.tsx— Page UI: headings, sections, layout
actions.ts— Server actions: validate, mutate
config.ts— Enums, option lists, defaults
validation.ts— Zod schemas & refinements
types.ts— Domain and UI types
form.tsx— Typed forms (RHF)
card.tsx— KPIs, summaries, quick actions
all.tsx— List view with table, filters
detail.tsx— Detail view with sections
column.tsx— Table column builders
use-abc.ts— Feature hooks
README.md— Feature purpose, APIs, decisions
ISSUE.md— Known issues and follow-ups
atom/— Atomic UI components
template/— Reusable layout templates
ui/— Base UI components (shadcn/ui)

الحزمة التقنية

  • الإطار: Next.js 16.2.x مع App Router وTurbopack، React 19.2.x، TypeScript 5.x
  • قاعدة البيانات: PostgreSQL مع Prisma ORM 6.19.x (302 نموذج، 149 enum، 73 ملف schema)، Neon Serverless
  • المصادقة: NextAuth v5 (beta.30) مع Prisma adapter متعدد المستأجرين مخصّص
  • التنسيق: Tailwind CSS v4 مع تنسيق ألوان OKLCH
  • مكونات UI: Radix UI primitives + shadcn/ui (35 مجلد مكوّن)
  • التحقق: Zod 4.0.14 مع React Hook Form 7.61.1
  • التدويل: عربية (RTL) + إنجليزية (LTR) مع ترجمة عند الطلب
  • الوثائق: MDX مع Fumadocs
  • استراتيجية Runtime: Node.js للصفحات التي تحتاج Prisma/bcrypt، Edge للوسيط/الثابت
  • التخزين: AWS S3 + CloudFront CDN للصور، Upstash Redis للنطاقات المخصصة

الأنماط المعيارية للملفات

كل مجلد ميزة يتّبع هذه التسميات:

الملفالغرض
content.tsxمكوّن خادم: جلب البيانات، تكوين، تنظيم تخطيط
client.tsxحدود العميل: غلاف "use client" واحد لكل ميزة (جديد)
actions.tsserver actions وAPI calls: تحقق، تحديد نطاق المستأجر، تعديل
queries.tsاستعلامات قراءة فقط: select objects، where-builders، pagination، إحصاءات
authorization.tsفحوص صلاحيات RBAC: check/assert/can/getAllowedActions لكل ميزة
config.tsenums، قوائم خيارات، تسميات، افتراضيات
validation.tsZod schemas وrefinements، parse وinfer للأنواع
types.tsأنواع المجال والـUI، helpers عامة للنماذج/الجداول
form.tsxنماذج RHF بمحلّلات وتعامل إرسال
card.tsxبطاقات لـKPIs والملخصات والإجراءات السريعة
all.tsxعرض القائمة مع جدول ومرشّحات وpagination
featured.tsxقائمة ميزات منتقاة
detail.tsxعرض التفاصيل بأقسام وعلاقات وإجراءات
util.tsutilities خالصة وmappers
columns.tsxبُناة أعمدة Table مكتوبة وعارضات خلايا
use-abc.tshooks الميزة: جلب، تعديل، حالة مشتقّة
table.tsxمكوّن عميل يلفّ atom DataTable مع أعمدة وtoolbar وmodals
list-params.tsURL search-param cache عبر nuqs لحالة جدول آمنة النوع
README.mdسياق الميزة: جداول مرجعية، ملفات، قرارات، نقاط دخول (~40 سطر)
ISSUE.mdissues نشطة، سجل منجَز، متابعة الديون التقنية (~40 سطر)

إطار القرار

  1. نمط المرآة أولاً: كل مسار جديد في app/[lang]/ يجب أن يكون له مجلد مرآة في components/
  2. إعادة استخدام المكون: ابدأ بمكونات shadcn/ui ولا توسّع إلا عند الضرورة
  3. التزام نمط الملفات: استخدم الأسماء المعيارية (content.tsx، action.ts، …)
  4. سلسلة آمن النوع: Zod schemas → TypeScript types → Prisma models
  5. توافق Serverless: افتراضي Edge runtime ما لم يُطلب Prisma/bcrypt
  6. عزل الميزة: كل ميزة قابلة للنشر والاختبار بشكل مستقل
  7. تقدّم تدريجي: UI → Atoms → Templates → Blocks → Micro → Apps
  8. تجربة المطوّر: بنية متوقّعة، أسماء واضحة، قرارات موثّقة

أعراف التسمية

  • المكونات: kebab-case للملفات (button.tsx, user-profile.tsx)
  • الصفحات: kebab-case لمقاطع المسار (user-profile, sign-in)
  • Hooks: بادئة use- (use-leads.ts, use-upwork.ts)
  • الأنواع: PascalCase للواجهات والأنواع
  • الثوابت: UPPER_SNAKE_CASE أو camelCase للكائنات

ملفات حرجة

الملفالأسطرالغرض
src/proxy.ts388Edge middleware: استخراج النطاق، RBAC، إعادة كتابة، نطاقات مخصصة
src/auth.ts777NextAuth: JWT callbacks، إدارة الجلسات، منطق إعادة التوجيه
src/auth.config.ts151مزوّدو OAuth: Google، Facebook، Credentials
src/routes.ts410مصفوفة RBAC: حماية المسارات حسب الدور
src/lib/rate-limit.ts537تحديد المعدل: 14 إعداداً عبر المسارات
src/lib/tenant-context.ts189حلّ المستأجر مع caching
src/components/catalog/setup.ts1,717جسر الكتالوج: تزويد بنية أكاديمية
src/lib/dns-service.ts644تحقّق DNS: مزوّدون متعدّدون للنطاقات المخصّصة
src/lib/security-headers.ts173CSP، HSTS، حماية XSS
prisma/models/73 ملف302 نموذج، 149 enum
CLAUDE.md—إرشادات معمارية على مستوى المشروع

مضادات الأنماط

  • مكونات لا تتبع بنية نمط المرآة.
  • مكونات أحادية ضخمة كان يجب تفكيكها.
  • غياب سلسلة آمن النوع (Zod → TypeScript → Prisma).
  • ملفات لا تتّبع تسميات معيارية.
  • اقتران محكم بين الميزات.
  • قيم مكتوبة في الكود يجب أن تعيش في config.ts.
  • استعلامات قاعدة بيانات مباشرة خارج actions.ts / queries.ts.

دورة حياة الطلب

  1. المستخدم يتفاعل مع form.tsx، الإرسال يطلق server action من actions.ts.
  2. الحمولة تُتحقّق منها بـ Zod schema في validation.ts.
  3. الـaction يستدعي queries.ts أو actions.ts، اللذين يستخدمان Prisma على Neon مع الأنواع من types.ts.
  4. النتيجة تتدفّق عودة، وhook من use-abc.ts يحدّث الواجهة.
البيئة المحليةالهيكل

On This Page

المبادئطبقات التركيبنمط المرآةالحزمة التقنيةالأنماط المعيارية للملفاتإطار القرارأعراف التسميةملفات حرجةمضادات الأنماطدورة حياة الطلب

من تطوير Databayt ·

مرحباً بك في بالقلم.

رحلة عظيمة على وشك أن تبدأ.