Create Full-Stack Blog & CMS with Angular 18, Node.js, MySQL

In this crucial lecture, we lay the foundation for our full-stack blog and CMS project by setting up the essential development environment. By the end of this session, you'll have a fully configured workspace with all the necessary tools installed and ready to use.

Key Topics Covered:

1. Node Version Manager (NVM) Installation

   • Introduction to NVM and its benefits

   • Step-by-step guide to installing NVM

   • Troubleshooting tips for manual installation

2. Node.js Installation Using NVM

   • Viewing available Node.js versions

   • Installing the latest LTS version

   • Switching between Node.js versions

3. Verifying Node.js and NPM Installation

   • Checking Node.js version

   • Verifying NPM installation

4. Angular CLI Installation

   • Global installation of Angular CLI

   • Verifying Angular CLI version (Angular 18)

5. MySQL Setup

   • Introduction to DB Engine for Mac OS users

   • Alternative installation methods for Windows and Linux users

   • Overview of MySQL Workbench installation

6. Connecting to MySQL

   • Using DB Engine to manage MySQL on Mac

   • Introduction to TablePlus as a MySQL client

   • Setting up and using MySQL Workbench

Learning Outcomes:

By the end of this lecture, you will be able to:

• Install and use NVM to manage multiple Node.js versions

• Install the latest stable version of Node.js

• Set up Angular CLI for your development environment

• Install and configure MySQL on your system

• Connect to your local MySQL database using various clients

This lecture provides a comprehensive setup guide, ensuring that all students have a consistent development environment for the course. If you encounter any issues during the installation process, please refer to the official documentation links provided or reach out for assistance in the course forum.

Next Lecture Preview: We'll dive into creating our project structure and begin setting up both the backend and frontend projects.

Overview

In this lecture, we set up the basic project structure for our full-stack blog and CMS application. We'll configure both the backend using Node.js and Express.js, and the frontend using Angular.

Main Topics Covered

1. Initializing the Node.js project

2. Setting up Express.js server with TypeScript

3. Configuring Sequelize ORM with MySQL

4. Creating the Angular frontend project

5. Integrating Tailwind CSS for styling

Key Learning Outcomes

By the end of this lecture, you will be able to:

• Create a structured full-stack project with separate backend and frontend folders

• Set up a Node.js and Express.js server using TypeScript

• Configure Sequelize ORM for database management

• Initialize an Angular project with CLI

• Integrate Tailwind CSS into an Angular project

Prerequisites

• Basic knowledge of JavaScript and TypeScript

• Node.js and npm installed on your system

• Angular CLI installed globally

• MySQL database server installed locally

Important Notes

• We'll be using VS Code as our IDE, but you can use any editor of your choice

• The project will be version-controlled using Git, with a GitHub repository

• Make sure to follow along and create the necessary files and folders as demonstrated

• Pay attention to the configuration of tsconfig.json and package.json files

• We'll be using node-ts for development to enable real-time updates without manual rebuilding

In this lecture, we dive deep into creating and managing database models and their relationships using Sequelize with TypeScript. We'll cover the following key topics:

Overview

• Creating basic models: Users, Categories, and Posts

• Extending models with additional fields and constraints

• Establishing relationships: One-to-One, One-to-Many, and Many-to-Many

• Implementing foreign keys and associations

• Creating join tables for complex relationships

Key Learning Outcomes

By the end of this lecture, you will:

• Understand how to define Sequelize models using TypeScript decorators

• Know how to create and manage relationships between different models

• Be able to implement foreign keys and associations effectively

• Grasp the concept of join tables for Many-to-Many relationships

Prerequisites

• Basic understanding of TypeScript

• Familiarity with SQL database concepts

• Previous lectures in this course completed

Important Notes

• We'll be using Sequelize decorators extensively in this lecture

• Make sure to import necessary modules from 'sequelize-typescript'

• Pay attention to the order of decorators, as it can affect functionality

This lecture forms the foundation for our database structure, which we'll build upon in future lessons. Understanding these concepts is crucial for developing a robust and efficient backend for our full-stack blog and CMS application.

