{"id":18614914,"url":"https://github.com/andrewjbateman/mern-stack-tracker","last_synced_at":"2026-04-04T20:33:31.075Z","repository":{"id":55588023,"uuid":"247674771","full_name":"AndrewJBateman/mern-stack-tracker","owner":"AndrewJBateman","description":":clipboard: Full stack app using React as the frontend with a node.js/express/MongoDB with Mongoose backend","archived":false,"fork":false,"pushed_at":"2022-12-12T05:36:06.000Z","size":2330,"stargazers_count":0,"open_issues_count":3,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-01-03T18:50:56.987Z","etag":null,"topics":["axios-restful","backend","backend-database","controllers","express-middleware","frontend","mern","mern-stack","mongodb","mongodb-database","mongoose","node-js","react","routes-navigation"],"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}},"created_at":"2020-03-16T10:35:09.000Z","updated_at":"2024-11-21T18:54:55.000Z","dependencies_parsed_at":"2023-01-27T14:17:07.034Z","dependency_job_id":null,"html_url":"https://github.com/AndrewJBateman/mern-stack-tracker","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AndrewJBateman/mern-stack-tracker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fmern-stack-tracker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fmern-stack-tracker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fmern-stack-tracker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fmern-stack-tracker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndrewJBateman","download_url":"https://codeload.github.com/AndrewJBateman/mern-stack-tracker/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fmern-stack-tracker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31413269,"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":["axios-restful","backend","backend-database","controllers","express-middleware","frontend","mern","mern-stack","mongodb","mongodb-database","mongoose","node-js","react","routes-navigation"],"created_at":"2024-11-07T03:27:24.911Z","updated_at":"2026-04-04T20:33:31.052Z","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* Tutorial code - see [:clap: Inspiration](#clap-inspiration) below but with customisations - particularly the mongoose connection script is more detailed and react frontend table has proper Bootstrap buttons to avoid error messages with edit \u0026 delete links.\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-tracker?style=plastic)\n![GitHub pull requests](https://img.shields.io/github/issues-pr/AndrewJBateman/mern-stack-tracker?style=plastic)\n![GitHub Repo stars](https://img.shields.io/github/stars/AndrewJBateman/mern-stack-tracker?style=plastic)\n![GitHub last commit](https://img.shields.io/github/last-commit/AndrewJBateman/mern-stack-tracker?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: Backend Features](#cool-backend-features)\n    * [:cool: Frontend Features](#cool-frontend-featurres)\n  * [:clipboard: Status \u0026 To-Do List](#clipboard-status--to-do-list)\n  * [:clap: Inspiration](#clap-inspiration)\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 (or use Mongoose and Heroku mLab to access)\n* Mongoose models used to interact with the database\n* Postman used to test the backend, although the tutorial uses [Insomnia, a similar REST API](https://insomnia.rest/)\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 frontend includes a very simple Bootstrap navbar with just 3 links: home (the complete list of users/exercises), Add Exercise \u0026 Add User\n* Main content is a React table with 5 columns - see screenshots for details\n\n## :camera: Screenshots\n\n![Backend screenshot](./img/mongodb.png)\n![Backend screenshot](./img/postman.png)\n\n![Frontend screenshot](./img/list.png)\n![Frontend screenshot](./img/add-user.png)\n![Frontend screenshot](./img/add-exercise.png)\n\n## :signal_strength: Backend Technologies\n\n* [MongoDB Community Server v4](https://www.mongodb.com/download-center/community)\n* [Mongoose v5](https://mongoosejs.com/) object modelling for Node.js\n* [npm mongodb v3](https://www.npmjs.com/package/mongodb) official MongoDB driver for Node.js\n* [Express.js middleware v4](https://expressjs.com/)\n* [Node.js v12](https://nodejs.org/es/)\n\n## :signal_strength: Frontend Technologies\n\n* [React framework v17](https://reactjs.org/)\n* [Bootstrap v4](https://getbootstrap.com/) component library\n* [React datepicker v3](https://www.npmjs.com/package/react-datepicker)\n* [Axios v0.21.1](https://www.npmjs.com/package/axios) promise-based http client\n\n## :floppy_disk: Setup - Backend\n\n* Change to `/backend` directory\n* Install 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 cluster connection string to .env file\n* Run `nodemon server` for a dev server\n* Navigate to `http://localhost:5000/`. The server will automatically reload if you change any of the source files\n\n### :floppy_disk: Setup - Frontend\n\n* From top-level directory `mern-stack-tracker` run `npm start`. Frontend will open at `http://localhost:3000/`\n\n## :computer: Code Examples\n\n* Extract from `server.js` - connects to database using mongoose\n\n```javascript\nconst uri = process.env.ATLAS_URI;\nconst options = {\n  useNewUrlParser: true,\n  useCreateIndex: true,\n  useUnifiedTopology: true\n}\n\nmongoose\n  .connect(uri, options)\n  .catch(error =\u003e console.log(error));\n\nconst connection = mongoose.connection;\nconnection.once('open', () =\u003e {\nconsole.log(\"MongoDB database connection established successfully\");\n});\nmongoose.connection.on('error', err =\u003e {\n  logError('mongoose connection error', err);\n});\n```\n\n* Extract from `exercise-list.js` - using lifecycle method `componentDidMount()` to get list of exercises from backend database using Axios http client, after component output has been rendered to the DOM\n\n```javascript\n  componentDidMount() {\n    axios.get('http://localhost:5000/exercises/')\n      .then(response =\u003e {\n        this.setState({ exercises: response.data })\n      })\n      .catch((error) =\u003e {\n        console.log(error);\n      })\n  }\n```\n\n## :cool: Backend Features\n\n* All data stored in collections in a mongoDB Atlas database that costs nothing to use in the free tier option. Data can be edited from the mongoDB.Atlas collection or from within the React frontend\n\n### :cool: Frontend Features\n\n* Uses the [React componentDidMount() method](https://reactjs.org/docs/state-and-lifecycle.html)\n\n## :clipboard: Status \u0026 To-Do List\n\n* Status: Working full-stack app\n* To-Do: Nothing\n\n## :clap: Inspiration\n\n* [The Best React JS by Beau Carnes: Learn the MERN Stack Full Tutorial MongoDB, Express, React, Node js](https://www.youtube.com/watch?v=FBeete8azkY)\n* [React documentation](https://reactjs.org/docs/getting-started.html)\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-tracker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrewjbateman%2Fmern-stack-tracker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Fmern-stack-tracker/lists"}