{"id":18614912,"url":"https://github.com/andrewjbateman/mern-stack-data","last_synced_at":"2026-04-04T22:33:54.021Z","repository":{"id":96860662,"uuid":"403658239","full_name":"AndrewJBateman/mern-stack-data","owner":"AndrewJBateman","description":":clipboard: A Full-stack data display app with React frontend and Express-MongoDB-Node.js backend","archived":false,"fork":false,"pushed_at":"2023-04-21T13:34:58.000Z","size":1639,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-17T01:34:27.357Z","etag":null,"topics":["express","expressjs","javascript","mern-stack","mongodb","mongodb-atlas","mongodb-database","node","nodejs","react","reactjs","reactjs-library"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AndrewJBateman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-09-06T14:44:42.000Z","updated_at":"2023-05-01T17:15:37.000Z","dependencies_parsed_at":"2025-02-18T03:44:50.053Z","dependency_job_id":"15dcc298-2f47-475b-851f-c3011fdf30be","html_url":"https://github.com/AndrewJBateman/mern-stack-data","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AndrewJBateman/mern-stack-data","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fmern-stack-data","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fmern-stack-data/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fmern-stack-data/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fmern-stack-data/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndrewJBateman","download_url":"https://codeload.github.com/AndrewJBateman/mern-stack-data/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fmern-stack-data/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31416776,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-04T20:09:54.854Z","status":"ssl_error","status_checked_at":"2026-04-04T20:09:44.350Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["express","expressjs","javascript","mern-stack","mongodb","mongodb-atlas","mongodb-database","node","nodejs","react","reactjs","reactjs-library"],"created_at":"2024-11-07T03:27:24.829Z","updated_at":"2026-04-04T22:33:54.000Z","avatar_url":"https://github.com/AndrewJBateman.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# :zap: MERN Full Stack Tracker\n\n* Mongo Express React Node (MERN) full-stack app, integrates React frontend with Node.js backend\n* Code from [@EdRohDev](https://www.youtube.com/@EdRohDev) with code changes and commenting added\n* **Note:** to open web links in a new window use: _ctrl+click on link_\n\n![GitHub repo size](https://img.shields.io/github/repo-size/AndrewJBateman/mern-stack-data?style=plastic)\n![GitHub pull requests](https://img.shields.io/github/issues-pr/AndrewJBateman/mern-stack-data?style=plastic)\n![GitHub Repo stars](https://img.shields.io/github/stars/AndrewJBateman/mern-stack-data?style=plastic)\n![GitHub last commit](https://img.shields.io/github/last-commit/AndrewJBateman/mern-stack-data?style=plastic)\n\n## :page_facing_up: Table of contents\n\n* [:zap: MERN Full Stack Tracker](#zap-mern-full-stack-tracker)\n  * [:page\\_facing\\_up: Table of contents](#page_facing_up-table-of-contents)\n  * [:books: General info](#books-general-info)\n    * [:books: Backend](#books-backend)\n    * [:books: Frontend](#books-frontend)\n  * [:camera: Screenshots](#camera-screenshots)\n  * [:signal\\_strength: Backend Technologies](#signal_strength-backend-technologies)\n  * [:signal\\_strength: Frontend Technologies](#signal_strength-frontend-technologies)\n  * [:floppy\\_disk: Setup - Backend](#floppy_disk-setup---backend)\n    * [:floppy\\_disk: Setup - Frontend](#floppy_disk-setup---frontend)\n  * [:computer: Code Examples](#computer-code-examples)\n  * [:cool: Features](#cool-features)\n  * [:clipboard: Status \\\u0026 To-Do List](#clipboard-status--to-do-list)\n  * [:clap: Inspiration](#clap-inspiration)\n  * [:file\\_folder: License](#file_folder-license)\n  * [:envelope: Contact](#envelope-contact)\n\n## :books: General info\n\n### :books: Backend\n\n* MongoDB Atlas used as the backend database - requires mongodb to be running\n* [Mongoose query models](https://mongoosejs.com/docs/queries.html) used to interact with the database\n* 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.\n* Node.js routes used with controller functions\n* ![Nodejs diagram](./img/diagram.png)\n\n### :books: Frontend\n\n* [React reducers](https://reactjs.org/docs/hooks-reference.html) functions that take the current state and an action as arguments, and return a new state result. In other words, (state, action) =\u003e newState.\n\n## :camera: Screenshots\n\n![Backend screenshot](./imgs/mongodb.png)\n![Frontend screenshot](./imgs/charts.png)\n\n## :signal_strength: Backend Technologies\n\n* [MongoDB Community Server v4](https://www.mongodb.com/download-center/community) Document database so it uses Object Document Mapper (ODM) to translate between objects in code and the document representation of the data.\n* [MongoDB Compass v1](https://www.mongodb.com/es/products/compass) to explore and manipulate MongoDB data\n* [Mongoose v7](https://www.npmjs.com/package/mongoose) async object modeling tool\n* [Express.js middleware v4](https://expressjs.com/)\n* [Node.js v18](https://nodejs.org/es/)\n\n## :signal_strength: Frontend Technologies\n\n* [Vite v4](https://vitejs.dev/) Frontend Tooling\n* [React framework v17](https://reactjs.org/)\n* [@mui Material UI v5](https://mui.com/material-ui/getting-started/overview/) react UI components\n* [@mui Data Grid v6](https://mui.com/x/api/data-grid/data-grid/) react data table and react data grid\n* [@mui styled()](https://mui.com/system/styled/) components\n* [@mui Material Icons](https://mui.com/material-ui/material-icons/)\n* [Recharts v2](https://recharts.org/en-US/) bar, line, pie and scatter charts used\n* [regression v2](https://www.npmjs.com/package/regression) JavaScript module containing a collection of linear least-squares fitting methods for simple data analysis.\n\n## :floppy_disk: Setup - Backend\n\n* Install backend dependencies using `npm i`\n* Install [nodemon](https://www.npmjs.com/package/nodemon) globally if you don't already have it\n* Register with [MongoDB Atlas](www.mongodb.com), create \u0026 configure a database cluster and add connection string to `.env` file (see `.env.example` file)\n* Run `npm run dev` for a dev server\n* Backend data can be viewed using Thunder Client using urls for example: `localhost:1337/kpi/kpis`\n\n### :floppy_disk: Setup - Frontend\n\n* Change to `/client` directory run `npm run dev`. Frontend will open at `http://localhost:5173/`\n\n## :computer: Code Examples\n\n* Use React hook useMemo to cache results of data mapping\n\n```typescript\n  const revenue = useMemo(() =\u003e {\n    const revenueData =\n      data \u0026\u0026\n      data[0].monthlyData.map(({ month, revenue }) =\u003e {\n        return {\n          name: month.substring(0, 3),\n          revenue: revenue,\n        };\n      });\n    console.log(\"revenueData\", revenueData);\n    return revenueData;\n  }, [data]);\n```\n\n## :cool: Features\n\n* graph data stored in cache and derived from database data using map functions\n\n## :clipboard: Status \u0026 To-Do List\n\n* Status: Working\n* To-Do: add commenting\n\n## :clap: Inspiration\n\n* [EdRohBuild A MERN Finance Dashboard App | Machine Learning, Typescript, React, Node, MUI, Deployment](https://www.youtube.com/watch?v=uoJ0Tv-BFcQ\u0026t=16s)\n* [React documentation](https://reactjs.org/docs/getting-started.html)\n* [Medium article: Why MERN?](https://medium.com/geekculture/why-mern-a125cca5ab0e)\n* [CSS Tricks: A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\n## :file_folder: License\n\n* N/A.\n\n## :envelope: Contact\n\n* Repo created by [ABateman](https://github.com/AndrewJBateman), email: gomezbateman@yahoo.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Fmern-stack-data","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrewjbateman%2Fmern-stack-data","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Fmern-stack-data/lists"}