In this lecture, we dive into the essentials of setting up a RESTful API, a crucial skill for any backend developer. We'll create the initial structure for our API, focusing on:

• Understanding RESTful API concepts

• Setting up the folder structure

• Defining initial routes

• Creating controllers and services

• Implementing basic CRUD operations

Key Learning Outcomes:

• Grasp the fundamentals of RESTful API architecture

• Establish a scalable folder structure for your backend

• Implement basic routing for API endpoints

• Understand the separation of concerns between controllers and services

• Set up environment variables for secure credential management

Prerequisites:

• Basic knowledge of Node.js and Express.js

• Familiarity with TypeScript (recommended)

• Understanding of HTTP methods (GET, POST, etc.)

Important Notes:

• We'll be using TypeScript for type safety

• The lecture focuses on structure; complete implementations will follow in subsequent videos

• Always use environment variables for sensitive information

• Remember to add .env to your .gitignore file

In this lecture, we focus on enhancing our database models by adding a crucial missing piece: the userId field as a foreign key in the Category and Tag tables. We'll also establish proper associations between the User, Category, and Tag models using Sequelize with TypeScript.

Key Topics Covered:

• Adding userId as a foreign key to Category and Tag models

• Establishing associations using Sequelize decorators

• Verifying and updating field requirements across all models

• Troubleshooting environment variable issues

Learning Outcomes:

• Understand how to create foreign key relationships in Sequelize

• Learn to use Sequelize decorators for model associations

• Gain experience in refining database models for better data integrity

• Practice debugging environment configuration issues

Prerequisites:

• Basic understanding of Sequelize and TypeScript

• Familiarity with previous lectures on model creation

Important Notes:

• Ensure your development environment is properly set up

• Pay attention to the order of decorators and field definitions for clarity

• Double-check your .env file configuration and path

Overview

This lecture focuses on developing essential API endpoints for the blog application, specifically for managing blog categories. The main topics covered include:

1. Creating CRUD (Create, Read, Update, Delete) endpoints for blog categories

2. Implementing data validation using the Zod library

3. Handling slug generation and uniqueness

4. Error handling and response formatting

Key Learning Outcomes

By the end of this lecture, students will be able to:

• Create RESTful API endpoints for managing blog categories

• Implement data validation using Zod schemas

• Generate and manage unique slugs for categories

• Handle common error scenarios in API development

• Use TypeScript effectively in a Node.js backend environment

Prerequisites

• Basic understanding of Node.js and Express.js

• Familiarity with TypeScript

• Knowledge of RESTful API concepts

• Understanding of database operations (using Sequelize ORM)

Important Notes

• The lecture uses a hardcoded user ID for simplicity, which will be replaced with proper authentication in future lectures.

• Students should pay attention to the implementation of slug generation and uniqueness checks, as these concepts will be reused for other entities like posts and tags.

• The Zod library is introduced for data validation, which is a crucial concept for building robust APIs.

Overview

This lecture focuses on developing API endpoints for managing blog tags in a full-stack application using Node.js. The main topics covered include:

1. Creating and registering tag routes

2. Implementing CRUD operations for tags (Create, Read, Update, Delete)

3. Using Zod for request validation

4. Handling slug generation and uniqueness

5. Error handling and response formatting

Key Learning Outcomes

By the end of this lecture, students will be able to:

• Set up and organize routes for tag management

• Implement controller functions for handling tag-related operations

• Use Zod for request payload validation

• Generate and manage unique slugs for tags

• Perform basic error handling and send appropriate responses

Prerequisites

• Basic understanding of Node.js and Express.js

• Familiarity with TypeScript

• Knowledge of RESTful API concepts

• Understanding of database operations (using an ORM like Sequelize)

Important Notes

• The lecture uses TypeScript for type safety

• Zod is used for request validation

• Slug generation is implemented for SEO-friendly URLs

• The lecture emphasizes the importance of error handling to prevent server crashes

Description

In this lecture, we dive deep into creating robust API endpoints for managing blog posts in our full-stack application. We cover the implementation of CRUD (Create, Read, Update, Delete) operations for posts, along with advanced features like tag management and eager loading of related data.

