Awesome GitHub RepositoriesReact Application Development

This project is a pre-configured project foundation for building scalable web applications. It serves as a React application boilerplate and component scaffold designed to provide a scalable architecture and a foundation for long-term growth. The setup is characterized by an offline-first web framework that maintains application availability without an active network connection. It includes an internationalized UI foundation with integrated translation tooling and a modular CSS-in-JS setup for scoped, component-level styling. The boilerplate covers broader capability areas including automate

This project is an educational course and a collection of frontend projects designed to teach the core concepts and architecture of the React library. It serves as a practical guide for building modular user interfaces through a series of hands-on project builds. The repository includes a technical implementation of a custom React renderer, demonstrating how to transform JSX elements into a document object model. It further provides examples of state management, specifically illustrating how to share global data across a component tree using the provider pattern to avoid property drilling. T

This project is a comprehensive full-stack web development course delivered through a video-based curriculum. It provides a structured learning path that integrates frontend and backend technologies, guiding users from fundamental concepts to advanced implementation across a multi-language stack. The curriculum distinguishes itself through a progressive layering of complexity, combining a React-based frontend course with a Python and Django backend course. It emphasizes professional workflow integration, featuring dedicated tutorials on Git and GitHub for version control and collaborative cod

Frontend Workshop from HTML/CSS/JS to TypeScript/React/Redux

WasmEdge is an extensible WebAssembly runtime that executes WebAssembly bytecode in a secure sandbox for cloud, edge, and embedded applications. It functions as a multi-language compiler, compiling applications written in Rust, JavaScript, Go, and Python into WebAssembly bytecode for sandboxed execution, and as a server-side JavaScript runtime that runs JavaScript programs with ES6 modules, NPM packages, and Node.js-compatible APIs. The runtime also serves as an AI inference runtime, executing AI models from JavaScript using WASI-NN plug-ins for inference tasks on personal devices and edge har

This project is a pre-configured development environment and project boilerplate for building web applications with React, Redux, and React-Router. It provides a standardized project layout and toolchain to accelerate application bootstrapping. The project implements a feature-based architecture template, which uses a modular directory organization to group components, state, and logic by application feature rather than by technical file type. The toolchain includes a frontend configuration for compiling, linting, and bundling JavaScript and Sass assets, alongside a JavaScript unit testing s

This project is a learning course and instructional resource for React frontend development. It consists of a structured curriculum, architectural guides, and a library of reference materials designed to teach the construction of user interfaces and web applications. The repository provides a collection of project implementations, including e-commerce stores and CRUD applications, to serve as reference architectures. It includes curated lessons and code examples that focus on implementing state management and type safety patterns. The materials cover frontend architecture patterns, the integ

This is a browser-based Tetris game built with React, using Redux and Immutable.js to manage all game state in a single immutable store. The application renders the game board, next-block preview, and score display as React components, with state transitions that are predictable and support time-travel debugging through the Redux DevTools Extension. The game distinguishes itself through several integrated capabilities. It automatically adapts between keyboard and touch controls based on the user's input device, with configurable repeat rates for responsive gameplay. A persistence layer serial

React 360 is a framework for building immersive virtual reality experiences that run in a web browser using a declarative React component model. It functions as a browser-based VR platform and a WebGL VR renderer, enabling developers to create 360-degree panoramic and stereoscopic content without requiring native code installation. The framework provides a declarative VR component library that describes VR scenes as nested React components, with props mapping to 3D objects, lights, and camera positions. It handles user input from VR controllers, gaze tracking, and mouse events through a unifi

react-pxq is a React Redux boilerplate and state-driven UI framework designed for building single-page applications. It functions as a starter project template that combines a client-side routing system with global state management to synchronize data across a component hierarchy. The project implements a code-split web application architecture that uses lazy loading to reduce initial bundle sizes. It integrates a navigation system that maps URL paths to components without triggering full page reloads. The framework covers centralized state management through a global store and action-based

GraphQL Editor is a collaborative workspace platform for designing, editing, and managing GraphQL schemas. It provides an interactive graph-based visual editor that lets teams create and explore schemas without writing code, alongside a full-featured Monaco text IDE with real-time syntax validation. The platform supports AI-powered schema generation from natural language prompts, federated schema composition that visualizes type merging across subgraphs, and AST-level schema comparison that highlights structural differences between versions. The platform distinguishes itself through its bidir

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

