Aseeldev
EN
ENابدأ مشروعك

أسيل محمود القدرة · مطوّرة واجهات أمامية — React.js و Next.js

واجهات تبدو مذهلة. ومبنية لتُبهر.

ابدأ مشروعكاستكشف أعمالي

متاحة لمشاريع جديدة

من
غزة، فلسطين
أعمل
عن بُعد · مصر
الرد
خلال يوم

ابدأ من هنا

ما نوع الموقع الذي تريد بناءه؟

اختر الأقرب لما تريده — كل مسار يشرح بالضبط كيف سأتعامل معه.

02 / الخدمات

ما الذي أبنيه.

خط واحد، وكل خدمة عليه — وكلٌّ منها مدعوم بمشروع حقيقي.

FreshCartموقع FreshCart — من تطوير أسيل محمود القدرة
01تطوير React و Next.js

تطبيقات ويب سريعة — React و Next.js و TypeScript.

من الأعمال — FreshCart

Next.jsReactTypeScript

Clarityموقع Clarity — من تطوير أسيل محمود القدرة
02تحويل Figma إلى كود

تصميمك، مطابقًا بدقة ومتجاوبًا.

من الأعمال — Clarity

Figmaمطابقة للتصميممتجاوب

FreshCartموقع FreshCart — من تطوير أسيل محمود القدرة
03واجهات المتاجر الإلكترونية

كتالوج وسلة وإتمام شراء تبيع فعلًا.

من الأعمال — FreshCart

الكتالوجالسلةإتمام الشراء

Wanderlustموقع Wanderlust — من تطوير أسيل محمود القدرة
04ربط الـ API ولوحات التحكم

بيانات حقيقية من الـ API، معروضة بوضوح.

من الأعمال — Wanderlust

REST APIsلوحات تحكمبيانات حيّة

What's For Dinnerموقع What's For Dinner — من تطوير أسيل محمود القدرة
05صفحات الهبوط

صفحة واحدة، هدف واحد، إجراء واحد واضح.

من الأعمال — What's For Dinner

حملاتأقسامزر واحد

عدسةموقع عدسة — من تطوير أسيل محمود القدرة
06مواقع عربية وإنجليزية

عربية من اليمين لليسار، كما يجب.

من الأعمال — عدسة

RTLثنائي اللغةواجهات عربية

Cosmosموقع Cosmos — من تطوير أسيل محمود القدرة
07التجاوب وتحسين الأداء

جميل على الجوال، وسريع في كل مكان.

من الأعمال — Cosmos

الجوال أولًاالسرعةCore Web Vitals

الفهرس الكامل

مواقع الأعمال والمعارض الشخصيةإعادة تصميم المواقع

كل الخدمات

02 / الخدمات

ما الذي أبنيه.

خط واحد، وكل خدمة عليه — وكلٌّ منها مدعوم بمشروع حقيقي.

01

تطوير React و Next.js

تطبيقات ويب سريعة — React و Next.js و TypeScript.

من الأعمال — FreshCart

Next.jsReactTypeScript

FreshCartموقع FreshCart — من تطوير أسيل محمود القدرة
02

تحويل Figma إلى كود

تصميمك، مطابقًا بدقة ومتجاوبًا.

من الأعمال — Clarity

Figmaمطابقة للتصميممتجاوب

Clarityموقع Clarity — من تطوير أسيل محمود القدرة
03

واجهات المتاجر الإلكترونية

كتالوج وسلة وإتمام شراء تبيع فعلًا.

من الأعمال — FreshCart

الكتالوجالسلةإتمام الشراء

FreshCartموقع FreshCart — من تطوير أسيل محمود القدرة
04

ربط الـ API ولوحات التحكم

بيانات حقيقية من الـ API، معروضة بوضوح.

من الأعمال — Wanderlust

REST APIsلوحات تحكمبيانات حيّة

Wanderlustموقع Wanderlust — من تطوير أسيل محمود القدرة
05

صفحات الهبوط

صفحة واحدة، هدف واحد، إجراء واحد واضح.

من الأعمال — What's For Dinner

حملاتأقسامزر واحد

What's For Dinnerموقع What's For Dinner — من تطوير أسيل محمود القدرة
06

مواقع عربية وإنجليزية

عربية من اليمين لليسار، كما يجب.

من الأعمال — عدسة

RTLثنائي اللغةواجهات عربية

عدسةموقع عدسة — من تطوير أسيل محمود القدرة
07

التجاوب وتحسين الأداء

جميل على الجوال، وسريع في كل مكان.

