SaaSFast — Bilingual SaaS Boilerplate (AR/EN)

SaaSFast — قالب SaaS ثنائي اللغة (عربي/إنجليزي)

A production-ready, bilingual (Arabic + English) SaaS boilerplate built on Next.js 15, Supabase, and Stripe. Arabic-first with full RTL support.

قالب SaaS جاهز للإنتاج، ثنائي اللغة (عربي + إنجليزي) مبني على Next.js 15 و Supabase و Stripe. عربي أولاً مع دعم كامل لـ RTL.

---

Tech Stack | المكدّس التقني

• Framework | الإطار: Next.js 15.1.3 (App Router)
• React: 19.0.0
• Database | قاعدة البيانات: Supabase (PostgreSQL + Auth)
• Auth | المصادقة: Supabase Auth + Google OAuth
• Payments | المدفوعات: Stripe (checkout, portal, webhooks)
• Email | البريد: Resend
• Styling | التصميم: Tailwind CSS 4 + DaisyUI 5
• Fonts | الخطوط: Inter (EN), Cairo + Tajawal (AR)
• Chat | الدردشة: Crisp SDK
• AI: OpenAI GPT integration

---

Get Started | ابدأ الآن

1. Clone & Install | استنساخ وتثبيت

git clone https://github.com/alamouri99/SaaSfast-ar.git
cd SaaSfast-ar
npm install

2. Environment Setup | إعداد البيئة

Copy .env.example to .env.local and fill in your keys:

انسخ .env.example إلى .env.local واملأ المفاتيح:

cp .env.example .env.local

Required keys | المفاتيح المطلوبة:

• NEXT_PUBLIC_SUPABASE_URL — Supabase project URL
• NEXT_PUBLIC_SUPABASE_ANON_KEY — Supabase anonymous key
• SUPABASE_SERVICE_ROLE_KEY — Supabase admin key
• STRIPE_PUBLIC_KEY — Stripe publishable key
• STRIPE_SECRET_KEY — Stripe secret key
• STRIPE_WEBHOOK_SECRET — Stripe webhook signing secret
• RESEND_API_KEY — Resend email API key

3. Run Development Server | تشغيل خادم التطوير

npm run dev

Open http://localhost:3000

---

Bilingual System | نظام ثنائي اللغة

SaaSFast uses a custom i18n system without external libraries:

يستخدم SaaSFast نظام ترجمة مخصص بدون مكتبات خارجية:

Key Files | الملفات الرئيسية

File	Purpose	الغرض
libs/i18n.js	All translations as {ar, en} objects	جميع الترجمات ككائنات {ar, en}
libs/locale.js	React Context for locale state	سياق React لحالة اللغة
components/LanguageToggle.js	AR/EN toggle button	زر تبديل العربي/الإنجليزي
config/storefront.js	defaultLocale: "ar"	اللغة الافتراضية

Usage | الاستخدام

import { useLocale } from "@/libs/locale";
import { t } from "@/libs/i18n";

const MyComponent = () => {
  const { locale } = useLocale();
  return <h1>{t("hero.title", locale)}</h1>;
};

Adding Translations | إضافة ترجمات

Add your translations to libs/i18n.js:

أضف ترجماتك إلى libs/i18n.js:

mySection: {
  myKey: { ar: "النص العربي", en: "English text" },
}

Then use t("mySection.myKey", locale) in your component.

---

Features | الميزات

Core | الأساسيات

• Full bilingual UI (Arabic + English) | واجهة ثنائية اللغة كاملة
• RTL/LTR auto-switching | تبديل تلقائي RTL/LTR
• Arabic-first fonts (Cairo, Tajawal) | خطوط عربية أولاً
• Language toggle in header | تبديل اللغة في الهيدر

Auth & Payments | المصادقة والمدفوعات

• Google OAuth sign-in | تسجيل دخول عبر Google
• Stripe checkout + customer portal | دفع Stripe + بوابة العملاء
• Webhook-driven access control | تحكم بالوصول عبر webhooks
• Role-based access (customer, admin, super_admin) | وصول قائم على الأدوار

Dashboard | لوحة التحكم

• Project overview with pipeline tracker | نظرة عامة على المشروع مع متتبع المراحل
• 10-stage visual progress | تقدم مرئي من 10 مراحل
• Onboarding wizard | معالج التسجيل
• Admin panel for project management | لوحة إدارة لإدارة المشاريع

Marketing | التسويق

• Landing page with Hero, Problem, Features, Pricing, FAQ, CTA | صفحة هبوط كاملة
• Blog system with categories and authors | نظام مدونة
• SEO tags + sitemap generation | وسوم SEO + خريطة موقع
• Product catalog with tiered pricing | كتالوج منتجات

White-Label System | نظام العلامة البيضاء

• Dual-mode: storefront vs template | وضعين: واجهة المتجر vs القالب
• Token injection for branding | حقن الرموز للعلامة التجارية
• Clone scripts for customer instances | سكربتات الاستنساخ

---

Project Structure | هيكل المشروع

SaaSfast-ar/
├── app/                    # Next.js App Router pages & API routes
│   ├── page.js            # Landing page | صفحة الهبوط
│   ├── dashboard/         # User dashboard | لوحة تحكم المستخدم
│   ├── admin/             # Admin panel | لوحة الإدارة
│   ├── blog/              # Blog system | نظام المدونة
│   └── api/               # API endpoints | نقاط API
├── components/            # 44 React components | 44 مكوّن React
│   ├── admin/             # Admin components | مكونات الإدارة
│   ├── dashboard/         # Dashboard components | مكونات لوحة التحكم
│   └── onboarding/        # Onboarding wizard | معالج التسجيل
├── config/                # App configuration | إعدادات التطبيق
│   ├── storefront.js      # Storefront config (bilingual) | إعدادات المتجر
│   └── template.js        # Template config | إعدادات القالب
├── libs/                  # Core integrations | التكاملات الأساسية
│   ├── i18n.js           # Translation system | نظام الترجمة
│   ├── locale.js         # Locale context | سياق اللغة
│   ├── stripe.js         # Stripe utilities | أدوات Stripe
│   └── supabase/         # Supabase client | عميل Supabase
├── supabase/             # Database migrations | ترحيلات قاعدة البيانات
├── docs/                 # Architecture docs | وثائق البنية
└── scripts/              # Automation scripts | سكربتات الأتمتة

---

Configuration | الإعدادات

Default Locale | اللغة الافتراضية

Set in config/storefront.js:

defaultLocale: "ar"  // "ar" for Arabic-first, "en" for English-first

App Mode | وضع التطبيق

NEXT_PUBLIC_APP_MODE=storefront  # "storefront" (default) or "template"

---

Deployment | النشر

npm run build
npm run start

For production deployment with custom domain, SSL, and VPS setup, see docs/template-system.md.

للنشر على الإنتاج مع نطاق مخصص و SSL و VPS، راجع docs/template-system.md.

---

Support | الدعم

• Email | البريد: support@saasfast.ai
• Built by SMOrchestra.ai

---

Built with SaaSFast | مبني بواسطة SaaSFast