Things I've Built
A selection of projects that showcase my skills in building modern, scalable web applications.
نظام إدارة النقل المتكامل (بوابة لوجستي / منصة بيان) مع محرك إدارة بيانات العملاء
لوجستية متكاملة للمؤسسات تعتمد على أحدث تقنيات الويب، تتميز بربط مباشر ولحظي مع منصة بيان (الهيئة العامة للنقل في السعودية). يتيح النظام إدارة أساطيل النقل، إصدار وثائق النقل الرسمية (Waybills)، وإدارة قواعد بيانات ضخمة للعملاء والمركبات عبر أنظمة استيراد ذكية ومؤتمتة. أبرز الخصائص التقنية والبرمجية (Technical Highlights): 1. التكامل الحكومي مع منصة بيان (Bayan / Logisti API Integration): بناء اتصال آمن وموثق (Secure Authentication): تنفيذ متطلبات الأمان الصارمة الخاصة بـ Elm، بما في ذلك توليد الـ Headers المخصصة (App ID, App Key) بدقة للتعامل مع الـ API الرسمي. استخدام بروكسي IP ثابت (Static IP via Proxy): استخدام Fixie لضمان عبور الطلبات عبر Static IP مُعتمد لدى سيرفرات الهيئة، مما يمنع حظر الطلبات ويضمن استقرار الخدمة (Proxy Routing). إدارة دورة حياة وثيقة النقل (Waybill Lifecycle): برمجة دوال (Functions) متكاملة لإصدار، إغلاق (Close)، وإلغاء (Cancel) وثائق النقل وتحديث تفاصيل الرحلة والسائقين برمجياً. توليد واستخراج المطبوعات (PDF Streaming): التعامل مع البيانات الثنائية (Binary Data & Buffers) لاسترجاع وثيقة النقل الرسمية بصيغة PDF من خوادم الهيئة وطباعتها مباشرة من النظام دون حفظها، مما يعزز الأداء والأمان. معالجة معقدة للأخطاء (Advanced Error Handling): نظام ذكي لالتقاط أخطاء الـ API (مثل 400, 401, 503) وترجمتها إلى رسائل خطأ دقيقة ومفهومة للمستخدم النهائي بدلاً من توقف النظام. 2. نظام الاستيراد الشامل وإدارة البيانات (Data Import & Deduplication Engine): هندسة البيانات المترابطة: القدرة على استيراد ملفات (Excel) ضخمة وتجميع البيانات لبناء شجرة مترابطة (عملاء، مركبات، سائقين) وربطها بالموظف المسؤول بضغطة زر. خوارزميات الفلترة ومنع التكرار (Validation): تنقية أرقام الهواتف، وفحص وجود السجلات المسبقة (لمنع تكرار اللوحات أو الهويات)، مما يضمن سلامة قاعدة البيانات (Data Integrity). إدخال تسلسلي (Complex Database Transactions): استخدام Drizzle ORM لإدخال العملاء، واسترجاع مُعرفاتهم (IDs)، وربطها فوراً كـ Foreign Keys بالمركبات والسائقين بأداء فائق عبر Server Actions. التقنيات المستخدمة (Tech Stack): إطار العمل: Next.js 16 (App Router), React 19 قواعد البيانات: PostgreSQL, Drizzle ORM (Neon DB) الربط الشبكي وبروتوكولات النقل: fetch API مع https-proxy-agent للاتصال الآمن. معالجة الملفات والبيانات: مكتبة xlsx لتحليل جداول الإكسيل و Buffer لمعالجة الـ PDF. واجهة المستخدم: Tailwind CSS, Radix UI القيمة المضافة للمشروع (Business Value): هذا النظام يُعد حلاً من فئة (Enterprise)، حيث يقوم بأتمتة مهام كانت تستغرق ساعات طويلة من العمل اليدوي، ويلتزم بالامتثال الكامل لاشتراطات النقل في المملكة (عبر منصة بيان/لوجستي)، وهو مصمم للتعامل مع العمليات المعقدة وضغط الاستخدام العالي باستقرار تام.
سوق الفوتيان (تطوير منصة تجارة إلكترونية شاملة ومتعددة المتاجر (Multi-Vendor E-Commerce Platform))
ناء وتطوير منصة تجارة إلكترونية متكاملة وعالية الأداء، تتيح لتجار متعددين (Vendors) إدارة متاجرهم وعرض منتجاتهم بسهولة. تم تصميم المنصة لتوفير تجربة تسوق استثنائية للمستخدمين، مع لوحة تحكم إدارية شاملة، ودعم لأنظمة الدفع العالمية، بالإضافة إلى ميزات عصرية مثل البيع عبر البث المباشر (Live Commerce) وإدارة العروض والخصومات الذكية. تم بناء المشروع باستخدام أحدث التقنيات لضمان السرعة، الأمان، وقابلية التوسع. الميزات الأساسية (Core Features): نظام المتاجر المتعددة (Shops & Products): بنية تتيح لكل بائع إدارة متجره، منتجاته، ومخزونه بشكل مستقل. إدارة الطلبات وعربة التسوق (Cart & Orders): نظام متقدم وسلس لإدارة عربة التسوق، تتبع الطلبات، وتحديث حالات الشحن. بوابات دفع عالمية وآمنة: دمج متكامل مع (Stripe) و (PayPal) لمعالجة المدفوعات بكفاءة وموثوقية عالية. لوحة تحكم إدارية تفاعلية (Admin Dashboard): لوحة تحكم مزودة برسوم بيانية متقدمة (باستخدام Recharts) لتقديم إحصائيات وتقارير دقيقة للمبيعات والأداء. تجربة مستخدم تفاعلية وعصرية: واجهات مستخدم جذابة ومتحركة باستخدام (Framer Motion)، مع نظام تنبيهات تفاعلي (SweetAlert2 & Sonner). نظام البث المباشر (Live): دمج ميزات تفاعلية تسمح للبائعين بعرض المنتجات والتفاعل مع العملاء في الوقت الفعلي. دعم متعدد اللغات (Internationalization): دعم كامل لعدة لغات (باستخدام next-intl) لتوسيع نطاق استهداف المنصة للأسواق العالمية. تصدير واستيراد التقارير: إمكانية إنشاء وتصدير الفواتير والتقارير بصيغ (PDF) و (Excel) لتسهيل العمليات المحاسبية. تكامل مع الذكاء الاصطناعي: استخدام (OpenAI) لتقديم ميزات ذكية (مثل تحسين وصف المنتجات أو اقتراحات ذكية). التقنيات المستخدمة (Tech Stack): تطوير الواجهات والأساس (Frontend & Core): Next.js 16 (App Router), React 19, TypeScript. التصميم وتجربة المستخدم (UI/UX): Tailwind CSS v4, Radix UI, Framer Motion, Embla Carousel. إدارة الحالة والنماذج (State & Forms): Redux Toolkit, React Hook Form, Zod. قواعد البيانات (Database & ORM): Drizzle ORM, Neon Serverless (PostgreSQL). المصادقة والأمان (Authentication): Better Auth, Input OTP. التخزين السحابي (Cloud Storage): AWS S3 (لإدارة وتخزين الصور وملفات الوسائط بكفاءة). المدفوعات (Payments): Stripe SDK, PayPal Server SDK. القيمة المضافة والتأثير (Value Proposition): تم التركيز في هذا المشروع على كتابة كود نظيف (Clean Code) قابل للصيانة والتطوير، مع توظيف هيكلية (Micro-architecture) لتقسيم النظام إلى وحدات (Modules) مستقلة مثل (Auth, Cart, Deals, Live). يضمن هذا التصميم قدرة المنصة على استيعاب ضغط الزوار العالي (Scalability) وتقديم تجربة استخدام (UX) استثنائية وسريعة بفضل إمكانيات الجيل الجديد من Next.js 16 و React 19.
VEO AI
منصة احترافية لتوليد الفيديوهات بالذكاء الاصطناعي (SaaS) وصف المشروع: منصة Orchida AI هي أداة متطورة تم بناؤها لتكون وجهة المبدعين وصناع المحتوى الراغبين في تحويل أفكارهم النصية إلى فيديوهات سينمائية عالية الجودة باستخدام أحدث نماذج الذكاء الاصطناعي (مثل Veo 3.1). تركز المنصة على تقديم دقة بصرية مذهلة مع تحكم كامل في تفاصيل المشهد. أبرز المميزات التي قمت بتنفيذها: محرك توليد الفيديو (AI Video Engine): دمج واجهات برمجة التطبيقات (APIs) لنماذج الذكاء الاصطناعي المتقدمة لتوليد فيديوهات بدقة عالية بناءً على وصف نصي. التحكم الاحترافي في المشهد: إضافة خيارات لتحديد مدة الفيديو (4، 6، 8 ثوانٍ) ونسب العرض (Aspect Ratio) لضمان ملاءمة الفيديو لمنصات السوشيال ميديا أو اليوتيوب. هندسة الأوامر (Prompt Engineering): نظام متطور لمعالجة الأوامر النصية وتجويدها لضمان الحصول على نتائج دقيقة، سينمائية، وواقعية بعيدة عن العشوائية. واجهة مستخدم (Premium UI): تصميم واجهة عصرية وسلسة تمنح المستخدم تجربة "Dark Mode" غامرة، مع مؤثرات بصرية وتحريك (Animations) تعكس هوية المشروع التقنية. نظام إدارة الجلسات والاشتراكات: بناء نظام كامل لتسجيل المستخدمين، وحفظ الفيديوهات المولدة في سحابة خاصة للرجوع إليها في أي وقت. الأدوات والتقنيات المستخدمة: Next.js 14/15 (App Router): لتقديم أداء صاروخي وتجربة مستخدم لا تشوبها شائبة. TypeScript: لضمان استقرار النظام وبناء هيكلية برمجية قابلة للتوسع. Tailwind CSS & Modern UI Libraries: لبناء واجهات "Glassmorphism" جذابة واحترافية. AI Integration: ربط المنصة مع أقوى موديلات توليد الفيديو لضمان نتائج مبهرة (Cinematic Quality). الهدف من المشروع: تمكين المستخدمين من إنتاج محتوى مرئي احترافي في ثوانٍ معدودة، مما يقلل الوقت والجهد والتكلفة اللازمة لإنتاج الفيديوهات التقليدية، مع الحفاظ على لمسة فنية عالية الدقة
orchida
اسم المشروع: Orchida Ecosystem - منصة تعليمية وخدمية متطورة (Enterprise Grade) نظرة عامة (Overview): مشروع "أوركيد" ليس مجرد موقع ويب، بل هو نظام إدارة موارد متكامل (ERP) يجمع بين منصة تعليمية (LMS) ومنصة لتقديم الخدمات الرقمية. تم بناء المشروع باستخدام أحدث تقنيات الويب العالمية لضمان السرعة، الأمان، والسرعة الفائقة في التوسع. المميزات النوعية التي تم تنفيذها (Core Features): 1. نظام إدارة أدوار متقدم (Multi-Role RBAC System): تم تصميم المنصة لتخدم 6 أنواع مختلفة من المستخدمين، لكل منهم لوحة تحكم (Dashboard) مخصصة وصلاحيات دقيقة: المسؤول (Admin): تحكم كامل في مفاصل النظام والشركات والموظفين. المنسق (Coordinator): إدارة العمليات اليومية والتنسيق بين الأقسام. المدرب (Instructor): رفع المحتوى التعليمي، متابعة الطلاب، وإدارة الحضور. صانع المحتوى (Content Creator): إدارة الأخبار، الفعاليات، والمحتوى البصري. المستقطب (Attractor): نظام متقدم لإدارة العملاء المحتملين (Leads). المستخدم (Student/User): تجربة تعلم سلسة ومتابعة للطلبات والخدمات. 2. محرك التعليم والخدمات (LMS & Service Engine): إدارة المساقات: نظام متطور لإدارة الدورات مقسم إلى (Modules) ثم (Chapters) ثم (Content)، مع دعم تعدد الوسائط. بوابة طلب الخدمات: نظام مؤتمت لاستقبال طلبات الخدمات الرقمية وتتبع حالاتها. إدارة الأعمال (Portfolios): معرض أعمال احترافي يعرض مشاريع الطلاب والشركة بتقنيات عرض سينمائية. 3. التكامل مع الأنظمة الخارجية (Third-party Integrations): نظام الاتصال: تكامل كامل مع HotSMS لإرسال شعارات الرسائل القصيرة التلقائية، و Brevo لإدارة البريد الإلكتروني. التخزين السحابي: نظام رفع ملفات متطور باستخدام Wasabi S3 و Cloudinary و Cloudflare R2 لضمان سرعة تحميل الوسائط. التقارير والمستندات: توليد تلقائي لشهادات وتقارير بصيغة PDF و DOCX مباشرة من المتصفح. 4. تجربة المستخدم والجمالية (UI/UX Excellence): تصميم "Premium": استخدام Tailwind CSS 4 مع Framer Motion لخلق تداخلات لونية (Dynamic Color Blending) وأنيميشن يعطي شعوراً بالفخامة. لوحات بيانات تفاعلية: عرض إحصائيات حية باستخدام Recharts وجداول زمنية باستخدام FullCalendar. البنية التقنية (Tech Stack): Framework: Next.js (App Router) + React 19. Language: TypeScript (Clean & Type-safe code). Database: PostgreSQL (Neon Serverless) managed by Drizzle ORM & Prisma. Authentication: Better Auth - نظام حماية متقدم يدعم تعدد الأدوار. Styling: Tailwind CSS + Radix UI (Shadcn/UI architecture). لماذا تختار هذا المشروع كنموذج لعملي؟ إدارة البيانات الضخمة: قدرة النظام على التعامل مع مئات الجداول والعلاقات المعقدة بسلاسة.
E-Commerce Web Site
I developed a private E-Commerce store using the React framework, incorporating Tailwind CSS for styling and custom color schemes. The store includes all essential features to function as a complete e-commerce platform. To enhance the user experience, I integrated animations that add a visually appealing and modern touch to the overall design.
Meeting website
The website was built using React for the user interface, along with Tailwind CSS for fast and responsive design. It relies on Zegocloud API to provide video meeting functionalities. The site focuses on facilitating virtual meetings and leverages these technologies to deliver an efficient user experience in web-based video communications.
E-commerce Mero Shop
The website was built using React for the user interface, along with Tailwind CSS for styling. It includes features such as Google and Facebook login, a notification system, and user authentication. Context and Redux were used for state management, enhancing data structure and flow within the application. The website functions as an e-commerce platform, focusing on providing a seamless shopping experience for users with these advanced front-end development technologies.
Inventory Management
A modern web-based inventory management system developed with Next.js for a fast and interactive interface. It uses the StackAuth authentication system to secure user access and manage accounts. The system relies on a Neon cloud database (Serverless Postgres) for efficient data management, featuring a sleek and modern design built with Tailwind CSS and Shadcn/UI components. It also provides interactive user alerts through SweetAlert to enhance the user experience.
Prescripto
Prescripto is a modern e-commerce platform built with React and Tailwind CSS. It features Google and Facebook login, a personalized notification system, and advanced state management using Context and Redux—delivering a smooth and structured shopping experience.
Skills & Expertise
Technologies and tools I use to bring ideas to life.
Tools & Services
Back-End
Front-End
Let's Start a Project
Ready to bring your ideas to life? Fill out the form below or reach out via socials. I'm always open to new opportunities.