السلام عليكم
عندي تاسك انو اسوي داشبورد او موقع كما موضح بالملف المرفق الخاص بالui design
وتطبيقه باستخدام tailwindcss و vuejs واستخدام JSONPlaceholder كـREST API انا عندي خبرة بالhtml css والtailwindcss اكدر اشتغل فيه باستخدام الدوكيمنتيشن الخاص به بس الجافاسكرب و الvue وREST API
وهو انطاني 3 ايام من السبت البارحة الى يوم الثلاثاء القادم لازم اقدم له الي سويتة هذا العرض تقدملي
من شخص فول ستاك ديفلوبر يريد انتري فرونت ايند معه فقدمه لي حتى يشوف امكانيتي بالتعلم اذا اجتازيت
التاسك بنجاح وشرحت له كيف بنيت الموقع رح يقبلني اشتغل معاه واتعلم منه فاذا امكن احد يساعدني يعطني روابط
دروس اكدر استفاد منها بهذا الوقت القليل او يوضح لي كيف لازم ابني الموقع وشنو الي احتاج اتعلمه اكون ممنون كلش
رابط الui design : https://gofile.io/d/vjLCBV
باسورد الملف: coretabs
اذا مواضح التصميم فالمطلوب مني:
اني اسوي موقع من صفحة واحد يحتوي على المستخدمين (اسم المستخدم, البريد الالكتروني, الشركة التي يعمل بها)
وعند الضغط على اسم المستخدم سوف تظهر البوستات الي قام بنشرها بجانب جدول المستخدمين كما موضح بالتصميم
وعند الضغط على احد البوستات الخاصة بالمستخدم سوف تظهر التعليقات الخاصة بالمنشور مع الامكانية بحذف اي مستخدم
او منشور او تعليق و اضافة تعليق ولاتحتوي الداشبورد على تسجيل دخول او انشاء حساب
مرحباً
هل يوجد احد هنا ؟؟
أهلا محمد!
مثل هذه الأشياء حلها يكون ترتيب الأفكار فضلا عن الشروع في كتابة الكود…
سأقسم الموضوع إلى قسمين:
بالنسبة للتصميم و tailwindcss
فكما نرى في التصميم مثلا:
ببساطة شريط القوائم بالأعلى، ومحتوى الصفحة يقسم بالgrid system الخاص بtailwind.css
فكرة الgrid system مريحة في التصميم ووضع المحتويات بدون الشعور بملل،
بالرجوع إلى الdocumentation الخاص بهذا الاصطلاح: https://tailwindcss.com/docs/grid-template-columns
هذا مثال سريع:
<div class="grid grid-cols-2 place-items-center border border-black">
<div class="bg-blue-300 text-center">1</div>
<!-- ... -->
<div class="bg-blue-300 text-center">9</div>
</div>
النتيجة: https://play.tailwindcss.com/fhAKD4hqBy
بالرجوع للصورة نجد على اليسار جدول والجزء على اليمين صورة
سيتم وضعهم في الأماكن المشار اليها في رقم 1 ورقم 9 المشار اليهما في الكود بالأعلى 
هذه أمثلة للtables في موقع tailwindcss
https://tailwindui.com/components/application-ui/lists/tables
وستجد أمثلة أخرى كثيرة جدا…
بالنسبة لVuejs
بإمكانك استخدام Vue2 أو Vue3 على حسب النسخة التي تعتاد عليها…
قمت بعمل فكرة سريعة تبين لك الصورة هنا: https://codepen.io/nasr3090/pen/KKgvyWL
الموضوع بسيط، ومعك كل الوقت
الآن معك الصورة شبه واضحة عن نقطة البداية
أتمنى لك التوفيق 
شكراً لك
هذا هو الي كدرت اتوصل له ولكن مشكلتي حالياً مع الvuejs والapi
لا اعرف ماذا احتاجه في المشروع وكيف او من اين اتعلمه بخصوص
الvuejs و api
انا جداً ممتن
شكراً جزيلاً على الفيديو
واسف لان تعبتك معي 
زادك الله مما يحبه لك
سعيد بالنتيجة
استمتع بالكود 
آمين وإياك