Main Topics Covered:

1. Setting up routes for post-related endpoints

2. Implementing controllers for post operations

3. Creating service functions for database interactions

4. Handling data validation using Zod

5. Managing associations between posts, categories, users, and tags

6. Implementing error handling and authorization checks

7. Using Sequelize for complex queries and joins

Key Learning Outcomes:

• Understand how to structure Express.js routes and controllers

• Learn to implement CRUD operations with Sequelize ORM

• Master data validation techniques using Zod

• Gain insight into managing complex database relationships

• Develop skills in error handling and user authorization

Prerequisites:

• Basic knowledge of Node.js and Express.js

• Familiarity with SQL databases and ORM concepts

• Understanding of RESTful API principles

Important Notes:

• This lecture builds upon previous sessions on database setup and model associations

• The code demonstrated uses TypeScript for enhanced type safety

• Ensure your development environment is set up with the necessary dependencies

Lecture Description

In this lecture, we focus on creating API endpoints for managing blog comments. We cover the following main topics:

1. Setting up comment routes

2. Implementing CRUD operations for comments

3. Creating controller functions for each operation

4. Implementing input validation using Zod

5. Integrating comment functionality with existing post endpoints

Key Learning Outcomes:

• Understand how to structure API endpoints for comment management

• Learn to implement CRUD operations for a nested resource (comments within posts)

• Gain experience with input validation using Zod

• Practice integrating new functionality with existing API structure

Prerequisites:

• Basic understanding of Node.js and Express

• Familiarity with TypeScript

• Knowledge of RESTful API design principles

Important Notes:

• This lecture builds upon previous work on the blog API

• We use TypeScript for type safety and better code organization

• Zod is used for input validation, ensuring data integrity

Overview

This lecture provides a comprehensive introduction to various authentication methods, with a focus on JSON Web Tokens (JWT). We'll explore the fundamentals of authentication, compare different approaches, and dive deep into JWT implementation.

Main Topics Covered

1. Overview of authentication methods

   • Basic Authentication

   • Token-based Authentication

   • OAuth

   • Session-based Authentication

2. Deep dive into JWT (JSON Web Tokens)

   • Structure of JWT

   • How JWT works in authentication

3. Practical implementation of JWT

   • Setting up JWT in a Node.js application

   • Creating and signing JWTs

   • Verifying and decoding JWTs

   • Implementing middleware for route protection

Key Learning Outcomes

By the end of this lecture, you will be able to:

• Understand different authentication methods and their pros/cons

• Explain the structure and functionality of JWTs

• Implement JWT-based authentication in a Node.js application

• Create middleware for protecting routes using JWT

Prerequisites

• Basic understanding of Node.js and Express.js

• Familiarity with HTTP protocols and RESTful APIs

Important Notes

• We'll be using the jsonwebtoken package for JWT implementation

• Secure practices for handling secret keys will be discussed

• This lecture sets the foundation for user authentication in our full-stack blog & CMS application

Overview

This lecture focuses on implementing user authentication in a full-stack blog and CMS application using Angular 18 and Node.js. The main topics covered include:

1. Creating user registration and login endpoints

2. Implementing refresh token functionality

3. Securing API endpoints using middleware

4. Handling password encryption and token management

Key Learning Outcomes

• Understand the process of user authentication in a full-stack application

• Implement secure password storage using encryption

• Create and manage access tokens and refresh tokens

• Secure API endpoints using custom middleware

• Handle token refresh and user logout functionality

Prerequisites

• Basic understanding of Node.js and Express.js

• Familiarity with JWT (JSON Web Tokens)

• Knowledge of database operations (MySQL in this case)

Important Notes

• The lecture uses Zod for request body validation

• Password encryption is implemented using JWT

• Token management includes both access and refresh tokens

• The lecture demonstrates how to handle token expiration and refresh

Overview

In this lecture, you'll learn about error handling in Express.js, a crucial aspect of building robust and secure web applications. We'll cover how to handle errors gracefully, log them for debugging purposes, and prevent server crashes due to unhandled errors.

