Angular & NestJS - The Modern MEAN Stack Guide

Install nest CLI globally with npm i -g @nestjs/cli, verify node and npm versions, and confirm by running nest -v to display the installed version (such as 6.6.3).

Create a new nest project in your chosen directory with nest new, name the app, select npm as the package manager, install dependencies, then run npm start.

Run a NestJS application from the terminal, start the server, and view the hello world endpoint at localhost:3000; enable development mode with npm run start --dev for live reload.

Explore the project structure, including node_modules, source, tests, package.json, and .gitignore, and see how modules, controllers, providers, and the app module handle a get request on port 3000.

Define your first get route in NestJS with the path /courts and a TypeScript typed response, then extract routes into dedicated controllers and verify at localhost:3000/courts.

Create a courts controller with nest generate, wire it into the module, and expose a get courts endpoint returning hello from courts at /courts.

Create a nest service as a provider, inject it into a controller, and use service methods to return data such as all courts.

Learn to make a post request in NestJS with post and body decorators, create a create code dto for title and author, and test the endpoint with Postman on localhost:3000.

Replace the any type with a defined interface for the code payload, then create interfaces/code.interface and update the controller and service to use it.

learn how to set up openapi with swagger in a nestjs and angular mean stack project. configure swagger document, title, description, version, tags, and try it out in the ui.

Learn to implement http requests in a NestJS controller, handling dynamic id parameters for getting, updating, and deleting codes, wired to a service with API implicit parameters.

Learn to debug a nest js app in vscode by attaching to a node process, setting breakpoints, inspecting variables, and stepping through the get course call.

Enable cross-origin resource sharing (CORS) to allow a frontend on one server to request API resources from another domain, by adding a single statement in the code to enable it.

Install and configure mongoose, import MongooseModule in the app module, and connect to MongoDB localhost/code using MongooseModule.forRoot to enable backend data persistence.

Extract sensitive data into environment variables instead of hardcoding. Use a dotenv package by creating an env file and importing dotenv/config, then access the Mongo URI via process.env.

Learn how to extract course controllers and services into a new quotes module, import the course module into the app module, and expose endpoints to verify via the browser.

Define a quotes schema using Mongoose in a NestJS module, specifying string fields for data and author, export the schema, and configure it in a feature module with forFeature.

Define the code schema and inject the code model, then implement a create method in the service to persist new codes in MongoDB and test the API endpoints.

Refine a NestJS API by implementing create, read, update, and delete operations in a service and controller, using async/await and promises to manage code data through a database.

Learn to implement logging and validation by replacing console.log with NestJS logger from @nestjs/common, log outputs for course routes and single course loads, and introduce middleware for global logging.

Add a logger middleware to streamline api request logging for the courts API by generating and configuring middleware, applying it via a middleware consumer, and logging complete request details.

Learn to handle a GET request for a court by ID, catch not found errors, and throw a not-found exception to replace 500 error with a not found message.

Add validation to a mongo schema for code entries by requiring title and author, with custom error messages during post requests and handling validation failures.

Install the Angular CLI globally, verify Node and npm versions, then create a new Angular project with ng new and verify with ng version.

Create a new angular app by running ng new in your chosen directory with the app name course client, enable routing, select scss, and open the project in your editor.

Run the Angular app with ng serve --open to build and auto-launch in the browser on localhost:4200, then edit src/app/app.component.ts to update the title property and see live string interpolation.

Explore the angular project structure, including angular.json, source and index files, environment settings, and npm scripts, then compare it to the nest project layout and bootstrapping.

Install and configure Angular Material to build the app UI with toolbar and card components, enabling gestures, animations, and theme setup through schematic and manual steps.

Import the Angular material button module, create a material module to keep the app module clean, and use the mat-button with color primary to implement material ui in your app.

Create a top navigation with Angular Material; import MatToolbarModule and MatIconModule, apply the primary color, add a course button with an icon, and align items using flexbox.

Generate the home component, update the module so it loads on the root page, and style the home page with flexbox and responsive media queries for centered content.

Create lazy loading modules in an Angular app, generate a courts module and course routing that loads on demand to speed up the application.

Craft a quotes page UI in the Angular and NestJS mean stack app using Angular Material cards, including mat-card header, title, content, and actions, with module imports and responsive styling.

Display multiple cards by rendering an array of list items, transitioning from static data to backend data, and showing varying item counts (4, 3, 20) as data changes.

Learn to derive an author's initials by splitting the name and indexing characters, using frontend code and backend data to display initials dynamically.

Create a random color generator to assign hex backgrounds to avatars in an Angular component. Use a loop to produce six digits and apply the color with a style directive.

Connect the Barangaroo frontend to a NestJS api in the modern mean stack. Run the local server and fetch the get course request to display courses on the courses page.

Generate an Angular service for backend data manipulation with ng generate service, then inject http client, fetch data with get, subscribe to the observable, and log four courts.

Display backend data on front end by creating a courts property in the courts component, subscribing to data, and binding it with string interpolation to show court titles and authors.

Learn how to manage subscriptions in angular by storing a subscription when you subscribe to an observer and unsubscribing in ngOnDestroy to prevent memory leaks in components.

Use the async pipe in Angular to automatically subscribe and unsubscribe from observables, binding data from a core service and simplifying cleanup in on destroy.

Define and apply a typed interface in Angular by generating an interface named code, with title and author properties, and using it in a service method.

Learn how to use the tap operator in a pipe to log data in an Angular service, replacing subscribe console output and displaying data with async.

Configure environment variables for development and production in Angular by editing environment files, defining a base URL, and using template strings or concatenation to build dynamic paths.

Update the home page to fetch a single code using a dedicated get data method and an observable from the code service.

Create a lazy loading quote component by generating an edit code module, wiring a create code button to the edit page, and refining quotes ui with icons.

Build the create quote user interface by importing Angular Material input, wiring a form with ngModel, and styling responsive layouts for desktop and mobile.

Send a post request to create a new code using the swagger UI with title and author. Extract form values, wire the codes service, and handle the response.

Demonstrate Angular form validation with client-side error handling, showing validation messages for required fields and disabling the save button while the form is invalid.

Edit a quote demonstrates editing code in the Angular and NestJS MEAN stack, fetches a code by id, populates the form, and updates with navigation to the courts page.

Learn to delete a quote in an Angular NestJS mean stack app by wiring a delete method in the service, calling it from the component, and refreshing the list.

Learn to add a material snackbar in angular to show a confirmation alert on create, edit, or delete actions by importing the snack bar module and using this.snackBar.open.

Deploy your application to the cloud by using MongoDB Atlas, create a cluster and a user, connect with the Atlas connection string, and verify data updates in production.

Deploy a NestJS app to Heroku by configuring process.env.port, setting production configs, creating a proc file, and pushing via git to expose the API and Swagger docs.

Learn to deploy an Angular app to Netlify by building for production, configuring environment variables, and uploading the build folder via drag-and-drop or Netlify's site deployment tool.

Wrap up the course by demonstrating how to create an api with mongodb and connect it to the Angular application, and invite learners to ask questions and help others.