تخرّج من محور أساسيات البرمجة

الهدف

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

ليش هذا الحين؟

ترى وصلت لنهاية مسار cs-essentials — 20 درس عن البنية التحتية الكاملة للـ web apps. هذا مو "تخرّج من كورس" — هذا milestone حقيقي. اللي تعلمته هنا هو اللي يميّز الـ founder اللي يحكم على المطور عن الـ founder اللي يصدّق كل شي. ومهم تتوقف وتحتفل — مو لأن الاحتفال غاية، بس لأن الاحتفال بالإنجاز يثبّت التعلّم.

الفكرة

شنو بنيت خلال 20 درس:

الطبقة الأولى — الأساس:

• كيف يشتغل الـ web: browser → HTTP → server → HTML → paint
• الـ frontend: HTML و CSS و JavaScript والـ DOM
• الـ backend: servers، routes، handlers
• الـ database: SQL، Postgres، Prisma ORM
• الـ API: REST، endpoints، status codes، JSON

الطبقة الثانية — الأدوات:

• Auth: sessions، cookies، Better Auth، OAuth
• Frameworks: Next.js App Router، Server/Client Components
• Hosting: Vercel، environment variables، CI/CD
• Version control: Git، branches، PRs
• Terminal: أوامر تغطي 95% من احتياجات التطوير
• Data formats: JSON، CSV، parsing

الطبقة الثالثة — الـ Applied:

• CORS والأمان: قواعد browser، SQL injection، rate limiting
• Async/await: Promise، non-blocking، parallel calls
• State: local vs server vs global، React Query، Zustand
• CSS: Flexbox، Grid، Tailwind، responsive design
• Debugging: DevTools، breakpoints، network inspection
• Testing: vitest، pure functions، contracts
• Performance: Lighthouse، caching، image optimization
• TypeScript: types، interfaces، generics
• Refactoring: Repository، Service، Observer patterns
• Capstone: fullstack feature من schema لـ production

الـ Mental Model الجوهري:

[User] → [Browser] → [HTTP Request]
  → [Next.js Route Handler]
  → [Service Layer: Business Logic]
  → [Repository: Prisma → Neon DB]
  → [HTTP Response: JSON]
  → [React: State → UI Update]

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