{"id":18614767,"url":"https://github.com/andrewjbateman/mevn-stack-notes","last_synced_at":"2026-03-17T23:08:55.843Z","repository":{"id":40820677,"uuid":"274452889","full_name":"AndrewJBateman/mevn-stack-notes","owner":"AndrewJBateman","description":":clipboard: Full-stack app using MongoDB, Express, Vue and Node.js for CRUD operations","archived":false,"fork":false,"pushed_at":"2023-11-01T15:22:26.000Z","size":3881,"stargazers_count":4,"open_issues_count":10,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-11T02:46:46.184Z","etag":null,"topics":["axios","bootstrap","express-middleware","heroku","mevn-stack","mongodb-atlas","mongodb-database","nodejs","vue"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","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":"LICENSE","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-06-23T16:16:10.000Z","updated_at":"2023-11-01T15:21:17.000Z","dependencies_parsed_at":"2023-02-08T09:46:52.528Z","dependency_job_id":"0914580c-35c9-4903-ae6b-44b92f8d0897","html_url":"https://github.com/AndrewJBateman/mevn-stack-notes","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AndrewJBateman/mevn-stack-notes","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fmevn-stack-notes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fmevn-stack-notes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fmevn-stack-notes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fmevn-stack-notes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndrewJBateman","download_url":"https://codeload.github.com/AndrewJBateman/mevn-stack-notes/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fmevn-stack-notes/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30635156,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-17T22:38:22.569Z","status":"ssl_error","status_checked_at":"2026-03-17T22:38:11.804Z","response_time":56,"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","bootstrap","express-middleware","heroku","mevn-stack","mongodb-atlas","mongodb-database","nodejs","vue"],"created_at":"2024-11-07T03:26:56.054Z","updated_at":"2026-03-17T23:08:55.806Z","avatar_url":"https://github.com/AndrewJBateman.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# :zap: MEVN Stack Notes\n\n* Displays simple text notes in a grid of Bootstrap cards.\n* Uses the MongoDB, Express, Vue \u0026 Node.js (MEVN) stack to perform Create, Read, Update and Delete (CRUD) operations.\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/mevn-stack-notes?style=plastic)\n![GitHub pull requests](https://img.shields.io/github/issues-pr/AndrewJBateman/mevn-stack-notes?style=plastic)\n![GitHub Repo stars](https://img.shields.io/github/stars/AndrewJBateman/mevn-stack-notes?style=plastic)\n![GitHub last commit](https://img.shields.io/github/last-commit/AndrewJBateman/mevn-stack-notes?style=plastic)\n\n## :page_facing_up: Table of contents\n\n* [:zap: MEVN Stack Notes](#zap-mevn-stack-notes)\n  * [:page_facing_up: Table of contents](#page_facing_up-table-of-contents)\n  * [:books: General info](#books-general-info)\n  * [:camera: Screenshots](#camera-screenshots)\n  * [:signal_strength: Technologies](#signal_strength-technologies)\n    * [Frontend](#frontend)\n    * [Backend](#backend)\n    * [Full-Stack](#full-stack)\n  * [:floppy_disk: Setup](#floppy_disk-setup)\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* Axios used to send/receive data from the MongoDB backend\n* A responsive grid of notes is displayed on the Vue frontend using data-binding and a v-for loop. Once a note is added then the grid of notes is reloaded.\n* There is an app info. page\n* Backend node.js code separated into routes/controller files with a Mongoose model Note schema.\n* Latest Mongoose v6 connection config. used (as of oct. 2021) with no deprecation warnings. Note an old config. will stop any Mongoose-based app from working.\n* The app is deployed on the Heroku 18 stack, based on Ubuntu 18.04\n\n## :camera: Screenshots\n\n![Example screenshot](./img/notes.png)\n![Example screenshot](./img/create.png)\n![Example screenshot](./img/edit.png)\n![Example screenshot](./img/mongodb.png)\n![Example screenshot](./img/backend.png)\n![Example screenshot](./img/info.png)\n\n## :signal_strength: Technologies\n\n### Frontend\n\n* [Vue framework v3](https://vuejs.org/)\n* [Axios v0.21.1](https://github.com/axios/axios), a promise-based http client, used to consume API data.\n* [vue-axios v3](https://www.npmjs.com/package/vue-axios) for integrating axios to Vuejs\n* [Vue DevTools extension for Chrome](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)\n* [Bootstrap v4](https://getbootstrap.com/) components and styles\n* [Vue moment v4](https://github.com/brockpetrie/vue-moment#readme) to convert UTC date format\n* [Material svg icons](https://material.io/resources/icons/?search=cale\u0026icon=event_note\u0026style=baseline)\n\n### Backend\n\n* [Express v4](https://expressjs.com/)\n* [Mongoose v6](https://mongoosejs.com/)\n* [cors v2](https://www.npmjs.com/package/cors) Cross Origin Resource Sharing Connect/Express middleware\n* [Node v14](https://nodejs.org/en/) JavaScript runtime built on Chrome's V8 JavaScript engine.\n\n## :floppy_disk: Setup\n\n**Frontend:**\n\n* from `/client` directory: `npm run lint` to lint files\n* `npm run serve` to run server.\n* Navigate to `http://localhost:8080/`. The app will automatically reload if you change any of the source files.\n* `npm run build` to create build file\n\n**/api Backend:**\n\n* `nodemon server.js` to run node.js server.\n* Navigate to `http://localhost:4000/` to see JSON object with todos or an empty array (refresh after changes - does not auto-update).\n* CRUD operations can be performed on this backend using the [Postman](https://www.postman.com/) API dev tool.\n\n**/ Full stack:**\n\n* `npm run dev` to run client and backend server concurrently. Navigate to `http://localhost:8080/` to see frontend and `http://localhost:4000/` to see backend (refresh after changes - does not auto-update).\n* Heroku `heroku login` to login, `git add .` then `git commit -m \"commit message...\"` then `git push heroku master` to deploy to Heroku\n\n## :computer: Code Examples\n\n* `note.controllers.js` - add new note to database using POST\n\n```javascript\n\nexports.post_note = async (req, res) =\u003e {\n  const newNote = new Note(req.body);\n  try {\n    const note = await newNote.save();\n    if (!note) throw new Error(\"Error saving note item\");\n    res.status(200).json(note);\n  } catch (error) {\n    res.status(500).json({ message: error.message });\n  }\n};\n```\n\n## :cool: Features\n\n* In dev - Front and backends are run with one command using concurrently set up in package.json\n* Display of card array is responsive so they wrap around nicely as screen size changes\n* Simple 'Notes Hub' tells user how many notes there are and lets them navigate to the add note or app info pages\n* note max title length set to 23 so it shows on 1 line in card\n* note max content length set to 280, same as a twitter post\n* backend code separates controller functions from routes\n* Updating a note will automatically update the date so it goes to the front of the (date-sorted) notes list\n\n## :clipboard: Status \u0026 To-Do List\n\n* Status: Working \u0026 deployed.Don't update Axios or you have to add a lot of strange (AxiosPromise) return types.\n* To-Do: Fix Websocket error. Consider alternative to Bootstrap to make app lighter - Tailwind\n\n## :clap: Inspiration\n\n* [Vue CLI Configuration Reference](https://cli.vuejs.org/config/#devserver-proxy)\n* [Medium article: Express JS— body-parser and why may not need it](https://medium.com/@mmajdanski/express-body-parser-and-why-may-not-need-it-335803cd048c)\n\n## :file_folder: License\n\n* This project is licensed under the terms of the MIT license.\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%2Fmevn-stack-notes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrewjbateman%2Fmevn-stack-notes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Fmevn-stack-notes/lists"}