Implementing a Mass Email Sending System with Angular, .NET Core, Azure, SendGrid, and SignalR

In our previous blog, we discussed the design considerations and workflow for a mass email sending system. Now, let’s dive into the actual implementation using Angular for the frontend, .NET Core for the backend API, Azure Cloud services for queuing and processing, SendGrid for sending emails, and SignalR for real-time push notifications. We’ll also cover best practices such as adding a random delay before sending emails, retry logic for failed emails, and database status updates.

System Design Interview Question— Design Mass Email Sending System

1. Setting Up the Frontend with Angular

First, let’s set up the Angular frontend, where users can create and manage email campaigns.

Create a component where users can create and manage campaigns.

import { Component } from '@angular/core';
import { CampaignService } from './campaign.service';

@Component({
  selector: 'app-campaign',
  template: `
    <div>
      <h1>Create Campaign</h1>
      <form (submit)="createCampaign()">
        <!-- form…