Appify — Landing Page / Authentication UX

وصف المشروع:

قمت ببناء صفحة هبوط ثابتة (Static Landing Page) قابلة للتوسع باستخدام Next.js وTypeScript، مع التركيز على التصميم النظيف، الأداء العالي، وتجربة مستخدم سلسة.

تضمن المشروع تطوير تدفقات تسجيل آمنة مع تحقق من البيانات على الخادم باستخدام Server Actions وZod، ضمن بنية معمارية قابلة لإعادة الاستخدام.

أبرز الإنجازات:

تطوير صفحة هبوط متجاوبة بالكامل باستخدام Next.js App Router وTypeScript مع الحفاظ على بنية Static محسّنة للأداء.

استخدام Parallel Routes في Next.js لعرض صفحة المصادقة نفسها في سياقين مختلفين (داخل الصفحة – صفحة مستقلة) تحت نفس الرابط دون تكرار المنطق.

تنفيذ معالجة نماذج (Forms) آمنة ومهيكلة على مستوى الخادم باستخدام:

Next.js Server Actions

مكتبة Zod للتحقق من صحة البيانات

useActionState لإدارة حالات النجاح والأخطاء مع الحفاظ على الصفحة ثابتة (Static)

إضافة نظام تقييم قوة كلمة المرور (Password Strength Indicator) مع تغذية راجعة فورية لتحسين تجربة المستخدم وزيادة الثقة أثناء التسجيل.

تصميم رسوم متحركة محسّنة للأداء باستخدام CSS مع أقل قدر ممكن من JavaScript، تشمل:

تأثيرات Hover

انتقالات سلسة

حركات عند دخول العناصر لنطاق العرض (Viewport-triggered animations)

تطوير مكونات UI قابلة لإعادة الاستخدام تعتمد على Tailwind CSS و class-variance-authority (CVA) لإنشاء أنظمة Variants مرنة وقابلة للتوسع.

دمج Embla Carousel لبناء سلايدر متجاوب وسلس مع:

أدوات تنقل مخصصة

تشغيل تلقائي (Autoplay)

دعم كامل لسهولة الوصول (Accessibility)

التقنيات المستخدمة:

Next.js – React – TypeScript – Tailwind CSS – Zod – Embla Carousel – class-variance-authority (CVA)