Ecommerce MERN Dashboard

MERN スタック管理ダッシュボード プロジェクト

このリポジトリは、MongoDB、Express.js、React、Node.js (MERN) スタックを使用して構築された包括的な管理ダッシュボード アプリケーションを紹介します。

デモリンク: https://admindash.romansth.com

スクリーンショット:

特徴

• レスポンシブ UI:フロントエンドは、マテリアル UI コンポーネントを使用して設計されており、視覚的に魅力的でレスポンシブなユーザー インターフェイスを実現します。
• データの視覚化: Nivo Charts を利用して、このプロジェクトはデータをより適切に解釈するための洞察力に富んだデータの視覚化を提供します。
• データ管理: Redux Toolkit および Redux Toolkit Query はデータを効率的に管理し、ユーザー エクスペリエンスを向上させます。
• 強力なバックエンド:バックエンドは Node.js、Express.js、Mongoose、MongoDB 上に構築されており、堅牢なデータ処理を保証します。
• 複数のページ:製品、顧客、トランザクションなど、それぞれに異なる機能があるさまざまなページを探索します。

使用されている技術

• モンゴDB
• Express.js
• 反応する
• Node.js
• マテリアルUI
• マテリアル UI データ グリッド
• Nivo チャート
• Redux ツールキット
• Redux ツールキットのクエリ
• マングース
• RESTful API

プロジェクトの構造

• server/ : バックエンドのソース コードと構成ファイル。
• client/ : フロントエンドのソース コード、コンポーネント、スタイル。
• screenshots/ : アプリケーションのさまざまなページを示すスクリーンショット。

はじめる

前提条件

• モンゴDB
• ノード
• npm

リポジトリのクローンを作成する

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

クライアント側の使用法

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

サーバー側の使用法

npmインストール

 $ cd server  
$ npm i      

Mongodb のセットアップ

MongoDB にアカウントを作成します。新しいデータベースを作成します。 connect -> node js -> トークンをコピーに移動します。

サーバーのベース ディレクトリに.envファイルを作成し、以下を追加します。

MONGO_URL = ' YOUR_MONGODB_TOKEN '
PORT= 5002

次に、 /server/index.jsに移動し、次の行のコメントを解除します。

 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 ) ;

次に、サーバーを起動します

 $ npm run dev 

サーバーの実行後に停止します。これにより、デモ データが mongodb データベースにプッシュされます。

バックエンドを実行する

 $ npm run dev 

最終アプリ

https://localhost:5002で Web アプリにアクセスします。

(注: Web アプリが機能するには、 clientとserver両方が同時に実行される必要があります。)

使用法

1. client/ディレクトリを調べて、UI コンポーネントとデータの視覚化を理解します。
2. API エンドポイントとデータ処理を把握するには、 server/ディレクトリ内のコードを参照してください。

ライセンス

このプロジェクトは MIT ライセンスに基づいてライセンスされています。