{"id":18614918,"url":"https://github.com/andrewjbateman/mean-stack-app","last_synced_at":"2026-04-10T01:04:07.297Z","repository":{"id":39540800,"uuid":"188017621","full_name":"AndrewJBateman/mean-stack-app","owner":"AndrewJBateman","description":":clipboard: App using an Angular frontend to Create, Read, Update \u0026 Delete (CRUD) data from a Node.js backend server database.","archived":false,"fork":false,"pushed_at":"2023-03-04T03:47:07.000Z","size":4432,"stargazers_count":1,"open_issues_count":18,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-27T02:44:56.952Z","etag":null,"topics":["angular","angular12","css3","express-middleware","full-stack","html5","mongodb","nodejs","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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}},"created_at":"2019-05-22T10:37:59.000Z","updated_at":"2021-06-11T05:31:01.000Z","dependencies_parsed_at":"2023-02-17T14:01:13.573Z","dependency_job_id":null,"html_url":"https://github.com/AndrewJBateman/mean-stack-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fmean-stack-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fmean-stack-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fmean-stack-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fmean-stack-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndrewJBateman","download_url":"https://codeload.github.com/AndrewJBateman/mean-stack-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239406449,"owners_count":19633024,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["angular","angular12","css3","express-middleware","full-stack","html5","mongodb","nodejs","typescript"],"created_at":"2024-11-07T03:27:25.648Z","updated_at":"2025-11-03T03:30:30.975Z","avatar_url":"https://github.com/AndrewJBateman.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# :zap: Mean Full Stack App\n\n* Mongo Express Angular Node (MEAN) full-stack app, integrates an Angular frontend with a Node.js backend.\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/mean-stack-app?style=plastic)\n![GitHub pull requests](https://img.shields.io/github/issues-pr/AndrewJBateman/mean-stack-app?style=plastic)\n![GitHub Repo stars](https://img.shields.io/github/stars/AndrewJBateman/mean-stack-app?style=plastic)\n![GitHub last commit](https://img.shields.io/github/last-commit/AndrewJBateman/mean-stack-app?style=plastic)\n\n## :page_facing_up: Table of contents\n\n* [:zap: Mean Full Stack App](#zap-mean-full-stack-app)\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  * [:floppy_disk: Frontend \u0026 Backend Setup](#floppy_disk-frontend--backend-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* includes signup and login forms\n* user id and post details stored in MongoDB cloud Atlas database\n* full Create Read Update and Delete (CRUD) database functionality\n* uses the [Angular canActive interface](https://angular.io/api/router/CanActivate) as a guard deciding if a route can be activated\n* The error component is an Entry component but since 9.0.0 with Ivy, the entryComponents property is no longer necessary. See deprecations guide.\n\n## :camera: Screenshots\n\n![Example screenshot](./img/login.png)\n\n## :signal_strength: Technologies\n\n* [MongoDB Cloud Atlas](https://www.mongodb.com/cloud/atlas)\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* [Angular framework v12](https://angular.io/)\n* [Angular Reactive Forms](https://angular.io/guide/reactive-forms) built around observable streams\n* [Node.js v14](https://nodejs.org/es/)\n* [multer v1](https://www.npmjs.com/package/multer) node.js middleware for handling multipart/form-data to upload files\n\n## :floppy_disk: Frontend \u0026 Backend Setup\n\n* Install dependencies using `npm i`\n* Backend: Add database access string to backend/app.js `CONNECTION_URL` then run `nodemon server.js` to start server\n* Frontend: Run `ng serve` for a dev server then navigate to `http://localhost:4200/`.\n* Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.\n\n## :computer: Code Examples\n\n* extract from `error-interceptor.ts`\n\n```typescript\n// intercept method; attached to every outgoing http request\n  intercept(req: HttpRequest\u003cany\u003e, next: HttpHandler) {\n    return next.handle(req).pipe(\n      catchError((error: HttpErrorResponse) =\u003e {\n        let errorMessage = 'An unknown error occured';\n        if (error.error.message) {\n          errorMessage = error.error.message;\n          this.dialog.open(ErrorComponent, { data: { message: errorMessage } });\n        }\n        return throwError(error);\n      })\n    );\n  }\n```\n\n## :cool: Features\n\n* Spinner is displayed while data loading, controlled by a boolean valuexº\n\n## :clipboard: Status \u0026 To-Do List\n\n* Status: Incomplete. Backend connects to database and frontend displays login page. Sign-up and Login not working. Update or replace.\n* To-Do: Show add post form\n\n## :clap: Inspiration\n\n* [MEAN Stack Tutorial)](https://www.javatpoint.com/mean-stack)\n* [Stackoverflow: Can't connect mongoDB database to Atlas due to server and shell mismatch\n](https://stackoverflow.com/questions/58729984/cant-connect-mongodb-database-to-atlas-due-to-server-and-shell-mismatch)\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%2Fmean-stack-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrewjbateman%2Fmean-stack-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Fmean-stack-app/lists"}