Key Topics Covered

1. Manually throwing errors in Express

2. Creating custom error handling middleware

3. Logging errors using Winston

4. Preventing server crashes with express-async-errors

Learning Outcomes

By the end of this lecture, you'll be able to:

• Implement custom error handling in Express applications

• Use Winston for effective error logging

• Prevent server crashes caused by unhandled asynchronous errors

• Create more resilient and robust Express.js applications

Prerequisites

• Basic knowledge of Express.js

• Familiarity with async/await in JavaScript

Important Notes

• Error handling is crucial for maintaining security and preventing sensitive information leaks

• The express-async-errors package is used to handle asynchronous errors without try-catch blocks

• Proper error handling enhances the overall stability and user experience of your application

This lecture covers the implementation of essential authentication-related features for a full-stack blog and CMS application using Angular 18 and Node.js.

The main topics include:

1. Registration confirmation process

2. Forgot password functionality

3. Reset password feature

4. Integration of a third-party email service (Resend.com)

5. Database updates to support new features

6. Implementation of security measures and token handling

Key learning outcomes:

• Understanding the flow of email-based account confirmation

• Implementing secure password reset functionality

• Integrating third-party email services in a Node.js application

• Managing user statuses and tokens in the database

• Enhancing application security through proper token handling and validation

Prerequisites:

• Basic knowledge of Node.js and Express.js

• Familiarity with database operations (SQLite in this case)

• Understanding of JWT (JSON Web Tokens)

Important notes:

• Ensure proper configuration of environment variables

• Follow security best practices when handling sensitive information

• Test thoroughly to ensure all features work as expected

Overview

In this lecture, we dive into creating the foundational folder structure for our Angular project. We'll set up a scalable and organized project architecture that separates concerns between public-facing components, admin features, and core functionalities.

Main Topics Covered

• Understanding the overall project structure

• Creating main folders: public, admin, and core

• Setting up subfolders for services, interceptors, and interfaces

• Generating components and modules using Angular CLI

• Organizing feature modules for posts, categories, auth, and tags

Key Learning Outcomes

By the end of this lecture, you will be able to:

• Design a scalable folder structure for an Angular project

• Use Angular CLI to generate modules, components, and services

• Understand the separation of concerns in a full-stack blog application

• Set up the groundwork for both public-facing and admin interfaces

Prerequisites

• Basic understanding of Angular framework

• Familiarity with TypeScript and Angular CLI

• Node.js and Angular CLI installed on your system

Important Notes

• This lecture focuses on setting up the project structure only. We will start building the actual components in subsequent lectures.

• Pay close attention to the folder hierarchy as it will be crucial for navigating the project in future lectures.

• Feel free to customize the folder structure based on your specific project needs, but maintain a clear separation of concerns.

Overview

In this lecture, we focus on creating the landing page for our public view, including the header and footer components. We also implement basic routing for both public and admin sections of our blog application.

Main Topics Covered

1. Setting up the app component and router outlet

2. Creating and configuring the public module

3. Implementing lazy loading for public and admin modules

4. Designing the header component

5. Creating a responsive footer

6. Building the post list component

7. Implementing basic routing for public and admin sections

Key Learning Outcomes

By the end of this lecture, you will be able to:

• Set up the main layout structure for a full-stack blog application

• Implement lazy loading for public and admin modules

• Create responsive header and footer components using Tailwind CSS

• Design a grid-based post list component with responsive behavior

• Implement basic routing for public and admin sections using Angular Router

Prerequisites

• Basic knowledge of Angular and TypeScript

• Familiarity with Tailwind CSS

• Understanding of modular architecture in Angular applications

Important Notes

• This lecture focuses on the front-end structure and doesn't involve API integration yet.

• We use Tailwind CSS for styling, so make sure you have it properly set up in your project.

• The responsive design is implemented using Tailwind's responsive classes.

Lecture Description

This lecture focuses on implementing and styling the Post, Category, and Tag detail components for a full-stack blog application using Angular 18 and Node.js. Key topics covered include:

