Awesome GitHub RepositoriesUI Component Composition

Arco Design est une bibliothèque de composants UI React et un framework de système de design utilisé pour construire des interfaces web professionnelles. Il fournit une collection d'éléments visuels et de mises en page pré-construits conçus pour maintenir un langage de design cohérent à travers les applications. Le système dispose d'un moteur de thématisation basé sur des jetons (tokens) qui utilise des variables de design hiérarchiques et des variables CSS pour permettre une personnalisation visuelle granulaire. Cela permet la modification des styles globaux et au niveau des composants via un éditeur de thème dédié ou un loader pour aligner l'interface avec des identités de marque spécifiques. Le framework prend en charge le développement d'UI d'entreprise en fournissant des outils pour la gestion de système de design et un dépôt centralisé pour stocker et distribuer des composants métier réutilisables. Ces capacités facilitent l'assemblage de mises en page fonctionnelles et le partage de modules d'interface personnalisés à travers plusieurs projets.

Vuesax est un framework frontend et une bibliothèque de composants UI pour les applications Vue.js. Il fournit un système de conception personnalisable et un ensemble d'éléments d'interface utilisateur pré-stylisés conçus pour accélérer le développement d'interfaces web. Le projet se distingue par une boîte à outils visuelle thématisable qui prend en charge les mises à jour de couleurs dynamiques et la personnalisation de style côté serveur pour maintenir l'identité de marque. Il dispose également d'un composant de tableau de données spécialisé avec un support intégré pour l'édition de cellules en ligne et le traitement côté serveur pour la pagination, le filtrage et le tri. La bibliothèque couvre une large surface de capacités UI, incluant un système de grille responsive à douze colonnes, des éléments de formulaire complets et divers outils de mise en page comme des cartes de contenu et des listes repliables. Elle inclut également des utilitaires de navigation tels que des barres latérales et des fils d'ariane, ainsi qu'un éventail de superpositions incluant des boîtes de dialogue modales, des notifications système et des infobulles.

Material Kit React est un template de tableau de bord pour les applications React construites avec Material UI. Il fournit une base typée pour développer des interfaces administratives et des tableaux de bord de gestion en utilisant TypeScript. Le projet inclut des flux d'authentification pré-configurés pour la gestion des identités, avec des intégrations spécifiques pour l'authentification unique (SSO) Auth0 et la gestion de session Firebase. Il couvre l'échafaudage d'applications et le prototypage d'interface utilisateur d'entreprise via des mises en page pré-conçues pour les paramètres système et l'administration des utilisateurs. Le système utilise un système de jetons de conception centralisé pour la personnalisation des thèmes et distribue l'état via des fournisseurs de contexte.

Ce projet est l'interface web de Home Assistant, servant de tableau de bord de gestion centralisé pour surveiller et contrôler les appareils domotiques connectés et les services d'automatisation. Il fournit un panneau de contrôle graphique pour envoyer des commandes aux appareils intelligents et visualiser la télémétrie en temps réel des réseaux domotiques. L'interface facilite l'orchestration des appareils IoT et la visualisation de la domotique, permettant la surveillance des capteurs et actionneurs pour suivre les conditions environnementales et de sécurité. Il intègre divers matériels et services domotiques dans une interface utilisateur unifiée unique. Le système incorpore un rendu de tableau de bord dynamique pour la configuration de la disposition et utilise des mises à jour basées sur WebSocket pour pousser les changements d'état des appareils en direct vers le navigateur. Il gère en outre la navigation via la gestion des routes côté client et synchronise les données via une gestion d'état centrale.

