{"id":18614913,"url":"https://github.com/andrewjbateman/mern-stack-records","last_synced_at":"2026-05-14T21:33:00.467Z","repository":{"id":96860667,"uuid":"311104714","full_name":"AndrewJBateman/mern-stack-records","owner":"AndrewJBateman","description":":clipboard: Mongo Express React Node (MERN) full-stack app to perform CRUD operations on records","archived":false,"fork":false,"pushed_at":"2021-06-18T15:24:50.000Z","size":1678,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-21T16:57:42.680Z","etag":null,"topics":["css-framework","express-middleware","material-ui","mern","mern-stack","momentjs","mongodb-atlas","react","react-redux","tutorial-code"],"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":"2020-11-08T16:25:56.000Z","updated_at":"2022-09-21T11:12:59.000Z","dependencies_parsed_at":"2023-03-30T11:37:24.720Z","dependency_job_id":null,"html_url":"https://github.com/AndrewJBateman/mern-stack-records","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AndrewJBateman/mern-stack-records","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fmern-stack-records","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fmern-stack-records/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fmern-stack-records/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fmern-stack-records/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndrewJBateman","download_url":"https://codeload.github.com/AndrewJBateman/mern-stack-records/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fmern-stack-records/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33044113,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-13T13:14:54.681Z","status":"online","status_checked_at":"2026-05-14T02:00:06.663Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["css-framework","express-middleware","material-ui","mern","mern-stack","momentjs","mongodb-atlas","react","react-redux","tutorial-code"],"created_at":"2024-11-07T03:27:24.834Z","updated_at":"2026-05-14T21:33:00.451Z","avatar_url":"https://github.com/AndrewJBateman.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# :zap: MERN Full Stack Records\n\n* Mongo Express React Node (MERN) full-stack app to perform CRUD operations on records\n* Tutorial code from [JavaScript Mastery](https://www.youtube.com/channel/UCmXmlB4-HJytD7wek0Uo97A) with some frontend changes - see 'Inspiration' below.\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-records?style=plastic)\n![GitHub pull requests](https://img.shields.io/github/issues-pr/AndrewJBateman/mern-stack-records?style=plastic)\n![GitHub Repo stars](https://img.shields.io/github/stars/AndrewJBateman/mern-stack-records?style=plastic)\n![GitHub last commit](https://img.shields.io/github/last-commit/AndrewJBateman/mern-stack-records?style=plastic)\n\n## :page_facing_up: Table of contents\n\n* [:zap: MERN Full Stack Records](#zap-mern-full-stack-records)\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-features)\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* Node.js, Express \u0026 MongoDB cloud Atlas used to create the backend.\n\n### :books: Frontend\n\n* React frontend form to add text/image data to backend database\n* Text \u0026 image data is displayed in ui-material cards\n* Display is responsive: uses Material-UI [Grid](https://material-ui.com/api/grid/)\n* Material-UI [makeStyles](https://material-ui.com/styles/api/#makestyles-styles-options-hook) used to link a style sheet with a function component using a hook. `Grow`\n* User can add likes to a record but there is no limit on the times they can add likes - a time delay could be added, or the user ip could be used to limit likes\n\n## :camera: Screenshots\n\n![screenshot](./img/front.png)\n![screenshot](./img/back.png)\n\n## :signal_strength: Backend Technologies\n\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* [MongoDB Atlas](https://www.mongodb.com/cloud/atlas) NoSQL cloud database service\n* [Express.js middleware v4](https://expressjs.com/): Note, as of version 4.16+, their own body-parser implementation is now included by default\n* [Node.js v14](https://nodejs.org/es/)\n* [Nodemon](https://www.npmjs.com/package/nodemon) npm module so backend server will automatically restart afdter code changes\n\n## :signal_strength: Frontend Technologies\n\n* [React framework v17](https://reactjs.org/)\n* [React-Redux v7](https://react-redux.js.org/) store interaction logic, re-render only changed data\n* [Redux-Thunk v2](https://www.npmjs.com/package/redux-thunk) middleware for Redux to write action creators that return an (asynchronous) function instead of an action.\n* [Material-UI v4](https://www.npmjs.com/package/@material-ui/core) npm module for React components\n* [Material-UI Official Site](https://material-ui.com/)\n* [Bootstrap v4](https://getbootstrap.com/) component library\n* [react-file-base64 v1](https://www.npmjs.com/package/react-file-base64) to convert files to base64\n* [Axios v0.21.0](https://www.npmjs.com/package/axios) promise-based http client\n* [SVG Backgrounds](https://www.svgbackgrounds.com/) source of custom backgrounds with compact file-size (~5KB) \u0026 supported by all modern browsers\n\n## :floppy_disk: Setup - Backend\n\n* Change to `/server` 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 - there is an example `.env.example` file to help.\n* Run `npm start` 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* Change to `/client` directory\n* Install dependencies using `npm i`\n* Run `npm start`. Frontend will open at `http://localhost:3000/`\n\n## :computer: Code Examples\n\n* Extract from `server/controllers/posts.js` - to delete a post. The post id is [read from the route \"parameter\"](https://expressjs.com/en/guide/routing.html). A check is made to verify it is a valid id. If it is valid then the post is removed using the mongoose `findByIdAndRemove()` command\n\n```javascript\nexport const deletePost = async (req, res) =\u003e {\n\tconst { id } = req.params;\n\n\tif (!mongoose.Types.ObjectId.isValid(id))\n\t\treturn res.status(404).send(`No post with id: ${id}`);\n\n\tawait PostMessage.findByIdAndRemove(id);\n\n\tres.json({ message: 'Post deleted successfully.' });\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 [React Hooks](https://reactjs.org/docs/hooks-intro.html)\n* UI-Material cards look good.\n\n## :clipboard: Status \u0026 To-Do List\n\n* Status: Working. Not deployed\n* To-Do: Complete tutorial to deploy app to Heroku (video 2: 1.11.10)\n\n## :clap: Inspiration\n\n* [Javascript Mastery: Build and Deploy a Full Stack MERN Project - React + Redux, Node, Express, MongoDB [Part 1/2]](https://www.youtube.com/watch?v=ngc9gnGgUdA\u0026t=3589s)\n* [Javascript Mastery: Build and Deploy a Full Stack MERN Project - React + Redux, Node, Express, MongoDB [Part 2/2]](https://www.youtube.com/watch?v=aibtHnbeuio\u0026t=171s)\n* [React documentation](https://reactjs.org/docs/getting-started.html)\n* [REST API Tutorial website: HTTP Status Codes](https://www.restapitutorial.com/httpstatuscodes.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-records","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrewjbateman%2Fmern-stack-records","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Fmern-stack-records/lists"}