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

Подписаться 82 тыс.

Просмотров 510 тыс.

50% 1

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

Наука

Опубликовано:

25 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 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.

@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??

@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.

@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!

@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).

@blakegalbavy7163 Год назад

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

@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

@zeshanshaikh0401 Год назад

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

@angleklima4033 Год назад

The pace you are going is great love it

@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.

@victortimi2943 Год назад

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

@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

@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.

@oscarzamorapicazo9287 Год назад

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

@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 RU-vid

@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 👊🏼

@cristiansollors7002 Год назад

7 hour video?? This is gold!

@saira_anonymous1599 Год назад

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

@Rufus-yc5xq Год назад

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

@tiptrcks3960 Год назад

Your channel is literally a blessing bro thankyou very much!

@MehediHassan-pn5uc Год назад

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

@iUmerFarooq Год назад

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

@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 4 месяца назад

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?

@davidbradford5429 Год назад

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

@relaxingzenmusic Год назад

You are AWESOME my friend, Thank you for these tutorials

@DrWalterJitsu Год назад

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

@chzmo Год назад

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

@kaitotmk8393 Год назад

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

@heruuu6114 Год назад

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

@meheraabarvy4134 Год назад

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

@ArushaAscendExpeditions Год назад

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

@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.

@cubedev4838 Год назад

I love stack you use, very consistent :)

@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!

@francomacias8904 Год назад

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

@meth8848 Год назад

Your works are Just masterpieces keep up the great work

@obelingo Год назад

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

@sourcesensei 6 месяцев назад

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

@elitagravenor1080 Год назад

The value here is immense and huge

@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

@swaroopmondapath8394 Год назад

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

@othmarstehlik5339 2 месяца назад

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

@salvadord.escobedo372 Год назад

Excellent tutorial. Great work!

@stefanocons Год назад

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

@fn8629 Год назад

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

@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.

@bobmus1010 Год назад

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

@scaprangerart5062 Год назад

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

@nicolauswidin8203 Год назад

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

@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 !!!

@johanneskonig6767 Год назад

Love the backend stuff

@kirakira160 Год назад

Yes Yes Sir ! Golden Man And Golden Content

@ninjadev4676 Год назад

crazy tutorial, thanks a lot bro. keep going on

@tiktalk4573 Год назад

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

@MasterXT06 Год назад

This is gold man, I whish you the best.

@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

@betinhowoo Год назад

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

@LucaBarbanera Год назад

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

@persues1377 Год назад

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

@felipewolver98 10 месяцев назад

Excellent tutorial. thank you for sharing!

@user-hj7eu3yx5g 5 месяцев назад

EdRoh , You are so professional , Thank you

@saroj3483 Год назад

Much needed this you saved a life

@alexanderpoker6655 Год назад

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

@shabbirali5895 2 месяца назад

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

@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.

@vasbi2105 Год назад

The content is really cool! Thank you!

@ashishpatel6078 Год назад

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

@otabeksodikov2773 6 месяцев назад

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

@StarContract Год назад

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

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

@J.a.k.e.b.r.a.v.o Год назад

From Kenya I say thank you mahn.

@Sky_Hustle Год назад

Thank you for this, learned a lot.

@beckygolphin7205 Год назад

This is massive work

@Martin-rt3wt Год назад

Excellent tutorial. Thank you very much =)

@davidpraisecombong Год назад

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

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

@yakitorisamurai3583 Год назад

Thank you Ed. God bless you.

@BB-de7ux Год назад

We are glad to learn coding from you

@albertgeorge1619 Год назад

Thanks man. You got one subscriber !!👍

@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!

@gubatenkov Год назад

Dude, you know, that you are the craziest developer on this platform I ever saw

@rbsfinger Год назад

I just found my Mentor. Excellent Tutorial.

@Daniish_khan 11 месяцев назад

what a beast tutorial!

@rlm3227 Год назад

this video is gold

@jcpluto4555 Год назад

Almost Done and its been a great experience. For good measure I threw Typescript into the project and built certain aspects of the project differently(postgres/prisma vs mongo)

@Ankitgupta-gj9us Год назад

An error is showing bro how to handle

@Davidvideo3 Год назад

Hey JC, i'd love to see how you built it using postgres/prisma and especially typescript. Do you think you could share the repo on github? Appreciate it!!

@henriqueb5637 Год назад

Come on JC, share it with us? I am curious to see how you translated the aggregation pipeline into prisma and postgre

@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!

@spondoolie6450 Год назад

"we're going to dive deep into the backend" I'm in 💪

@carsonhalter3134 10 месяцев назад

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

@filoG24 Год назад

Hi @EdRohDev, lately with Vite, a lot of the initial boilerplate that we need to get rid of when creating a React app simply doesn't exist. The developer server is way faster too! Great tutorial so far!