من المؤسسFrom the Founder العلومScience التعلم الغامرImmersive Learning القوالبTemplates الإضافةExtension
تقنيةTech
30 ي30d
ابنِ تطبيق Supabase مع Claude Code خلال 30 يومBuild a Supabase App with Claude Code in 30 Days
تقنيةTech

ابنِ تطبيق Supabase مع Claude Code خلال 30 يوم Build a Supabase App with Claude Code in 30 Days

إنشاء مشروع Supabase، وربط Supabase MCP بـ Claude Code، وتصميم وتطبيق schema، وتدقيق foreign keys وindexes، وتفعيل واختبار Row Level Security، وبناء edge functions للمنطق الخادمي فقط، وربط الواجهة بأمان، والشحن بعد فحوص أمان وأداء نهائية. Create a Supabase project, connect the Supabase MCP to Claude Code, design and apply the schema, audit foreign keys and indexes, enable and test Row Level Security, build edge functions for server-only logic, connect the frontend safely, and ship after final security and performance checks.

4 نتائج رئيسية4 key results ·36 مهمة36 tasks ·30 يوم30 days
⏱ 30 يوماً30 Days

ابدأ هذه الخطة مجاناً Start This Plan — Free

لا يلزم بطاقة ائتمانية · مجاني للبدء No credit card · Free to start

إيه اللي هتحصله مع زالفولWhat You Get with Zalfol

🐟

Goldfish ModeGoldfish Mode

مهمة واحدة في كل مرة، مؤقتة، بدون تشتيتOne task at a time. Timed. No distractions.

⬡

CEO ModeCEO Mode

خطة كاملة، منظمة، مع تتبع حقيقيFull plan. Organized. With real tracking.

🗑

صندوق الإفراغDump Box

كل حاجة في دماغك — افرغها هنا الأولEverything in your head — dump it here first.

الخطةThe Plan

