بنية المشروع

ملاحظة: هذا محتوى تجريبي/مؤقت لأغراض العرض التوضيحي.

تعرّف على كيفية تنظيم قاعدة الشيفرة وأين تجد ما تحتاج إليه.

نظرة عامة على المستودع الأحادي

يستخدم هذا المشروع Turborepo لإدارة مستودع أحادي (monorepo) يضم عدة تطبيقات وحزم.

project-root/
├── apps/                    # التطبيقات
│   ├── web/                # تطبيق Next.js الرئيسي
│   ├── e2e/                # اختبارات Playwright الشاملة (E2E)
│   └── dev-tool/           # أدوات مساعدة للتطوير
├── packages/               # الحزم المشتركة
│   ├── features/          # حزم الميزات
│   ├── ui/                # مكوّنات واجهة المستخدم
│   ├── supabase/          # أدوات Supabase المساعدة
│   └── billing/           # تكاملات الفوترة
├── tooling/               # أدوات التطوير
├── supabase/              # مخطط قاعدة البيانات وعمليات الترحيل
└── docs/                  # الوثائق

التطبيق الرئيسي (apps/web)

تطبيق Next.js الأساسي:

apps/web/
├── app/                    # Next.js App Router
│   ├── (marketing)/       # الصفحات العامة
│   ├── (auth)/            # المصادقة
│   ├── home/              # التطبيق الرئيسي
│   │   ├── (user)/        # الحساب الشخصي
│   │   └── [account]/     # حسابات الفرق
│   ├── admin/             # لوحة الإدارة
│   └── api/               # مسارات API
├── components/            # المكوّنات المشتركة
├── config/                # ملفات الإعداد
├── lib/                   # الدوال المساعدة
├── public/                # الأصول الثابتة
└── supabase/              # إعداد Supabase

بنية المسارات

المسارات التسويقية ((marketing))

الصفحات الموجّهة للعامة:

app/(marketing)/
├── page.tsx               # الصفحة المقصودة
├── pricing/               # صفحة الأسعار
├── blog/                  # المدونة
└── docs/                  # الوثائق

مسارات المصادقة ((auth))

صفحات المصادقة:

app/(auth)/
├── sign-in/
├── sign-up/
├── password-reset/
└── verify/

مسارات التطبيق (home)

التطبيق الرئيسي:

app/home/
├── (user)/                # سياق الحساب الشخصي
│   ├── page.tsx          # لوحة التحكم الشخصية
│   ├── settings/         # إعدادات المستخدم
│   └── projects/         # المشاريع الشخصية
└── [account]/            # سياق حساب الفريق
    ├── page.tsx          # لوحة تحكم الفريق
    ├── settings/         # إعدادات الفريق
    ├── projects/         # مشاريع الفريق
    └── members/          # أعضاء الفريق

بنية الحزم

حزم الميزات (packages/features/)

ميزات معيارية:

packages/features/
├── accounts/              # إدارة الحسابات
├── auth/                  # المصادقة
├── team-accounts/         # ميزات الفرق
├── billing/               # الفوترة والاشتراكات
├── admin/                 # ميزات الإدارة
└── notifications/         # نظام الإشعارات

حزمة واجهة المستخدم (packages/ui/)

مكوّنات واجهة المستخدم المشتركة:

packages/ui/
└── src/
    ├── components/        # مكوّنات Shadcn UI
    │   ├── button.tsx
    │   ├── input.tsx
    │   ├── dialog.tsx
    │   └── ...
    └── utils/             # أدوات واجهة المستخدم المساعدة

حزمة Supabase (packages/supabase/)

أدوات قاعدة البيانات المساعدة:

packages/supabase/
├── schema/                # المخططات التصريحية
│   ├── accounts.schema.ts
│   ├── auth.schema.ts
│   └── ...
├── src/
│   ├── clients/          # عملاء Supabase
│   ├── hooks/            # خطافات React
│   └── middleware/       # البرمجيات الوسيطة للمصادقة
└── migrations/           # عمليات ترحيل SQL

ملفات الإعداد

على مستوى الجذر

project-root/
├── package.json           # ملف package.json الجذري
├── turbo.json             # إعداد Turborepo
├── pnpm-workspace.yaml    # مساحة عمل PNPM
└── tsconfig.json          # إعداد TypeScript الأساسي

على مستوى التطبيق

apps/web/
├── next.config.js         # إعداد Next.js
├── tailwind.config.ts     # Tailwind CSS
├── tsconfig.json          # إعداد TypeScript
└── .env.local             # متغيرات البيئة

إعداد الميزات

apps/web/config/
├── paths.config.ts        # مسارات التوجيه
├── billing.config.ts      # إعدادات الفوترة
├── feature-flags.config.ts # مفاتيح تفعيل الميزات
├── personal-account-navigation.config.tsx
└── team-account-navigation.config.tsx

اصطلاحات التسمية

الملفات

• الصفحات: page.tsx (اصطلاح Next.js)
• التخطيطات: layout.tsx
• المكوّنات: kebab-case.tsx
• الأدوات المساعدة: kebab-case.ts
• الأنواع: types.ts أو component-name.types.ts

المجلدات

• مقاطع المسارات: [param] للمقاطع الديناميكية
• مجموعات المسارات: (group) لأغراض التنظيم
• المجلدات الخاصة: _components، _lib
• المسارات المتوازية: @folder

تنظيم الشيفرة

feature/
├── page.tsx               # صفحة المسار
├── layout.tsx             # تخطيط المسار
├── loading.tsx            # حالة التحميل
├── error.tsx              # حدّ الخطأ
├── _components/           # المكوّنات الخاصة
│   ├── feature-list.tsx
│   └── feature-form.tsx
└── _lib/                  # الأدوات المساعدة الخاصة
    ├── server/            # شيفرة جهة الخادم
    │   ├── loaders.ts
    │   └── actions.ts
    └── schemas/           # مخططات التحقق
        └── feature.schema.ts

مسارات الاستيراد

استخدم الأسماء المستعارة لمسارات TypeScript:

// استيرادات مطلقة من الحزم
import { Button } from '@kit/ui/button';
import { createClient } from '@kit/supabase/server-client';

// استيرادات نسبية داخل التطبيق
import { FeatureList } from './_components/feature-list';
import { loadData } from './_lib/server/loaders';

أفضل الممارسات

1. اجعل الشيفرة الخاصة بالمسار خاصة - استخدم _components و_lib
2. شارك الشيفرة القابلة لإعادة الاستخدام - انقلها إلى الحزم
3. ضع الملفات المترابطة معًا - احتفظ بالملفات بالقرب من مكان استخدامها
4. استخدم تسمية متسقة - اتبع الأنماط المعتمدة
5. نظّم حسب الميزة - لا حسب نوع الملف

دليلك للتنقل