Mantine Admin Download - Download Mantine Admin Source Code

Mantine Admin

AI-Quellcode

1.0.0

Herunterladen

Mantinenadmin

Demo →

Bereiten Sie Ihre eigene Kopie dieser Vorlage in nur wenigen Klicks ein!

Einführung

Diese Vorlage verfügt über eine Reihe von Ordnern, Codebeispielen und Konfigurationen. Fühlen Sie sich frei, sie zu bearbeiten oder zu entfernen, einschließlich dieser Readme!

Anpassen und genießen!

? Merkmale

Dieses Projekt verfügt über die neuesten Tools und guten Praktiken in der Webentwicklung!

Rahmen

⚛️ Next.js - Ein komplettes React -Framework für Hybrid- und Server -Rendering

Daten abrufen

? KY - Tiny und elegantes HTTP -Client basierend auf der Browser -Fetch -API
✳️ React -Abfrage - Haken zum Abrufen, Zwischenspeichern und Aktualisieren asynchroner Daten in React

Staatsmanagement und Haken

? Zustand -Eine kleine, schnelle und skalierbare Lösung für die Staatsmanagement-Lösung von Bearbones unter Verwendung vereinfter Flussprinzipien
? React-Use -Sammlung wesentlicher React-Hooks

Designsystem und Animationen

? Mantine-UI -Eine einfache, modulare und zugängliche Komponentenbibliothek, mit der Sie die Bausteine zum Erstellen Ihrer React-Anwendungen erhalten
Tabler -Ikonen - Eine Sammlung beliebter Ikonen, um Projekte zu reagieren

Formularvalidierung

? React Hook Form -Performant, flexible und erweiterbare Formen mit einer benutzerfreundlichen Validierung
ZOD -Typscript-First-Schema-Validierung mit statischer Typinferenz

Tests

? Scherz - ein entzückender JavaScript -Test -Framework mit Schwerpunkt auf Einfachheit
? Testbibliothek - einfache und vollständige Testversorgungsunternehmen, die gute Testpraktiken fördern

Entwurfsmuster

⛔ Eslint - Finden und Behebung von Problemen in Ihrem JavaScript -Code finden und beheben
? Schöner - ein Meinungscode -Formatierer, der mehrere Sprachen und Code -Editoren unterstützt
? Husky - moderne einheimische Git -Haken leicht gemacht
? Lint-Stage -Führen Sie Linter gegen inszenierte Git-Dateien aus und lassen Sie es nicht? Schlagen Sie in Ihre Codebasis
? Commitlint - hilft Ihrem Team, sich an einer Commit -Convention festzuhalten
" Standardversion - Ein Dienstprogramm für die Versionierung mit Semver- und ChangeLog -Generierung, die von herkömmlichen Commits betrieben werden

Analyse

? ‍Eute, warum did-you-render (optional)-Benachrichtigen Sie über potenziell vermeidbare Wiedererleber

▶ ️ Erste Schritte

? Erstellen eines neuen Repositorys auf GitHub

Klicken Sie auf die Schaltfläche " Diese Vorlage verwenden "
Konfigurieren Sie Ihr neues Repository und klicken Sie auf die Schaltfläche " Repository aus der Vorlage erstellen "
Jetzt können Sie das generierte Repository in Ihre lokale Maschine klonen:

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

Installation

Bevor Sie mit der Entwicklung Ihrer Superanwendung beginnen können, müssen Sie die Abhängigkeiten des Projekts installieren.

Bewegen Sie sich zur Wurzel des Projekts:

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

Wählen Sie für die nächsten Schritte einen Paketmanager Ihrer Wahl und ändern Sie die im package.json -Skripte enthaltenen Befehle. Weitere Informationen finden Sie in der Dokumentation:
PNPM (Empfehlung)
NPM

Installieren Sie alle Abhängigkeiten des Projekts:

 # PNPM
$ pnpm install
# NPM
$ npm install

⌨️ Entwicklung

Sobald alle Abhängigkeiten installiert wurden, können Sie den lokalen Entwicklungsserver ausführen:

 # PNPM
$ pnpm dev
# NPM
$ npm run dev

Jetzt nur codieren!

Produktion

Nachdem Sie die Änderungen angewendet haben, können Sie einen Build zum Testen und/oder Bereitstellen in Ihrer Produktionsumgebung erstellen.

Machen Sie einen Produktionsbau:

 # PNPM
$ pnpm build
# NPM
$ npm run build

Und dann den Build ausführen:

 # PNPM
$ pnpm start
# NPM
$ npm start

Weitere Befehle anzeigen, die Sie verwenden können

Fussel

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

Fussel und Fix

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

Prüfen

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

Geben Sie die Überprüfung ein

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

Format

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

Interaktives Update -Tool

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

Aktualisieren Sie alle Abhängigkeiten

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

Veröffentlichung als Hauptversion

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

Veröffentlichung als Nebenversion

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

Als Patch -Version veröffentlichen

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

Veröffentlichung veröffentlichen

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

Erhalten Sie Aktualisierungen von Remote und führen Sie aktuelle Änderungen bei

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

Zusätzliche Konfigurationen

Warum hast du gemacht?

Wie man aktiviert

Legen Sie die Datei babel.config.js (im Pfad src/scripts ) in die Projektstamme und löschen Sie .babelrc -Datei.

Überfassen Sie die wdyr -Importzeile auf pages/_app.tsx .

Das war's! Jetzt können Sie React React React-Renders überwachen!

Wie man deinstallieren

Löschen Sie einfach die Dateien babel.config.js und wdyr.ts , entfernen Sie wdyr -Importzeile auf pages/_app.tsx und deinstallieren Sie es:

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

? Dateibaum

Siehe unten in der Dateibaum, um die Projektstruktur zu verstehen.

Dateibaum anzeigen

Ordner und Dateien mit ( ** ) sind optional, sodass Sie dann löschen können.

 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

Lizenz

Obwohl Sie es nicht müssen, wenn Sie diese Vorlage für Ihre Projekte wiederverwenden würden, würde ich es zu schätzen freuen, wenn Sie mir einen Link zu meinem Github -Profil im Fußzeile Ihres Projekts angeben würden. Danke!

Dieses Projekt ist unter der MIT -Lizenz lizenziert - Einzelheiten finden Sie auf der Lizenzseite.