Тёмный

Build A MERN Finance Dashboard App | Machine Learning, Typescript, React, Node, MUI, Deployment 

EdRoh
Подписаться 82 тыс.
Просмотров 189 тыс.
50% 1

To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/EdRoh/.
The first 200 of you will get 20% off Brilliant’s annual premium subscription.
Build a MERN Finance Dashboard App that has Machine Learning Predictions. The frontend will consist of Vite for our starter application, Redux Toolkit for state management, Material UI for our component library, and Recharts for our Charts. For the backend we will be using Node Js as our runtime, Express Js as our backend framework, and MongoDB for our database.
Links:
node: nodejs.org/en/download/
npx: www.npmjs.com/package/npx
vscode: code.visualstudio.com/download
nodemon: github.com/remy/nodemon
vite: vitejs.dev/guide/
react router: reactrouter.com/en/v6.3.0/get...
react dropzone: github.com/react-dropzone/rea...
redux toolkit: redux-toolkit.js.org/introduc...
redux toolkit query: redux-toolkit.js.org/rtk-quer...
regression: github.com/tom-alexander/regr...
mui: mui.com/material-ui/getting-s...
mui data grid: mui.com/x/api/data-grid/data-...
recharts: recharts.org/en-US/
flexbox guide: css-tricks.com/snippets/css/a...
css grid cheatsheet: grid.malven.co/
data model diagram: lucid.app/lucidchart/23d63d3a...)
redux dev tools: chrome.google.com/webstore/de...
pesticide extension: chrome.google.com/webstore/de...
fly io node: fly.io/docs/languages-and-fra...
vercel: vercel.com/
docker: www.docker.com/products/docke...
Completed Code:
github: github.com/ed-roh/finance-app
github theme: github.com/ed-roh/finance-app...
github data: github.com/ed-roh/finance-app...
Chapters:
0:00 Build a Complete Finance App Dashboard that has ML Predictions
5:20 Basic and Frontend Installations
20:33 MUI Configurations and Themes
33:50 React Router and Navigation
59:00 Dashboard Layout
1:30:05 Redux Toolkit Setup and Configuration
1:39:40 Backend Installations
1:45:40 MongoDB Installation and Setup
1:54:08 Data Modeling
1:57:00 Key Performance Indicators Route
2:18:43 Recharts and Key Performance Indicators UI
3:03:37 Products UI and API
3:46:52 Transactions UI and API
4:37:20 Predictions and Machine Learning
5:10:18 Deployment of Application
5:22:21 Fully Complete Finance Machine Learning AI App Dashboard
This video was sponsored by Brilliant.
-----------
Subscribe to my channel: / @edrohdev for more web development and web 3.0 blockchain tutorials!
My NEW Discord: / discord
-----------
Who is EdRoh? I'm a lead engineer for a publicly traded company and have been developing for a decade now.

Наука

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

 