من الأعمال — Cosmos

الجوال أولًاالسرعةCore Web Vitals

Cosmosموقع Cosmos — من تطوير أسيل محمود القدرة
كل الخدمات

الفرق

معظم المواقع تبدو جيدة على شاشة واحدة. مواقعي تعمل على كل شاشة.

كثير من المواقع تُبنى لشاشة حاسوب المصمم — ثم تُضغط على الجوال في النهاية. وحينها يكون التخطيط والكود والسرعة قد تحددت بالفعل.

أبني من بنية متينة صعودًا: كود دلالي، ومكوّنات قابلة لإعادة الاستخدام، وتخطيطات تبدأ بالجوال، وسرعة تُفحص قبل الإطلاق — ليبدو الموقع صحيحًا أينما فُتح، بالعربية أو الإنجليزية.

كيف تُبنى المواقع المتجاوبة والسريعة
ما تقدّمه مواقع كثيرةالطبقة الظاهرة فقط. البنية والتجاوب والسرعة مؤجّلة لوقت لاحق.
ما أقدّمهالتصميم والتطوير والبنية والأداء والإطلاق — تُبنى معًا، طبقةً فوق طبقة.

طريقة العمل

من الفكرة إلى الموقع

رحلة واحدة متصلة، ومطوّرة واحدة — من أول محادثة حتى رابط حيّ تشاركه.

طريقة العمل كاملة

01 / 05

المُخرَج — موجز واضح

الفهم

كل مشروع يبدأ بأهدافك — ما الذي يجب أن يحققه الموقع، ولمن هو، وما الصفحات التي يحتاجها. نتفق على شكل النجاح قبل تصميم أي شيء.

  • الأهداف
  • الجمهور
  • الصفحات

الموجز · قائمة الصفحات · أمثلة تعجبك

التاليالتصميم

02 / 05

المُخرَج — تخطيطات معتمدة

التصميم

من ملف Figma الخاص بك — أو تخطيط نشكّله معًا — تُخطَّط كل صفحة بدءًا من الجوال، مع إجراء واحد واضح لكل صفحة. تراجع تخطيطات حقيقية قبل أي كود.

  • Figma
  • التخطيط
  • المكوّنات

Figma · الشبكة · مقاييس الخطوط

التاليالتطوير

03 / 05

المُخرَج — موقع يعمل

التطوير

مكوّنات نظيفة ومكتوبة بأنواع واضحة وقابلة لإعادة الاستخدام — React و Next.js للتطبيقات، و HTML و CSS أخف للصفحات البسيطة — متصلة ببياناتك ومبنية للجوال أولًا.

  • React / Next.js
  • المكوّنات
  • بناء متجاوب

React · Next.js · Tailwind CSS

التاليالاختبار

04 / 05

المُخرَج — فحص ناجح

الاختبار

يُقارن بالتصميم جنبًا إلى جنب، ويُختبر على جوالات ومتصفحات حقيقية. تُغطّى حالات التحميل والفراغ والخطأ، وتُحسَّن الصور، وتُقاس السرعة قبل الإطلاق.

  • أجهزة حقيقية
  • السرعة
  • الحالات الطرفية

Lighthouse · DevTools · جوالات حقيقية

التاليالإطلاق

05 / 05

المُخرَج — موقع حيّ

الإطلاق

يُنشر على Vercel أو GitHub Pages مع ربط نطاقك، والكود في حسابك على GitHub، وجلسة شرح — لتملك موقعك فعلًا.

  • النشر
  • رابط حيّ
  • التسليم

Vercel · GitHub · النطاق + SSL

ثمدعم مستمر

أعمال مختارة

مشاريع حقيقية، منشورة وعلى GitHub

متجر إلكتروني، ومدونة عربية، ولوحتا تحكم للسفر والفضاء، ولعبة، وصفحة هبوط — مشكلات مختلفة، ومعيار واحد.

كل الأعمال

لماذا أنا

أهتم بالتفاصيل التي يشعر بها مستخدموك فعلًا

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

4

سنوات — هندسة البرمجيات

7

مشاريع مبنية ومنشورة

عن بُعد

أعمل عن بُعد — من مصر

النطاق — حين تعمل معي

  • من التصميم إلى الكودتصاميم Figma تُبنى بدقة مطابقة.
  • التطويرReact و Next.js و TypeScript في الأساس.
  • التجاوبكل شاشة، من أصغر جوال فما فوق.
  • بيانات حقيقيةواجهات API مع حالات التحميل والفراغ والخطأ.
  • العربية و RTLتخطيطات أصيلة من اليمين لليسار، لا مجرد عكس.
  • الأداءصور محسّنة، وكود خفيف، و Core Web Vitals.
  • تسليم نظيفالكود على GitHub، منشور ومشروح.

