Post by Abd El Rahman Khaled

بقالي فترة شغال على مشروع شخصي اسمه Vibecheck. الفكرة بدأت كـ Fashion Storefront بسيط، لكن وأنا ببنيه قررت ما أتعاملش معاه كمجرد صفحات منتجات وواجهة شكلها كويس. كان هدفي أعمل تجربة E-commerce فعلية فيها flow متكامل من أول ما المستخدم يدخل يتصفح المنتجات، لحد ما يسجل دخول، يضيف منتجات للـ cart، يعمل checkout، وبعدها يقدر يراجع أوردراته من حسابه. أول جزء ركزت عليه كان تجربة التصفح: صفحات للـ collections والـ categories، product listing، وصفحة تفاصيل لكل منتج. بعد كده بدأت أبني الـ account flow، بحيث المستخدم يقدر يسجل باستخدام Google، ويتعمل له profile تلقائياً في Supabase أول مرة يدخل فيها. بعدها كان التحدي الحقيقي في ربط الـ cart والـ orders بالمستخدم بشكل منظم. بدل ما الـ cart تبقى state مؤقتة في الواجهة، خليتها مرتبطة بالـ user profile ومتحفظة في قاعدة البيانات. وعند الـ checkout، البيانات بتتحول لـ order وorder items، وبعدها المستخدم يقدر يشوف الـ order history وتفاصيل كل طلب من صفحة الـ account. تقنياً، المشروع مبني باستخدام Next.js 16 وReact 19 مع App Router، وTailwind CSS 4 للواجهة. استخدمت NextAuth مع Google OAuth للـ authentication، وSupabase للـ database وحفظ بيانات المنتجات، الـ profiles، الـ carts، والـ orders. في تنظيم الكود، حاولت أفصل الـ UI عن التعامل المباشر مع قاعدة البيانات. الـ data access logic موجود في modules مستقلة، والـ Server Components مسؤولة عن الـ data fetching والـ authentication checks، بينما الـ Client Components مستخدمة فقط في الأجزاء اللي تحتاج interaction فعلي. النسخة الحالية بتغطي الـ core shopping flow، لكن لسه فيه شغل مهم جاي: payment integration، admin dashboard لإدارة المنتجات والأوردرات والمخزون، search وfiltering، ودعم guest cart مع merge بعد تسجيل الدخول. الموقع لايف حالياً: https://lnkd.in/eQRTJSsS هسيب screenshots من الواجهة والـ user flow في المرفقات. أي feedback على الـ UX أو طريقة تنظيم الـ flow يهمني. #Nextjs #React #Supabase #TailwindCSS #FullStackDevelopment #WebDevelopment #Ecommerce