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

To try everything Brilliant has to offer—free—for a full 30 days, visit http://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: https://nodejs.org/en/download/
npx: https://www.npmjs.com/package/npx
vscode: https://code.visualstudio.com/download
nodemon: https://github.com/remy/nodemon
vite: https://vitejs.dev/guide/
react router: https://reactrouter.com/en/v6.3.0/getting-started/installation
react dropzone: https://github.com/react-dropzone/react-dropzone
redux toolkit: https://redux-toolkit.js.org/introduction/getting-started
redux toolkit query: https://redux-toolkit.js.org/rtk-query/overview
regression: https://github.com/tom-alexander/regression-js
mui: https://mui.com/material-ui/getting-started/overview/
mui data grid: https://mui.com/x/api/data-grid/data-grid/
recharts: https://recharts.org/en-US/
flexbox guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
css grid cheatsheet: https://grid.malven.co/
data model diagram: https://lucid.app/lucidchart/23d63d3a-f89c-472d-99d3-4c0a35c67816/edit?viewport_loc=81%2C175%2C856%2C919%2C0_0&invitationId=inv_863ef5c2-6c3d-42ec-85da-c522ddb15430viewport_loc=81%2C175%2C856%2C919%2C0_0&invitationId=inv_863ef5c2-6c3d-42ec-85da-c522ddb15430)
redux dev tools: https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en
pesticide extension: https://chrome.google.com/webstore/detail/pesticide-for-chrome/bakpbgckdnepkmkeaiomhmfcnejndkbi
fly io node: https://fly.io/docs/languages-and-frameworks/node/
vercel: https://vercel.com/
docker: https://www.docker.com/products/docker-desktop/

Completed Code:
github: https://github.com/ed-roh/finance-app
github theme: https://github.com/ed-roh/finance-app/blob/master/client/src/theme.ts
github data: https://github.com/ed-roh/finance-app/blob/master/server/data/data.js

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: https://www.youtube.com/channel/UCMoEx7gz7IbJHv733yEi2aA/?sub_confirmation=1 for more web development and web 3.0 blockchain tutorials!
My NEW Discord: https://discord.gg/N58wa7JmDB
———————————
Who is EdRoh? I’m a lead engineer for a publicly traded company and have been developing for a decade now.