Fullstack Blogging App with Angular and Nest

Explore the user feature architecture by implementing controller, module, and service components, initialize the database, define the user entity, and create the first endpoint with DTOs and repository-based persistence.

Create a user controller with the nest CLI, update app module, and expose a post endpoint at API/users with a global API prefix that returns success.

Create a user entity with TypeORM, configure SQLite, and save user data through a Nest controller using a repository, handling async save and returning a JSON response.

Refactor the Nest app by moving user creation from the controller to a dedicated user service, using a create user DTO and injecting the service for business logic and persistence.

Create a dedicated user module in Nest, move the user controller and service there, import the type module and user entity, and wire the module into the app module.

Build a sign-up form with a single email input, implement layout and styling, enable the submit button as you type, and handle progress and success scenarios.

set up a sign up page for the fullstack blogging app by generating an Angular component, configuring routing, and building a simple email signup form with a disabled button.

Enable the submit button by binding an Angular reactive forms form control to an email input and toggling its disabled state based on the input value.

Submit the signup form using Angular's HTTP client via an API service, post the email to the backend, and use a proxy config to route API calls.

Apply Bootstrap styling to the signup form using a Bootstrap card, container, and responsive grid with breakpoints, while overriding the primary color and adding borders and shadows.

Implement API progress tracking in the signup form to prevent duplicate submissions, show a spinner and disabled button during requests, and display the backend success message with a bootstrap alert.

Add email after signup and extend the user entity with a new field using typeorm migrations for safe database updates; configure the config service for multiple environments.

Create an email module and email service, integrate the service into the app, and send a sign-up email with a token and activation link via node mailer and ethereal email.

Generate a registration token by creating a random uuid, attach it to the user object, and save it to the database for sign-up emails, with migrations to evolve the schema.

Explore TypeORM migrations in a fullstack blog app by configuring a data source, creating up and down migrations, and applying changes to a users table with tokens, while disabling synchronize.

Externalize sensitive data by moving configuration to environment variables. Create an env file, use a global config service, and access the email host and port.

Configure database settings via an env file and an async type orm module using a config service to fetch db host, and extract options into a database module for environments.

Configure and run the app across development and production by using .dev.env and .env files, a config module to load the env, and migrations to create the correct db.

Validate signup input using built-in and custom class validator constraints, map errors with an exception filter, and handle signup and email service failures by rolling back and preventing user saves.

Learn to enforce a unique user handle by checking existing handles before saving, and generate a short, unique fallback value when conflicts occur using a reusable utils function.

Configure robust email validation for user signup using class-validator and Nest pipes, then implement a global exception filter to return structured 400 errors with validation details.

map db constraint errors to an api response by wrapping the user save in a try-catch, detecting unique constraint messages, and returning a bad request with an email in use.

Implement a unique email validator in nest with class-validator, injecting the user repository to enforce email uniqueness and protect against race conditions, with database-level fallback.

Handle email send failures by returning errors when authentication fails on the server side. Log exceptions, map mail gateway errors to server errors, and notify users that their request failed.

Demonstrates implementing rollback in a fullstack blogging app by wrapping user creation in a transaction with a query runner, committing on email success and rolling back on failure.

Learn to implement client-side email validation and conditionally enable the signup button, while handling backend errors like existing email and extracting reusable components into shared spaces for future sections.

Handle network errors in the form by updating the API progress, displaying a danger alert with an error message, and resetting messages on new submissions.

Discover how to surface backend 400 validation errors from HTTP error response for signup, show email errors beside the input, and clear them as the user edits the field.

Implement client-side validation in Angular using form control validators, show invalid email errors after user interaction, and combine with backend validation to disable the submit button for non-unique emails.

Extract reusable components from the signup form in Angular, introducing a shared alert and button with dynamic variants to ensure styling consistency across the app and simplify reuse.

Explore authentication in the fullstack blogging app by building an authentication controller with login and logout endpoints, implementing an opaque token stored in the database, and linking tokens to users.

Create a dedicated auth endpoint with a controller and module, using a token and operation dto (register or login), and validate tokens via the user service to set a cookie.

