Ecommerce MERN Dashboard

Проект панели администратора MERN Stack

В этом репозитории демонстрируется комплексное приложение панели администратора, созданное с использованием стека MongoDB, Express.js, React и Node.js (MERN).

Ссылка на демо: https://admindash.romansth.com

Скриншот:

Функции

• Адаптивный пользовательский интерфейс: интерфейс разработан с использованием компонентов Material UI для визуально привлекательного и отзывчивого пользовательского интерфейса.
• Визуализация данных: используя диаграммы Nivo, проект предлагает содержательную визуализацию данных для их лучшей интерпретации.
• Управление данными: Redux Toolkit и Redux Toolkit Query эффективно управляют данными, повышая удобство работы пользователей.
• Мощный бэкэнд: бэкэнд построен на Node.js, Express.js, Mongoose и MongoDB, что обеспечивает надежную обработку данных.
• Несколько страниц: исследуйте различные страницы, включая «Продукты», «Клиенты», «Транзакции» и т. д., каждая из которых имеет различные функции.

Используемые технологии

• МонгоБД
• Экспресс.js
• Реагировать
• Node.js
• Материальный интерфейс
• Сетка данных пользовательского интерфейса материала
• Графики Ниво
• Инструментарий Redux
• Запрос к набору инструментов Redux
• Мангуста
• RESTful API

Структура проекта

• server/ : исходный код серверной части и файлы конфигурации.
• client/ : исходный код, компоненты и стили внешнего интерфейса.
• screenshots/ : снимки экрана, демонстрирующие различные страницы приложения.

Начиная

Предварительные условия

• МонгоБД
• Узел
• НПМ

Клонировать репозиторий

 $ 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. Создайте новую базу данных. Перейдите в 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 .

(Примечание: для работы веб-приложения и client , и server должны работать одновременно.)

Использование

1. Изучите каталог client/ чтобы понять компоненты пользовательского интерфейса и визуализацию данных.
2. Обратитесь к коду в каталоге server/ чтобы понять конечные точки API и обработку данных.

Лицензия

Этот проект лицензируется по лицензии MIT.