- Mongo Express React Node (MERN) full-stack app, integrates React frontend with Node.js backend
- Code from @EdRohDev with code changes and commenting added
- Note: to open web links in a new window use: ctrl+click on link
- MongoDB Atlas used as the backend database - requires mongodb to be running
- Mongoose query models used to interact with the database
- Note: I used 'my ip address' as the whitelist network access in MongoDB.Atlas but this required daily updating when my ip address changed - otherwise with a non-matching ip address the backend simply did not work. Better to use the localhost address to avoid this problem but may be less secure.
- Node.js routes used with controller functions
- React reducers functions that take the current state and an action as arguments, and return a new state result. In other words, (state, action) => newState.
- MongoDB Community Server v4 Document database so it uses Object Document Mapper (ODM) to translate between objects in code and the document representation of the data.
- MongoDB Compass v1 to explore and manipulate MongoDB data
- Mongoose v7 async object modeling tool
- Express.js middleware v4
- Node.js v18
- Vite v4 Frontend Tooling
- React framework v17
- @mui Material UI v5 react UI components
- @mui Data Grid v6 react data table and react data grid
- @mui styled() components
- @mui Material Icons
- Recharts v2 bar, line, pie and scatter charts used
- regression v2 JavaScript module containing a collection of linear least-squares fitting methods for simple data analysis.
- Install backend dependencies using
npm i
- Install nodemon globally if you don't already have it
- Register with MongoDB Atlas, create & configure a database cluster and add connection string to
.env
file (see.env.example
file) - Run
npm run dev
for a dev server - Backend data can be viewed using Thunder Client using urls for example:
localhost:1337/kpi/kpis
- Change to
/client
directory runnpm run dev
. Frontend will open athttp://localhost:5173/
- Use React hook useMemo to cache results of data mapping
const revenue = useMemo(() => {
const revenueData =
data &&
data[0].monthlyData.map(({ month, revenue }) => {
return {
name: month.substring(0, 3),
revenue: revenue,
};
});
console.log("revenueData", revenueData);
return revenueData;
}, [data]);
- graph data stored in cache and derived from database data using map functions
- Status: Working
- To-Do: add commenting
- EdRohBuild A MERN Finance Dashboard App | Machine Learning, Typescript, React, Node, MUI, Deployment
- React documentation
- Medium article: Why MERN?
- CSS Tricks: A Complete Guide to Flexbox
- N/A.
- Repo created by ABateman, email: [email protected]