منظومة التقنيات

سلسلة أدوات واحدة مترابطة

ليست جدار شعارات — بل سير عمل. التصميم يحدد ما يُبنى، والبناء يحوّله إلى مكوّنات، والنشر يضعه على رابط حيّ تشاركه.

التصميم

التخطيطات والمكوّنات وقواعد التجاوب — تُخطَّط قبل أول سطر كود.

  • Figma
  • التصميم المتجاوب
  • الجوال أولًا
  • تخطيطات عربية RTL
  • مكوّنات الواجهة
  • تنظيم ملفات CSS
  • أساسيات إمكانية الوصول

البناء

الكود — React و Next.js في الأساس، و TypeScript و Tailwind حولهما.

  • React
  • Next.jscore
  • TypeScript
  • JavaScript (ES6+)
  • HTML5
  • CSS3
  • Tailwind CSS
  • Bootstrap
  • React Router
  • Context API
  • NextAuth
  • React Hook Form
  • Zod
  • shadcn/ui
  • REST APIs

النشر

إدارة النسخ والبناء والنشر — كيف يصبح العمل حيًّا ويبقى آمنًا.

  • Git
  • GitHub
  • Vercel
  • GitHub Pages
  • Vite
  • npm
  • Postman
  • ESLint
  • LocalStorage

مواقع جاهزة للبحث

موقعك لا يكفي أن يكون موجودًا. يجب أن يستطيع الناس العثور عليه.

محركات البحث تقرأ الكود قبل أن يقرأ أحدٌ الصفحة. الـ HTML الدلالي والروابط النظيفة والوسوم الصحيحة والصفحات السريعة كلها من عمل الواجهة الأمامية — لذا أبنيها من البداية بدل تأجيلها.

في كل مشروع

HTML دلالي
وسوم الوصف
روابط نظيفة
البيانات المنظّمة
معاينات المشاركة
النص البديل للصور
Core Web Vitals
وسوم اللغتين
مواقع الأعمال والمعارض الشخصية
نتيجة بحث
مطوّرة واجهات أمامية react next.js
01مؤهلة لنتيجة مميزة

aseel-alqedra.vercel.app › ar › react-nextjs

تطوير تطبيقات React و Next.js — AseelDev

aseel-alqedra.vercel.app › الخدمات › react-nextjs-development

أكتوبر 2026 — تطبيقات ويب مبنية بـ React و Next.js و TypeScript — مكوّنات قابلة لإعادة الاستخدام، وبيانات حقيقية من الـ API، وواجهات متجاوبة وسريعة.

واجهات المتاجر الإلكترونيةالكتالوج والسلة وإتمام الشراءمواقع عربية وإنجليزيةتخطيطات صحيحة من اليمين لليسارأعمال مختارةسبعة مشاريع، منشورة وعلى GitHubالتجاوب وتحسين الأداءكل شاشة، وسرعة مُقاسة
02البحث نفسه · صفحة بُنيت دون هيكلة

example.site › index.php?page_id=482&cat=7

الرئيسية | الموقع

مرحبًا بكم في موقعنا. نحن شركة تقدم خدمات للعملاء. تواصلوا معنا اليوم لمعرفة المزيد عمّا يمكننا تقديمه لكم و…

  • لا بيانات منظّمة — لا شيء تبني عليه النتيجة المميزة
  • لا وصف تعريفي — المحرك يكتب المقتطف بدلًا منك
  • رابط بمعاملات — لا كلمات في المسار تُقرأ
  • عنوان عام واحد — مكرر في كل صفحات الموقع
رابط نظيف
وسم العنوان
ترميز schema.org
الوصف التعريفي
روابط داخلية

الأداء

المواقع السريعة تفوز

السرعة انطباع أول، وعامل تحويل، وإشارة ترتيب في البحث — كلها في آنٍ واحد. أتعامل مع مؤشرات Core Web Vitals من Google كشرط للبناء، لا كفكرة لاحقة.

Core Web Vitalsحدود Google · المعيار الذي أبني عليه
0100
الهدفمعيار البناء
  • HTML مُجهّز مسبقًا · كل صفحة مبنية سلفًا
  • لا JavaScript يعيق العرض
  • خطوط مستضافة ذاتيًا · بلا قفزات
  • صور webp · أبعاد محجوزة

