Free Admin Dashboard

Kostenloses Admin-Dashboard, entwickelt in React.js, Tailwind CSS und TypeScript

Das kostenlose Admin-Dashboard ist eine Open-Source-Administratorvorlage, die in Figma entworfen und in React.js, Tailwind CSS und TypeScript entwickelt wurde. Mein Ziel in diesem Projekt ist es, eine hochwertige und erstklassige Design-Dashboard-Vorlage bereitzustellen, indem ich die besten React.js-Praktiken befolge. Dieses React-Administrator-Dashboard wird mit erweiterten React.js-Designmustern wie Designmustern für kontrollierte und unkontrollierte Komponenten, benutzerdefinierten Hooks-Mustern, Layout-Komponentenmustern, Komponentenzusammensetzungsmustern, Designmustern für zusammengesetzte Komponenten und vielem mehr erstellt. Dies ist hauptsächlich eine E-Commerce-Dashboard-Vorlage, aber Wenn das Repository in Zukunft populär wird, werde ich es auf weitere Nischen erweitern. Das Dashboard reagiert vollständig und steht zum kostenlosen Download zur Verfügung.

Design des Admin-Dashboards

Das Admin-Dashboard-Design wurde in Figma unter Befolgung grundlegender und bewährter Methoden für das UI-Design von E-Commerce-Dashboards entworfen. Mein Ziel ist es, es so einfach wie möglich und mit einer Premium-Benutzeroberfläche zu erstellen. Das gesamte Design wird unter Berücksichtigung des Endbenutzers erstellt. Sie können die Admin-Panel-Vorlage für jede Art von E-Commerce-Website verwenden, Sie müssen sie nur mit dem Backend verbinden und alles wird reibungslos funktionieren. Das Admin-Panel für die E-Commerce-Website ist vollständig Open Source , was bedeutet, dass Sie bei Bedarf problemlos weitere Funktionen hinzufügen können. Der Quellcode der Admin-Dashboard-Vorlage wurde nach den Best Practices geschrieben, sodass Sie keine Probleme damit haben werden. Das React-Dashboard ist vollständig anpassbar und flexibel, sodass Sie es ganz einfach zu Ihrem eigenen machen können. Das Design des Admin-Panels basiert auf den besten Designpraktiken wie visueller Hierarchie, Nähe, Leerraum, Konsistenz, Kontrast und vielem mehr …

Merkmale

• Hochwertiges Design: Hochwertiges Design, das speziell für den Endbenutzer entwickelt wurde.
• Responsive Design: Vollständig responsives Layout, das nahtlos auf Desktops, Tablets und Mobilgeräten funktioniert.
• Dynamische Diagramme und Grafiken: Interaktive Datenvisualisierung mithilfe der Bibliotheken Chart.js
• Modulare Komponenten: Wiederverwendbare und anpassbare Komponenten für verschiedene Bereiche des Dashboards.
• Theme-Anpassung: Unterstützung des Hell- und Dunkelmodus mit anpassbaren Themes.
• Datentabellen: Erweiterte Datentabellen mit Sortierung, Filterung und Paginierung.

Verwendete Technologien

• React.js: JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen.
• Redux Toolkit: Zustandsverwaltungsbibliothek für React-Anwendungen.
• React Router: Bibliothek für das Routing in React-Anwendungen.
• Chart.js: Einfache und dennoch flexible JavaScript-Diagrammbibliothek.
• Tailwind CSS: Ein Utility-First-CSS-Framework zum schnellen Erstellen benutzerdefinierter Benutzeroberflächen.
• TypeScript: Eine Sprache für JavaScript im Anwendungsmaßstab.
• Nanoid: Ein kleiner, sicherer, URL-freundlicher, eindeutiger String-ID-Generator
• Reaktionssymbole: Symbolbibliothek mit vielen Symbolen
• Figma: Leistungsstarkes Webdesign-Tool.

Wenn Ihnen das kostenlose Admin-Dashboard-Projekt gefällt, geben Sie ihm auf GitHub einen Stern, um das Projekt zu unterstützen und mir die Motivation zu geben, viele weitere tolle Funktionen hinzuzufügen.

Videoanweisungen zum Ausführen der App

Hier ist ein YouTube-Link für die Videoanweisungen zum Ausführen der App: https://www.youtube.com/watch?v=cydXOmMhbtQ

Anweisungen

1. Um die App auszuführen, müssen Sie zunächst Node.js und npm herunterladen und auf Ihrem Computer installieren. Hier ist ein Link zum Tutorial, das erklärt, wie man sie installiert: https://www.youtube.com/watch?v=4FAtFwKVhn0. Hier ist auch der Link, über den Sie sie herunterladen können: https://nodejs.org/en

2. Wenn Sie alle benötigten Programme auf Ihrem Computer installiert haben, müssen Sie das Projekt herunterladen. Wenn Sie das Projekt herunterladen, müssen Sie es extrahieren.

3. Nachdem Sie das Projekt extrahiert haben, müssen Sie den Projektordner im Terminal Ihrer Wahl öffnen und Folgendes schreiben:

 npm install

4. Um das Projekt auszuführen, schreiben Sie:

 npm run dev

5. Um Ihre App anzuzeigen, rufen Sie den Browser Ihrer Wahl auf und geben Sie in die URL Folgendes ein: http://localhost:5173