15 июн 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 228   
@EdRohDev
@EdRohDev Год назад
To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/EdRoh/. The first 200 of you will get 20% off Brilliant’s annual premium subscription.
@Ibrahim-fh6kv
@Ibrahim-fh6kv Год назад
Do i need to have ML knowledge?
@mubasharwarriach7216
@mubasharwarriach7216 Год назад
Can u share ur discord channel
@goldenmonkey9085
@goldenmonkey9085 Год назад
Is NEXT 13 good for build Dashboard application?
@NewsTrendInsightsReal
@NewsTrendInsightsReal Год назад
I really learn a lot, from struggle to using typescript, now realize little thing I skip when try to learn typescript from basic Great tutorial
@mrFighter924
@mrFighter924 Год назад
Most quality and best approach, learning, practice, production on youtube. Thank you EdRoh!
@srinathkumar1452
@srinathkumar1452 Год назад
Damn! You're an excellent teacher. Love your candid approach of explaining concepts. You're the real MVP.
@rayusaki88
@rayusaki88 Год назад
Thank you so much EdRoh! Learn loads from your tuts 🙏🏻🙏🏻
@josephbonheur3053
@josephbonheur3053 8 месяцев назад
Professionalism and creativity in the projects this man teaches make his videos unique on RU-vid. Thankyou EdRoh
@juhaniGran4t
@juhaniGran4t Год назад
hey EdRoh definitely you are building my confidence towards becoming fullstack engineer there are other channels where people its simply jealous to share knowledge, not your case, thanks for helping us grow up in this career
@WebDevMania1
@WebDevMania1 Год назад
I was wondering why your code looks so advanced, then I was you are a tech lead 😆. Love you EdRoh
@kimbareebajoshua9298
@kimbareebajoshua9298 Год назад
Hey EdRoh, thanks for sharing such great content. At 2:46:32 , about the responsiveness, I added overflow:"hidden" to the DashboardBox component and it fixed the issue. Hope this can be helpful. Thanks again.
@yashvikhimani7909
@yashvikhimani7909 2 месяца назад
how to run this project from git to vscode with database can you give step by step process?
@hansdotdev
@hansdotdev Год назад
This is to much man, thanks Ed... wanted to do a side project for my last semester and this is it, it's like a resume of all my career but in a 5 hours video in the perfect way it's explained, this channel deserves more love, thanks.
@cuongnguyenchi5097
@cuongnguyenchi5097 Год назад
I also think like you
@rawmaterial177
@rawmaterial177 6 месяцев назад
me too @@cuongnguyenchi5097
@atunaisawaqa9794
@atunaisawaqa9794 Год назад
Edroh, you rock dude. Really learn a lot from you. May God Bless You !! 🙂
@nandanb305
@nandanb305 Год назад
Thank you @EdRoh. I have started learing to build react projects by following your videos.
@EdRohDev
@EdRohDev Год назад
thanks
@woodeater.beaver
@woodeater.beaver Месяц назад
Thank you so much sir! This was the main reference for our capstone project and it just feels wrong to not show appreciation even in the least possible way. So I wish a great life ahead of you and God bless you more!!!
@andrewbateman2282
@andrewbateman2282 Год назад
Thanks for doing this video, very well put together with a lot of content. I learnt a lot.
@gozman20
@gozman20 Год назад
What I really like about this guy is the extra effort he puts in explaining things.
@47debonair
@47debonair Год назад
Totally true!! Excellent teacher
@niteshprajapat.d3v
@niteshprajapat.d3v Год назад
Top-notch project🔥 Love to see such amazing projects
@dalestewart
@dalestewart Год назад
Once again, another professional tutorial.👍
@cubedev4838
@cubedev4838 Год назад
Amazing!! I believe your channel will hit 1M subs soon if u consistently make this quality kind of video...
@Dsandles47
@Dsandles47 Год назад
Whenever I see anything new from Ed Roh, I click without even reading-that’s how good his stuff is.
@vancouverrrr
@vancouverrrr Год назад
its Ed Roh put some respect on his name buddy
@Dsandles47
@Dsandles47 Год назад
@@vancouverrrr lmao spell check caught me lackin’
@obbybobson
@obbybobson Год назад
agree! incredible value !
@47debonair
@47debonair Год назад
This review/comment made me take the tutorial!! Cheers
@isidroleonyork2157
@isidroleonyork2157 9 месяцев назад
@EdRoh, great tutorial. Awesome explanation of setup and logical process. Thanks. I am having a problem with dependency conflicts when installing the mongoose-currency package? any ideas?
@askeralshanbayev6226
@askeralshanbayev6226 Год назад
All is so professional. Please more dashboard apps! :)
@gbtech8602
@gbtech8602 Год назад
EdRoh, Thanks again for this amazing project, could you do one project for React native?
@FahadKiani1
@FahadKiani1 7 месяцев назад
Thanks EdRoh - would love to see some more JS and ML projects
@pasindudeshanwijesirigunaw1726
best learning stuff. love your teaching way and content❤
@SaptarshiMajumdar
@SaptarshiMajumdar 10 месяцев назад
Really loved this video. Looking forward to using Recharts in some of my future projects. PS: Is there a way to publish this on vercel instead?
@chimenemokandu3791
@chimenemokandu3791 Год назад
This is really amazing ✨️ Thanks for all you do
@claytonvanderhaar3772
@claytonvanderhaar3772 7 дней назад
Hi Ed this is one of the best tutorials out there, explained perfectly and so much detail
@Marian-yv4qu
@Marian-yv4qu Год назад
I think Material UI is the problem for intellisense. When I use in small or large projects vs code works laggy. Great tutorial btw ! 😀
@MarioTrazzi
@MarioTrazzi Год назад
Whenever I see anything new from Ed Roh, I click without even reading-that’s how good his stuff is.²
@siboruremarc
@siboruremarc Год назад
Thank you are so generous for this free course and source code
@EdRohDev
@EdRohDev Год назад
thanks
@dineshmadhav6878
@dineshmadhav6878 Год назад
bring more machine learning related projects they are interesting please..
@joelprince963
@joelprince963 11 месяцев назад
@EdRohDev, thanks for the awesome tutorial. Can you pls include a session as a continuation to this video that includes login/log out and validation using Auth0 or JWT along with some testing using jest. Looking forward to hearing from you soon. Thanks :)
@allfashionscience8968
@allfashionscience8968 Год назад
Hey Edroh Waiting For video calling App I hope you will make A video on that soon ❤
@Ikigai_adventures
@Ikigai_adventures Год назад
Thanks for such a amazing content, I hope you are feeling much better now.
@EdRohDev
@EdRohDev Год назад
definitely am. Thanks for the wishes
@accesoyaong
@accesoyaong 11 месяцев назад
hey thanks for this tutorial it's super cool! One question: what is the use or which benefits are we getting from passing this two options: - useNewUrlParser: true, - useUnifiedTopology: true when we connect to mongoose?
@indiancuriousvoice8773
@indiancuriousvoice8773 Год назад
Vite has a little bug when taking multiple onchange event by using a onchange handler function. Bugs is the first character is not printed in input.
@sudhaapple2098
@sudhaapple2098 Год назад
Hi Ed...could you please let me know how did u prepare that mock data...manually its very tedious, i am asking to know the source for other development mock data
@techgyanwithmaan5980
@techgyanwithmaan5980 Год назад
Please make a tutorial on a full stack chat app with mern Love your videos
@elva329
@elva329 Год назад
Your tutorial is great, I am learning it now, thank you. Just one question, the setup steps of connecting to Mongoose has a deprecated warning when running the project, it suggested using MongoClient when connecting to the database. After changing to use the MongoClient, the API wouldn't call. I am not sure if I was the only one who encountered this issue. I am using Node 18 and other dependencies are all using the lasted versions.
@dentistt248
@dentistt248 2 месяца назад
I had the same issue, how did you fix it?
@user-vg6ot5fy9b
@user-vg6ot5fy9b Год назад
great works again......thanks a lot Ed
@alexdabruh
@alexdabruh Год назад
great video! Will you do a video in nextjs and flutter in the future?
@eshw23
@eshw23 Год назад
Ed please make a social media app tutorial with Nextjs app router, tailwind, typescript, mongo, prisma, etc please please please your explanations are the best and i want to learn that stack
@user-gu8kz1tk3b
@user-gu8kz1tk3b 10 месяцев назад
Thanks for the great course! Why does the dashboard cannot display data?
@margotonik
@margotonik Год назад
Hi Ed!! I really like this project I want to do it but I haven't work with anaconda at all, I see you have it in your terminal anaconda3. Is it necessary ? I saw in the description of what we are going to use to build the project is not listed that’s why I am a little confused. Hope you can help me. Thank you so much! This project really have everything I need to show future recruiters what I've learned with a very nice visualization.
@user-cf1po1ic8y
@user-cf1po1ic8y Месяц назад
Excellent content, thank you for your work...
@naxtech__react7738
@naxtech__react7738 Год назад
Thanks a lot man this content is more than the paid content in Udemy ❤
@EdRohDev
@EdRohDev Год назад
thank you!
@marshallalkarim5385
@marshallalkarim5385 Год назад
@@EdRohDev We mean it..
@alejandromartinezramirez3312
Amazing projects, do you have any course of Material UI from scratch?
@FrancoTr20
@FrancoTr20 Год назад
Amazing content mate, thanks for sharing
@EdRohDev
@EdRohDev Год назад
thanks
@programmer545
@programmer545 Год назад
are you planning to bring another amazing MERN stack project for us? please we are waiting eagerly❣❣
@johnsitjar4521
@johnsitjar4521 Год назад
Good day sir,may I ask if you have a full tutorial for a fullstack that uses typscript,react and node js with an mvc approach.thanks and Godbless.
@uchennaofor1916
@uchennaofor1916 8 месяцев назад
Hi Ed Roh, for starters, thank you for this gift. Means a lot, honestly. I've been coding along and everything has been fine and great, encountered a few bumps due to package version clashes, that has been dealt with, but I'm currently stuck at trying to fetch the Products data to log onto the console. Precisely at [03:19:31] on the video above. It says there's a PARSING ERROR.. Please any tips to solve it would be helpful. Thanks
@nurafya24
@nurafya24 Год назад
Ed Roh the GOAT and a blessing
@khandoor7228
@khandoor7228 Год назад
Amazing Ed, Great job!
@EdRohDev
@EdRohDev Год назад
thank you
@michaelmaher4317
@michaelmaher4317 Год назад
Ed, you are out of this World 😍
@byc090020
@byc090020 Год назад
Thank you for all this free education! Appreciate all your hard work
@EdRohDev
@EdRohDev Год назад
thank you
@mohdali-yq8gq
@mohdali-yq8gq Год назад
Awesome dashboard which is really looking professional and great efforts to integrate it with the backend data which is another great feature. Such great examples are very, very rare on the RU-vid platform. Mr. EdRoh has only used the very updated and great tools in developing the subjected dashboard. It will really help immensely to the serious learners and new commers as well. At last I humbly request you to incorporate in the dashboard the following 1. Dropdowns to select some specific categories 2. Date picker to choose any specific date 3. Clickable chart to show the relevant data of the chart and also the dropdown to show the different kinds of chart of the selected chart. again, seriously appreciate your great efforts to post such a wonderful Dashboard on the RU-vid Channel
@Hacking-NASSA-with-HTML
@Hacking-NASSA-with-HTML Год назад
Thank you so much sir 🤝
@muradiyeorun3294
@muradiyeorun3294 Год назад
another video? you are amazing
@DigitalEchoVibe
@DigitalEchoVibe Месяц назад
you are amazing, thank you for creating this
@carlooo00s
@carlooo00s Год назад
weekend project ty ty
@xiaoruizheng7776
@xiaoruizheng7776 Год назад
great content as always !
@omri2430
@omri2430 2 месяца назад
using our theme settings 30:11 setting router 33:45 creating the navbar 43:28
@abuhossain4274
@abuhossain4274 Год назад
wow! hope this will nice lesson for us.
@stefanmilicic1313
@stefanmilicic1313 Год назад
Typescript! Thanks
@yusuftuncay6742
@yusuftuncay6742 Год назад
Another video so soon amazing
@bekirkarabulut7960
@bekirkarabulut7960 Год назад
Love watching!
@bulutsatan8058
@bulutsatan8058 Год назад
finance app is what I needed
@fullstackoverload7859
@fullstackoverload7859 Год назад
What is the difference between a container and a scene in react.js. I;m used to a folder structure that uses components and containers
@digitnomad
@digitnomad Год назад
thanks for sharing, but why not nextjs Ed?
@rugucloud
@rugucloud 4 месяца назад
more vite project, please~
@mihaelacostea5783
@mihaelacostea5783 Год назад
Hey, how advanced is this tutorial? If you know the basics of JS, Express and Node, can you do it?
@mr.daniish
@mr.daniish Год назад
Ed I love you man!
@frankwang7843
@frankwang7843 Год назад
your web design taste is good, did you speed time to learn UI design?
@williamrobersone3582
@williamrobersone3582 9 месяцев назад
@EdRohDev Good content Ed. I have a question, what should I do about this error: TypeError: Undefined type `Map` at `expensesByCategory`? It occurs for me at 2:17:07...I'm not able to view the array data in the console.
@harshavardhanpatekar5697
@harshavardhanpatekar5697 3 месяца назад
Hi i have the same error. Have you resolved it??
@shreyanshishrivastava8964
@shreyanshishrivastava8964 24 дня назад
Same
@_jeff.medeiros
@_jeff.medeiros Год назад
Cade os brasileiros kkkkkkkk o cara usando o ícone do pix mt bom kkkkkkkkkk Nice tutorial man, loved it!
@randerins
@randerins Год назад
Nem reparei kkkkkkk
@nanojoel
@nanojoel 26 дней назад
Very interesting video is there a way to make apps without learning code?
@yasarkaragun-kd8vp
@yasarkaragun-kd8vp Год назад
love the content keep post!
@mzfitness5533
@mzfitness5533 11 месяцев назад
Does anyone know how he seeded data for two schemas that related to each other? Transactions and Products? I'm confused how you seed those if they both relate to each other
@eugenem529
@eugenem529 Год назад
I was wondering what I am going to do this evening… Well, I wonder no more!
@yyxx9309
@yyxx9309 Год назад
Man!!! THANK YOU!!!
@ImamNurArifinHA
@ImamNurArifinHA Год назад
great video,, i like that,, auto like and subscribe 💯
@PUBG_fatihi
@PUBG_fatihi Год назад
very grateful
@joshuaskaplan
@joshuaskaplan Год назад
Can I change it from finance to other tracking like health etc
@agustiinalonso1
@agustiinalonso1 Год назад
Hello, very good work, one question, when I install mongoose and mongoose-currency, only version 4 of mongoose is compatible, which is not compatible with mongo DB atlas.
@nicholas6406
@nicholas6406 Год назад
You can go into the dependencies and change it to a more current version so that the install can still go through
@zafarali6915
@zafarali6915 Год назад
Accounts management app like Quick books , Peach tree is not available on entire youtube... can you plz bring a project like this...
@midhundc7946
@midhundc7946 9 месяцев назад
Can I start this project without any knowledge of node and react ?
@Rikimkigsck
@Rikimkigsck 11 месяцев назад
Thank you so much for this video. But I wish you used next.js and tailwind
@mysunshine3386
@mysunshine3386 11 месяцев назад
hi have you completed the project? I'm having an issue while connecting to mongodb ..."invalid mongodb uri" can you please help me please
@Rikimkigsck
@Rikimkigsck 11 месяцев назад
@@mysunshine3386 I am sorry i didn't but I encountered that issue in my other project before. The solution was so simple yet I spent so much time trying to solve it. Unfortunately I can't remember how I solved that problem. Lmao I remember now I put the username and password wrong. Make sure to write those correct
@Rikimkigsck
@Rikimkigsck 11 месяцев назад
@@mysunshine3386 when you write your password delete part as well google deleted my other comment because I copy pasted mongo db's code to illustrate you. Here "mongodb+srv://myproject:" remove '' completely
@Yahya_Umar
@Yahya_Umar Год назад
This great thanks ❤
@billwhite515
@billwhite515 Год назад
I wonder if it's possible to make an angular video just like this for comparison
@subhrajeetpradhan925
@subhrajeetpradhan925 Год назад
I have one question... In the process of building the website. Is every thing is free?
@leinah3671
@leinah3671 11 месяцев назад
can I add my own expenses, incomes, & transaction on this app?
@abdelrahmanzaitoun4402
@abdelrahmanzaitoun4402 5 месяцев назад
thinking to start this tutorial. Any tip?
@funterban6536
@funterban6536 8 месяцев назад
nice project ever ❤
@gauravsawant5216
@gauravsawant5216 Год назад
will this work if i have some other data ??? i want to do similar project so i want some help, in my project the application should work when i upload a csv file of a company and it should show this kind of dashbord but i dont know how that will work
@omonymouz
@omonymouz Год назад
thank you!
@darelbvcr687
@darelbvcr687 Год назад
can u make some project with next js typescript tailwind graphql?
@fahinmiah2212
@fahinmiah2212 8 месяцев назад
Can I do It as a final year project
@saifkhan-ip6cr
@saifkhan-ip6cr Год назад
@Edroh there is no login page???
@rajdipbiswas388
@rajdipbiswas388 5 месяцев назад
Can I make it with dajango for backend instead nodejs?
@juhaniGran4t
@juhaniGran4t Год назад
you will make tons of money if become an educator and have your online educational institute, thats for sure
Далее
The Only CSS Layout Guide You'll Ever Need
24:22
Просмотров 111 тыс.
These coding projects give you an unfair advantage
8:13
Пранк над Катей 🤣🤣🤣
01:00
Просмотров 162 тыс.
Fastest way to become a Web Developer in 2024
9:47
Просмотров 527 тыс.
PUTIN and his “peaceful” ultimatum 😁 [Parody]
5:40
Frontend Web Development Projects that got me hired
10:38
ТОП-5 культовых телефонов‼️
1:00
ВЫ ЧЕ СДЕЛАЛИ С iOS 18?
22:40
Просмотров 116 тыс.
Дени против умной колонки😁
0:40