• Enhancing the Post List component with hover effects and shadows

• Designing and implementing the Post Detail page layout

• Creating a Comments section with a form and comment display

• Implementing Category and Tag detail pages

• Setting up routing for Category and Tag pages

• Reusing the Post List component in Category and Tag detail pages

Learning Outcomes:

• Apply Tailwind CSS classes for styling components

• Implement hover effects and transitions

• Create reusable components for different views

• Set up routing with parameters in Angular

• Design and implement a comments section

Prerequisites:

• Basic knowledge of Angular and Tailwind CSS

• Familiarity with TypeScript and HTML

Note: This lecture builds upon previous lessons in the course. Ensure you have completed the prior lectures before proceeding.

Description

In this comprehensive lecture, we focus on making our Angular application's pages dynamic by consuming REST APIs from our Node.js backend. We'll cover several key aspects of building a full-stack blog application:

1. Implementing dynamic post listing and detail pages

2. Creating and updating RESTful endpoints in the backend

3. Handling data fetching and state management in Angular components

4. Implementing tag and category functionalities

5. Adding comment functionality to posts

6. Using Moment.js for date formatting

7. Addressing security concerns in API responses

Main Topics Covered

• Setting up environment variables for API URLs

• Implementing and consuming RESTful endpoints for posts, tags, and comments

• Handling data relationships (posts, tags, categories) in both frontend and backend

• Implementing proper error handling and validation

• Using TypeScript interfaces for better type safety

• Refactoring code for better maintainability and reusability

• Implementing pagination and sorting (basics covered, to be expanded in future lectures)

Key Learning Outcomes

By the end of this lecture, students will be able to:

1. Create and consume RESTful APIs in a full-stack Angular and Node.js application

2. Implement dynamic routing and data fetching in Angular components

3. Handle complex data relationships in both frontend and backend

4. Use TypeScript interfaces for improved code quality and type safety

5. Implement basic comment functionality in a blog application

6. Use Moment.js for user-friendly date formatting

7. Address basic security concerns in API responses

Prerequisites

• Basic understanding of Angular and Node.js

• Familiarity with TypeScript and RESTful APIs

• Completion of previous lectures in the course

Important Notes

• This lecture focuses on the implementation of core functionalities. UI improvements and advanced features will be covered in subsequent lectures.

• Security aspects such as authentication and authorization will be covered in detail in upcoming lectures.

• Students are encouraged to follow along with the code examples and experiment with the implementations on their own.

In this lecture, we continue making our blog pages dynamic by consuming REST APIs. We focus on implementing category and tag filtering for posts, enhancing the functionality of our blog's category and tag pages.

Main topics covered:

• Implementing dynamic category pages

• Creating and using a category service

• Implementing dynamic tag pages

• Enhancing the post list component to accept category and tag filters

• Updating backend controllers to handle category and tag filtering

Key learning outcomes:

• Students will learn how to create dynamic category and tag pages in Angular

• Understanding how to pass and use route parameters in Angular components

• Implementing and consuming REST APIs for filtering posts by category and tag

• Enhancing backend controllers to handle complex filtering scenarios

Prerequisites:

• Basic understanding of Angular components and services

• Familiarity with Node.js and Express.js backend development

• Knowledge of RESTful API concepts

Note: This lecture builds upon previous concepts, so ensure you've completed the preceding lectures in the course.

This lecture covers the implementation of authentication features in a full-stack blog application using Angular 18 and Node.js. The main focus is on creating login, signup, and forgot password functionalities, as well as implementing a comments form that depends on user authentication.

Overview of Main Topics:

• Building login and signup pages

• Implementing forgot password functionality

• Creating and styling authentication forms

• Handling form validation and error messages

• Integrating authentication with the backend API

• Implementing comment functionality for authenticated users

• Basic route protection using Angular guards

Key Learning Outcomes:

• Understand how to implement user authentication in a full-stack application

• Learn to create and style responsive authentication forms using Angular and Tailwind CSS

• Gain experience in handling form validation and displaying user-friendly error messages

