مشروع شخصي متكامل

Basra Pixel

دليل رقمي لاكتشاف أفضل الأماكن بمدينة البصرة — مطاعم، مقاهي، مولات، ومتاحف بمكان وحد. مشروع بنيته بالكامل من الصفر بثلاث طبقات مترابطة: تطبيق موبايل، API خلفي حقيقي، ولوحة تحكم إدارية.

دوري بالمشروع
تصميم وتطوير كامل (Full-Stack)
المدة
شهر
النوع
تطبيق موبايل + Backend + لوحة تحكم
Flutter / Dart PHP خام MySQL REST API HTML/CSS/JS خام
تطبيق Flutter · iOS & Android
Inbox Order Stats 82% +12% 60 fps iOS · Android
01 — نظرة عامة

الفكرة والمشكلة

ما فيه تطبيق واحد يجمع أماكن البصرة (مطاعم، مقاهي، مولات، متاحف) بمكان وحد بهوية بصرية عراقية مميزة. Basra Pixel يحل هذي المشكلة: يخلي المستخدم يتصفح، يفلتر، يبحث، ويحفظ الأماكن المفضلة عنده بسهولة — وكل هذا مبني فوق باك اند حقيقي مو بيانات وهمية.

✓

تطبيق Flutter كامل بخمس شاشات رئيسية، مربوط بنظام تسجيل دخول/إنشاء حساب حقيقي، ومفضلة وسجل بحث يتزامنون مباشرة مع السيرفر.

✓

API خلفي بـ PHP + MySQL خام (بدون أي فريمورك) — نقاط وصول REST كاملة للأماكن، المصادقة، المفضلة، وسجل البحث، مع حساب مسافات حقيقي (Haversine) وتوكن مصادقة (Bearer Token).

✓

لوحة تحكم إدارية لإدارة الأماكن والمستخدمين برفع صور فعلي وإحصائيات حية، بنفس الهوية البصرية.

✓

موقع تعريفي (Landing Page) بـ HTML/CSS/JS خام بدون أي مكتبات، بنفس هوية "Liquid Glass" البصرية.

✓

تكامل مع خرائط آبل — كل مكان يفتح موقعه الحقيقي واتجاهات القيادة له مباشرة بتطبيق Apple Maps.

02 — تطبيق الموبايل

Flutter · خمس شاشات رئيسية

هوية بصرية "Liquid Glass" مخصصة: خلفية متدرجة داكنة-تركوازية، بطاقات زجاجية شفافة (Blur)، وشعار بلمسة بكسل. كل شاشة تسحب بياناتها حية من الـ API — مافيه بيانات وهمية بالتطبيق النهائي.

الشاشة الرئيسية
الرئيسية
صفحة البحث
البحث والفلترة
صفحة تفاصيل المكان
تفاصيل المكان
صفحة المفضلة
المفضلة
صفحة الحساب
حسابي
→

الرئيسية: فلترة حسب التصنيف تتفاعل حية مع البيانات — تختار "مقاهي" يعرض بس المقاهي بالأكثر شعبية والأقرب منك.

→

البحث: بحث نصي + فلاتر تصنيف + عمليات بحث أخيرة محفوظة بالسيرفر لكل مستخدم.

→

تفاصيل المكان: معرض صور، تقييم، حالة الفتح، مسافة حقيقية، خريطة مصغرة، وزر اتجاهات يفتح خرائط آبل بالإحداثيات الفعلية.

→

المفضلة: قلب واحد يحفظ المكان، ويظهر فوراً بكل الشاشات — متزامن مع قاعدة البيانات مو محلي بس.

→

حسابي: بروفايل، إحصائيات حية، إشعارات، إعدادات، مساعدة ودعم، وتسجيل خروج فعلي.

03 — الموقع التعريفي

Landing Page

موقع تعريفي منفصل تماماً عن النظام، مبني بـ HTML/CSS/JS خام بدون أي مكتبات ثقيلة، غرضه الوحيد تعريف الزوار بالتطبيق وتحميله لاحقاً — بنفس الهوية البصرية بالضبط.

الصفحة الرئيسية للموقع التعريفي
القسم الرئيسي — العنوان، لقطات التطبيق، وأزرار التحميل
قسم لقطات الشاشة بالموقع التعريفي
قسم استعراض لقطات التطبيق الحقيقية داخل الموقع
04 — لوحة التحكم الإدارية

Admin Dashboard

لوحة تحكم كاملة بـ PHP (جلسات وحماية CSRF) لإدارة كل بيانات التطبيق حية — أي تعديل هنا ينعكس فوراً بالتطبيق عبر نفس الـ API.

نظرة عامة بلوحة التحكم
نظرة عامة — إحصائيات حية عن الأماكن، المستخدمين، والمفضلة
جدول إدارة الأماكن
إدارة الأماكن — فلترة، تعديل، حذف
نموذج تعديل مكان
نموذج إضافة/تعديل مكان مع رفع صور فعلي
05 — البنية التقنية

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

📱 التطبيق

  • Flutter / Dart — واجهة المستخدم
  • Provider — إدارة الحالة
  • http — الاتصال بالـ API
  • shared_preferences — حفظ الجلسة
  • url_launcher — فتح خرائط آبل

⚙️ الباك اند

  • PHP خام — بدون فريمورك
  • MySQL / PDO — قاعدة البيانات
  • REST API — JSON خالص
  • Bearer Tokens — مصادقة المستخدمين
  • Haversine — حساب المسافات

🖥️ اللوحة والموقع

  • PHP Sessions — مصادقة المدير
  • CSRF Protection
  • HTML/CSS/JS خام — بدون مكتبات
  • Liquid Glass UI — هوية بصرية موحدة
→ رجوع لكل المشاريع