Implement robust authentication validation by ensuring tokens are single-use, handling empty or invalid tokens and operations, and using an enum validator with customized messages to map errors.

Implement token authentication in a monolith by creating a token entity and tokens table with a many-to-one relation to users, not using JWT, and storing generated tokens via migrations.

Implement a logout endpoint that reads the app token from cookies, deletes the token from the database, and clears the app token cookie in the response.

Create a login endpoint in the auth module, mirroring signup but validating an existing email, generating a login token, saving it, and sending a login email.

Implement token-based auth endpoint for login and signup by validating and invalidating tokens in the database, handling both register and login tokens through a unified flow.

Learn to add home, login, and sign-up pages. Implement the login-signup flow via email links, update the navigation on login, enable logout, and outline a post article page.

Add new pages to the fullstack blogging app by generating home and callback components under pages, register routes for the home and callback paths, and skip tests and styles.

Create and style an Angular navbar using Bootstrap, convert links to routerLink for seamless navigation, configure container spacing, brand with an icon, and apply hover, text shadow, and border effects.

Implement a callback page that reads token and operation from query parameters, navigates via router links, and posts to backend api/auth using http client to verify token.

Track API requests by using a status and message properties to represent loading, success, and error states, show a spinner during loading, and display an alert for success or error.

extract the spinner into a new shared component and apply it on the callback page and in the button. add size and full-page styling via an input and wrapper class, enabling a reusable spinner in the shared components folder for the fullstack blogging app with angular and nest.

Update the navigation bar to reflect user state after signup. Introduce a shared service with a behavior subject to track a user object and toggle links accordingly.

Use the callback page to call the auth service with token and operation, subscribe to the response, and reflect the updated user in the logged in layout and navbar.

Persist login state by storing user data in local storage, initialize it on startup, and update storage on user changes with guarded JSON parsing.

Implement logout by posting to the logout endpoint to clear cookies on the backend, update local user state on finalize, and reflect the not-logged-in state in the navbar after reload.

Build a login page by duplicating the signup flow, wiring the API auth login endpoint, updating routes and navbar, and handling 400/404 errors with clear messages.

Implement the login callback page, navigate to the home page when operation equals login, and complete signup and login flows; prepare for the articles editor next.

Learn how to create, update, and publish articles using middleware to identify the current user from the cookie token. Apply guards and a custom decorator to secure article endpoints.

Create an article resource with nest CLI, define the article entity with id, title, content, image, timestamps, and slug, and generate the migration for the articles table.

Define a post article endpoint with a dto to validate title, content, and image, save via the article repository, generate a slug, and return the article id.

Implement a Nest middleware to read auth token from cookies, fetch user via the auth service, and attach it to the request, then protect endpoints with a CanActivate guard.

Establish a one-to-many relation between users and articles with a user id foreign key and cascade delete via typeorm migrations, and save articles under the current user.

Implement a secured update article endpoint with a put method, validating article ownership, updating title, content, and image while keeping the slug unchanged, and returning the article ID.

Add a publish endpoint to articles, introducing published and published_at columns, migrations, and a patch method to toggle publish state for owned articles, with guards and database updates.

Build an article editor with title and content inputs, client-side and backend validation, save and update actions, and publish or unpublish controls for the fullstack blogging app.

Create an article editor page using Angular CLI, generate the article editor page component under pages/article, wire up routing to article/new, and update the navbar link to post article.

Builds the article editor layout with two text areas for title and content in a white bordered container, uses flex column with full height, and includes a save button.

Implement article submission with reactive forms for title and content, and use a service to post or update articles via the api articles endpoint based on the article id.

This lecture shows adding a publish button to the article editor, using an article service to toggle publish via a patch request, and updating the UI and text accordingly.

Add progress indicators for publish and editor actions by toggling an api progress flag, displaying a spinner, and disabling buttons during requests.

Handle validation errors in the editor by displaying backend 400 validation errors for title and content using an errors object, while adding client-side validation checks to prevent submissions until valid.