AndrewJBateman / mern-stack-data

:clipboard: A Full-stack data display app with React frontend and Express-MongoDB-Node.js backend

⚡ MERN Full Stack Tracker

• 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

📄 Table of contents

• ⚡ MERN Full Stack Tracker
  • 📄 Table of contents
  • 📚 General info
    • 📚 Backend
    • 📚 Frontend
  • 📷 Screenshots
  • 📶 Backend Technologies
  • 📶 Frontend Technologies
  • 💾 Setup - Backend
    • 💾 Setup - Frontend
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

📚 Backend

• 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
• 

📚 Frontend

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

📷 Screenshots

📶 Backend Technologies

• 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

📶 Frontend Technologies

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

💾 Setup - Backend

• 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

💾 Setup - Frontend

• Change to /client directory run npm run dev. Frontend will open at http://localhost:5173/

💻 Code Examples

• 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]);

🆒 Features

• graph data stored in cache and derived from database data using map functions

📋 Status & To-Do List

• Status: Working
• To-Do: add commenting

👏 Inspiration

• 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

📁 License

• N/A.

✉️ Contact

• Repo created by ABateman, email: [e-mail]