Angular & Loopback - Build a Complete Website from Scratch

Create a loopback project with the loopback CLI, install node and npm, generate a user-authenticated REST API with login and logout endpoints, and run the server.

Explore the loopback project structure and core files, including server startup and a running API. See how models, memory data sources, and API configuration on port 3000 fit together.

Create a user model and extend it with first name, last name, username, and email. Expose api endpoints to create and log in users, using LoopBack and a memory db.

Learn how to add a MongoDB data source to a LoopBack project, configure host and port, create the database and user, run the server, and verify data with RoboMongo.

Learn to expose a Loopback API with custom routes independent of models, create a sample route, and enable auto-restart with nodemon by configuring a dev script.

Create an Angular CLI project by installing Angular CLI globally, generating a new app, and exploring the folder structure, routing, and key files before running the dev server.

Create a scalable angular project structure by organizing components, features, models, and services, with core and common services and a shared angular material module.

Install angular material and configure a shared material module. Import browser animations and layout, apply the indigo pink theme, and implement a mat toolbar with login and sign-up buttons.

Create a login register feature module with lazy loading in Angular, configure routing and loadChildren, and prepare components for login, register, forget password, and email verification.

Create a page not found component, build login and register components inside a feature module, and configure routing with redirects, router-outlet, and router links.

Move the now bar to the login/register feature and control its visibility per module, importing the now bar component and wiring routes with a forward slash.

Design a sign-up form using Angular Material with a reactive form for first name, last name, username, email, password, and confirm password, including validations and a login link.

Design and validate a login form by reusing the register form group, adding email and password with required and email validators, and connect forgot password and register routes.

Design and validate a forgot password form by creating a new login/register component, wiring a form with email validation, and updating routing to navigate to the forgot password page.

Develop a reusable helper service to show alerts using Angular Material's snack bar, backed by a toaster component and entry components for consistent toast messages across features.

Create a constant service in the shared folder to centralize API routes, messages, and local storage keys, using environment variables and static properties for logging and sign up.

Create a compiler service in the shared module to compile sign-up and login data, remove the confirmed password field, and prepare category data for backend API calls.

Create a token interceptor service in Angular to automatically attach authorization token and json content type to every API request by cloning requests and adding headers.

Build an angular guard service with canActivate to protect the dashboard by checking the auth token and routing authenticated users to the dashboard, or sign up or log in.

Configure a loopback email data source to send verification emails from a Gmail smtp server on port 465 with secure authentication, and wire it into the model config.

Create and test the Angular log in and register service to call sign-up API via HTTP post, modify user data, and validate responses from the LoopBack backend, including email verification.

Learn how to implement email verification in Loopback, exposing a remote method, updating user status, sending verification emails, and integrating a verification page with an Angular frontend.

Implement a custom send email remote method in loopback to verify users by sending a verification email, exposed as a rest api route for an authenticated angular app.

Implement a resend verification email feature in Angular by wiring a front-end route to a back-end LoopBack API for sending emails, using login/register and verification components.

Implement a login workflow in LoopBack by adding before and after remote methods, filtering user data, and returning verification status, tokens, and roles for the frontend.

Implement a reset password flow in loopback by sending a verification token via email, generating the token, and linking to a reset password page.

Implement an Angular forgot password flow by wiring a forgot password service and login service to send a reset password email on form submission.

Create and integrate a reset password component in an Angular and LoopBack project, build a form with validators, wire routing, and call the reset password API to update user password.

Implement a forget password remote method in loopback by adding and wiring the method in app.js, validating user id and token, updating the password, and returning a success message.

Learn to test forget password, implement reset password flow, verify email, navigate to login after reset, provide snackbar feedback with interfaces and API responses in an Angular & Loopback app.

Implement a logout feature in an Angular and Loopback app by adding a log out user function in a category service that clears local storage and navigates to login page.