1
تشغيل Supabase وربط MCPSupabase Project Live and MCP Connected
15%
✓ اعمل فولدر مشروع اسمه `claude-supabase-app`. ضيف `.gitignore` وفيه `.env` و`.env.local` و`supabase/.branches` وأي فولدر build متولد. اعمل `docs/security-notes.md` وفيه السطر `Never put the Supabase service role key in frontend code`.Create a project folder named `claude-supabase-app`. Add `.gitignore` with `.env`, `.env.local`, `supabase/.branches`, and any generated build folder. Create `docs/security-notes.md` with the line `Never put the Supabase service role key in frontend code`. 5 دmin
✓ افتح Supabase. اعمل project جديد. انسخ project URL واسم anon key في `docs/supabase-project.md`. ما تنسخش قيمة service role key. افتح SQL editor وشغّل `select version();`.Open Supabase. Create a new project. Copy the project URL and anon key label into `docs/supabase-project.md`. Do not copy the service role key value. Open the SQL editor and run `select version();`. 5 دmin
✓ افتح تيرمينال المشروع. ثبّت Claude Code وSupabase CLI بالأوامر الرسمية المناسبة للجهاز. شغّل `supabase --version` و`claude --version`. احفظ الناتجين في `docs/tool-versions.md`.Open the project terminal. Install Claude Code and Supabase CLI using the official commands already chosen for the machine. Run `supabase --version` and `claude --version`. Save both outputs in `docs/tool-versions.md`. 5 دmin
✓ افتح Claude Code داخل فولدر المشروع. شغّل `claude`. اكتب `Connect to my Supabase project using the MCP. List all tables in the database. If no tables exist, return the database version.` احفظ الرد في `docs/mcp-connection-check.md`.Open Claude Code in the project directory. Run `claude`. Type `Connect to my Supabase project using the MCP. List all tables in the database. If no tables exist, return the database version.` Save the response in `docs/mcp-connection-check.md`. 5 دmin
✓ افتح Claude Code. اكتب `List all tables in the Supabase schema and describe what each table appears to store. Mark any answer based on inference.` احفظ الناتج في `docs/live-schema-baseline.md`.Open Claude Code. Type `List all tables in the Supabase schema and describe what each table appears to store. Mark any answer based on inference.` Save the output in `docs/live-schema-baseline.md`. 5 دmin
✓ افتح إعدادات Supabase Auth. فعّل email login وmagic link. اضبط site URL للتطبيق المحلي. احفظ طرق الدخول والredirect URLs المختارة في `docs/auth-config.md`.Open Supabase Auth settings. Enable email login and magic link. Configure the site URL for the local app. Save the chosen auth methods and redirect URLs in `docs/auth-config.md`. 5 دmin
✓ افتح Claude Code. الصق تفاصيل auth provider الخاص من غير أسرار. اسأل `Design the Supabase JWT claims mapping and list which claim should become user id and role.` احفظ الـ mapping في `docs/custom-jwt-claims.md`.Open Claude Code. Paste the custom auth provider details without secrets. Ask `Design the Supabase JWT claims mapping and list which claim should become user id and role.` Save the mapping in `docs/custom-jwt-claims.md`. 5 دmin
✓ افتح Claude Code. اكتب `Design safe public-data access rules for an anon-only Supabase app. Include public SELECT limits and protected write operations.` احفظ القواعد في `docs/anon-access-rules.md`.Open Claude Code. Type `Design safe public-data access rules for an anon-only Supabase app. Include public SELECT limits and protected write operations.` Save the rules in `docs/anon-access-rules.md`. 5 دmin
2
اكتمال schema مع indexes للـ FKSchema Complete with FK Indexes
25%
✓ افتح Claude Code. اوصف أول entity بيخزنها التطبيق، زي `a user profile with display name, bio, and avatar URL`. اسأل `Design the SQL CREATE TABLE statement for this entity. Include primary key, timestamps, foreign keys, RLS enablement, and recommended indexes.` احفظ SQL في `docs/first-table.sql`.Open Claude Code. Describe the first entity stored by the app, such as `a user profile with display name, bio, and avatar URL`. Ask `Design the SQL CREATE TABLE statement for this entity. Include primary key, timestamps, foreign keys, RLS enablement, and recommended indexes.` Save the SQL in `docs/first-table.sql`. 5 دmin
✓ افتح Supabase SQL editor. الصق وشغّل `docs/first-table.sql`. شغّل فورًا `alter table [table_name] enable row level security;` لو RLS مش موجود في SQL. احفظ screenshot أو رسالة النجاح في `docs/first-table-applied.md`.Open Supabase SQL editor. Paste and run `docs/first-table.sql`. Immediately run `alter table [table_name] enable row level security;` if RLS was not included. Save a screenshot or copied success message in `docs/first-table-applied.md`. 5 دmin
✓ افتح Claude Code. اسأل `Design organizations, memberships, and user-owned records for a multi-tenant SaaS. Include tenant_id or organization_id relationships and isolation assumptions.` احفظ خطة SQL في `docs/saas-schema-plan.sql`.Open Claude Code. Ask `Design organizations, memberships, and user-owned records for a multi-tenant SaaS. Include tenant_id or organization_id relationships and isolation assumptions.` Save the SQL plan in `docs/saas-schema-plan.sql`. 5 دmin
✓ افتح Claude Code. اسأل `Design internal admin tables with audit logging, restricted admin access, and service-role-only operations clearly separated from user-facing tables.` احفظ الخطة في `docs/internal-tool-schema-plan.sql`.Open Claude Code. Ask `Design internal admin tables with audit logging, restricted admin access, and service-role-only operations clearly separated from user-facing tables.` Save the plan in `docs/internal-tool-schema-plan.sql`. 5 دmin
✓ افتح Claude Code. اسأل `Design public profiles, content visibility, and follower-based access tables for a consumer app. Include public and private fields separately.` احفظ الخطة في `docs/consumer-schema-plan.sql`.Open Claude Code. Ask `Design public profiles, content visibility, and follower-based access tables for a consumer app. Include public and private fields separately.` Save the plan in `docs/consumer-schema-plan.sql`. 5 دmin
✓ افتح Claude Code. اسأل `Review all tables in the live Supabase schema and identify any foreign key column missing an index. Write the CREATE INDEX statements.` طبّق كل indexes المقترحة في Supabase SQL editor واحفظ SQL في `docs/fk-indexes.sql`.Open Claude Code. Ask `Review all tables in the live Supabase schema and identify any foreign key column missing an index. Write the CREATE INDEX statements.` Apply all suggested indexes in Supabase SQL editor and save the SQL in `docs/fk-indexes.sql`. 5 دmin
✓ افتح تيرمينال المشروع. شغّل `supabase db diff` أو انسخ SQL المطبق في `supabase/migrations/001_initial_schema.sql`. احفظ migration file. اطلب من Claude Code يقارن ملف migration مع schema الحية.Open the project terminal. Run `supabase db diff` or copy the applied SQL into `supabase/migrations/001_initial_schema.sql`. Save the migration file. Ask Claude Code to compare the migration file with the live schema. 5 دmin
3
اكتمال واختبار RLSRLS Complete and Tested
35%
4
شحن التطبيق مع الواجهة وEdge FunctionsApp Shipped with Frontend and Edge Functions
25%

