Free Admin Dashboard

Tableau de bord d'administration gratuit développé en React.js, Tailwind CSS et TypeScript

Le tableau de bord d'administration gratuit est un modèle d'administration open source conçu dans Figma et développé dans React.js, Tailwind CSS et TypeScript. Mon objectif dans ce projet est de fournir un modèle de tableau de bord de conception haut de gamme et de haute qualité en suivant les meilleures pratiques React.js. Ce tableau de bord d'administration React est créé à l'aide de modèles de conception React.js avancés tels que des modèles de conception de composants contrôlés et non contrôlés, des modèles de hooks personnalisés, des modèles de composants de mise en page, des modèles de composition de composants, des modèles de conception de composants composés et bien d'autres… Il s'agit principalement d'un modèle de tableau de bord de commerce électronique, mais à l'avenir, si le référentiel devient populaire, je l'étendrai à davantage de niches. Le tableau de bord est entièrement réactif et est disponible en téléchargement gratuit .

Conception du tableau de bord d'administration

La conception du tableau de bord d'administration est conçue dans Figma en suivant les pratiques fondamentales et les meilleures pratiques pour la conception de l'interface utilisateur du tableau de bord de commerce électronique. Mon objectif est de le créer aussi simple que possible et avec une interface utilisateur premium. La conception complète est créée en pensant à l’utilisateur final. Vous pouvez utiliser le modèle de panneau d'administration pour tout type de site Web de commerce électronique, il vous suffit de le connecter au back-end et tout fonctionnera sans problème. Le panneau d'administration du site Web de commerce électronique est entièrement open source , ce qui signifie que vous pouvez facilement ajouter plus de fonctionnalités si vous le souhaitez. Le code source du modèle de tableau de bord d'administration est écrit en suivant les meilleures pratiques, vous n'aurez donc aucun problème avec celui-ci. Le tableau de bord React est entièrement personnalisable et flexible, vous pouvez donc facilement vous l'approprier. La conception du panneau d'administration est conçue en suivant les meilleures pratiques de conception telles que la hiérarchie visuelle, la proximité, les espaces blancs, la cohérence, le contraste et bien d'autres encore…

Caractéristiques

• Conception de haute qualité : conception de haute qualité créée en pensant à l’utilisateur final.
• Conception réactive : mise en page entièrement réactive qui fonctionne de manière transparente sur les ordinateurs de bureau, les tablettes et les appareils mobiles.
• Graphiques et graphiques dynamiques : visualisation interactive des données à l'aide des bibliothèques Chart.js
• Composants modulaires : composants réutilisables et personnalisables pour différentes sections du tableau de bord.
• Personnalisation du thème : prise en charge des modes clair et sombre avec des thèmes personnalisables.
• Tableaux de données : tableaux de données avancés avec tri, filtrage et pagination.

Technologies utilisées

• React.js : bibliothèque JavaScript pour créer des interfaces utilisateur.
• Redux Toolkit : bibliothèque de gestion d'état pour les applications React.
• React Router : bibliothèque de routage dans les applications React.
• Chart.js : bibliothèque de graphiques JavaScript simple mais flexible.
• Tailwind CSS : un framework CSS axé sur les utilitaires pour créer rapidement des interfaces utilisateur personnalisées.
• TypeScript : un langage pour JavaScript à l'échelle des applications.
• Nanoid : un petit générateur d'ID de chaîne unique, sécurisé, convivial et convivial pour les URL
• Icônes React : bibliothèque d'icônes avec de nombreuses icônes
• Figma : outil de conception Web puissant.

Si vous aimez le projet de tableau de bord d'administration gratuit, donnez-lui une étoile sur GitHub pour soutenir le projet et donnez-moi la motivation pour ajouter de nombreuses autres fonctionnalités intéressantes.

Instructions vidéo pour exécuter l'application

Voici un lien YouTube pour les instructions vidéo pour exécuter l'application : https://www.youtube.com/watch?v=cydXOmMhbtQ

Instructions

1. Pour exécuter l'application, vous devez d'abord télécharger et installer Node.js et npm sur votre ordinateur. Voici un lien vers le tutoriel qui explique comment les installer : https://www.youtube.com/watch?v=4FAtFwKVhn0. Voici également le lien où vous pouvez les télécharger : https://nodejs.org/en

2. Lorsque vous installez tous les programmes dont vous avez besoin sur votre ordinateur, vous devez télécharger le projet. Lorsque vous téléchargez le projet, vous devez l'extraire.

3. Après avoir extrait le projet, vous devez ouvrir le dossier du projet dans le terminal de votre choix et écrire :

 npm install

4. Pour exécuter le projet, écrivez :

 npm run dev

5. Pour voir votre application, accédez au navigateur de votre choix et écrivez dans l'URL : http://localhost:5173