تصميم موقع احترافي بواسطة tailwindcss , typescript , react , nextjs

تصميم موقع إلكتروني برمجة مواقع typescript React Next.js Tailwind CSS تصميم واجهة المستخدم تصميم موقع إلكتروني برمجة مواقع typescript React Next.js Tailwind CSS تصميم واجهة المستخدم

متطلبات المشروع لتصميم وبرمجة موقع إلكتروني الهدف: إنشاء موقع إلكتروني مكون من 3 صفحات باستخدام التقنيات الحديثة في التصميم والبرمجة، بحيث يكون الموقع متجاوباً وسلساً في الاستخدام وصديقاً لمحركات البحث (SEO)، مع مراعاة استخدام مكتبة Tailwind CSS بشكل كامل دون أي تخصيصات أو كلاسات مخصصة، والالتزام بمبادئ DRY و SoC. بالإضافة إلى منح المطور حرية كتابة المحتوى بأسلوبه الخاص وإنشاء شركة وهمية بمحتواه الفريد. يُشترط أن يحصل الموقع على تقييم 100/100 في جميع فئات تقييم أداة PageSpeed Lighthouse. صفحات الموقع: 1. الصفحة الرئيسية: - تشمل عرضًا عامًا للموقع. - يجب أن تحتوي على قائمة تنقل (Navigation Bar) تربط بين الصفحات الثلاث. - عرض مختصر للخدمات الرئيسية. - تذييل الصفحة (Footer) يحتوي على روابط التواصل الاجتماعي والمعلومات الأساسية. 2. صفحة "من نحن": - تحتوي على قسم يتحدث عن الشركة الوهمية، رؤيتها، رسالتها وفريق العمل. - يجب أن يكون المحتوى مكتوبًا بأسلوب إبداعي وجذاب يعبر عن هوية الشركة الوهمية التي سيقوم المطور بإنشائها. 3. صفحة "الخدمات": - عرض مفصل للخدمات المقدمة من الشركة الوهمية، مع وصف لكل خدمة. - استخدام بطاقات (Cards) أو قوائم لتوضيح المعلومات بشكل منظم. - يجب أن يعكس المحتوى طبيعة الخدمات بأسلوب متماسك يتناسب مع المحتوى المكتوب في الصفحات الأخرى. المتطلبات التقنية: 1. التقنيات المستخدمة: - التصميم والبرمجة باستخدام Next.js، React، TypeScript. - استخدام مكتبة Tailwind CSS فقط دون إضافة أو استخدام أي كلاسات مخصصة (Custom Classes). - يمنع منعاً باتاً استخدام أي من الخاصيات الخاصة بالمحاذاة مثل left, right، والاعتماد بدلاً من ذلك على flex, grid, start, end, gap لتوزيع العناصر في الصفحات. - تصميم الموقع بحيث يكون متجاوباً مع جميع الشاشات (Responsive Design)، بما في ذلك الهواتف الذكية والأجهزة اللوحية. 2. التصميم وكتابة الكود: - كتابة الكود باستخدام HTML5 Semantic بشكل صحيح، لضمان وضوح هيكلية الموقع لمحركات البحث ولتحسين SEO. - الاعتماد على Tailwind CSS بالكامل لتنسيق وتصميم المكونات، دون استخدام تخصيصات CSS إضافية. - اتباع مبدأ DRY في كتابة الكود، وذلك بتجنب التكرار وإعادة استخدام المكونات والعناصر المشتركة. - تطبيق مبدأ SoC في هيكلية الكود وتقسيم المكونات، بحيث يتم فصل وظائف مختلفة منطقياً (مثل فصل منطق الأعمال، العرض، وتنسيق المكونات). - استخدام Page Loading Indicators لعرض حالة تحميل الصفحات. - توفير Skeleton Loading عند تحميل البيانات، لجعل تجربة المستخدم أفضل أثناء انتظار المحتوى. - توفير مؤشرات التحميل (Loading Indicators) لجميع الأزرار والنماذج في الموقع. 3. تحسين الأداء وتجربة المستخدم: - تحقيق تقييم 100/100 في جميع الفئات في اختبار أداء الموقع باستخدام PageSpeed Lighthouse، بما في ذلك: - Performance: أداء الموقع يجب أن يكون مثالياً من حيث وقت التحميل، استخدام الذاكرة، وتحسين الكود. - Accessibility: يجب أن يكون الموقع متاحاً لجميع المستخدمين، مع توفير تجربة استخدام سهلة. - Best Practices: اتباع أفضل الممارسات البرمجية في كتابة الكود. - SEO: تحسين محركات البحث بحيث يتم التعرف على الموقع بشكل كامل من قبل محركات البحث. - Progressive Web App (PWA): التأكد من أن الموقع يلبي متطلبات تطبيقات الويب التقدمية (اختياري إذا تم تحديده). - استخدام أساليب التحسين، مثل: - تحسين الصور والفيديوهات لتقليل حجمها. - تحميل الصور والفيديوهات بشكل Lazy Loading عند الحاجة. - تقليل استعلامات الشبكة (HTTP Requests) لتسريع وقت التحميل. - تقليل وتقسيم الأكواد (Code Splitting). - استخدام Caching وMinification لتحسين الأداء. 4. التفاعل والمميزات الخاصة: - إضافة حركات سلسة (Smooth Transitions) عند الانتقال بين الصفحات أو عند التفاعل مع المكونات المختلفة. - استخدام Animations عند التحميل الأولي للصفحة، وعند التمرير على العناصر. - استخدام مكونات تفاعلية مثل Buttons، Forms، وCards التي تتفاعل مع الإيماءات (Gestures). 5. الهيكلية والتموضع: - استخدام Flexbox و Grid بشكل أساسي لتوزيع العناصر وتنسيقها. - يجب استخدام خصائص مثل gap لتحديد المسافات بين العناصر بدلاً من استخدام هوامش خارجية (Margins) أو هوامش داخلية (Paddings). - الاعتماد على خصائص المحاذاة مثل justify-start, justify-end, items-start, items-end لضبط مواقع العناصر دون استخدام right أو left. 6. المحتوى: - يجب على المطور كتابة المحتوى الخاص بالموقع بأسلوبه الخاص. - إنشاء شركة وهمية، وصياغة المحتوى لتبدو حقيقية وجذابة، مع الأخذ في الاعتبار ترابط المحتوى في جميع الصفحات. - إضافة نصوص تعريفية للشركة، الخدمات، وفريق العمل بطريقة إبداعية، وإظهار هوية متكاملة للشركة الوهمية من خلال المحتوى المكتوب. تسليم المشروع: 1. مدة المشروع: - يجب إتمام المشروع وتسليمه خلال يومين من تاريخ بدء العمل. 2. التسليم النهائي: - رفع الكود بالكامل على منصة GitHub، مع توفير رابط للمستودع (Repository) للاطلاع عليه. - كتابة توثيق مختصر في ملف README.md لشرح هيكلية المشروع وطريقة تشغيله محليًا. - إجراء اختبار شامل للموقع باستخدام PageSpeed Lighthouse، والتأكد من حصول الموقع على تقييم 100/100 في جميع الفئات. الميزانية: - الميزانية المخصصة لهذا المشروع هي 80 دولار أمريكي. فرص مستقبلية: - إذا أظهر المطور كفاءة عالية وقدم نتائج احترافية ومبهرة في تنفيذ هذا المشروع، سيتم تقديم عروض مشاريع مستقبلية مغرية له في مجال تصميم الواجهات وتجربة المستخدم (UI/UX)، مع ميزانيات أكبر ومهام أكثر تحدياً.