Code  JS

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

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.

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

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 

Subscribe: https://www.youtube.com/@EdRohDev/featured 

#react #nodejs #typescript 

Build and Deploy a MERN Financial Dashboard App with Machine Learning Predictions
4.80 GEEK