Ce dépôt est une galerie de projets de référence utilisés pour démontrer le développement d'interfaces utilisateur interactives et de pages web dynamiques en utilisant la bibliothèque React. Il fournit une collection d'exemples d'applications pratiques axés sur l'architecture basée sur les composants et le développement frontend. Les projets servent de démonstrations pour coordonner les données globales et locales en utilisant des hooks, context et reducers. Ils incluent des échantillons pour récupérer des données distantes afin de peupler des listes et galeries dynamiques, ainsi que des implémentations de navigation multi-pages et de vues dynamiques qui ne nécessitent pas de rafraîchissement du navigateur. La collection couvre un large éventail de capacités frontend, incluant le design de composants UI interactifs comme des modales et des curseurs, la gestion d'état d'application complexe et l'intégration d'API externes.

Platform est un framework pour construire des applications de back-office et des tableaux de bord administratifs en utilisant Laravel. Il fonctionne comme un framework d'interface utilisateur piloté par schéma et un générateur CRUD qui construit automatiquement des interfaces de gestion de base de données, des formulaires de saisie et des règles de validation à partir de définitions de modèles programmatiques. Le projet se distingue par un kit d'interface utilisateur backend complet qui prend en charge la capture de données avancée, y compris le mappage de coordonnées géographiques, les matrices de données JSON tabulaires et le suivi des métadonnées marketing. Il dispose d'un système robuste de contrôle d'accès basé sur les rôles pour gérer la visibilité des ressources et la protection des routes, parallèlement à une implémentation de recherche plein texte globale qui indexe les données à travers plusieurs modèles. La plateforme couvre un large éventail de capacités, y compris le chargement de données asynchrone, les systèmes de notification multicanaux et une bibliothèque de composants de formulaire spécialisés pour la gestion de texte riche et de fichiers. Elle fournit également des outils pour la visualisation de données via l'agrégation de modèles et la création de graphiques, ainsi que des utilitaires pour le rafraîchissement partiel de page afin de simuler une expérience d'application monopage. Les options d'intégration permettent la connexion de contrôleurs existants et de templates hérités pour faciliter une migration progressive des fonctionnalités vers le framework.

Il s'agit d'un framework d'interface utilisateur ASP.NET Core et d'une bibliothèque de composants Blazor conçus pour construire des applications web. Il fournit une collection de blocs de construction UI réutilisables et de composants web standardisés centrés sur le système de design Fluent UI. La boîte à outils dispose d'un système de jetons de design pour personnaliser les styles visuels et la personnalisation afin de maintenir la cohérence de l'interface. Elle inclut un composant de grille de données haute performance capable de rendre de grands jeux de données récupérés de manière asynchrone depuis des sources API distantes. Le framework couvre un large éventail de besoins d'interface, incluant un système de notification centralisé pour gérer les toasts, les infobulles et les boîtes de dialogue. Il fournit également un support intégré pour les icônes système et les emojis afin d'assurer un langage visuel cohérent et l'accessibilité à travers l'application.

i-hate-regex is a suite of interactive utilities for constructing, validating, configuring, and visualizing regular expressions. It provides a specialized environment for regular expression construction and debugging, allowing users to build complex patterns and verify matching behavior through interactive testing. The project features a regular expression generator with a real-time matching preview and a visual representation tool that displays the logical structure of a pattern. It also includes a curated library of standardized patterns for common data formats, including email addresses, I

ng-alain is an Angular admin dashboard framework designed for building enterprise administrative interfaces. It provides a set of high-density, pre-built UI components and scaffolding to construct complex, data-heavy administrative views. The framework includes a themeable layout system for creating responsive admin panels that adapt to different screen sizes and support both left-to-right and right-to-left text directions. It is built as a multilingual UI framework with integrated support for localizing application content and labels for global users. The project covers broad capabilities i

ng-alain est un framework de tableau de bord d'administration Angular et un kit d'interface utilisateur d'entreprise conçu pour construire des interfaces administratives. Il sert de framework web internationalisé et de modèle de tableau de bord thématisé pour créer des applications web d'entreprise. Le framework fournit une base pour des tableaux de bord et des mises en page d'affaires professionnels utilisant la bibliothèque de composants NG-ZORRO. Il inclut un support natif pour la traduction multilingue et les orientations de mise en page de droite à gauche pour soutenir des audiences mondiales. Le projet couvre la construction d'interfaces administratives réactives et la personnalisation des thèmes visuels pour correspondre aux exigences de la marque de l'entreprise. Il prend également en charge l'empaquetage des artefacts de build frontend dans des conteneurs isolés pour un déploiement cohérent à travers les environnements d'hébergement.

