Téléchargement Mantine Admin - Téléchargement du code source Mantine Admin

Mantine Admin

Code Source AI

1.0.0

Télécharger

Administrateur mante

Démo →

Déployez votre propre copie de ce modèle en quelques clics!

Introduction

Ce modèle a un tas de dossiers, d'exemples de code et de configurations. N'hésitez pas à les éditer ou à les supprimer, y compris cette lecture!

Personnalisez et profitez!

? Caractéristiques

Ce projet présente tous les derniers outils et bonnes pratiques en développement Web!

Cadre

⚛️ NEXT.JS - Un cadre réactif complet pour le rendu hybride et de serveur

Données récupérant

? KY - Client HTTP minuscule et élégant basé sur l'API Fetch du navigateur
✳️ React Query - crochets pour la récupération, la mise en cache et la mise à jour des données asynchrones dans React

Gestion de l'État et crochets

? Zustand - une petite solution de gestion des Bearbones rapide et évolutive à l'aide de principes de flux simplifiés
? React-Use - Collection de crochets réactifs essentiels

Système de conception et animations

? Mantine-UI - Une bibliothèque de composants simples, modulaires et accessibles qui vous donne les blocs de construction pour créer vos applications React
Icônes de tableur - Une collection d'icônes populaires pour réagir des projets

Validation du formulaire

? Formulaire React Hook - Formes performantes, flexibles et extensibles avec validation facile à utiliser
ZOD - Validation de schéma de type TypeScript avec inférence de type statique

Tests

? Jest - Un charmant cadre de tests JavaScript en mettant l'accent sur la simplicité
? Bibliothèque de tests - Utilitaires de test simples et complets qui encouragent les bonnes pratiques de test

Modèles de conception

⛔ Eslint - Trouvez et résolvez des problèmes dans votre code JavaScript
? Plus joli - un formateur de code d'opinion, prenant en charge plusieurs langues et éditeurs de code
? Husky - les crochets git indigènes modernes ont rendu facile
? Engagement de peluche - Exécutez des liners contre les fichiers GIT mis en scène et ne laissez pas? glisser dans votre base de code
? commitlint - aide votre équipe à adhérer à une convention de validation
? ️ Version standard - un utilitaire de versioning à l'aide de la génération Semver et Changelog propulsée par des validations conventionnelles

Analyse

?? ‍️ Why-did-vous-vous (facultatif) - vous informez des redesseurs potentiellement évitables

▶ ️ Commencer

? Création d'un nouveau référentiel sur GitHub

Cliquez sur le bouton " Utiliser ce modèle "
Configurez votre nouveau référentiel et cliquez sur le bouton " Créer le référentiel à partir du modèle "
Vous pouvez maintenant cloner le référentiel généré à votre machine locale:

 $ git clone https://github.com/ < YOUR-GITHUB-LOGIN > / < NAME-OF-YOUR-GENERATED-REPOSITORY > .git

Installation

Avant de pouvoir commencer à développer votre super application, vous devez installer les dépendances du projet.

Déplacez-vous à la racine du projet:

$ cd < NAME-OF-YOUR-GENERATED-REPOSITORY >

Pour les prochaines étapes, choisissez un gestionnaire de package de votre choix et modifiez les commandes contenues dans les scripts package.json . Voir leur documentation pour plus d'informations:
Pnpm (recommande)
NPM

Installez toutes les dépendances du projet:

 # PNPM
$ pnpm install
# NPM
$ npm install

⌨️ Development

Une fois toutes les dépendances installées, vous pouvez exécuter le serveur de développement local:

 # PNPM
$ pnpm dev
# NPM
$ npm run dev

Maintenant, juste code!

Production

Après avoir appliqué les modifications, vous pouvez générer une version pour tester et / ou déployer dans votre environnement de production.

Faire une construction de production:

 # PNPM
$ pnpm build
# NPM
$ npm run build

Puis exécutez la construction:

 # PNPM
$ pnpm start
# NPM
$ npm start

Afficher plus de commandes que vous pouvez utiliser

Peluche

 # PNPM
$ pnpm run lint
# NPM
$ npm run lint

Peluche et fixer

 # PNPM
$ pnpm run lint:fix
# NPM
$ npm run lint:fix

Test

 # PNPM
$ pnpm run test # or pnpm run test:watch
# NPM
$ npm run test # or npm run test:watch

Vérification des types

 # PNPM
$ pnpm run type-check
# NPM
$ npm run type-check

Format

 # PNPM
$ pnpm run format
# NPM
$ npm run format

Outil de mise à jour interactif

 # PNPM
$ pnpm run up
# NPM
$ npm run up

Mettre à jour toutes les dépendances

 # PNPM
