Free Admin Dashboard

Dasbor admin gratis yang dikembangkan di React.js, Tailwind CSS, dan TypeScript

Dasbor admin gratis adalah template admin sumber terbuka yang dirancang di Figma dan dikembangkan di React.js, Tailwind CSS, dan TypeScript. Tujuan saya dalam proyek ini adalah memberikan template dasbor desain berkualitas tinggi dan premium dengan mengikuti praktik terbaik React.js. Dasbor admin React ini dibuat menggunakan pola desain React.js tingkat lanjut seperti pola desain komponen terkontrol dan tidak terkontrol, pola kait khusus, pola komponen tata letak, pola komposisi komponen, pola desain komponen gabungan, dan banyak lagi… Ini pada dasarnya adalah templat dasbor eCommerce, tetapi di masa depan jika repositori menjadi populer, saya akan memperluasnya ke lebih banyak niche. Dasbornya sepenuhnya responsif, dan tersedia untuk diunduh gratis .

Desain dasbor admin

Desain dasbor admin dirancang di Figma dengan mengikuti praktik dasar dan terbaik untuk desain UI dasbor e-niaga. Tujuan saya adalah membuatnya sesederhana mungkin dan dengan antarmuka pengguna premium. Desain lengkap dibuat dengan mempertimbangkan pengguna akhir. Anda dapat menggunakan template panel admin untuk semua jenis situs web eCommerce, Anda hanya perlu menghubungkannya dengan bagian belakang, dan semuanya akan bekerja dengan lancar. Panel admin untuk situs web eCommerce sepenuhnya open source , yang berarti Anda dapat dengan mudah menambahkan lebih banyak fitur jika Anda mau. Kode sumber templat dasbor admin ditulis dengan mengikuti praktik terbaik, sehingga Anda tidak akan mengalami masalah dengannya. Dasbor reaksi sepenuhnya dapat disesuaikan dan fleksibel, sehingga Anda dapat dengan mudah menjadikannya milik Anda. Desain panel admin dirancang dengan mengikuti praktik desain terbaik seperti hierarki visual, kedekatan, spasi, konsistensi, kontras, dan banyak lagi…

Fitur

• Desain berkualitas tinggi: Desain berkualitas tinggi dibuat dengan mempertimbangkan pengguna akhir.
• Desain Responsif: Tata letak sepenuhnya responsif yang berfungsi dengan lancar di desktop, tablet, dan perangkat seluler.
• Bagan dan Grafik Dinamis: Visualisasi data interaktif menggunakan perpustakaan Chart.js
• Komponen Modular: Komponen yang dapat digunakan kembali dan disesuaikan untuk berbagai bagian dasbor.
• Kustomisasi Tema: Dukungan mode terang dan gelap dengan tema yang dapat disesuaikan.
• Tabel Data: Tabel data tingkat lanjut dengan pengurutan, pemfilteran, dan penomoran halaman.

Teknologi yang Digunakan

• React.js: Pustaka JavaScript untuk membangun antarmuka pengguna.
• Redux Toolkit: Pustaka manajemen status untuk aplikasi React.
• React Router: Library untuk routing dalam aplikasi React.
• Chart.js: Pustaka pembuatan bagan JavaScript yang sederhana namun fleksibel.
• Tailwind CSS: Kerangka kerja CSS yang mengutamakan utilitas untuk membangun antarmuka pengguna khusus dengan cepat.
• TypeScript: Bahasa untuk JavaScript skala aplikasi.
• Nanoid: Generator ID string yang kecil, aman, ramah URL, dan unik
• Ikon reaksi: Pustaka ikon dengan banyak ikon
• Figma: Alat desain web yang kuat.

Jika Anda menyukai proyek dasbor admin gratis, berikan bintang di GitHub untuk mendukung proyek ini dan beri saya motivasi untuk menambahkan lebih banyak fitur hebat.

Instruksi video untuk menjalankan aplikasi

Berikut ini tautan YouTube untuk petunjuk video menjalankan aplikasi: https://www.youtube.com/watch?v=cydXOmMhbtQ

instruksi

1. Untuk menjalankan aplikasi, Anda harus mengunduh dan menginstal Node.js dan npm terlebih dahulu di komputer Anda. Berikut ini link tutorial yang menjelaskan cara menginstalnya: https://www.youtube.com/watch?v=4FAtFwKVhn0. Berikut ini juga tautan tempat Anda dapat mengunduhnya: https://nodejs.org/en

2. Ketika Anda menginstal semua program yang Anda perlukan di komputer Anda, Anda perlu mengunduh proyek tersebut. Saat Anda mengunduh proyek, Anda perlu mengekstraknya.

3. Setelah Anda mengekstrak proyek, Anda perlu membuka folder proyek di terminal pilihan Anda dan menulis:

 npm install

4. Untuk menjalankan proyek, tulis:

 npm run dev

5. Untuk melihat aplikasi Anda, buka browser pilihan Anda dan di URL tulis: http://localhost:5173