Gestalt est une bibliothèque de composants d'interface utilisateur React typée et un système de conception. Elle fournit une collection d'éléments d'interface réutilisables et de jetons de conception qui suivent les normes d'accessibilité internationales pour assurer la convivialité pour les personnes ayant des besoins divers. Le framework inclut un système de mise en page web responsive avec des points de rupture définis et des conteneurs de grille qui adaptent les interfaces pour les appareils de bureau, mobiles et tablettes. Il dispose d'une suite de composants internationalisée qui prend en charge plusieurs langues, des schémas de couleurs régionaux et des orientations de texte de droite à gauche. La bibliothèque couvre une large gamme de capacités d'interface, y compris des affichages en grille et en maçonnerie flexibles avec virtualisation pour un rendu haute performance, des éléments de formulaire complets et des systèmes de navigation. Elle fournit également des outils pour la communication de l'état du système via des alertes et des bannières, des superpositions contextuelles comme des modales et des popovers, et des visualisations de données accessibles pour les métriques et les tendances. Le système utilise des déclarations TypeScript officielles pour assurer l'intégrité des données et prévenir les erreurs d'exécution pendant le développement.

radzen-blazor est une bibliothèque de composants UI pour les applications Blazor, fournissant une collection d'éléments d'interface natifs incluant des grilles de données, des graphiques et des composants de planification. Elle inclut une suite de visualisation de données pour rendre des jeux de données complexes via des graphiques interactifs et des cartes thermiques, ainsi que des outils de mise en page web réactifs pour garantir que les interfaces s'adaptent aux différentes tailles et orientations d'écran. La bibliothèque propose plusieurs implémentations de systèmes de design, incluant un framework Fluent UI et un kit UI Material Design. La personnalisation visuelle est prise en charge par la personnalisation dynamique des thèmes et la configuration de la marque, permettant la modification des couleurs, de la typographie et le basculement entre les styles clair et sombre au moment de l'exécution. Le projet couvre un large éventail de capacités de construction d'interface et de gestion de données. Cela inclut un concepteur d'interface visuelle et la génération de pages basées sur des modèles pour assembler des mises en page, ainsi que des outils pour créer des interfaces de gestion de données avec tri, filtrage et validation. Il fournit également une gestion avancée des entrées de formulaire et une prise en charge de la conception de tableaux de bord d'entreprise. Le framework implémente les normes d'accessibilité web via la conformité ARIA et la navigation au clavier, et prend en charge les configurations de mise en page de droite à gauche pour les applications multilingues.

Ce projet est un guide complet de développement front-end et une feuille de route conçue pour aider les ingénieurs à maîtriser les compétences et les normes professionnelles requises pour le développement web moderne. Il sert de référence technique pour maîtriser HTML, CSS et JavaScript, offrant des parcours d'apprentissage structurés et une carte des compétences professionnelles nécessaires pour passer de débutant à ingénieur web professionnel. La ressource fonctionne comme un répertoire catégorisé et un aperçu de l'écosystème JavaScript. Elle répertorie les frameworks, bibliothèques et utilitaires standards de l'industrie, offrant des recommandations spécifiques pour la gestion d'état, les frameworks CSS et les générateurs de sites statiques. Le guide couvre un large spectre de capacités d'ingénierie, incluant l'architecture UI, l'optimisation des performances web et l'audit d'accessibilité. Il fournit également des conseils sur l'automatisation des builds, les stratégies de déploiement et la sélection d'outils de développement pour les flux de travail professionnels.