• Learn how to integrate frontend authentication with a Node.js backend

• Understand the basics of route protection using Angular guards

Prerequisites:

• Basic knowledge of Angular and Node.js

• Familiarity with TypeScript and reactive forms in Angular

• Understanding of RESTful API concepts

Important Notes:

• The lecture uses Angular 18, make sure you have the compatible version installed

• Tailwind CSS is used for styling, familiarity with its utility classes is helpful

• The backend uses JWT for authentication, understanding of JWT concepts is beneficial

In this comprehensive lecture, we'll focus on enhancing the security and authentication flow of our full-stack blog and CMS application. We'll cover the following key topics:

1. Accessing and checking session data from local storage in Google Chrome

2. Implementing route protection using Angular Guards

3. Creating and integrating Auth Interceptors for centralized token management

4. Updating the backend to use dynamic user IDs from JWT tokens

Learning Outcomes:

• Understand how to work with session data in browser local storage

• Implement route protection for private routes using Angular Guards

• Create and integrate Auth Interceptors for automatic token inclusion in HTTP requests

• Replace hardcoded user IDs with dynamic token-based user identification in the backend

Prerequisites:

• Basic understanding of Angular 18 and Node.js

• Familiarity with JWT-based authentication

• Previous lectures in the course covering initial setup and basic authentication

Important Notes:

• This lecture builds upon the authentication system implemented in previous sessions

• Ensure your development environment is set up with the latest versions of Angular CLI and Node.js

• Have both frontend and backend projects open and ready for modifications

Overview

In this lecture, we dive into setting up the admin panel for our full-stack blog and CMS. We'll cover the installation and configuration of Angular Material, create a responsive layout design, and implement navigation functionality.

Main Topics Covered

1. Installing and setting up Angular Material

2. Designing the admin panel layout (header, sidebar, content area)

3. Implementing navigation using Angular Router

4. Creating reusable components for header, sidebar, and footer

5. Styling components using Angular Material and custom CSS

Key Learning Outcomes

By the end of this lecture, you will be able to:

• Install and configure Angular Material in your project

• Create a responsive admin panel layout using Angular Material components

• Implement functional navigation between different admin sections

• Style components using a combination of Angular Material and custom CSS

• Use Angular's change detection strategies for optimized performance

Prerequisites

• Basic understanding of Angular components and modules

• Familiarity with Angular routing

• Knowledge of CSS and Flexbox

Important Notes

• Make sure to restart the Angular development server after installing Angular Material to apply theme changes.

• Pay attention to the use of ng-deep for styling nested components, especially when working with Angular Material.

• The sidebar width and styling can be adjusted based on your specific design requirements.

Lecture Description

In this comprehensive lecture, we dive deep into implementing category management functionalities for the admin panel of our full-stack blog and CMS. We cover the following key areas:

1. Category List Page:

   • Implement a table to display all categories using Angular Material.

   • Add functionality to select and delete categories.

   • Integrate with backend API to fetch and display real-time data.

2. Create Category Page:

   • Design and implement a form for adding new categories.

   • Integrate with backend API to create new categories.

3. Edit Category Functionality:

   • Implement routing and navigation to edit existing categories.

   • Pre-fill form with existing category data.

   • Update category information in the backend.

4. Error Handling and User Experience:

   • Implement error interceptor for handling unauthorized access.

   • Add form validation and error messages.

   • Improve user feedback with alerts and redirects.

Prerequisites

• Basic understanding of Angular and TypeScript

• Familiarity with Angular Material components

• Knowledge of RESTful API concepts

Key Learning Outcomes

By the end of this lecture, you will be able to:

• Implement CRUD operations for categories in an admin panel.

• Utilize Angular Material components for creating responsive UI elements.

• Handle API integrations and error scenarios effectively.

• Implement proper routing and navigation in an Angular application.

• Apply form validation and provide user feedback in forms.

This lecture provides hands-on experience in building a crucial part of the admin panel, setting the foundation for managing other entities in your CMS.

