mantine analytics dashboard

Ankündigungen

• Dateimanager -Seite Benutzeroberfläche hinzugefügt
• Aktualisierte Mantinenversion auf die neueste 7.14.3
• Neue Dunkelmodus -Variante
• Neue Seitenleistevariante, jetzt haben wir voll, mini und voll zusammengebrochene Modi

---

• Live -Vorschau
• Komponenten Vorschau
• Medium
• Produkt Roadmap * neu *

Um

Eine professionelle Administrator- und Dashboard -Vorlage, die auf Mantine 7 erstellt wurde und mit Hunderten von UI -Komponenten, Formularen, Tabellen, Diagrammen, Seiten und Symbolen ausgestattet ist. Diese Vorlage wird mit dem nächsten V14, React, Apex -Diagrammen, Mantine DataTable und Storybook erstellt.

Vorherige Veröffentlichung

Die vorherige Version der Dashboard -Vorlage unterstützt die nächsten 13 mit Seiten Router und Mantine 6. Um die Live -Demo anzuzeigen

Merkmale

• Anpassbar: Sie müssen kein Experte sein, um die Vorlage anzupassen. Unser Code ist sehr lesbar und gut dokumentiert.
• Vollständig reaktionsschnell: Mit mobilen, Tablet- und Desktop -Unterstützung spielt es keine Rolle, welches Gerät Sie verwenden. AntD Dashboard reagiert in allen Browsern.
• Cross-Browser: Unsere Themen arbeiten perfekt mit Chrom, Firefox, Oper und Edge. Wir arbeiten hart daran, sie zu unterstützen.
• Clean Code: Wir befolgen die Richtlinien von ANT Design strikt, um Ihre Integration so einfach wie möglich zu gestalten. Der gesamte Code wird handgeschrieben.
• Regelmäßige Updates: Von Zeit zu Zeit erhalten Sie ein Update mit neuen Komponenten, Verbesserungen und Fehlerbehebungen.

Tech Stack

Um diese Vorlage großartig zu machen, habe ich die folgenden Pakete verwendet:

Kern

• NEXT JS V14: NEXT.JS ist ein Open-Source-Webentwicklungsrahmen, das vom privaten Unternehmen Vercel erstellt wurde, das React-basierte Webanwendungen mit serverseitigem Rendering und statischer Website-Generation bietet.
• Mantine V7: Mantine ist eine React UI -Komponentenbibliothek. Es basiert auf React und Typecript und bietet eine Vielzahl von Komponenten und Haken zum Aufbau leistungsstarker Webanwendungen.
• React V18: React ist eine kostenlose und Open-Source-Front-End-JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen basierend auf Komponenten.
• TypeScript V5: TypeScript ist eine kostenlose und von Microsoft entwickelte Programmiersprache mit Open-Source-Hochstufe, die JavaScript mit optionalen Typ-Anmerkungen zu einer statischen Eingabe hinzufügt.
• Storybook V7: Storybook ist ein kostenloses Open-Source-Tool zur isolierten Entwicklung von UI-Komponenten. Es wird von Webentwicklern verwendet, um ihren Workflow der Benutzeroberfläche zu verbessern und bessere Webanwendungen zu erstellen.
• Änderungenset CLI V2: ChangeSet ist ein Paket, das bei der Verwaltung meiner Versionen und ChangeLogs hilft.
• NextAuth V4: NextAuth.js ist eine flexible und sichere Authentifizierungsbibliothek, die für die clientseitige Authentifizierung in Next.js.
• Tabler-Symbole V2: Tabler-Symbole ist eine kostenlose Open-Source-Symbibliothek mit über 4.700 Symbole. Die Ikonen sind mit einer modernen Ästhetik ausgelegt und für eine Vielzahl von Anwendungen geeignet.
• Mantine DataTable V7: Mantine DataTable ist eine React-Komponente, mit der datenreiche Benutzeroberflächen erstellt werden können. Es ist eine Tischkomponente, die sich der dunklen Themen bewusst ist und für die mantinen Benutzeroberfläche ausgelegt ist.
• Lodash V4: Eine JavaScript -Dienstprogrammbibliothek, die Konsistenz, Modularität, Leistung und Extras liefert.
• Apex-Diagramm V3: S Apexcharts ist eine kostenlose Open-Source-JavaScript-Diagrammbibliothek, mit der Entwickler interaktive Datenvisualisierungen für Webseiten erstellen können. Es kann sowohl für kommerzielle als auch für nichtkommerzielle Projekte verwendet werden.
• Dayjs v1: Day.js ist eine JavaScript -Bibliothek, die Daten und Zeiten behandelt.
• Zehenspitzen V2: Ein kopfloser, Framework-agnostischer und erweiterbarer reicher Texteditor, der auf Prosemirror basiert.
• Fullcalendar V6 : Fullcalendar ist ein JavaScript -Ereigniskalender mit über 300 Einstellungen. Es ist Open Source und hat einen kostenlosen Kern.
• DND-KIT V6: DND-KIT ist ein leichtes, modulares und erweiterbares Drag-and-Drop-Toolkit für React. Es ist auch zugänglich und leistungsfähig.
• Embla Carousel V7: Embla Carousel ist eine leichte Karussellbibliothek mit Flüssigkeitsbewegung und präzisen Wischen.
• Reagieren Sie einfache Karten V3: Eine SVG -Kartendiagrammkomponente, die mit und für React erstellt wurde.
• Angestellter/Nextjs V4: Clerk Next.js ist ein Wrapper um den Reagieren von Angestellten. Es ermöglicht Benutzern, die von Clerk React bereitgestellten Hooks zu verwenden.
• React CountUp V6: Ein React -Komponentenverpackung um countUp.js.