Ce projet est un modèle de portfolio de développeur conçu pour les ingénieurs logiciels afin d'établir une présence professionnelle en ligne. Il sert de site web structuré pour présenter les références techniques, l'expérience professionnelle, les compétences et les certifications académiques. La plateforme dispose d'un tableau de bord d'activité dynamique qui synchronise les données en temps réel depuis GitHub, important automatiquement les pull requests, les issues et les activités de projet. Elle inclut également une capacité d'hébergement de CV dédiée qui intègre un lecteur PDF directement dans le navigateur. Les utilisateurs peuvent gérer leur image de marque personnelle via la personnalisation des thèmes visuels, utilisant des palettes de couleurs prédéfinies et l'injection de styles basée sur les thèmes pour modifier l'apparence du site. Le site est construit en utilisant une composition d'UI basée sur des composants et sert des actifs statiques via un réseau de diffusion de contenu (CDN).

winjs est une boîte à outils d'interface utilisateur de navigateur et une bibliothèque de composants JavaScript conçue pour construire des applications web. Elle fournit un ensemble de composants et d'utilitaires haute performance avec une prise en charge native du tactile, du clavier et de l'accessibilité. Le projet propose un normalisateur d'événements multi-navigateurs qui crée des événements de pointeur et de focus synthétiques pour assurer un comportement d'entrée cohérent à travers différents navigateurs. Il inclut également un framework de localisation web pour gérer les traductions multilingues et les formats régionaux en utilisant des fichiers de ressources clé-valeur. La boîte à outils couvre un large éventail de capacités, incluant un pipeline d'assets frontend pour compiler le code source, une synchronisation de l'interface utilisateur pilotée par l'état pour optimiser les mises à jour du DOM, et un système de style complet pour la typographie, les contrôles de formulaire et les couleurs d'accentuation dynamiques. Elle fournit également des utilitaires pour la gestion globale des événements, les animations de transition d'interface et la coordination des éléments d'interface dismissibles.

Ce projet est une station de travail audio numérique (DAW) basée sur navigateur qui fournit un environnement de qualité professionnelle pour composer, arranger et éditer des pistes musicales. Il fonctionne comme un séquenceur audio complet, permettant aux utilisateurs de manipuler des signaux audio numériques et de construire des compositions musicales complexes directement dans un navigateur web. La plateforme se distingue par une architecture synchronisée dans le cloud qui stocke les projets musicaux sur des serveurs distants, garantissant que le travail créatif reste accessible et synchronisé sur plusieurs appareils. En tirant parti du navigateur comme espace de travail principal, elle facilite la collaboration à distance et fournit un environnement persistant pour la production musicale qui n'est pas lié à une seule machine. L'application utilise l'API Web Audio pour gérer le traitement du signal et la synthèse, soutenue par une interface modulaire qui réagit aux entrées utilisateur et aux événements des contrôleurs matériels. Elle intègre une mise en cache locale pour l'édition hors ligne et décharge les tâches de traitement du signal intensives vers des threads en arrière-plan pour maintenir la réactivité de l'interface pendant la lecture.

ChatGpt-Web est une application web conçue pour fournir une interface réactive pour interagir avec de grands modèles de langage. Elle fonctionne comme un tableau de bord centralisé qui permet aux utilisateurs d'échanger des prompts textuels avec des services d'IA générative tout en gérant l'historique des conversations et les ressources système via une architecture modulaire basée sur des composants. La plateforme se distingue en incorporant une couche de proxy backend qui route les requêtes client vers des fournisseurs d'intelligence artificielle externes. Cette infrastructure permet de masquer les clés API sensibles et de rediriger le trafic réseau vers des points de terminaison de service personnalisés, garantissant une connectivité sécurisée et contrôlée aux modèles génératifs. L'application inclut des outils pour gérer les flux de travail de prompt engineering via l'utilisation de modèles prédéfinis, qui aident à standardiser les interactions pour les tâches courantes. Elle prend également en charge la continuité de session et la portabilité des données en utilisant le stockage local du navigateur pour les journaux de conversation et en fournissant une fonctionnalité pour exporter l'historique des discussions pour une consultation hors ligne.

