Téléchargement mantine analytics dashboard - Téléchargement du code source mantine analytics dashboard

mantine analytics dashboard

Code Source AI

UI updates and bug fixes

Télécharger

Annonces

Ajout de la page du gestionnaire de fichiers UI
Version manteuse mise à jour vers le dernier 7.14.3
Nouvelle variante en mode noir
Nouvelle variante de barre latérale, maintenant nous avons des modes complets, mini et complets

Aperçu en direct
Aperçu des composants
Moyen
Feuille de route du produit * nouveau *

À propos

Un modèle d'administration et de tableau de bord professionnel construit à l'aide de Mantine 7 qui est livré avec des centaines de composants d'interface utilisateur, de formulaires, de tables, de graphiques, de pages et d'icônes. Ce modèle est construit à l'aide de V14, React, graphiques Apex Next V14, MANTINE DATATABLE ET SHERYBOOK.

Image d'aperçu

Version précédente

La version précédente du modèle de tableau de bord, prend en charge les 13 prochains avec le routeur de pages et Mantine 6. Pour afficher la démo en direct, utilisez ce lien - Aperçu, et pour vérifier la fourche le référentiel utilisez ce lien - Version 1

Caractéristiques

Personnalisable: vous n'avez pas besoin d'être un expert pour personnaliser le modèle. Notre code est très lisible et bien documenté.
Entièrement réactif: avec la prise en charge mobile, tablette et bureau, peu importe quel appareil vous utilisez. Le tableau de bord ANTD est réactif dans tous les navigateurs.
Cross-Browser: Nos thèmes fonctionnent parfaitement avec Chrome, Firefox, Opera et Edge. Nous travaillons dur pour les soutenir.
Code propre: nous suivons strictement les directives de Ant Design pour rendre votre intégration aussi simple que possible. Tout le code est manuscrit.
Mises à jour régulières: de temps à autre, vous recevrez une mise à jour contenant de nouveaux composants, améliorations et corrections de bogues.

Pile technologique

Pour rendre ce modèle génial, j'ai utilisé les packages suivants:

Cœur

Next JS V14: Next.js est un cadre de développement Web open source créé par la société privée Vercel fournissant des applications Web basées sur React avec rendu côté serveur et génération de sites Web statiques.
Mantine V7: Mantine est une bibliothèque de composants d'interface utilisateur React. Il est construit au-dessus de React et TypeScript, et fournit une variété de composants et de crochets pour créer des applications Web haute performance.
React V18: React est une bibliothèque JavaScript frontale gratuite et open source pour la création d'interfaces utilisateur en fonction des composants.
TypeScript V5: TypeScript est un langage de programmation de haut niveau gratuit et open source développé par Microsoft qui ajoute un typage statique avec des annotations de type facultatif à JavaScript.
Storybook V7: Storybook est un outil gratuit et open-source pour développer des composants d'interface utilisateur isolément. Il est utilisé par les développeurs Web pour améliorer leur flux de travail de développement de l'interface utilisateur et créer de meilleures applications Web.
ChangeSet CLI V2: ChangeSet est un package qui aide à gérer mes versions et mes changelogs.
NextAuth V4: NextAuth.js est une bibliothèque d'authentification flexible et sécurisée qui peut être utilisée pour l'authentification côté client dans next.js.
Icônes de tableur V2: les icônes de tableur sont une bibliothèque d'icônes open source gratuite avec plus de 4 700 icônes. Les icônes sont conçues avec une esthétique moderne et conviennent à un large éventail d'applications.
MANTINE DATATABLE V7: MANTINE DATATABLE est un composant React qui peut être utilisé pour créer des interfaces utilisateur riches en données. Il s'agit d'un composant de table qui est conscient des thèmes sombres et est conçu pour l'interface utilisateur manteuse.
Lodash V4: une bibliothèque d'utilité JavaScript délivrant la cohérence, la modularité, les performances et les extras.
Apex Chart V3: S ApexCharts est une bibliothèque de cartographie JavaScript gratuite et open source qui permet aux développeurs de créer des visualisations de données interactives pour les pages Web. Il peut être utilisé pour les projets commerciaux et non commerciaux.
Dayjs V1: Day.js est une bibliothèque JavaScript qui gère les dates et les heures.
Tiptap V2: un éditeur de texte riche sans tête, sans framework et extensible, basé sur Prochemirror.
FullCalendar V6 : FullCalendar est un calendrier d'événements JavaScript avec plus de 300 paramètres. Il est open source et a un noyau gratuit.
DND-KIT V6: DND-KIT est une boîte à outils légère, modulaire et extensible pour réagir. Il est également accessible et performant.
Carrousel Embla V7: Le carrousel Embla est une bibliothèque de carrousel léger avec mouvement fluide et balayage précis.
React Simple Maps v3: un composant de diagramme de carte SVG construit avec et pour réagir.
Clerk / NextJS V4: Clerk Next.js est un emballage autour de la réaction du greffier. Il permet aux utilisateurs d'utiliser les crochets fournis par Clerk React.
React Coupnup V6: un emballage de composant React autour de CoupUp.js.