+ 21 مهمة أخرى — استورد الخطة عشان تشوفهم كلهم+ 21 more tasks — import the plan to see them all

النجاح شكله إيهWhat Success Looks Like

التطبيق مفتوح في المتصفح بمستخدم مسجل حقيقي. يعرض Supabase Table Editor صف ذلك المستخدم، ويحظر RLS استعلام اختبار لمستخدم ثانٍ في SQL editor، ويقول تدقيق Claude Code النهائي إن كل foreign key له index ولا يظهر service role key في كود الواجهة. The app is open in a browser with a real signed-in user. Supabase Table Editor shows the user's row, RLS blocks a second-user test query in the SQL editor, and Claude Code's final audit says every foreign key has an index and no service role key appears in frontend code.

التكلفة المتوقعةExpected Costs

البندItem التكلفةAmount مطلوب؟Required?
خطة Supabase المجانيةSupabase Free plan 0 EGP. Covers development for this template: database, auth, edge function testing, and enough egress for careful early work. Use limits and pagination so the free baseline remains meaningful. ✓
خطة Supabase Pro عند الاقتراب من الحدودSupabase Pro plan if approaching limits ~2,000 EGP/month. Upgrade only when dashboard metrics show real pressure on database size, egress, or project needs. Do not upgrade to compensate for unbounded queries. اوفر فلوسكSkip it
اشتراك Claude Code ProClaude Code Pro subscription ~1,000 EGP/month. Required from Day 1 for repeated schema review, MCP interaction, RLS policy writing, edge function drafts, and final audits against the live project. ✓
⚠️ مصيدة هدر - VPS لاختبار edge functionsWASTE TRAP - VPS for edge function testing 0 EGP recommended spend. Supabase CLI local development and deployed preview tests cover this template. A separate VPS adds ops work without improving schema or RLS quality. اوفر فلوسكSkip it
⚠️ مصيدة هدر - واجهة مدفوعة لإدارة قاعدة البياناتWASTE TRAP - third-party database GUI 0 EGP recommended spend. Supabase Table Editor and SQL editor are enough for schema creation, RLS policies, and inspections in this project. Buy a GUI only after a repeated workflow pain appears. اوفر فلوسكSkip it
⚠️ مصيدة هدر - اشتراك أداة migrationsWASTE TRAP - database migration tool subscription 0 EGP recommended spend. Supabase migrations through the CLI are sufficient at this scale. A paid migration tool before the first schema is stable is process decoration. اوفر فلوسكSkip it

المخاطر اللي تاخد بالك منهاRisks to Watch