Light Bootstrap Dashboard est un framework pour construire des interfaces administratives et des backends de gestion. Il fournit une collection de composants pré-stylisés et de mises en page réactives conçus pour faciliter le développement d'applications web personnalisées et d'outils internes. Le projet se distingue par des capacités de visualisation de données intégrées, permettant le rendu de graphiques et de diagrammes interactifs pour suivre les indicateurs métier, les tendances des ventes et les modèles d'engagement des utilisateurs. Il inclut des outils spécifiques pour surveiller la performance des campagnes et l'état du système, soutenus par un système de notification piloté par les événements qui alerte les utilisateurs des événements de l'application. Le framework utilise une architecture modulaire basée sur des composants et un système de grille réactif pour garantir une image de marque visuelle et une mise en page cohérentes sur différentes résolutions d'écran. Les utilisateurs peuvent personnaliser l'interface via des options de configuration pour les schémas de couleurs et l'imagerie d'arrière-plan, tandis que des utilitaires de gestion des tâches intégrés aident à suivre la progression du projet et les flux de travail administratifs.

Ce projet est une collection organisée de ressources éducatives et de supports d'étude conçus pour aider les développeurs à se préparer aux entretiens d'ingénierie frontend. Il fournit un ensemble structuré de défis de codage, de guides conceptuels et de problèmes d'évaluation technique axés sur l'évaluation de la maîtrise de JavaScript et des normes de développement web fondamentales. Le dépôt sert de framework d'entraînement pour les entretiens techniques, offrant des exercices ciblés qui simulent des scénarios de programmation réels. En couvrant à la fois les fondamentaux du langage et les modèles de programmation fonctionnelle, le contenu aide les utilisateurs à identifier les lacunes dans leurs connaissances et à améliorer leurs capacités de résolution de problèmes sur l'ensemble de la stack frontend. Les supports sont organisés comme une ressource d'étude technique, utilisant un dépôt versionné pour gérer la documentation et les tâches de codage. Le contenu est maintenu dans un format qui prend en charge les mises à jour communautaires et le développement collaboratif.

Ce projet est une ressource éducative organisée conçue pour aider les développeurs à pratiquer le développement web frontend à travers une collection de cinquante défis de codage distincts. Il fournit un programme structuré axé sur la création d'applications fonctionnelles utilisant React et des technologies web statiques modernes, offrant des briefs de projet et des plans qui guident les apprenants à travers l'implémentation d'interfaces web diverses. La collection se distingue en mettant l'accent sur le prototypage full-stack et les modèles d'intégration réels. Plutôt que de se concentrer sur des éléments d'interface isolés, les projets nécessitent l'intégration de services externes, incluant des systèmes de gestion de contenu headless, des API tierces et des bases de données cloud. En reproduisant les fonctionnalités de plateformes populaires et en construisant des outils interactifs, les développeurs acquièrent de l'expérience dans la gestion d'états complexes, l'authentification et la synchronisation de données entre les sessions. Le programme couvre une large surface technique, incluant l'architecture basée sur les composants, la gestion déclarative des formulaires et la génération de sites statiques. Il intègre également des tâches pratiques telles que la visualisation de données géospatiales, la gestion d'actifs multimédias, le traitement des paiements et l'implémentation de fonctionnalités de recherche. Ces exercices sont conçus pour simuler des flux de travail de développement professionnels, incluant l'utilisation de génération de données fictives et de tests automatisés pour garantir la fiabilité de l'application. Le dépôt sert de guide complet pour ceux qui cherchent à construire des portfolios professionnels en documentant les défis techniques et les résultats. Il est structuré pour aider les programmeurs à passer de la conception d'interface de base aux applications web complexes et pilotées par les données.