In this comprehensive lecture, we dive deep into implementing tag management functionality for our full-stack blog and CMS application. We cover the entire CRUD (Create, Read, Update, Delete) lifecycle for tags, mirroring the approach we used for categories. The lecture demonstrates how to efficiently reuse and adapt existing code to rapidly develop new features.

Main topics covered:

• Fixing styling issues with Tailwind CSS base layer

• Creating a tags list page

• Implementing tag creation functionality

• Developing tag editing capabilities

• Handling tag deletion, including associated relationships

• Refactoring backend code to improve tag-post relationship management

Key learning outcomes:

• Understand how to adapt existing component structures for new features

• Learn to manage database relationships when deleting associated entities

• Gain practical experience in full-stack development with Angular and Node.js

• Master CRUD operations implementation in a real-world application

Prerequisites:

• Familiarity with Angular 18 fundamentals

• Basic understanding of Node.js and database concepts

• Completion of previous lectures on setting up the project and implementing category management

Important notes:

• Pay close attention to the refactoring of backend code for improved relationship management

• Take note of the troubleshooting process when encountering errors during development

Lecture Description

In this comprehensive lecture, we dive deep into managing blog posts in our full-stack application using Angular 18 and Node.js. We cover the following key areas:

1. Implementing the post list page

2. Creating the create post page

3. Developing the edit post page

4. Managing comments list page

5. Implementing delete comment feature

6. Restricting data visibility to user-specific content

Key learning outcomes:

• Understanding CRUD operations for blog posts

• Implementing form controls for post creation and editing

• Managing relationships between posts, categories, and tags

• Handling data persistence and retrieval from the backend

• Implementing user interface components like dropdowns and chips

Prerequisites:

• Basic understanding of Angular and Node.js

• Familiarity with RESTful API concepts

• Knowledge of TypeScript and HTML

Note: This lecture builds upon previous concepts covered in the course, particularly related to tags and categories management.

In this comprehensive lecture, we'll implement crucial features for our full-stack blog and CMS application:

1. Display and manage comments for blog posts

2. Implement user-specific content filtering

Main Topics Covered:

• Adding comment counts to post listings

• Creating a comments management interface

• Implementing backend logic for comment retrieval and deletion

• Modifying existing routes to support user-specific content filtering

Key Learning Outcomes:

By the end of this lecture, you'll be able to:

• Integrate comment functionality into your blog application

• Create a dedicated comments management page

• Implement user-specific content filtering for posts, categories, and tags

• Understand and apply optional JWT authentication for public routes

Prerequisites:

• Basic understanding of Angular 18 and Node.js

• Familiarity with RESTful API concepts

• Knowledge of JWT authentication (covered in previous lectures)

Important Notes:

• This lecture builds upon previous work in the course. Ensure you've completed prior lectures before starting.

• We'll be modifying both frontend and backend code, so have both projects open in your development environment.

• Pay close attention to the implementation of optional JWT authentication, as it's crucial for balancing public access and user-specific content.

Overview

In this lecture, we'll deploy our full-stack blog and CMS project to Google Cloud Run, making it accessible from anywhere. We'll cover both frontend and backend deployment using Docker and set up a live database.

Main Topics Covered

1. Creating Dockerfiles for frontend and backend

2. Setting up Google Cloud Run services

3. Configuring environment variables

4. Deploying MySQL database on Google Cloud SQL

5. Troubleshooting deployment issues

6. Implementing hash-based routing for Angular

7. Testing the live application

Key Learning Outcomes

By the end of this lecture, you will be able to:

• Create Dockerfiles for Angular and Node.js applications

• Deploy frontend and backend services to Google Cloud Run

• Set up and configure a MySQL database on Google Cloud SQL

• Troubleshoot common deployment issues

• Implement hash-based routing in Angular for better compatibility with cloud hosting

• Test and verify a live full-stack application

Prerequisites

• Completed frontend and backend development of the blog and CMS

• Basic understanding of Docker

• Google Cloud Platform account

Important Notes

• Ensure all environment variables are properly set in Google Cloud Run

• Be cautious when setting up database access; use restricted IP addresses when possible

• Remember to update API URLs in both frontend and backend code for production