{"id":21984565,"url":"https://github.com/lee-stevens/learning-mean","last_synced_at":"2026-04-10T14:37:17.585Z","repository":{"id":59422484,"uuid":"522598485","full_name":"lee-stevens/learning-mean","owner":"lee-stevens","description":"My first angular project, I first replicated my ReactJS portfolio and then made a user system.","archived":false,"fork":false,"pushed_at":"2022-09-25T12:37:18.000Z","size":13872,"stargazers_count":0,"open_issues_count":6,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-17T07:46:32.651Z","etag":null,"topics":["angular","angular-materials","browser-animations","expressjs","mean-stack","mongoose","nodejs","scss"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/lee-stevens.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":"2022-08-08T15:09:19.000Z","updated_at":"2022-11-12T21:27:24.000Z","dependencies_parsed_at":"2023-01-18T22:01:00.849Z","dependency_job_id":null,"html_url":"https://github.com/lee-stevens/learning-mean","commit_stats":null,"previous_names":["metal-mantis-studio/learning-mean","lee-stevens/learning-mean"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lee-stevens/learning-mean","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lee-stevens%2Flearning-mean","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lee-stevens%2Flearning-mean/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lee-stevens%2Flearning-mean/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lee-stevens%2Flearning-mean/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lee-stevens","download_url":"https://codeload.github.com/lee-stevens/learning-mean/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lee-stevens%2Flearning-mean/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279010328,"owners_count":26084738,"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","status":"online","status_checked_at":"2025-10-12T02:00:06.719Z","response_time":53,"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":["angular","angular-materials","browser-animations","expressjs","mean-stack","mongoose","nodejs","scss"],"created_at":"2024-11-29T18:10:03.132Z","updated_at":"2025-10-12T05:36:30.342Z","avatar_url":"https://github.com/lee-stevens.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## MEAN_LeesProjects\n\nA MEAN web application with a bunch of custom features I use such as: flashcard memorisation for learning programming concepts and languages\n\n## My Setup Guide\n\nMEAN Setup guide following the [Udemy course by Maximillian S](https://www.udemy.com/course/angular-2-and-nodejs-the-practical-guide/) generated with with [Angular CLI](https://github.com/angular/angular-cli) version 14.1.1.\n\nThis installation document was hand-made as of 13/08/2022 as I started to get a good grasp of MEAN\n\n## Initial Setup\n\nInstall [NodeJS](https://nodejs.org/en/)  \n\n```\n\u003e\u003e npm install -g @angular/cli\n\u003e\u003e ng new \u003c\u003capp-name\u003e\u003e\n\u003e\u003e cd \u003c\u003capp-name\u003e\u003e\n\u003e\u003e npm install\n\u003e\u003e ng serve\n```\n\n## Packages\n```\nPackages\n\u003e\u003e npm add @angular/materials                     //https://material.angular.io/\n\u003e\u003e npm install --save express                     //https://expressjs.com/\n\u003e\u003e npm install --save -dev nodemon                //https://www.npmjs.com/package/nodemon\n\u003e\u003e npm install --save mongoose                    //https://mongoosejs.com/\n\u003e\u003e npm install --save mongoose-unique-validator\n\u003e\u003e npm install --save body-parser                 //https://www.npmjs.com/package/body-parser\n\u003e\u003e npm install --save bcrypt                      //Hashes passwords \n\u003e\u003e npm install --save jsonwebtoken                //\n```\n\n## package.json updates\n\nAdd to package.json scripts\n  '\"start:server\": \"nodemon server.js\"'\n\n\n## app.module.ts imports\n```JS\nimport { NgModule }                           from '@angular/core';\nimport { BrowserModule }                      from '@angular/platform-browser';\nimport { FormsModule }                        from '@angular/forms';\nimport { MatInputModule }                     from '@angular/material/input';\nimport { MatButtonModule }                    from '@angular/material/button';\nimport { MatCardModule }                      from '@angular/material/card';\nimport { MatToolbarModule }                   from '@angular/material/toolbar';\nimport { MatIconModule }                      from '@angular/material/icon'\nimport { MatExpansionModule }                 from '@angular/material/expansion'\nimport { MatProgressSpinnerModule }           from '@angular/material/progress-spinner'\nimport { MatSidenavModule }                   from '@angular/material/sidenav';\n\nimport { CdkMenuModule }                      from '@angular/cdk/menu';\nimport { BrowserAnimationsModule }            from '@angular/platform-browser/animations'\nimport { HttpClientModule }                   from '@angular/common/http';\n\nimport { AppRoutingModule }                   from './app-routing.module';\nimport { AppComponent }                       from './app.component';\nimport { HeaderComponent }                    from './header/header.component';\nimport { AppDashboard }                       from './app-dashboard/app-dashboard.component';\nimport { PostCreateComponent }                from './posts/post-create/post-create.component';\nimport { PostListComponent }                  from './posts/post-list/post-list.component';\nimport { FlashcardDashboardComponent }        from './flashcards/flashcards-dashboard/flashcards-dashboard.component';\nimport { FlashcardViewComponent }             from './flashcards/flashcards-view/flashcards-view.component';\nimport { FlashcardCreateComponent }           from './flashcards/flashcards-create/flashcard-create.component';\n```\n\n\n## Creating Components   \n\n  [Angular Components](//https://angular.io/guide/component-overview)\n```TS\n  import { Component } from '@angular/core';\n\n  @Component({\n    selector: 'app-root',                          //Name of component\n    templateUrl: './app.component.html',\n    styleUrls: ['./app.component.scss']\n  })\n\n  export class AppComponent { }                    //Export Component to be rendered\n```\n\n\n## Importing Components\n```HTML\n\u003capp-header\u003e\u003c/app-header\u003e\n  \u003cmain\u003e\n    \u003capp-post-create\u003e\u003c/app-post-create\u003e\n    \u003capp-post-list\u003e\u003c/app-post-list\u003e\n  \u003c/main\u003e\n```\n\n\n## Backend Setup\n\nserver.js in the root folder\n```JS\nconst app = require(\"./backend/app\");                   //Imports the backend Express App\nconst debug = require(\"debug\")(\"node-angular\");\nconst http = require(\"http\");\nconst port = process.env.PORT || \"3000\";                //Uses the provided port or uses 3000\napp.set(\"port\", port);\nconst server = http.createServer(app);                  //Creates an Express server using the backend Express App\nserver.listen(port);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flee-stevens%2Flearning-mean","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flee-stevens%2Flearning-mean","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flee-stevens%2Flearning-mean/lists"}