منصة تطوير ويب متكاملة مدعومة بالذكاء الاصطناعي من StackBlitz تقوم بإنشاء وتشغيل ونشر التطبيقات بالكامل في المتصفح.
| أمر | وصف |
|---|
الانتقال إلى bolt.new | فتح Bolt.new في المتصفح |
| تسجيل الدخول باستخدام GitHub أو Google | إنشاء حساب لحفظ المشاريع |
| كتابة أمر في المحادثة | بدء بناء تطبيق |
| النقر على “Deploy” عند الجاهزية | النشر على Netlify أو مستضيفين آخرين |
| النسخ إلى StackBlitz | متابعة التحرير في بيئة StackBlitz |
| تحميل المشروع | الحصول على الكود المصدري كملف مضغوط |
Bolt.new Architecture:
1. You describe what you want in natural language
2. AI generates the full project (frontend + backend + config)
3. WebContainer runs the app in-browser (no server needed)
4. Live preview updates as AI makes changes
5. You iterate by chatting — AI modifies code in real-time
6. Deploy directly to Netlify or download source
Technology: Runs on StackBlitz WebContainers
- Node.js runs IN the browser (not a remote server)
- npm install, build, and dev server all run locally
- No Docker, no VMs, no cloud compute
| أسلوب الأمر | وصف |
|---|
| ”Build a todo app with React and Tailwind” | تحديد إطار العمل والتنسيق |
| ”Create a REST API with Express and MongoDB” | أمر موجه للواجهة الخلفية |
| ”Make a landing page for a SaaS product” | أمر موجه للتصميم |
| ”Add authentication with email/password” | إضافة ميزات لمشروع موجود |
| ”Fix the bug where the form doesn’t submit” | إصلاح مشاكل موجودة |
| ”Change the color scheme to dark mode” | تعديلات على التنسيق |
| ”Add a dashboard page with charts” | طلب صفحة أو ميزة جديدة |
| ”Refactor the code to use TypeScript” | تحسينات على جودة الكود |
Good prompts:
"Build a blog platform with Next.js, Tailwind CSS,
and MDX support. Include a homepage listing posts,
individual post pages, and a tag filtering system."
"Create a weather dashboard using React that fetches
from the OpenWeatherMap API. Show current weather,
5-day forecast, and a search by city feature."
Bad prompts:
"Make me a website" → Too vague
"Build Facebook" → Too broad
"Fix everything" → No specific target
Tips:
- Specify the tech stack (React, Vue, Svelte, etc.)
- Describe the features you need
- Mention styling preferences (Tailwind, CSS modules)
- Reference specific APIs or data sources
- Break large apps into incremental prompts
| إطار العمل | وصف |
|---|
| React | مكتبة واجهة مستخدم قائمة على المكونات |
| Next.js | إطار عمل React مع العرض من جانب الخادم والتوليد الثابت |
| Vue.js | إطار عمل JavaScript تقدمي |
| Nuxt | إطار عمل Vue مع العرض من جانب الخادم والتوليد الثابت |
| Svelte | إطار عمل تفاعلي يعمل وقت التحويل البرمجي |
| SvelteKit | إطار عمل Svelte متكامل |
| Astro | منشئ مواقع ثابتة يركز على المحتوى |
| Solid.js | مكتبة واجهة مستخدم تفاعلية دقيقة |
| Angular | إطار عمل TypeScript شامل |
| إطار العمل | وصف |
|---|
| Express.js | إطار عمل Node.js خفيف |
| Fastify | إطار عمل Node.js سريع |
| Hono | إطار عمل خفيف موجه للحافة |
| NestJS | إطار عمل TypeScript للمؤسسات |
| tRPC | واجهات برمجة تطبيقات آمنة النوع من طرف إلى طرف |
| Remix | إطار عمل React متكامل |
| مكتبة | وصف |
|---|
| Tailwind CSS | إطار عمل CSS يعتمد على الأدوات المساعدة |
| shadcn/ui | مكتبة مكونات React |
| DaisyUI | مكتبة مكونات Tailwind |
| Material UI | نظام تصميم Google لـ React |
| Chakra UI | مكونات React قابلة للوصول |
| Radix UI | مكونات قابلة للوصول بدون تنسيق |
| أمر | وصف |
|---|
| النقر على ملف في الشريط الجانبي | فتح الملف في المحرر |
| تحرير الكود مباشرة | تغييرات يدوية على الكود |
Ctrl + S | حفظ تغييرات الملف |
| النقر بزر الفأرة الأيمن → ملف جديد | إنشاء ملف جديد |
| النقر بزر الفأرة الأيمن → حذف | إزالة ملف |
| النقر بزر الفأرة الأيمن على مجلد → مجلد جديد | إنشاء مجلد |
| اكتشاف تغييرات الملفات تلقائياً | إعادة التحميل السريع تحدّث المعاينة |
| أمر | وصف |
|---|
| النقر على لوحة الطرفية في الأسفل | الوصول إلى طرفية WebContainer |
npm install package | تثبيت حزم npm |
npm run dev | بدء خادم التطوير |
npm run build | البناء للإنتاج |
npx prisma migrate dev | تشغيل ترحيلات Prisma |
node script.js | تشغيل سكربتات Node.js |
| أمر | وصف |
|---|
| ”Add a navbar with logo and links” | إضافة مكونات جديدة |
| ”Make the button bigger and blue” | تعديلات على التنسيق |
| ”Add form validation for email” | إضافة وظائف |
| ”The page crashes when I click submit” | تقارير الأخطاء |
| ”Show loading spinner while data fetches” | تحسينات تجربة المستخدم |
| ”Add error handling for the API call” | المتانة |
| ”Make it responsive for mobile” | التصميم المتجاوب |
| ”Add dark mode toggle” | تبديل السمات |
| أمر | وصف |
|---|
| سجل المحادثة يعرض جميع التغييرات | تتبع ما عدّله الذكاء الاصطناعي |
| ”Undo the last change” | التراجع عن تعديلات الذكاء الاصطناعي |
| ”Go back to the version with the blue header” | الرجوع إلى حالات سابقة |
| تحميل المشروع في أي وقت | حفظ نسخ محلية |
| النسخ إلى StackBlitz لاستخدام git | تكامل كامل مع git |
| أمر | وصف |
|---|
| النقر على زر “Deploy” | بدء عملية النشر |
| ربط حساب Netlify | تفويض الوصول إلى Netlify |
| البناء والنشر التلقائي | الحصول على رابط مباشر في ثوانٍ |
| دعم النطاقات المخصصة | التكوين في لوحة تحكم Netlify |
| HTTPS مضمّن | شهادات SSL تلقائية |
| أمر | وصف |
|---|
| تحميل المشروع → النشر يدوياً | أي مزود استضافة |
| النسخ إلى StackBlitz → ربط CI/CD | نشر قائم على GitHub |
| النسخ إلى GitHub → نشر تلقائي عبر Vercel/Netlify | سير عمل قائم على Git |
تحميل → npm run build → رفع dist/ | استضافة ثابتة يدوية |
Deployment workflow:
1. Click "Deploy" in Bolt.new
2. Select Netlify (or connect account)
3. Bolt.new builds the project
4. Uploads to Netlify automatically
5. Get your live URL: https://your-app.netlify.app
For custom domains:
1. Deploy first to get Netlify URL
2. Go to Netlify dashboard → Domain settings
3. Add your custom domain
4. Update DNS records at your registrar
| ميزة | وصف |
|---|
| Node.js يعمل في المتصفح | لا حاجة لخادم عن بُعد |
| دعم npm/yarn/pnpm | إدارة حزم كاملة |
| نظام ملفات في المتصفح | نظام ملفات افتراضي |
| خادم تطوير في المتصفح | إعادة تحميل سريع مع روابط محلية |
| لا حاجة لـ Docker | كل شيء يعمل من جانب العميل |
| يعمل بدون اتصال (بعد التحميل) | لا حاجة لاتصال إنترنت مستمر |
What runs in WebContainers:
✓ Node.js (most recent LTS)
✓ npm, yarn, pnpm
✓ TypeScript compilation
✓ Vite, Webpack, esbuild
✓ Express, Fastify, Hono
✓ SQLite (in-memory)
✓ Prisma (with SQLite)
✓ File system operations
What does NOT run:
✗ Docker containers
✗ PostgreSQL / MySQL / MongoDB
✗ Native binary dependencies
✗ Python / Ruby / Go
✗ System-level operations
✗ Long-running background processes
| قاعدة البيانات | وصف |
|---|
| SQLite (في الذاكرة) | تعمل مباشرة في WebContainer |
| Prisma + SQLite | ORM مع قاعدة بيانات محلية |
| Supabase (عن بُعد) | PostgreSQL عبر واجهة برمجة التطبيقات |
| Firebase (عن بُعد) | NoSQL عبر Firebase SDK |
| Turso (عن بُعد) | Edge SQLite عبر libSQL |
| PlanetScale (عن بُعد) | MySQL عبر واجهة برمجة التطبيقات |
For local development in Bolt.new:
SQLite + Prisma is the best combo
- Runs entirely in WebContainer
- No external services needed
- Full ORM with migrations
For production:
Connect to a hosted database
- Supabase (free tier: 500MB)
- Turso (free tier: 9GB)
- PlanetScale (free tier: 5GB)
Set connection strings as environment variables
| قالب | وصف |
|---|
| ”React + Vite + Tailwind starter” | تطبيق React حديث أحادي الصفحة |
| ”Next.js app with shadcn/ui” | React متكامل |
| ”Express API with Prisma + SQLite” | واجهة خلفية REST API |
| ”Vue + Nuxt + Tailwind” | Vue متكامل |
| ”Svelte + SvelteKit” | Svelte متكامل |
| ”Astro blog with MDX” | موقع محتوى |
| ”Landing page with Tailwind” | صفحة تسويقية |
-
ابدأ بأمر واضح ومحدد — صِف حزمة التقنيات والميزات وتفضيلات التصميم مسبقاً. “Build a task manager with React, Tailwind, and localStorage persistence” يعطي نتائج أفضل من “make a todo app”.
-
ابنِ بشكل تدريجي — ابدأ بالميزة الأساسية، تحقق من عملها، ثم أضف الميزات واحدة تلو الأخرى. كل أمر يجب أن يركز على شيء واحد بدلاً من طلب كل شيء دفعة واحدة.
-
أشر إلى الكود عند التصحيح — بدلاً من “it doesn’t work”، قل “the handleSubmit function in ContactForm.tsx doesn’t send the POST request” للحصول على إصلاحات أكثر دقة.
-
استخدم الطرفية للتحقق — تحقق من مخرجات الطرفية بحثاً عن أخطاء البناء أو التبعيات المفقودة أو مشاكل وقت التشغيل قبل طلب المساعدة من الذكاء الاصطناعي.
-
حمّل نسخاً احتياطية بانتظام — حمّل مشروعك دورياً كشبكة أمان. المشاريع القائمة على المتصفح قد تُفقد إذا مسحت بيانات المتصفح.
-
حدد إصدارات الحزم عند الحاجة — إذا احتجت إصداراً محدداً من مكتبة، اذكره: “Use react-query v5” أو “Use Tailwind CSS v3, not v4”.
-
انسخ إلى StackBlitz للتحرير المتقدم — عندما تحتاج إلى git أو عدة طرفيات أو سير عمل أكثر تعقيداً، انسخ المشروع إلى بيئة StackBlitz الكاملة.
-
استخدم متغيرات البيئة للأسرار — لا تكتب مفاتيح API مباشرة في الأوامر. اطلب من الذكاء الاصطناعي استخدام متغيرات البيئة واضبطها في منصة النشر.
-
اختر SQLite لقواعد البيانات داخل المتصفح — بما أن WebContainers لا تستطيع تشغيل PostgreSQL أو MySQL، استخدم SQLite مع Prisma للتطوير المحلي وانتقل إلى قاعدة بيانات مستضافة للإنتاج.
-
استفد من لوحة الأوامر — اضغط Ctrl + K للبحث السريع عن الملفات وتشغيل الأوامر والتنقل في مشروعك دون النقر عبر القوائم.