$ pnpm run up-latest
# NPM
$ npm run up-latest

Sortie en tant que version majeure

 # PNPM
$ pnpm run release-as-major
# NPM
$ npm run release-as-major

Sortie en version mineure

 # PNPM
$ pnpm run release-as-minor
# NPM
$ npm run release-as-minor

Sortir sous forme de version de patch

 # PNPM
$ pnpm run release-as-patch
# NPM
$ npm run release-as-patch

Publier la sortie

 # PNPM
$ pnpm run push-release
# NPM
$ npm run push-release

Obtenez des mises à jour de la distance et maintenez les modifications actuelles

 # PNPM
$ pnpm run pull
# NPM
$ npm run pull

Configurations supplémentaires

Pourquoi avez-vous rendu

Comment activer

Mettez le fichier babel.config.js (situé dans le chemin src/scripts ) dans le fichier Root et Supprimer .babelrc .

Décommente la ligne d'importation wdyr sur pages/_app.tsx .

C'est ça! Vous pouvez maintenant Monitore React Reacders!

Comment désinstaller

Supprimez simplement les fichiers babel.config.js et wdyr.ts , supprimez la ligne d'importation wdyr sur pages/_app.tsx et désinstallez-le:

 # PNPM
$ pnpm uninstall @welldone-software/why-did-you-render
# NPM
$ npm uninstall @welldone-software/why-did-you-render

? Arbre de fichier

Voir ci-dessous l'arborescence de fichiers pour comprendre la structure du projet.

Afficher l'arbre de fichier

Les dossiers et les fichiers marqués avec ( ** ) sont facultatifs, vous pouvez donc supprimer alors.

 mantine-admin/
┣  .github/                   # GitHub's folder configs **
┣  .husky/                    # Husky's folder
┃ ┣ ? commit-msg               # Commitlint git hook
┃ ┗ ? pre-commit               # Lint-staged git hook
┣  .vscode/                   # VSCode's workspace **
┣  public/                    # Public folder
┃ ┣  static/                  # Static files folder **
┃ ┃ ┣  icons/                 # Icons folder **
┃ ┃ ┣  images/                # Images folder **
┃ ┃ ┣  sounds/                # Sounds folder **
┃ ┃ ┗  videos/                # Videos folder **
┃ ┣  docs/                    # Documentation folder **
┃ ┃ ┣  demo/                  # Demonstrations project **
┃ ┃ ┗  translations/          # Translations folder **
┃ ┣ ? favicon.ico              # Icon tab browser
┣  src/
┃ ┣  app/                   # App pages
┃ ┣  components/              # App Components
┃ ┃ ┗  Motion/                # Mantine-UI components **
┃ ┣  hooks/                   # React Hooks **
┃ ┃ ┗ ? useFetch.ts            # SWR fetch hook (optional) **
┃ ┣  interfaces/              # TypeScript Interfaces
┃ ┣  scripts/                 # Additional scripts **
┃ ┃ ┣ ? babel.config.js        # Babel config with WDYR **
┃ ┃ ┗ ? wdyr.ts                # WDYR file **
┃ ┣  services/                # Services
┃ ┃ ┗  users/
┃ ┃   ┣ ? index.ts             # React Query Configuration
┃ ┃   ┗ ? keys.ts              # React Query Key
┃ ┣  stores/                  # Zustand stores
┃ ┣  styles/                  # Styles folder
┃ ┃ ┣ ? bgImages.ts            # SVG background images **
┃ ┃ ┗ ? theme.ts               # Mantine-UI theme
┃ ┗  utils/                   # Useful functions **
┣ ? .babelrc                   # Default Babel config
┣ ? .editorconfig              # Editor config
┣ ? .eslintignore              # ESLint ignore
┣ ? .eslintrc                  # ESLint config
┣ ? .gitignore                 # Git ignore
┣ ? .versionrc                 # Versioning config
┣ ? .commitlintrc              # Commitlint config
┣ ? jest.config.js             # Jest config
┣ ? jest.setup.js              # Jest setup
┣ ? LICENSE                    # License of the project
┣ ? next-env.d.ts              # Next.js types to TypeScript
┣ ? next.config.js             # Next.js config
┣ ? .prettierrc                # Prettier config
┣ ? README.md                  # Main README
┣ ? renovate.json              # Renovate Bot config **
┣ ? tsconfig.json              # TypeScript config

Licence

Bien que vous n'ayez pas à le faire, si vous réutilisez ce modèle pour vos projets, je l'apprécierais si vous me crédiriez et fournissez un lien vers mon profil GitHub dans le pied de page de votre projet . Merci!

Ce projet est autorisé sous la licence MIT - voir la page de licence pour plus de détails.