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

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

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

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

Наука

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

15 июн 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.

@blakegalbavy7163 Год назад

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

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

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

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

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

@tundeadebanjo6579 Год назад

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

@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

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

@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

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

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

@victortimi2943 Год назад

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

@saira_anonymous1599 Год назад

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

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

@zeshanshaikh0401 Год назад

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

@iUmerFarooq Год назад

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

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

@oscarzamorapicazo9287 Год назад

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

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

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

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

@betty-rq7qv Год назад

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

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

Thanks Ed your complete from scratch videos are the best on RU-vid

@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

@angleklima4033 Год назад

The pace you are going is great love it

@meheraabarvy4134 Год назад

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

@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

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

@davidbradford5429 Год назад

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

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

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

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

@DrWalterJitsu Год назад

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

@jandrive2920 Год назад

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

@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

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

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

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

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

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

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

@tiptrcks3960 Год назад

Your channel is literally a blessing bro thankyou very much!

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

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

@tiktalk4573 Год назад

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

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

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

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

@relaxingzenmusic Год назад

You are AWESOME my friend, Thank you for these tutorials

@stefanocons Год назад

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

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

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

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

@nicolauswidin8203 Год назад

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

@kaitotmk8393 Год назад

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

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

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

@ashishpatel6078 Год назад

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

@bobmus1010 Год назад

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

@mrcoder9401 9 месяцев назад

I see these are amazing Edroh. Thanks for putting efforts, a lot of take aways for even beginers. I would recommend to please also add "LOGIN"" functionality, or create a video how to implement login on these. That will be helpful for a noob like me. Thansk!

@BorjaTur Год назад

Hey Ed your content is awesome keep doing it and I'm pretty sure you'll get more subscribers, BTW do you have any examples of RTK Query with mutations, your videos are very complete and offering and e2e perspective of what software development is, I'm only missing the part of sending info to the backend... you know.. forms can be hard sometimes XD

@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

@meth8848 Год назад

Your works are Just masterpieces keep up the great work

@fn8629 Год назад

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

@igorbudimir573 Год назад

Very useful tutorial man. One advice from a viewer perspective: install packages when you need them and import things when you need them, instead of installing all the packages and importing everything at the beginning. People will get it easier that way i've seen that from another youtuber. Really helpful video bro, best regards

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

@obelingo Год назад

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

@cristiansollors7002 Год назад

7 hour video?? This is gold!

@aliif Год назад

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

@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

@persues1377 Год назад

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

@cubedev4838 Год назад

I love stack you use, very consistent :)

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

Excellent tutorial. thank you for sharing!

@betinhowoo Год назад

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

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

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

@user-jz5vh7sl1d 4 месяца назад

Feb 8 2024, whole project is OK to develop and deploy! Only trouble that I've got is Transactions page, server side rendering data grid logic changed a lot so im still in progress with that. Well there is been several light fixes for updated libraries and mongodb. The front-end part was asking for improvements by my own but EdRoh made with no doubt awesome job. Thank you, EdRoh, your video is amazing, I was learning to be a front-end only before but with your guidance back-end aint scare me anymore.

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

Hey there, I'm stuck with the Transaction page. can you please help me with that... ?

@LucaBarbanera Год назад

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

@ninjadev4676 Год назад

crazy tutorial, thanks a lot bro. keep going on

@LinhNguyen-gx5fb Год назад

first of all, thank you very much for this project, it is very helpful for me. I hope you can do a project with typescript next time

@acclol1939 Год назад

Very helpful video, could you do another part where you add user login/registration with JWT?

@dalestewart Год назад

Excellent Tutorial. We should implement Login functionality with authentication.

@kirayagami9229 Год назад

Wow! High Premium Quality Tuitorial. Thank you so much sir. BTW are you Filipino?

@daynuxer Год назад

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

@goldenmonkey9085 Год назад

Bro , , thanks a lot, I am waiting for this ,your last dashboard video almost help me get the job,... but I fail on the leetcode. XD Please keep going, I already gave you a "like"

@EdRohDev Год назад

awesome, glad it is helping you!

@alexanderpoker6655 Год назад

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

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

Excellent tutorial. Great work!

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

EdRoh , You are so professional , Thank you

@007mindbender Год назад

Great video. I would really love to see how you would implement login and role assignment

@scaprangerart5062 Год назад

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

@elitagravenor1080 Год назад

The value here is immense and huge

@Sky_Hustle Год назад

Thank you for this, learned a lot.

@sandymonk1999 3 месяца назад

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

@MasterXT06 Год назад

This is gold man, I whish you the best.

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

Excellent tutorial. Thank you very much =)

@gubatenkov Год назад

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

@albertgeorge1619 Год назад

Thanks man. You got one subscriber !!👍

@davidrose-franklin6106 Год назад

Cool video if anyone runs in to problems responsive screen sizing with the ResponsiveChoropleth map component like I did. It is because the width of the svg and rect elements inside the component is set to 100vw, so when the sidebar is open there is overflow you can just and this to the index.css: rect, svg { width: 100%; }