Ecommerce MERN Dashboard

Proyek Dasbor Admin Stack MERN

Repositori ini menampilkan aplikasi dasbor admin komprehensif yang dibuat menggunakan tumpukan MongoDB, Express.js, React, dan Node.js (MERN).

Tautan demo: https://admindash.romansth.com

Tangkapan layar:

Fitur

• UI Responsif: Frontend dirancang menggunakan komponen Material UI untuk antarmuka pengguna yang menarik secara visual dan responsif.
• Visualisasi Data: Memanfaatkan Nivo Charts, proyek ini menawarkan visualisasi data yang mendalam untuk interpretasi data yang lebih baik.
• Manajemen Data: Redux Toolkit dan Redux Toolkit Query mengelola data secara efisien, meningkatkan pengalaman pengguna.
• Backend yang Kuat: Backend dibangun di Node.js, Express.js, Mongoose, dan MongoDB, memastikan penanganan data yang kuat.
• Banyak Halaman: Jelajahi berbagai halaman termasuk Produk, Pelanggan, Transaksi, dan lainnya, masing-masing dengan fungsi berbeda.

Teknologi yang Digunakan

• MongoDB
• Ekspres.js
• Bereaksi
• Node.js
• UI Materi
• Kisi Data UI Material
• Grafik Nivo
• Perangkat Redux
• Kueri Perangkat Redux
• Luwak
• API yang tenang

Struktur Proyek

• server/ : Kode sumber backend dan file konfigurasi.
• client/ : Kode sumber frontend, komponen, dan gaya.
• screenshots/ : Tangkapan layar yang menampilkan berbagai halaman aplikasi.

Memulai

Prasyarat

• MongoDB
• simpul
• npm

Kloning repositori

 $ git clone https://github.com/Romansth/Ecommerce-MERN-Dashboard.git

Penggunaan sisi klien

 $ cd client    
$ echo "REACT_APP_BASE_URL= http://localhost:5002" >> src/.env.local  
$ npm i  
$ npm run build
$ npm start

Penggunaan sisi server

instalasi npm

 $ cd server  
$ npm i      

Siapkan Mongodb

Buat akun di MongoDB. Buat basis data baru. Pergi ke connect -> node js -> salin token.

Buat file .env di direktori dasar server dan tambahkan yang berikut ini:

MONGO_URL = ' YOUR_MONGODB_TOKEN '
PORT= 5002

Selanjutnya, buka /server/index.js dan hapus komentar pada baris ini:

 data imports
import  User  from  "./models/User.js" ;
import  Product  from  "./models/Product.js" ;
import  ProductStat  from  './models/ProductStat.js' ;
import  Transaction  from  './models/Transaction.js' ;
import  OverallStat  from  './models/OverallStat.js' ;
import  AffiliateStat  from  './models/AffiliateStat.js' ;
import {
dataUser , dataProduct , dataProductStat , dataTransaction , dataOverallStat , dataAffiliateStat
} from  "./data/index.js" ; 

 /* ONLY ADD DATA ONE TIME */
AffiliateStat . insertMany ( dataAffiliateStat ) ;
OverallStat . insertMany ( dataOverallStat ) ;
Transaction . insertMany ( dataTransaction ) ;
Product . insertMany ( dataProduct ) ;
ProductStat . insertMany ( dataProductStat ) ;
User . insertMany ( dataUser ) ;

Kemudian, mulai server

 $ npm run dev 

Hentikan server setelah dijalankan. Ini akan mendorong data demo ke database mongodb Anda.

Jalankan bagian belakang

 $ npm run dev 

Aplikasi Terakhir

Akses aplikasi web di https://localhost:5002 .

(Catatan: client dan server harus berjalan secara bersamaan agar aplikasi web dapat berfungsi.)

Penggunaan

1. Jelajahi direktori client/ untuk memahami komponen UI dan visualisasi data.
2. Lihat kode di direktori server/ untuk memahami titik akhir API dan penanganan data.

Lisensi

Proyek ini dilisensikan di bawah Lisensi MIT.