Dev

Plus joli V3: plus joli est un formateur de code qui formate automatiquement le code pour s'assurer qu'il est cohérent et facile à lire.
Husky V8: Husky est un outil qui facilite le travail avec les crochets Git. Plus joli est un formateur de code.
Lint mis en scène V15: Lint en poste ajoutera automatiquement toutes les modifications à l'engagement tant qu'il n'y a pas d'erreurs.
PostCSS V8: PostCSS est une bibliothèque JavaScript qui utilise des plugins pour transformer CSS. Il transpile CSS dans une arborescence de syntaxe abstraite, qui est ensuite représentée par des objets JavaScript.

Démarrage rapide

Télécharger

Clone ce repo git clone https://github.com/design-sparx/mantine-analytics-dashboard.git
Télécharger depuis github

Outils de construction

Vous devrez installer Node.js. Une fois Node.js installé, exécutez NPM Installer pour installer le reste des dépendances du modèle. Toutes les dépendances seront téléchargées dans le répertoire Node_Modules.

npm install

Vous êtes maintenant prêt à modifier les fichiers source et à générer de nouveaux fichiers. Pour détecter automatiquement les modifications de fichiers et démarrer un serveur Web local sur http: // localhost: 3000, exécutez la commande suivante.

npm run dev

Compiler, optimiser, minify et uglify tous les fichiers source à créer /

npm run build

Structure de fichiers

À l'intérieur du fichier zip, vous trouverez les répertoires et fichiers suivants. Les fichiers de distribution compilés et minifiés, comme à l'intérieur du fichier zip, vous trouverez les répertoires et fichiers suivants. Les fichiers de distribution compilés et minifiés, ainsi que les fichiers source sont inclus dans le package.

 mantine-analytics-dashboard/
├── .changeset
├── .github
├── .gitignore
├── .editorconfig
├── .prettierignore
├── .prettierrc
├── README.md
├── CHANGELOG.md
├── LICENSE
├── index.html
├── package.json
├── tsconfig.json
├── next.config.js
├── postcss.config.cjs
├── clerkMiddleware.ts
├── yarn.lock
├── public/
│   ├── mocks/
│   ├── _redirects
│   ├── favicon.ico
├── src/
│   ├── .changeset/
│   ├── .github/
│   ├── .husty/
│   ├── .storybook/
│   ├── .yarn/
│   ├── app/
├────── api/
├────── error.tsx
├────── error.module.css
├────── global.css
├────── layout.tsx
├────── loading.tsx
├────── not-found.tsx
├────── page.module.css
├────── page.tsx
│   ├── components/
│   ├── hooks/
│   ├── layout/
│   ├── providers/
│   ├── public/
│   ├── routes/
│   ├── styles/
│   ├── theme/
│   ├── types/
│   ├── utils/
└──

Contribution et soutien

Je salue tous les développeurs et passionnés de contribuer à la croissance de notre modèle de tableau de bord d'administration open source. La contribution est un processus collaboratif qui nous permet de renforcer collectivement les capacités et la qualité du modèle. Pour commencer:

Fourchez le référentiel: fourchez le référentiel GitHub du modèle sur votre propre compte GitHub.
Clone the Fork: Clone le référentiel fourchu à votre machine locale à l'aide de Git.
Créez une branche: créez une nouvelle branche pour vos contributions pour garder la base de code principale intacte.
Implémentez les modifications: apportez vos modifications souhaitées, ajoutez de nouveaux composants ou affinez les fonctionnalités existantes.
Commissez et poussez: engagez vos modifications à la nouvelle branche et poussez-les à votre fourche GitHub.
Soumettez une demande de traction: Soumettez une demande de traction de votre référentiel fourchu au référentiel de modèle principal. Vos modifications seront examinées et potentiellement fusionnées.

Reportation des problèmes et de la recherche d'aide

Si vous rencontrez des problèmes ou avez besoin d'aide lors de l'utilisation du modèle, nous sommes là pour vous aider:

Tracker de numéro: visitez l'onglet Problèmes du référentiel GitHub pour signaler les bogues, suggérer des améliorations ou demander des éclaircissements sur les aspects du modèle.
Interaction communautaire: s'engagez avec la communauté du modèle sur des plateformes telles que les discussions GitHub pour l'assistance, les conseils et les informations.

Invitation à explorer et à utiliser

Le modèle de tableau de bord Mantine et Next.js n'est pas seulement une fin; C'est un début - un point de départ pour votre voyage créatif. Que vous soyez un développeur chevronné à la recherche d'un lancement rapide ou d'un passionné de l'apprentissage des pratiques de développement modernes, ce modèle est votre toile.