ابنِ أول تطبيق كامل مع Claude Code: مؤقت تمارين بتسجيل دخول وقاعدة بيانات ورابط حقيقيBuild Your First Full App with Claude Code: A Gym Timer with Sign In, a Database and a Live Link

المصطلحات

Plan mode (وضع الخطة)

وضع في Claude Code يقرأ فيه ويقترح خطة بس، بدون ما يعدّل ملفات أو يشغّل أوامر. تشغّله بـ Shift+Tab أو بأمر /plan.

Supabase

خدمة تعطيك قاعدة بيانات Postgres وتسجيل دخول جاهز لتطبيقك، وفيها باقة مجانية للتجربة.

RLS (Row Level Security)

قواعد داخل قاعدة البيانات تحدد مين يقرأ ومين يكتب في كل صف. بدونها، الجدول المكشوف يقدر أي أحد معه المفتاح العام يقرأه ويكتب فيه.

Publishable key و Secret key

المفتاح العام آمن في المتصفح لما يكون RLS شغّال. المفتاح السري (أو service_role في المشاريع القديمة) يتخطى الحماية، فمكانه السيرفر بس.

Vercel

منصة تنشر موقعك من GitHub وتعطيك رابط حقيقي، وتعيد النشر مع كل push.

الخطوات

1. 1

   الخطوة 1

   خلّ Claude يخطط قبل لا يكتب سطر

   افتح مجلد فاضي اسمه gym-timer، وشغّل Claude Code فيه. اضغط Shift+Tab لين يظهر plan mode، أو اكتب /plan.

   اعطه الفكرة كاملة واطلب منه يسألك قبل لا يبدأ. الخطة هي اللي تختصر عليك الساعات بعدين، لأنك تصلّح الفكرة قبل لا تصلّح الكود.

   

   برومبتبرومبت الخطة

   نسخ

   أريد أبني تطبيق ويب اسمه Gym Timer:
   • مؤقت فترات (تمرين وراحة) مع عدد الجولات
   • تسجيل دخول بالإيميل
   • يحفظ تماريني لكل مستخدم
   الأدوات: Next.js و Supabase، والنشر على Vercel.
   قبل لا تكتب أي كود، اسألني [3] أسئلة، وبعدها اكتب خطة على مراحل مع الملفات اللي راح تنشئها.

   نصيحة: وافق على الخطة بس لما تفهم كل مرحلة فيها. اسأله عن أي شي مش واضح.

2. 2

   الخطوة 2

   ابنِ المؤقت والواجهة وجرّبها على جوالك

   اطلع من plan mode (Shift+Tab مرة ثانية) وخلّه ينفّذ المرحلة الأولى بس: المؤقت والواجهة، بدون دخول ولا قاعدة بيانات.

   شغّل المشروع عندك وافتحه من الجوال على نفس الشبكة. عدّل الشكل الآن، لأنه أسهل قبل لا تضيف البيانات.

   برومبتبرومبت الواجهة

   نسخ

   نفّذ المرحلة الأولى من الخطة بس: صفحة مؤقت فيها وقت التمرين [45] ثانية، وقت الراحة [15] ثانية، وعدد الجولات [8]. دائرة تقدّم، زر تشغيل وإيقاف وإعادة، وصوت قصير مع كل تبديل. خلّها تشتغل زين على الجوال. بعدها قل لي الأمر اللي أشغّل فيه المشروع.

3. 3

   الخطوة 3

   أضف تسجيل الدخول بـ Supabase Auth

   سوّ مشروع جديد في Supabase، وانسخ رابط المشروع والمفتاح العام (publishable key) من إعدادات الـ API.

   حطهم في ملف .env.local واطلب من Claude يضيف الدخول بالإيميل. المفتاح السري ما يدخل هذا الملف أبداً.

   supabase.com

   

   برومبتبرومبت الدخول

   نسخ

   أضف تسجيل دخول بالإيميل عن طريق Supabase Auth. رابط المشروع والمفتاح العام موجودين في .env.local باسم [NEXT_PUBLIC_SUPABASE_URL] و [NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY]. صفحة المؤقت تبقى مفتوحة للكل، وصفحة تماريني بس للمسجّلين. لا تستخدم أي مفتاح سري في كود المتصفح.

