Build and Deploy a MERN Stack Admin Dashboard tutorial. For frontend, we will be using Material UI, Material UI Data Grid, Nivo Charts, Redux Toolkit and Redux Toolkit Query. For backend, we will be using Node JS, Express Js, Mongoose, and MongoDB. We will also go through how to Data Model using Entity Relationship Diagrams as well as making aggregate calls in MongoDB.
Links:
Node: https://nodejs.org/en/download/
NPX: https://www.npmjs.com/package/npx
VSCode: https://code.visualstudio.com/download
Nodemon: https://github.com/remy/nodemon
Nivo: https://nivo.rocks/
Material UI: https://mui.com/material-ui/getting-started/installation/
Material UI Data Grid: https://mui.com/x/react-data-grid/
React Router: https://reactrouter.com/en/v6.3.0/getting-started/installation
React Date Picker: https://reactdatepicker.com/#example-date-range
Redux Toolkit: https://redux-toolkit.js.org/introduction/getting-started
Redux Toolkit Query: https://redux-toolkit.js.org/rtk-query/overview
Dotenv: https://github.com/motdotla/dotenv
JsonWebToken: https://github.com/auth0/node-jsonwebtoken
Google Fonts: https://fonts.google.com/
Render: https://render.com/
Railway: https://railway.app/
MongoDB: https://www.mongodb.com/
Mongoose: https://github.com/Automattic/mongoose
MongoDB Aggregate: https://www.mongodb.com/docs/manual/reference/operator/aggregation-pipeline/
Code
completed code: https://github.com/ed-roh/fullstack-admin
theme file: https://github.com/ed-roh/fullstack-admin/blob/master/client/src/theme.js
data file: https://github.com/ed-roh/fullstack-admin/blob/master/server/data/index.js
image file: https://github.com/ed-roh/fullstack-admin/tree/master/client/src/assets
lucid chart data model: https://lucid.app/lucidchart/81ff5432-cc50-4c41-a7b8-7258fec1e630/view
lucid chart deployment: https://lucid.app/lucidchart/db1585d8-82c5-422f-9e9c-7d37c776378c/view?page=0_0&invitationId=inv_38fb3c44-89e2-4e9f-9041-054821d53688#
———————————
Subscribe to my channel: https://www.youtube.com/channel/UCMoEx7gz7IbJHv733yEi2aA/?sub_confirmation=1
for more web development and web 3.0 blockchain tutorials!
———————————
Who is EdRoh? I'm a lead engineer for a publicly traded company and have been developing for a decade now.
I'm here to provide you in-depth tutorials by simplifying difficult concepts and more importantly, getting your hands dirty by building production level projects with ease to impress your future/current employer or clients.
Chapters
0:00 Build a Complete React MERN Stack Admin Dashboard App
3:42 Backend Packages and Installations
5:27 Backend Configuration and Setup
12:12 MongoDB Installation and Setup
20:50 Frontend Installation and Packages
26:46 How to set up Colors and MUI Light and Dark Mode Themes with Redux Toolkit
40:32 Building a Navbar with MUI
1:01:37 Building a Sidebar with MUI
1:29:32 RTK Query and injecting mock data into MongoDB
2:09:00 ERD Diagram and Data Modeling
2:20:00 Products Page
3:02:41 Customers Page
3:23:26 Transactions Page
4:05:00 Geography Page
4:27:18 Overview Page
5:02:00 Daily Page
5:17:20 Monthly Page
5:22:39 Breakdown Page
5:37:15 Admin Page
5:48:03 Performance Page
6:09:21 Dashboard Page
6:44:05 Deployment on Render.com
6:57:57 Completed and Deployed MERN Stack Admin Dashboard