هذا المستودع عبارة عن معرض للمشاريع المرجعية المستخدمة لتوضيح تطوير واجهات المستخدم التفاعلية وصفحات الويب الديناميكية باستخدام مكتبة React. يوفر مجموعة من أمثلة التطبيقات العملية التي تركز على البنية القائمة على المكونات وتطوير الواجهة الأمامية. تعمل المشاريع كعروض توضيحية لتنسيق البيانات العالمية والمحلية باستخدام الخطافات (hooks)، والسياق (context)، والمخفضات (reducers). تتضمن عينات لجلب البيانات البعيدة لملء القوائم والمعارض الديناميكية، بالإضافة إلى تطبيقات للتنقل عبر صفحات متعددة وعروض ديناميكية لا تتطلب تحديث المتصفح. تغطي المجموعة مجموعة واسعة من إمكانيات الواجهة الأمامية، بما في ذلك تصميم مكونات واجهة المستخدم التفاعلية مثل النوافذ المنبثقة وأشرطة التمرير، وإدارة حالة التطبيق المعقدة، ودمج واجهات برمجة التطبيقات الخارجية.

هذا المشروع عبارة عن قالب صفحة هبوط Next.js ومجموعة أدوات واجهة مستخدم React مصممة لعرض منتجات البرمجيات والمشاريع مفتوحة المصدر. يعمل كأساس لموقع تسويق مهني وقالب موقع Tailwind CSS لبناء واجهات ويب حديثة. يوفر إطار العمل تخطيطات ومكونات متخصصة لعروض المشاريع مفتوحة المصدر، وصفحات هبوط SaaS، ولوحات تحكم المسؤول. يتضمن مجموعة من المكونات المتجاوبة وأدوات التنسيق التي تسمح بتخصيص التصميم المرئي للألوان والخطوط والتخطيطات. يغطي سطح القدرة مجموعة متنوعة من عناصر واجهة المستخدم، بما في ذلك الرسوم المتحركة القائمة على التمرير، ومخططات تصور البيانات، والمكونات التفاعلية، ودوائر المحتوى. تدعم البنية العرض من جانب الخادم، والتوجيه القائم على الملفات، وخط أنابيب محتوى قائم على markdown لفصل المحتوى عن منطق التطبيق.

هذا المشروع عبارة عن مورد تعليمي شامل ودليل تعليمي لتعلم React ونظام هندسة الواجهة الأمامية الأوسع. يعمل كدورة تدريبية منظمة تغطي أساسيات بناء واجهات المستخدم من خلال معمارية قائمة على المكونات. يوفر المشروع أدلة متخصصة حول تنسيق بيانات التطبيق عبر إدارة حالة Redux، ودمج وتغيير البيانات باستخدام GraphQL وRelay، وبناء تطبيقات الهاتف المحمول الأصلية باستخدام قاعدة كود واحدة. كما يتضمن برنامجاً تعليمياً مخصصاً للتحقق من سلوك المكون من خلال اختبار الوحدة، والعرض الضحل، وتأكيدات DOM. يغطي المحتوى مجموعة واسعة من قدرات الواجهة الأمامية، بما في ذلك تطوير تطبيقات الصفحة الواحدة، وتنفيذ التوجيه من جانب العميل، واستخدام العرض الخادم المتماثل. كما يتناول الجوانب العملية لهندسة الواجهة الأمامية، مثل إدارة دورات حياة المكونات، ومعالجة مدخلات النماذج، وتكوين أدوات بناء التطوير.

React Render Tracker is a diagnostic utility designed to monitor and analyze the rendering behavior of React applications. It functions as a developer tool that tracks component lifecycles, visualizes component hierarchies, and identifies the specific state, prop, or context changes that trigger re-renders. The tool distinguishes itself by providing deep visibility into internal framework operations, including the ability to inspect hook states and map the live component tree. It offers flexible inspection configurations, allowing developers to monitor performance through in-page overlays, br

