Build a MERN React Admin Dashboard | Redux Toolkit Query, Backend Focus, Deployment, Data Modeling

Рет қаралды 507,014

Күн бұрын

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: nodejs.org/en/download/
NPX: www.npmjs.com/package/npx
VSCode: code.visualstudio.com/download
Nodemon: github.com/remy/nodemon
Nivo: nivo.rocks/
Material UI: mui.com/material-ui/getting-s...
Material UI Data Grid: mui.com/x/react-data-grid/
React Router: reactrouter.com/en/v6.3.0/get...
React Date Picker: reactdatepicker.com/#example-...
Redux Toolkit: redux-toolkit.js.org/introduc...
Redux Toolkit Query: redux-toolkit.js.org/rtk-quer...
Dotenv: github.com/motdotla/dotenv
JsonWebToken: github.com/auth0/node-jsonweb...
Google Fonts: fonts.google.com/
Render: render.com/
Railway: railway.app/
MongoDB: www.mongodb.com/
Mongoose: github.com/Automattic/mongoose
MongoDB Aggregate: www.mongodb.com/docs/manual/r...
Code
completed code: github.com/ed-roh/fullstack-a...
theme file: github.com/ed-roh/fullstack-a...
data file: github.com/ed-roh/fullstack-a...
image file: github.com/ed-roh/fullstack-a...
lucid chart data model: lucid.app/lucidchart/81ff5432...
lucid chart deployment: lucid.app/lucidchart/db1585d8...
-----------
Subscribe to my channel: / @edrohdev
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

Пікірлер: 668

@EdRohDev Жыл бұрын

Hey peeps! This is a long one, and just a forewarning that this is a little more dense than usual, but if are up for the challenge, give it a try! Questions and Discussions about this project can be asked here in discord: discord.gg/2FfPeEk2mX

@husainahmmed9025 Жыл бұрын

Thanks for your hard work :)

@duncanmoyo8056 Жыл бұрын

Bruh....bless your kind heart...this is going to be fun

@HuskyTales2023 Жыл бұрын

Hey build one with django as backend and everything else like this :)

@abrahamserena6275 Жыл бұрын

Thanks mate! Excellent work! What about adding authentication for the admin panel, would that be difficult?

@martapfahl940 Жыл бұрын

Hey Ed, I guess this is for advanced React Devs, right? Maybe I should finish my Udemy Course first which also includes Redux and Next.js before I dive into this challenge

@sumitsasidharan9226 Жыл бұрын

Thank you so much Ed. These tutorials are invaluable. I've seen youtubers like you grow from absolutely nothing to 400+ subs and more.

@mr.daniish Жыл бұрын

This channel is about to blow! Ed's work is pure art.

@EdRohDev Жыл бұрын

Thank you!

@shibmobileverse468 Жыл бұрын

@@EdRohDev Any idea why the promise would be stuck on 'Pending'?

@shibmobileverse468 Жыл бұрын

@@EdRohDev LOL. Forgot to put the () after json in my app.use statments. XD

@melamelawen Жыл бұрын

Fr fr

@ahoymatey1234 Жыл бұрын

Excellent tutorial. You can pay thousands to go to a bootcamp or follow Ed. This tutorial is the best tutorial that I have seen in many years of working as a developer. Looking forward to the next one! Never have I seen someone create a tutorial as expansive as this while also clearly, and that is the key, explaining the how and why. Awesome work!

@krambow1509 Жыл бұрын

You're kinda of an anarchyst code guru, givin us free high quality knowledge, no words to express my gratitude , thank you, god bless you!

@dongyuexu4823 Жыл бұрын

I love your MERN stack project tutorial! The app built is very functional and elaborate, and you also explain the tech stacks really well. You also teach us deploying the app. Keep making project tutorials like this. Thank you so much!

@binfuwong8859 Жыл бұрын

Thanks Ed! I've just completed this video and it was so much fun that 7 hours flew past before I knew it. You're a great mentor who explains concepts in a clear and concise manner. Thanks for making the learning curve a lot smoother!

@KhalifahMB Жыл бұрын

Thanks Ed, this tutorial is so awesome that I had to spend the whole day coding along with you 😀, thanks a lot and hoping for more tutorials from you. I also have a problem using nivo, I get this error message " error in ./node_modules/@nivo/legends/dist/nivo-legends.es.js" Can't resolve "d3-scale" Thanks again while I wait for your response

@FaridulHaqueMurshed Жыл бұрын

Hey bin! Can you tell me about nivo?

@davidowele8351 8 ай бұрын

7 hours flew by wtf??

@ThatOneDocInTech 10 ай бұрын

