React Learning Lab

مشروع React Learning Lab هو موقع ويب تعليمي تفاعلي تم بناؤه باستخدام Next.js (App Router) وReact لعرض مجموعة واسعة من تقنيات الواجهة الأمامية الحديثة ومكوّنات واجهة المستخدم. يهدف هذا المشروع إلى أن يكون بيئة تعلّم تطبيقية تعتمد على تنفيذ خصائص واقعية عبر مكوّنات صغيرة ومجزأة توضّح كيفية إدارة الحالة، والتعامل مع النماذج، وعرض واجهات مشروطة، والتفاعل مع المستخدم.

تم تصميم الواجهة باستخدام Tailwind CSS لضمان مظهر بصري أنيق ومتجاوب مع جميع أحجام الشاشات. كما تم بناء كل جزء من الصفحات كمثال عملي على بنية المكوّنات، ما يجعل المشروع مرجعًا مميزًا لأي شخص يتعلّم React أو يراجع أفضل ممارسات Next.js.

ميزات رئيسية ومكوّنات تم استعراضها

• رأس الصفحة: شريط علوي بسيط وأنيق يبرز بنية التخطيط المعيارية

• قائمة الأشخاص: عرض بطاقات مستخدمين بالأسماء يوضّح عرض القوائم وتمرير البيانات عبر الـ props

• قائمة أزرار جانبية: عناصر تحكم جاهزة للربط والتفاعل المستقبلي

• قائمة المهام: عرض مهام ثابتة كمثال للتعامل مع البيانات الصغيرة

• النماذج والتعامل مع المدخلات:

نموذج معلومات شخصية

نموذج طلب قرض مع التحقق من صحة الإدخال

عرض تنبيه/نافذة محلية عند حدوث خطأ

• لوحة النقاط: تحديث لحظي للقيم يقدّم مثالًا على الربط ثنائي الاتجاه للحالة

• محاكاة سلة التسوق: تعديل كميات المنتجات باستخدام منطق الحالة

• متتبّع الطلبات: انتقال الطلبات من “قيد الانتظار” إلى “مكتملة” باستخدام مؤقتات تشبه العمليات غير المتزامنة

كل التفاعلات تتم محليًا على الواجهة باستخدام useState لعرض التحديثات فورًا من دون الحاجة إلى خادم أو تحميل بيانات خارجي.

سلوك البيانات وطريقة تخزينها

تعتمد جميع البيانات المعروضة حاليًا على بيانات محلية داخل المكوّنات. لا يوجد:

• خادم أو واجهات API

• قاعدة بيانات

• تخزين دائم بعد تحديث الصفحة

هذا يجعل المشروع نموذجًا نقيًا لإمكانيات الواجهة الأمامية فقط، مع قابليته للتوسّع بسهولة لاحقًا.

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

• Next.js (App Router)

• React (مكوّنات عميل + JSX)

• Tailwind CSS للتصميم

• JavaScript ES6+

• بنية قابلة للتوسّع باستخدام إدارة حالة مستقبلية أو Context

رؤية المشروع وإمكانات التطوير

React Learning Lab is an educational, interactive web project built with Next.js (App Router) and React to showcase a wide range of modern front-end techniques and UI components. The main goal of the site is to serve as a hands-on learning environment where various real-world features are implemented through small, modular components that demonstrate state management, form handling, conditional UI, and user interaction. The interface is designed using Tailwind CSS, ensuring a visually clean and responsive layout suitable for all screen sizes. Each page section acts as a practical example of component-based architecture, making this project an excellent reference for anyone learning React or reviewing Next.js best practices. Key Features & Components Demonstrated • Header: Simple and elegant banner showcasing modular layout structure • Main People List: Display of user cards with names, demonstrating list rendering and props handling • Side Button Menu: UI controls ready for future interaction wiring • Task List: Hard-coded task visualization for managing small data lists • Forms & Input Handling: Personal information form Loan request form with validation Local modal-like error display • Scoreboard: Real-time value updates demonstrating bidirectional data binding • Shopping Cart Simulation: Adjusting product quantities using state-based cart logic • Request Tracker: Pending-to-completed transitions with timers simulating asynchronous operations All interactions are handled entirely on the client, using useState to update UI instantly without needing a backend. Data Behavior & Storage All displayed data is mocked locally within components. There is: • No backend • No server-side database • No persistent storage beyond the running session This structure demonstrates pure front-end skill while remaining ready for expansion. Technologies Used • Next.js (App Router) • React (JSX + Client Components) • Tailwind CSS for styling • JavaScript ES6+ • Context-ready architecture for future scalability Project Vision & Development Potential