FreshCart

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

كان المطلوب تنفيذ متجر كامل على API جاهز للتجارة الإلكترونية، وفق تصميم Figma للحاسوب والجهاز اللوحي والجوال — مع تحسينه حيث يمكن أن تكون التجربة أسلس.

التعامل مع المتجر كمجموعة رحلات لا صفحات: الاكتشاف، ثم القرار، ثم الشراء، ثم العودة. وكان على كل رحلة أن تعمل للزائر وللعميل المسجّل على حد سواء.

جمع كل استدعاءات الـ API في مكان واحد — طبقة خدمات من Server Actions — لتبقى الصفحات بسيطة، ويُعالَج كل طلب بالطريقة نفسها في النجاح والفشل.

تحوّل تصميم Figma إلى مكوّنات قابلة لإعادة الاستخدام — بطاقات المنتجات، وواجهات الصفحات، وحالات الفراغ، ونوافذ التأكيد، والترقيم — مبنية بـ Tailwind CSS و shadcn/ui لتتشارك كل الصفحات لغة بصرية واحدة.

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

Next.js App Router مع TypeScript في كل المشروع. تسجيل الدخول عبر NextAuth باستخدام JWT من الـ API، وحارس مسارات يمنع الزوار من صفحات إتمام الشراء والطلبات والملف الشخصي حتى يسجّلوا الدخول، ثم يعيدهم إلى حيث كانوا متجهين.

النماذج — إنشاء الحساب، وتسجيل الدخول، ونسيان كلمة المرور وإعادة تعيينها، والعناوين، وإتمام الشراء، والملف الشخصي — يُتحقق منها بـ React Hook Form ومخططات Zod، فتُشرح الأخطاء بكلمات بسيطة قبل إرسال أي شيء.

يغطي المتجر التصنيفات، والعلامات التجارية، وتفاصيل المنتج مع التقييمات، والبحث بالفلاتر والترتيب المحفوظين في الرابط، والترقيم، وقائمة الرغبات، وكميات السلة، وكوبونات الخصم، وإتمام الشراء نقدًا أو إلكترونيًا، وسجل الطلبات، والعناوين المحفوظة، وإعدادات الحساب.

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

كان الحل سياق سلة (Context) بوضعين. منتجات الزائر تُحفظ في LocalStorage وتتحدّث فورًا. وحين تصبح الجلسة مسجّلة، تُنقل سلة الزائر إلى سلة الخادم منتجًا تلو الآخر — مع الإبقاء على الكمية الأكبر إن كان المنتج موجودًا — ثم تُمسح، وتتحدّث الواجهة من استجابة الخادم. وتتبع قائمة الرغبات النمط نفسه.

تُعرض الصفحات عبر Next.js وتُجلب البيانات على الخادم حيث أمكن، فتصل الصفحة الأولى جاهزة. والتخطيطات والمكوّنات المشتركة تُبقي حجم الكود في المتصفح صغيرًا، والمتجر منشور على Vercel.

متجر كامل ومتجاوب ينقل المتسوّق من أول منتج إلى طلب مؤكَّد — بما في ذلك اللحظات المحرجة بينهما، كنسيان كلمة المرور أو تسجيل الدخول في منتصف التسوّق. المتجر منشور على Vercel وكوده متاح للعموم على GitHub.