Honestly, I’ve not been this happy in a while. This work was simply, AWESOME! This channel deserves more than a million follows! Thank you for taking your time to explain everything in Crystal clear details. I just completed and deployed the project. I fill fulfilled. Thank you

@longvuong9612 10 ай бұрын

Been through some errors here and there but i'm glad you and there are more people out there are still willing to help me complete this project. Huge thumbs up for you, looking forward to more of your works in the future. Keep up the good work man!

@ilyacherkasov9251 Жыл бұрын

Thanks Ed! I've just wrapped up with it. It's amazing. It took me almost 2 weeks in implement all stuff. And I've replaced express with fastify. I've never used rtk queries before and really like it now ) Really appreciate all huge efforts you put in this workshop.

@tundeadebanjo6579 Жыл бұрын

I have not touch nodejs in a while, this video just rekindle my interest in fullstack dev. This is gold Ed! Thanks alot

@reginaldoertel8791 Жыл бұрын

Thank you very much. I was gob-smacked to see how beautifully all the different parts fit together. Truly a masterpiece of art (Code).

@nemila4904 Жыл бұрын

I don’t often comment but I am doing it this time just to support your channel. Thank you for your great tutorials and please don’t stop.

@blakegalbavy7163 Жыл бұрын

Keep up the amazing work. Loving the MERN projects you're pushing out!!

@HSINVM Жыл бұрын

i have been speedrunning tutorial for the past month and this channel is by far the smoothest to code to. Plus you perfectly describe the information that is actually necessary. Keep up the good work! I learned alot from you. I wish i had found you sooner

@zeshanshaikh0401 Жыл бұрын

One of the best project I have seen till now in mern stack

@QuyenNguyen-ej8sf 8 ай бұрын

Made it through till the end! Thank you so much Ed for making this comprehensive project. Please keep up the fabulous work. Love you man!

@muzamali1879 2 ай бұрын

I'm glad you made it.... I facing issue with server side pagination can you please help me with it ?

@betty-rq7qv Жыл бұрын

This gonna be one of the biggest dev resource channels next year. Awesome content 👊🏼

@angleklima4033 Жыл бұрын

The pace you are going is great love it

@psychothassadar Жыл бұрын

You're awesome. I'm from Argentina and your explanations are so legit, I'm learning coding with you, this is my first project. Thanks for being so clear with your work. I'm glad I found you.

@gcloptonAPSU Жыл бұрын

I found this tutorial to be excellent, but I was wondering if it would be possible to include forms that allow for more interaction with the database, such as creating, updating, and deleting information. If it's not too much trouble, could you consider making a part 2 to the tutorial that adds these features? I believe it would be a valuable addition. Thank you for your hard work and dedication! Your channel has been one of the best resources I've found for learning the MERN stack.

@JavierBalcazarCruz 3 ай бұрын

Hello do you do the 2do part ? I’m very interested to learn 😊😊😊

@muzamali1879 3 ай бұрын

Hi Ben! if you are interested we could teamup and work on it?

@victortimi2943 Жыл бұрын

You're a life saver! definately I will go through this project again to fully understand the concepts used here.

@GuyElhadef 2 ай бұрын

THE BEST react tutorial i'v seen so far, beautifully done,!!

@jandrive2920 Жыл бұрын

This was done excellent! Clear and precise speaking. Well done!

@peterchinoko4339 6 ай бұрын

Thanks Ed your complete from scratch videos are the best on KZfaq

@oscarzamorapicazo9287 Жыл бұрын

Thanks Ed for your incredible tutorial, it's just mindblowing!

@iUmerFarooq Жыл бұрын

This is amazing tutorial ❤️ want to see more projects in React Js with Back end.

@tesfatsionshiferaw3474 Жыл бұрын

Just completed the tutorial! Learned tones of stuff. This is an excellent tutorial for people with intermediate experience with the MERN stack. I really loved the fact that you made it resemble a project that developers work on in a company. Thank you so much for taking the time and putting in the effort to making a video like this. We really do appreciate it. Keep it up. Hopefully you will post more extensive tutorials like this.

@piptutor Жыл бұрын

Hi i have some experience studying Express js and PostgreSQL but wanted to really improve my backend fundamentals. Does this course cover a significant amount of backend? Is the course covered to explain concepts well? Thanks

@tesfatsionshiferaw3474 Жыл бұрын

@@piptutor Yes, the concepts in the course are explained very well. For the backend, he uses Express js and Mongo DB, not PostgreSQL. I believe it is a perfect tutorial for students with intermediate experience.

@piptutor Жыл бұрын

@@tesfatsionshiferaw3474 thank you for your feedback. I think i will study this course to level up my backend. Can't wait.

@piptutor Жыл бұрын

Hi, sorry to bother you again, is there any authentication involved in this project?