يوفر هذا المشروع نموذجاً أساسياً لبناء تطبيقات ويب متكاملة (full-stack) تربط واجهات React الأمامية بخدمات GraphQL الخلفية. يعمل كبيئة منظمة للمطورين لتهيئة كل من مكونات العميل والخادم، مما يضمن بنية موحدة للبرمجيات القائمة على البيانات. يؤكد إطار العمل على نهج المخطط أولاً (schema-first) لتصميم واجهة برمجة التطبيقات (API)، مما يسمح بنمذجة بيانات متسقة عبر المكدس بأكمله. يتضمن قوالب مهيأة مسبقاً تدمج المصادقة وقدرات الاشتراك في الوقت الفعلي، إلى جانب برمجيات وسيطة معيارية لإدارة معالجة الطلبات وتحويل البيانات. تؤتمت مجموعة الأدوات سير عمل التطوير الشائعة، بما في ذلك إدارة مخطط قاعدة البيانات، وتنفيذ الخادم المحلي، وهيكلة المشروع. تم تصميم هذه النصوص البرمجية وهياكل الدليل الموحدة لتسريع إعداد الخدمات الجديدة مع الحفاظ على أنماط المجتمع القياسية لجلب البيانات، وتطبيع الحالة المحلية، وتصحيح أخطاء واجهة برمجة التطبيقات.

هذا المشروع عبارة عن مكون شبكة بيانات عالي الأداء لـ React مصمم لعرض مجموعات البيانات الكبيرة داخل واجهة نمط جدول البيانات. يوفر إطار عمل لعرض المعلومات الجدولية المهيكلة مع تمكين تفاعلات معقدة قائمة على الخلايا ومهام إدارة البيانات. يتميز المكون بدعمه لسير عمل التحرير الشبيه بجدول البيانات، بما في ذلك التنقل القائم على لوحة المفاتيح والقدرة على حقن مكونات مخصصة في خلايا فردية. يمكن للمستخدمين إدارة تخطيط الشبكة ديناميكياً عن طريق تغيير حجم الأعمدة وتنظيم الرؤوس، مما يضمن تكيف الواجهة مع احتياجات تصور البيانات المحددة. تتضمن الشبكة قدرات للتعامل مع كميات كبيرة من المعلومات من خلال العرض في النوافذ (windowed rendering) والتحميل الكسول، والتي تحافظ على الأداء عن طريق معالجة المجموعة الفرعية المرئية فقط من البيانات. كما توفر تحكماً إلزامياً من خلال مراجع المكونات، مما يسمح بالتلاعب البرمجي بمواضع التمرير وحالات التحديد.

هذا المشروع هو مورد تعليمي مختار مصمم لمساعدة المطورين على ممارسة تطوير الويب للواجهة الأمامية من خلال مجموعة من خمسين تحدياً برمجياً متميزاً. يوفر منهجاً منظماً يركز على بناء تطبيقات وظيفية باستخدام React وتقنيات الويب الساكنة الحديثة، ويقدم ملخصات للمشاريع ومخططات توجيهية تساعد المتعلمين خلال تنفيذ واجهات ويب متنوعة. تتميز المجموعة بالتركيز على النماذج الأولية الكاملة (full-stack) وأنماط التكامل الواقعية. بدلاً من التركيز على عناصر واجهة المستخدم المعزولة، تتطلب المشاريع دمج خدمات خارجية، بما في ذلك أنظمة إدارة المحتوى بدون رأس (headless CMS)، وواجهات برمجة التطبيقات الخارجية، وقواعد البيانات السحابية. من خلال تكرار وظائف المنصات الشهيرة وبناء أدوات تفاعلية، يكتسب المطورون خبرة في إدارة الحالة المعقدة، والمصادقة، ومزامنة البيانات عبر الجلسات. يغطي المنهج نطاقاً تقنياً واسعاً، بما في ذلك البنية القائمة على المكونات، ومعالجة النماذج التعريفية، وتوليد المواقع الساكنة. كما يتضمن مهاماً عملية مثل تصور البيانات الجغرافية المكانية، وإدارة أصول الوسائط، ومعالجة المدفوعات، وتنفيذ وظائف البحث. تم تصميم هذه التمارين لمحاكاة سير عمل التطوير المهني، بما في ذلك استخدام توليد البيانات الوهمية والاختبار الآلي لضمان موثوقية التطبيق. يعمل المستودع كدليل شامل لأولئك الذين يتطلعون إلى بناء محافظ مهنية من خلال توثيق التحديات التقنية والنتائج. تم تنظيمه لمساعدة المبرمجين على الانتقال من تصميم الواجهة الأساسي إلى تطبيقات الويب المعقدة القائمة على البيانات.