MEAN Stack Angular Material Node.js Angular App [2022]

Create a new npm project named Land Fox, install nodemon and express, and define a first route returning Hello Land Fox on port 3000, started with npm start.

Use the Morgan middleware to log HTTP requests and enable JSON parsing with express.json(), then test a mock API in Postman by sending a JSON body.

Explore how to use npm packages and browse npmjs.com for installation tutorials and usage, and enable Morgan to log http requests in your Express app.

Store data in MongoDB Atlas by creating a project, cluster, and a read-write user, then connect your app with mongoose using the connection string.

Create and manage backend models by defining a Mongoose schema for items, then implement a post route to save new items to the database using async/await, and test with Postman.

Refactor app.js by moving routes into a dedicated routers folder with an item routes file, export the router, and use async/await for items get and post endpoints.

Learn to configure cors for cross-domain communication by installing and applying a cors middleware, then setting options to allow all requests between the front end and back end.

Extend the item model and add category, users, cart, and cart item models using Mongoose, defining name, description, price, image, category reference, and the user-cart-cart item links.

Create get, put, and delete routes for categories, reading, updating, or deleting by id via /:id and validating with 400 errors when not found. Learn to update with find by ID and update with new: true, and remove by ID with 200 or 400 responses, tested in Postman.

Apply a put method to update items in a mean stack app, validating ids, verifying category and item existence, handling optional image uploads, and returning the modified item.

Set up two user get routes in mean stack app: fetch all users and fetch a user by id, excluding password hashes, using express router and model find with select.

Create a new post route for registering users, hash the password with decrypt-js using a 10 salt, and save the user with email and is admin fields.

Update user information using the put method with findByIdAndUpdate, altering email, password, and admin status by id from params and body fields, including optional password changes and Postman tests.

Create a login endpoint using post in user routes that validates the user by email, compares the password with a hash, and issues a JWT token with a 24-hour expiry.

Secure the mean stack backend by implementing Express JWT with HS256, creating a block middleware that revokes access for non-admin users and only allows selected public and login routes.

Create a new cart using a post method, validate item IDs, compute total price from item price multiplied by quantity, and save the cart via cart routes and models.

Implement get methods to fetch all carts and a single user cart, populating the user, cart item, and item category, and verify the endpoints using Postman.

Implements backend enhancements for mean stack app: express static, single item route, optional admin signup, password hash removal, user delete method, and comment JWT block in DOJ's file.

Create a category model and a category service to handle http requests to the backend, using an api url and HttpClient for getting categories and for create, update, and delete.

Create a category list component that uses the category service to fetch categories and displays them in an Angular Material table, enabling edit, delete, and create actions.

Delete a category from the admin list using an angular material modal dialog. The video shows wiring a click to open the dialog, pass the category, and handle boolean result.

Learn to create a category form for the MEAN stack app, enabling add and edit workflows via routing to a categories/form component, with reactive forms, validation, and material inputs.

Continue implementing the category form by adding and updating categories with two functions, via the category service, and show a snack bar confirmation after each action.

Define an item model with id, name, description, price, image, and category, then implement an item service to perform CRUD operations via the API, including image uploads.

Build a category dropdown with angular material to filter displayed products by category, using a selection change handler and dynamic list updates to show relevant items only.

Build a search bar in an Angular app by wiring a form group with an Angular Material input, and filter items by name using a search pipe and a term.

Create an admin items list in Angular, fetch items via a service, and render an Angular Material table with name, description, price, image, category, plus edit and delete actions.

Delete an admin item using an Angular Material dialog and an item-dialog component, confirm the action, and refresh the list after deletion.

Configure the item form for editing and creating items using Angular form group and Angular Material inputs, including name, description, price, image upload, and category select with validation.

Build an item form supporting create and edit modes, load existing item data from the route id, and submit updates or new items with category dropdown and snackbar feedback.

Install animate.css with npm, wire the styles in angular.json, and add a fox head animation in the Angular template using a 3-second entrance.

Create a user model and service, implement login and sign up HTTP calls, store user info and admin flag in local storage, and route to the shop page.

Fixes a sign-up bug by updating the user service logging method to correctly handle the admin flag, setting local storage when admin is defined and avoiding it when undefined.

Create a local storage service to manage the backend-provided token using a JWT key, with set token, get token, and remove token functions for login and sign-in pages.

Create a login form using angular material, employing a form group to validate email and password, display 'invalid email or password' error, and offer forgot password and create account links.

Create animated login page visuals by adding two images from the assets folder and applying left and right CSS animations to bring them into view.

Generate a new user component and implement a sign up form by adapting the login HTML, using form builder and validators. Sign up redirects to the login page after registration.

Create an http interceptor that attaches the token from the local storage service to API requests, using the environment API URL. Register the interceptor in the app module providers.

Implement a guard service to protect routes from unauthenticated users using canActivate and router navigation, decoding the token from local storage to verify expiry and redirect to login.

implement the user service with get all users, get one user, create, update, and delete functions for admin management of users in the api.

Create a users list component, retrieve all users from the user service, and render an Angular Material table with email, password hash, admin status, plus edit and delete actions.

Implement a delete user workflow with an Angular Material dialog: click delete opens a modal, passes the user email, and on confirmation deletes the user and refreshes the list.

Implement edit and create user workflows in an Angular form by reading the URL id, fetching the user, populating fields, and navigating to the user list with a snack bar.

Design a cart model with cart item and cart item detail submodels. Implement a cart service using local storage to initialize and manage items with a behavior subject.

Build a cart component with Angular Material cards, refine the cart service, subscribe to cart and item data, compute total price by quantity, and support add-to-cart interactions.

Enhance the cart UI with functional delete buttons, styling and logos, a proceed to payment button, and animate.css effects for item removal and a snack bar.

Fixes a bug in the item form submit by removing the subscribe and keeping a 2-second setTimeout, then test as admin to modify an item's price and submit.