@tesfatsionshiferaw3474 Жыл бұрын

@@piptutor No authentication is involved.

@saira_anonymous1599 Жыл бұрын

Completed this tutorial! Thanks a tonn for this!! I could revise some concepts and learn A LOT of new ones.

@cristiansollors7002 Жыл бұрын

7 hour video?? This is gold!

@DrWalterJitsu Жыл бұрын

Learned a TON from this tutorial--great work and thanks for sharing

@MarioTrazzi Жыл бұрын

Im start learn development with yours videos, now I set a goal this year, complete all yours tutorial, and make a portifolio with them. so thank you very much.

@francomacias8904 Жыл бұрын

You channel and content are awesome, please continue, 24K gold quality, Thanks for sharing your knowledge with the rest of us, truly inspiring...

@tiptrcks3960 Жыл бұрын

Your channel is literally a blessing bro thankyou very much!

@MehediHassan-pn5uc Жыл бұрын

Thank Soo Much Ed ❤️❤️ This is some High Premium Quality Tuitorial!!!

@othmarstehlik5339 Ай бұрын

This is so amazing, thanks for sharing this and putting in the work to walk through every detail

@heruuu6114 Жыл бұрын

I am very excited, to follow the tutorial. Thanks Ed, You are crazy

@ThomasBui359 Жыл бұрын

I appreciate the time and effort you put into making this video, it shows in the final product. Your energy and enthusiasm are infectious, I can't wait to see more of your videos!

@meheraabarvy4134 Жыл бұрын

Thank you so much! This is really amazing. It will helps me a lot. Hope we will get such projects more.

@Rufus-yc5xq Жыл бұрын

Thank you Ed! Please bring more videos of mern stack 🙌

@sourcesensei 6 ай бұрын

Thank you so much for this tutorial! This is incredible!!! I managed to learn so much from this 👊

@stefanocons Жыл бұрын

Thank you so much for this amazing tutorial! I love this youtube channel ❣

@relaxingzenmusic Жыл бұрын

You are AWESOME my friend, Thank you for these tutorials

@chzmo Жыл бұрын

This is just awesomely insane 😳. Much Love from this side ❤

@ArushaAscendExpeditions Жыл бұрын

This is just awesome!! Thank you for your energy you put int it.

@kaitotmk8393 Жыл бұрын

Oh man this is a life saver,thanks man keep up the great work.

@davidbradford5429 Жыл бұрын

Nice tutorial Ed, looking forward to this dashboard having authentication and roles

@DeXtRoXiToHeRo Жыл бұрын

Thank you very much for your videos help me to continue improving my skills. I follow you from the city of San Luis Potosi, Mexico. Eres un chingon !!!

@nicolauswidin8203 Жыл бұрын

Thank you so much for your effort. What an Awesome explanation! ✨

@meth8848 Жыл бұрын

Your works are Just masterpieces keep up the great work

@shabbirali5895 2 ай бұрын

Thanks a lot brother , i have watched every second of ur video and finally managed to run it successfully 👏

@salvadord.escobedo372 Жыл бұрын

Excellent tutorial. Great work!

@tristanfahn9685 Жыл бұрын

Hi Ed, thanks a lot for this excellent tutorial. You're really creating the best react tutorials on youtube showing the best practices. Just a little note: On the products page, the yearlySalesTotal and yearsTotalSoldUnits are not showing because state is an array of objects. So you just have to write stat[0].yearlySalesTotal etc.

@user-du5sp4gr6r Жыл бұрын

file: client.js:11 const stat = await ProductStat.findOne({ productId: product._id });

@cubedev4838 Жыл бұрын

I love stack you use, very consistent :)

@fn8629 Жыл бұрын

thanks for the tutorial, I'm getting a lot of help from you!

@user-hu9un8uo2o Жыл бұрын

Thank you very much, I really liked the course, it was very intensive, but I learnt a lot of things that can help me to improve my skills and build my carrier.

@tiktalk4573 Жыл бұрын

Amazing tutorial...! cant imagine how long for you to build this whole project into reality!

@davidpraisecombong Жыл бұрын

One of the best tutorials you can find here on KZfaq, FOR FREE!!! Thank you so much for this. Btw, can you make a video and use Vue 3 for the client side?

@ashishpatel6078 Жыл бұрын

Amazing video i have never seen anyone writing every props of material ui 😅 Thank u so much sir .. love from india..

@felipewolver98 10 ай бұрын

Excellent tutorial. thank you for sharing!

@yamilhamui2905 Жыл бұрын

Hello Ed, I wanted to congratulate you for the video and the content that you shared for the dev community, a few weeks ago I was stuck with the deploy part and I couldn't make the integration with mongodb work, and in your tutorial I found everything clearer, thank you very much and continue with this work that is an inspiration for all those who follow you