4. 4

   الخطوة 4

   سوّ جدول التمارين وشغّل RLS قبل أي شي

   هذي الخطوة اللي ناس كثير تطوفها. توثيق Supabase نفسه يقول إن الجدول المكشوف بدون RLS ينقرأ وينكتب من أي دور عنده صلاحية عليه.

   افتح SQL Editor في Supabase وشغّل الكود تحت، أو خلّ Claude يكتب لك migration فيه نفس الشي. كل مستخدم يشوف ويعدّل صفوفه هو بس.

   supabase.com

   

   برومبتSQL الجدول والحماية

   نسخ

   create table workouts (
     id uuid primary key default gen_random_uuid(),
     user_id uuid not null default auth.uid() references auth.users(id),
     work_seconds int not null,
     rest_seconds int not null,
     rounds int not null,
     created_at timestamptz default now()
   );
   
   alter table workouts enable row level security;
   
   create policy "own rows" on workouts
     for all to authenticated
     using ((select auth.uid()) = user_id)
     with check ((select auth.uid()) = user_id);

   نصيحة: الكود بالإنجليزي لأن SQL يحتاجه جذي. انسخه كما هو.

5. 5

   الخطوة 5

   احفظ التمارين وتأكد إن الحماية شغّالة

   خلّ Claude يربط زر الحفظ بالجدول، وبعدها جرّب بحسابين مختلفين. لو الحساب الثاني شاف تمارين الأول، فيه شي غلط في الـ policy، ارجع للخطوة اللي قبل.

   برومبتبرومبت الحفظ والاختبار

   نسخ

   اربط زر حفظ التمرين بجدول workouts في Supabase، وأضف صفحة تماريني تعرض تمارين المستخدم المسجّل بس. بعدها اكتب لي خطوات اختبار بحسابين حتى أتأكد إن كل واحد ما يشوف إلا تمارينه.

6. 6

   الخطوة 6

   ارفعه على GitHub وانشره على Vercel

   خلّ Claude يسوي commit ويرفع المشروع على مستودع GitHub جديد. بعدها في Vercel اختر Import وحدد المستودع.

   قبل النشر أضف متغيرين بس في Environment Variables: رابط المشروع والمفتاح العام. بعد النشر، كل push يطلع نسخة جديدة لحاله.

   vercel.com

   

   برومبتبرومبت النشر

   نسخ

   جهّز المشروع للنشر على Vercel: تأكد إن .env.local في .gitignore، وإن البناء يشتغل بدون أخطاء، وارفع المشروع على مستودع GitHub جديد اسمه [gym-timer]. بعدها اكتب لي أسماء متغيرات البيئة اللي أحطها في Vercel.

   نصيحة: إذا شفت secret أو service_role في متغيرات المتصفح، احذفه فوراً وغيّر المفتاح من Supabase.

7. 7

   الخطوة 7

   لو طلع خطأ، اعطه الخطأ كامل

   لا تحاول تحل الخطأ لحالك وتوصفه بكلامك. انسخ رسالة الخطأ كاملة من الطرفية أو من سجل Vercel، والصقها لـ Claude مع اللي كنت تسويه. أغلب مشاكل النشر الأولى تكون متغير بيئة ناقص أو اسم غلط.

برومبتات جاهزة للنسخ

راجع المشروع كامل قبل لا أشارك الرابط: هل فيه أي مفتاح سري في كود المتصفح أو في GitHub؟ هل كل الجداول عليها RLS؟ هل فيه صفحة تعرض بيانات مستخدم لمستخدم ثاني؟ اعطني قائمة بالمشاكل والحل لكل وحدة.

التطبيق الآن فيه مؤقت ودخول وحفظ. اقترح علي [3] ميزات صغيرة تخلّيه أحسن للاستخدام في الجيم، ورتّبها من الأسهل للأصعب.