criticalcritical
كشف service role key في الواجهةService role key exposed on the frontend
استخدم anon key في كود الواجهة، واحصر استخدام service role داخل وظائف خادمية مراجعة فقط. شغّل تدقيق service role قبل أي نشر أو اختبار مستخدم.Use the anon key in frontend code and keep service role access inside reviewed server-only functions. Run a service role audit before any deployment or user test.
highhigh
البناء دون RLS من اليوم الأول ثم محاولة إضافته لاحقًاBuilding without RLS from Day 1 and retrofitting later
فعّل RLS عند إنشاء كل جدول يواجه المستخدم، حتى قبل اكتمال السياسات النهائية. احفظ اختبارات السماح والحظر بجوار كل ملف سياسة.Enable RLS when each user-facing table is created, even before the final policies exist. Save allowed and blocked tests beside every policy file.
mediummedium
قراءة Supabase MCP لنسخة schema قديمةSupabase MCP introspecting stale schema cache
اطلب من Claude Code تحديث أو إعادة ربط MCP قبل افتراض أن تصميم schema خاطئ. تحقق باستعلام SQL مباشر في Supabase SQL editor.Ask Claude Code to refresh or reconnect the MCP before assuming the schema design is wrong. Verify with a direct SQL query in Supabase SQL editor.
highhigh
تجاوز egress في الخطة المجانيةEgress overrun on Free plan
أضف LIMIT لاستعلامات التطوير، واستخدم pagination للقوائم التي يراها المستخدم، وسجّل baseline للـ egress قبل الإطلاق حتى تظهر القفزات غير الطبيعية.Add LIMIT to development queries, paginate user-facing lists, and record an egress baseline before launch so unusual jumps are visible.
criticalcritical
تسريب service role في Next.js SSR أو server componentsNext.js SSR service role leak via server components
ابدأ افتراضيًا بـ anon key وعملاء مدركين للجلسة في Next.js. لا تستخدم service role إلا داخل server action أو edge function مراجعة وبسبب موثق.Default to anon key and session-aware clients in Next.js. Use service role only in a reviewed server action or edge function with a documented reason.

مين هتشتغل معاهمWho You'll Work With

👤
شريك المساءلةAccountability Partner
صاحب نقطة المتابعةcheckpoint owner
👤
مطور شحن مشروع SupabaseSupabase-Shipped Developer
مراجع schema وRLSschema and RLS reviewer
👤
أول مستخدم حقيقيFirst Real User
مختبر الدخول والبياناتauth and data tester
👤
الباني كمسؤول قاعدة بيانات مستقبليBuilder as Future DBA
دور مراجعة ذاتيةself-review role

الخطة دي بتتكيف مع وضعكThis Plan Adapts to Your Situation

بتبني إيه بالظبط؟What type of app are you building?
SaaS متعدد المستأجرينMulti-tenant SaaS - multiple users with isolated dataأداة داخلية أو لوحة تحكمInternal tool or admin dashboardتطبيق للمستخدمين النهائيينConsumer app - public profiles, content, social
المستخدمين هيدخلوا إزاي؟How will users authenticate?
Supabase Auth المدمجSupabase built-in auth - magic link, Google, email/passwordعندي auth خاص بيا وهبعت JWTI have my own auth - I'll pass JWTs to Supabaseبيانات عامة بدون حساباتNo auth - public data only, no user accounts
الفرونت إند بتبنيه بإيه؟What's your frontend stack?
React و Vite زي ZalfolReact + Vite (same stack as Zalfol)Next.js مع SSRNext.js - SSR and server componentsReact Native و Expo للموبايلReact Native + Expo - mobile app

اقرأ أكترRead More

التعلم العميق — العلم وراء طريقة التلميذ
←
Immersive Learning — The Science Behind Disciple Mode
→
دماغ الـ ADHD: Iron Man أو Dory
←
The ADHD Brain: Iron Man vs. Dory
→

خد الخطوة الأولىTake the First Step

ابنِ تطبيق Supabase مع Claude Code خلال 30 يوم Build a Supabase App with Claude Code in 30 Days

ابدأ هذه الخطة مجاناً Start This Plan — Free

لا يلزم بطاقة · مجاني للبدء No credit card · Free to start