@bobmus1010 Жыл бұрын

I got data undefined on the console. Great channel, thank you very much.

@scaprangerart5062 Жыл бұрын

FInally done!!! Thank you!!! Subscribed !

@sujoydutta920 Жыл бұрын

Wow the data modelling part is just mind blowing never seen much in youtube videos

@milayoga1_my_Teleqramm__id Жыл бұрын

👆send a direct message for support and guidance

@obelingo Жыл бұрын

Wow, this was a long ride. This is gonna look good on my portfolio.

@ninjadev4676 Жыл бұрын

crazy tutorial, thanks a lot bro. keep going on

@MasterXT06 Жыл бұрын

This is gold man, I whish you the best.

@betinhowoo Жыл бұрын

Hi Ed! Thans for the content, very rich and valuable!

@ilyukchiljin7640 Жыл бұрын

lovely tutorial, gives me better understanding of how to link backend with frontend. Would you consider throwing in a real time chart just to spice things up a bit? I often find that I need to include a real time monitoring function when I need to display data in dashboard format. Besides, it's just cool to watch something moving on the page!

@user-hj7eu3yx5g 5 ай бұрын

EdRoh , You are so professional , Thank you

@elitagravenor1080 Жыл бұрын

The value here is immense and huge

@vasbi2105 Жыл бұрын

The content is really cool! Thank you!

@LucaBarbanera Жыл бұрын

This turtorial is so fucking awesome man! Keep going you are making a huge difference in peoples devops careers!

@Sky_Hustle Жыл бұрын

Thank you for this, learned a lot.

@carsonhalter3134 10 ай бұрын

fantastic tutorial. the wealth of knowledge packed into your videos is amazing. please dont stop making amazing content like this!!

@otabeksodikov2773 6 ай бұрын

thanks too much , i learnt a lot of stuff about MUI and Nivo charts .

@alexanderpoker6655 Жыл бұрын

it's fu**** crazy job! Excellent. Thank you

@albertgeorge1619 Жыл бұрын

Thanks man. You got one subscriber !!👍

@Martin-rt3wt Жыл бұрын

Excellent tutorial. Thank you very much =)

@aliif Жыл бұрын

I have subscribed to your channel thanks for sharing your knowledge to us, looking forward for more awesome long tutorial like this

@swaroopmondapath8394 Жыл бұрын

👍👍👍👍...Delivered quality dashboard today.

@StarContract Жыл бұрын

This is what I'm going to do for the next few days 😍

@saroj3483 Жыл бұрын

Much needed this you saved a life

@johanneskonig6767 Жыл бұрын

Love the backend stuff

@multigladiator384 Жыл бұрын

wow. just saw the first three minutes. i will enjoy this! not necesarily the technologies I am working with in our stack but interesting anyways since all the things are adaptable to other frameworks and languages. a dashboard like this is nice to have if you host web app(s)

@sandymonk1999 3 ай бұрын

I have learnt alot of things through the your video thanks alot bro.

@persues1377 Жыл бұрын

More mern stack real world applications please!!! This is amazing

@kirakira160 Жыл бұрын

Yes Yes Sir ! Golden Man And Golden Content

@muhammadsufyan9508 Жыл бұрын

Thank you for sharing ❤ very very helpful ❤

@priyanshujaj7220 Жыл бұрын

Thanks alot for such a awesome project❤❤

@rbsfinger 11 ай бұрын

I just found my Mentor. Excellent Tutorial.

@BB-de7ux Жыл бұрын

We are glad to learn coding from you

@rayusaki88 Жыл бұрын

I'm ecstatic! This tut is awesome! The resulting app was so beautiful that I don't want to sleep just to finish the whole video in one go! Thanks a lot for doing this! You're amazing Ed!

@yakitorisamurai3583 Жыл бұрын

Thank you Ed. God bless you.

@J.a.k.e.b.r.a.v.o Жыл бұрын

From Kenya I say thank you mahn.

@daynuxer Жыл бұрын

Masya Allah Barakallah Love This, I Hope You Always In Healty and Longevity

@web3media843 Жыл бұрын

wow this is unbelievable thankyou so much

@Sam-kr5ix Жыл бұрын

Great content dude 👍

@luisg3423 Жыл бұрын

Great video Ed! You could create an upcoming tutorial where CRUD operations are handled with a backen, interacting with RTK Query for cached requests, and the respective mutations for traditional crud operations, but I don't know if they should be cached or not. It would be great if you could explain how to work with RTK Query in those circumstances, since for the Query that are made in this project, the advantage is huge since there is no latency times when making 1 new request to the api since it has it in cache.