AutoMarket - واجهة مستخدم سوق السيارات

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

تم تطوير واجهة مستخدم متكاملة لسوق سيارات باستخدام HTML و Tailwind CSS و JavaScript (ES6+) مع اعتماد أسلوب Mobile-First لضمان التوافق مع جميع أحجام الشاشات.

يتضمن المشروع محاكاة كاملة لنظام تسجيل الدخول والتسجيل على مستوى الواجهة فقط، مع إدارة الجلسات باستخدام LocalStorage و SessionStorage، ودعم خيار “تذكرني”.

تم تصميم نظام توجيه صفحات (Client-Side Routing) مركزي مع حماية الصفحات التي تتطلب تسجيل دخول، وتنفيذ تحويل تلقائي للمستخدمين حسب حالة تسجيل الدخول.

يشمل المشروع مكوّنات قابلة لإعادة الاستخدام مثل:

شريط تنقّل ديناميكي (Navbar)

تذييل صفحة مستقل وقابل للتعديل (Footer)

دوال مساعدة مشتركة لإنشاء عناصر الـ DOM

كما تم تنفيذ نظام معالجة أخطاء مخصّص برسائل أنيقة بدلًا من تنبيهات المتصفح الافتراضية، بالإضافة إلى دعم الوضع الداكن (Dark Mode) مع حفظ تفضيل المستخدم.

تم الالتزام بهيكل ملفات نظيف وقابل للتوسّع يفصل بين الصفحات والمكوّنات والأدوات والأنماط، مما يجعل المشروع جاهزًا للربط مستقبلاً مع أي Backend حقيقي.

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

HTML5 – Tailwind CSS – JavaScript (ES6+) – LocalStorage – SessionStorage