🎩 FullStack Admin Dashboard App | MNRN

Admin Dashboard, created based on the MNRN stack and using its own APIs

📝 README RU

💻 Stack

✍️ Description

🧾 This application includes the following pages:

• Dashboard ( Basic information about sales, transactions )
• Client Facing
  • Products ( A list of products with the ability to view statistical information for each of them. )
  • Customers ( A list of clients in a tabular format with the ability to sort and filter. )
  • Transactions ( A list of transactions in tabular format. Sorting and pagination takes place in server-side mode )
  • Geography ( View the geographical location of users. )
• Sales
  • Overview ( Overview of total revenues and profits )
  • Daily ( Daily sales chart )
  • Monthly ( Monthly sales chart )
  • Breakdown ( Breakdown of sales by category )
• Management
  • Admins ( List of administrators )
  • Performance ( Tracking the performance of your own affiliate sales )

📘 Data Model

The source data is located at the path /server/data. It is necessary to import data in json format. The file name corresponds to the name of the collection.

💻 Quick Start

🔖 Optional: Before you start, you can change the data in /server/.env and /client/.env to the ones you need.

1) Backend ( It is deployed using Docker Compose tools )

For development:

cd ./server/ && docker compose up dev

For production:

cd ./server/ && docker compose up -d prod

2) Importing data from /server/data

3) Frontend

For development:

cd ../client && npm run start

For production build:

cd ../client && npm run build

P.S. The build directory containing the production build is created within the root project folder. You can also run the following command to serve the build version in a static server:

npm install -g serve && serve -s build

🖼️ Demo

• 🖥️ Dashboard

  

• 📦 Products

  

• 👥 Customers

  

• 💱 Transactions

  

• 🌎 Geography

  

• 💰 Overview

  

• 📈 Daily

  

• 📉 Monthly

  

• 📊 Breakdown

  

• 💼 Admins

  

• 🏆 Performance

  

📄 Credits

Made by Gusarovv with ❤️

The project can be used for any purpose.

Please give a ⭐️ if this project helped you!