أكبر عرض للمحتوى

جيد: أقل من 2.5 ثانية

مدى سرعة ظهور المحتوى الرئيسي. الصور المحسّنة والكود النظيف وترتيب التحميل الذكي تُبقيه منخفضًا.

الاستجابة للتفاعل

جيد: أقل من 200 ملّي ثانية

مدى سرعة استجابة الموقع حين يلمس الناس وينقرون. الكود الفعّال وقلة JavaScript تجعلها فورية.

ثبات التخطيط

جيد: أقل من 0.1

مدى ثبات الصفحة أثناء التحميل. حجز المساحات والتخطيط المنضبط يعنيان ألّا يقفز شيء من مكانه.

التجاوب وتحسين الأداء

قارئان

البحث يتغيّر

يحصل الناس على إجاباتهم بشكل متزايد من البحث والمساعدات المدعومة بالذكاء الاصطناعي. صار للموقع قارئان: الشخص الذي ينظر إلى الصفحة، والآلة التي تقرر إن كانت ستُرشّحه.

الجزء الذي يتحكم فيه مطوّر الواجهات هو الهيكلة: HTML دلالي، وعناوين واضحة، ووسوم لغة، وبيانات منظّمة. لا ترتيب مضمون — فقط موقع تقرؤه الآلات بوضوح كما يقرؤه الناس.

Semantic HTMLStructured DatahreflangAccessibilityOpen Graph
مساعد ذكيتوضيح

“من يستطيع بناء موقعي بالعربية والإنجليزية؟”

ما يراه الناسالصفحة المصمَّمة

ما تقرؤه الآلاتالصفحة نفسها، كهيكلة

  • h1كيان واحد واضح — من، وماذا، وأين
    <h1>Aseel Mahmoud Alqedra — Front-End Developer</h1>
  • ld+jsonبيانات منظّمة تقرؤها الآلة دون تخمين
    {
  "@type": "Person",
  "jobTitle": "Front-End Developer",
  "address": "Gaza, Palestine"
}
  • hreflangكل نسخة لغوية، مُعلَّمة لمحركات البحث
    <link hreflang="en" href="/" />
<link hreflang="ar" href="/ar/" />

اختر مطوّرًا يبني الهيكلة من اليوم الأول — HTML دلالي، وعناوين واضحة، ووسوم لغة، وصفحات سريعة. الآلات لا تستطيع أن ترشّح إلا ما تستطيع قراءته فعلًا.

المصدرaseel-alqedra.vercel.app

يوضح الآلية — وليس إجابة حقيقية

اقرأ المزيد عن المواقع العربية والإنجليزية

عنّي

هندسة البرمجيات ومشاريع حقيقية، جنبًا إلى جنب

أنا أسيل محمود القدرة — طالبة في السنة الأخيرة بهندسة البرمجيات ومطوّرة واجهات أمامية من غزة، فلسطين، أعمل عن بُعد من مصر. أدواتي الأساسية React و Next.js. أعطتني الجامعة الأسس الهندسية، وعلّمني بناء المشاريع الحقيقية كيف أُطلق ما أبنيه.

المزيد عنّي

  1. ديسمبر 2024 — سبتمبر 2026

    التدريب والشهادات

    أكاديمية Cisco للشبكات · The Educational Gate

  2. سبتمبر 2022 — الآن

    حاليًا

    بكالوريوس هندسة البرمجيات

    جامعة فلسطين

مقالات

أفكار بصوت عالٍ

أدلة عملية عن تخطيط المواقع وبنائها وتحسينها — مكتوبة لمن يقرر ماذا يبني.

كل المقالات

ما الذي تجهّزه قبل التعاقد مع مطوّر واجهات أمامية؟

مواقع الأعمال والمعارض الشخصية

React أم Next.js أم موقع بسيط: ماذا يحتاج مشروعك؟

تطوير React و Next.js

لماذا يجب أن يعمل موقعك بشكل مثالي على الجوال؟

التجاوب وتحسين الأداء

كيف تبني موقعًا عربيًا وإنجليزيًا بالطريقة الصحيحة

مواقع عربية وإنجليزية

الخطوة التالية

لديك فكرة تستحق البناء؟

لنحوّلها إلى واجهة يتذكرها الناس — سريعة، متجاوبة، ومبنية لتدوم.

ابدأ مشروعكaseel.alqedra2004@gmail.com

أردّ عادةً خلال يوم · غزة، فلسطين · أعمل عن بُعد مع العالم

شاهد أعمالي