Dev

• Schönerer V3: Schöner ist eine Codeformaterin, die automatisch Code formatiert, um sicherzustellen, dass er konsistent und einfach zu lesen ist.
• Husky V8: Husky ist ein Werkzeug, das es einfacher macht, mit Git -Hooks zu arbeiten. Schöner ist ein Codeformatierer.
• FININT Stufen V15: In Lint-Stage werden dem Commit automatisch Änderungen hinzugefügt, solange keine Fehler vorliegen.
• POSTCSS V8: POSTCSS ist eine JavaScript -Bibliothek, die Plugins zum Transformieren von CSS verwendet. Es verwandelt CSS in einen abstrakten Syntaxbaum, der dann von JavaScript -Objekten dargestellt wird.

Schneller Start

Herunterladen

• Klon diesen Repo Git Clone https://github.com/design-sparx/mantine-analytics-dashboard.git
• Laden Sie von Github herunter

Werkzeuge erstellen

Sie müssen node.js. Sobald Node.js installiert ist, führen Sie die NPM -Installation aus, um den Rest der Abhängigkeiten der Vorlage zu installieren. Alle Abhängigkeiten werden in das Verzeichnis node_modules heruntergeladen.

npm install

Jetzt können Sie die Quelldateien ändern und neue Dateien generieren. Um automatisch Dateiänderungen zu erkennen und einen lokalen Webserver unter http: // localhost: 3000 zu starten, führen Sie den folgenden Befehl aus.

npm run dev

Kompilieren, optimieren, minimieren und hässlich alle Quelldateien zum Erstellen/ erstellen/

npm run build

Dateistruktur

Im Zip-Datei finden Sie die folgenden Verzeichnisse und Dateien. Sowohl kompilierte als auch abgebrochene Verteilungsdateien, wie in der ZIP -Datei, finden Sie die folgenden Verzeichnisse und Dateien. Sowohl kompilierte als auch abgebrochene Verteilungsdateien sowie die Quelldateien sind im Paket enthalten.

 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/
└──

Beitrag und Unterstützung

Ich begrüße alle Entwickler und Enthusiasten, um zum Wachstum unserer Open-Source-Admin-Dashboard-Vorlage beizutragen. Der Beitrag ist ein kollaborativer Prozess, der uns dazu ermöglicht, die Fähigkeiten und Qualität der Vorlage gemeinsam zu verbessern. Um loszulegen:

• Fork das Repository: Geben Sie das Github -Repository der Vorlage in Ihr eigenes Github -Konto.
• Klonen Sie die Gabel: Klonen Sie das Forked -Repository mit Git in Ihre lokale Maschine.
• Erstellen Sie einen Zweig: Erstellen Sie einen neuen Zweig für Ihre Beiträge, um die Haupt -Codebasis intakt zu halten.
• Änderungen implementieren: Nehmen Sie Ihre gewünschten Änderungen vor, fügen Sie neue Komponenten hinzu oder verfeinern Sie vorhandene Funktionen.
• Verpflichten und pushen: Verpflichten Sie Ihre Änderungen am neuen Zweig und drücken Sie sie zu Ihrer Github -Gabel.
• Senden Sie eine Pull -Anfrage: Senden Sie eine Pull -Anfrage von Ihrem Forked Repository an das Hauptvorlage -Repository. Ihre Änderungen werden überprüft und möglicherweise verschmolzen.

Probleme berichten und Hilfe suchen

Wenn Sie bei der Verwendung der Vorlage auf Probleme stoßen oder Hilfe benötigen, sind wir hier, um zu helfen:

• Issue Tracker: Besuchen Sie die Registerkarte "Problemen des Github Repository", um Fehler zu melden, Verbesserungen vorzuschlagen oder um Aspekte der Vorlage zu klären.
• Community -Interaktion: Beschäftige dich mit der Community der Vorlage auf Plattformen wie GitHub -Diskussionen, um Unterstützung, Anleitung und Erkenntnisse zu erzielen.

Einladung zur Erkundung und Nutzung

Die Mantine- und Next.js Admin -Dashboard -Vorlage ist nicht nur ein Ende. Es ist ein Anfang - ein Ausgangspunkt für Ihre kreative Reise. Egal, ob Sie ein erfahrener Entwickler sind, der einen schnellen Start sucht oder ein Enthusiast, der moderne Entwicklungspraktiken lernt, diese Vorlage ist Ihre Leinwand.

Weitere Ressourcen

• NextJs - https://nextjs.org/docs
• React - https://react.dev/learn
• Mantine - https://mantine.dev/getting-started/
• NextAuth - https://authjs.dev/
• Storybook - https://storybook.js.org/docs/get-started/install
• Apexcharts - https://apexcharts.com/docs/installation/
• Zehenspitzen - https://tiptap.dev/Introduction
• Dndkit - https://docs.dndkit.com/
• Embla Carousel-https://www.embla-carousel.com/get-started/
• Fullcalendar - https://fullcalendar.io/docs/getting-started
• Reagieren Sie einfache Karten-https://www.react-simple-maps.io/docs/getting-started/