space tourism website

سبب اختيار العمل

بالرغم من ان تركيزى الاكبر حاليا على تطبيقات الباك اند و تعلم حل المشكلات الاكثر تأثيرا على ال software development مثل اختيارات التكنولوجى المناسبة, فهم رؤية العميل و احتياجات المشروع بشكل متعمق, ال system design المناسب الخاص بالمشروع حيث ان جزء الواجهة الامامية اصبح بشكل كبير يتم عمله باستخدام ادوات الذكاء الاصطناعى بشكل فعال و سريع ... و لكن رغبت فى تقديم هذا العمل الذى قمت به فى وقت سابق لأوضح ان لدى معلومات كفاية عن المفاهيم و الاساليب الاساسية الخاصة بال frontend

نوع العمل

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

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

React - TypeScript - Vite - Tailwind CSS - React Router - Express.js

أبرز المميزات

تصميم متجاوب يعمل بكفاءة على الهواتف، الأجهزة اللوحية، وشاشات الكمبيوتر.

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

عرض معلومات ديناميكية من خلال Tabs تفاعلية تسمح بالتبديل بين الوجهات، أفراد الطاقم، والتقنيات المختلفة بسهولة.

واجهات حديثة مع اهتمام بالتفاصيل البصرية والخلفيات الغامرة لإعطاء إحساس “الرحلة الفضائية”.

تنظيم المشروع باستخدام مكونات قابلة لإعادة الاستخدام لتسهيل التطوير والصيانة المستقبلية.

توفير بيانات الموقع والصور عبر خادم Express وربط الواجهة الأمامية بمصادر البيانات بطريقة منظمة.

آلية التنفيذ

تم بناء الواجهة الأمامية باستخدام React وTailwind CSS مع تقسيم المشروع إلى مكونات مستقلة وقابلة لإعادة الاستخدام، ثم تجميعها لتكوين الصفحات الرئيسية للموقع. استخدمت React Router لإدارة التنقل بين الصفحات وتحميل البيانات الخاصة بكل صفحة بطريقة ديناميكية.

أما في الخلفية، فتم إعداد خادم Express يتضمن الإعدادات الأساسية وMiddleware اللازمة، مع إنشاء Endpoints لقراءة البيانات من ملفات JSON وإرسالها للواجهة الأمامية، بالإضافة إلى إدارة الصور والملفات الثابتة عبر express.static.

ملحوظة

اعلم ان هذا العمل ليس عمل كامل او قوى و لكنى اعمل على تطوير اعمال اخرى و سوف استبدل هذا العمل باحد هذه الاعمال وقت اكتمالها و نشرها على احد منصات ال hosting