DEV Community: Utkarsh212

CouponAI: Turn Promotional Emails into Smart Savings

Utkarsh212 — Sat, 07 Jun 2025 17:41:56 +0000

This is a submission for the Postmark Challenge: Inbox Innovators.

What I Built

I built CouponAI, a server-side application that automates the extraction of promotional offers, deals, and coupons from your inbox using Postmark’s inbound email parsing feature.

Many of us receive dozens of marketing and promotional emails every day from services like Swiggy, Zomato, Uber, Ola, e-commerce brands, and more. While these emails often contain valuable discounts and promo codes, they’re easy to miss or forget when we actually need them.

CouponAI solves this problem by allowing users to automatically forward promotional emails to a custom inbound server email address for parsing (powered by Postmark). From there, the parsed emails are processed with the help of a local LLM (Large Language Model) to extract structured information like:

The company or brand
Offer
Offer description
Expiry date
Category (e.g., food, travel, shopping)

This data is then stored in a MongoDB database and can be retrieved via a simple frontend interface, helping users quickly check which discounts are available to them before making purchases or placing orders.

You can now retrieve all usable offers from a single endpoint and never miss a discount again!!

Demo

You can watch CouponAI demo here

As this project depends on a locally hosted Large Language Model (LLM) to process parsed email data — which would be costly to deploy in the cloud — it is currently not live.

However, you can run and test it on your local machine by following a few simple steps outlined below:

How to Run and Test Locally

You can try this project on your local machine by following these steps:

Clone the Repository and Install dependencies

git clone https://github.com/Utkarsh212/CouponAI.git
cd CouponAI
npm install

Install and Run Ollama
- You can download it from here
- I have used gemma3:4b you can choose any suitable model as per your needs.
```
ollama run <YOUR_MODEL_NAME>
```

Configure Environment Variables
Update config.env with the following variables:

PORT=5000
MODEL=YOUR_MODEL_NAME // Add your model name here
HOSTED_MODEL_URL=http://127.0.0.1:11434/api/chat
DB_CONNECTION_URL=YOUR_DB_CONNECTION_STRING // Add your MongoDB connection string here

Expose the App with ngrok
- You can download Ngrok from here
- Run your Express app (e.g., on port 5000)
- Start ngrok to expose it:
```
ngrok http 5000
```
Configure Ngrok URL over Postmark
- Add ngrok URL to your server’s inbound webhook URL field on Postmark portal.
Forward a Test Email
- From any email account, forward promotional email to the Postmark inbound server email address.
- Postmark will parse it and send the content to your server’s inbound webhook URL.
See Results
- Open the index.html file to view the results.
- You'll see a list of all promotional emails along with their details.
- Alternatively, you can access the Ngrok URL directly to view all the extracted offers in JOSN.

Results

Here are example of an email that were forwarded to the inbound server:

Corresponding Output from LLM:

The parsed and structured JSON results:

{
  "company": "Zomato",
  "offer": "Up to 50% off on your favourite treats",
  "details": "Just code ZOMATO while ordering online.",
  "expiry": null,
  "category": "Food"
}

Code Repository

GitHub: github.com/Utkarsh212/CouponAI

How I Built It

The application is powered by a Node.js + Express backend, a locally running LLM model via Ollama, and Postmark’s inbound email parsing feature to automate the extraction of useful promotional data from email content.

Tech Stack

Backend: Node.js + Express
LLM: gemma3:4b model running locally via Ollama
Database: MongoDB
Email Parsing: Postmark Inbound Stream
Development Tools: Ngrok (for exposing localhost), dotenv, axios

Architecture Overview

Below is the architecture diagram that illustrates the complete flow — from the moment a email is forwarded, to how it gets parsed, processed by an LLM, and stored in the database.

Flow & Architecture

Inbound Email Forwarding:
Users set up forwarding from their personal email accounts to a Postmark-provided inbound email address.
Postmark Webhook Integration:
Postmark parses the email and sends structured email data (subject, text body, HTML body, etc.) to a webhook on my Express server.
Email Parsing & LLM Processing:
The server cleans the raw email content and generates a prompt, which is then sent to a locally running LLM (gemma3:4b). The LLM returns result which is then parsed into a JSON object with the following fields:

-   `company`: Brand or service name
-   `offer`: Promo description
-   `details`: Additional details about the offer
-   `expiry`: Validity date if mentioned
-   `category`: Context (e.g., food, shopping)

Storage & Retrieval:
The structured offer data is saved in a MongoDB collection and can be retrieved via a public API route.
Frontend (Optional):
For simplicity, I created a minimal HTML page that displays the available coupons pulled from the backend API.

Experience with Postmark

This was my first time working with Postmark’s inbound email stream feature — and it was a smooth experience. Setting up the inbound stream, getting the parsing to work, and configuring the webhook was very straightforward. I was especially impressed with how detailed and clean the parsed JSON format is out-of-the-box.

How to extract plain text from pdf in react

Utkarsh212 — Sat, 24 Feb 2024 14:32:31 +0000

Learn how to efficiently extract plain text from PDF documents in your React applications using the "react-pdftotext" npm package. This guide will walk you through the steps, helping you enhance your app's text processing abilities.

Setting Up The Application

Create a new vite-react application

npm create vite@latest pdf-to-text -- --template react
cd pdf-to-text

Install the "react-pdftotext" npm package

npm i react-pdftotext

Now there are two ways in which we can utilize the pdfToText function provided by the "react-pdftotext" package:

Taking pdf file input from the local machine.
Fetching pdf file data from remote URL.

Let's see each way one by one.

Local File Input

In the App.jsx file add an input tag of type="file" with an onChange handler function.

<input type="file" accept="application/pdf" onChange={extractText} />

Now import the pdfToText function from the package

import pdfToText from 'react-pdftotext'

Add function definition to the onChange handler function in the App component and define a state variable to store the extracted text content.

const [text, setText] = useState("")

function extractText(event) {
    const file = event.target.files[0]
    pdfToText(file)
        .then(text => setText(text))
        .catch(error => console.error("Failed to extract text from pdf"))
}

Remote PDF File Input

For extracting text from pdf files present remotely. You will first need to fetch the file from the remote location and then read the file contents into a javascript blob object. Now, you must provide this blob object and an input to the pdfToText function.

For this case, the extractText function definition will look like

const pdf_url = "REMOTE_PDF_URL"

function extractText() {
    const file = await fetch(pdf_url)
        .then(res => res.blob())
        .catch(error => console.error(error))

    pdfToText(file)
        .then(text => setText(text))
        .catch(error => console.error("Failed to extract text from pdf"))
}

Thank you for reading! Be sure to send your questions and suggestions here.

Uploading Javascript Blob Objects to Azure Blob Storage from a React Application

Utkarsh212 — Sun, 10 Sep 2023 19:57:10 +0000

This post will teach us how to connect Azure Blob storage directly from a react.js application and upload files and blob objects to Azure Blob storage.

About the Application

In this application, we aim to record a video through the device's webcam and then upload that recorded data to Azure Blob storage in mp4 file format.
To capture the video from the webcam, we used the react-media-recorder package, and for accessing the Azure blob storage, we used the @azure/storage-blob package.
The recorded video stream is stored as a javascript blob object, and the package provides access to that stream in the form of a blob URL after the recording is stopped.
We used this blob object as our dummy data, but you can upload whatever files or data you want.

Prerequisites

You must have access to a azure storage account with role of "Storage Blob Data Contributor".
The name of the storage account and the container in which you want to store the files.
The SAS(Shared Access Signatures) Token to provide secure, delegated access to resources in your Azure storage account.

Setting up the Application

Creating a new react application

npx create-react-app recorder
cd recorder

Installing the necessary dependencies

npm install react-webcam react-media-recorder @azure/storage-blob

Setting up the recorder component

We will use the react-media-recorder package to record the webcam of the device. It provides built-in access to helper functions to start, pause and stop the recording and a set of properties like status, mediaBlobUrl and previewStream to access and manage the recorded data.

import React, { useState } from 'react'
import Webcam from 'react-webcam'
import { ReactMediaRecorder } from 'react-media-recorder'
import { uploadVideoToBlob} from './azureUtils'


function App() {
  return (
    <div>
      <ReactMediaRecorder
        video
        onStop={async (blobUrl) => {

          // used to fetch binary data from a URL (specified by blobUrl
          const blobData = await fetch(blobUrl).then((res) => res.blob())
          const reader = new FileReader()

          // read that data as an array buffer
          reader.readAsArrayBuffer(blobData)

          // uploading to azure blob storage once the data is successfully loaded
          reader.onloadend = async () => {
            const arrayBuffer = reader.result
            uploadVideoToBlob(arrayBuffer, (new Date()).toISOString(), "video/mp4")
          }
        }}
        render={({ status, startRecording, stopRecording, mediaBlobUrl }) => (
          <div>
            <Webcam className='webcam-container' />
            <button onClick={startRecording}>Start Recording</button>
            <button onClick={stopRecording}>Stop Recording</button>
            {status}
          </div>
        )}
      />
    </div>
  )
}

export default App

The App component renders a ReactMediaRecorder component, which is used to record video. The App component also renders a Webcam component, which is used to display the webcam feed.

Here mediaBlobUrl is the URL provided by the react-media-recorder to access the blob object.

Uploading the recorded content to Azure Blob storage

import { BlobServiceClient } from "@azure/storage-blob";

// The name of the Azure Storage account.
const storageAccountName = "YOUR_STORAGE_ACCOUNT_NAME";

// The SAS token for the Azure Storage account.
const sasToken = "YOUR_SAS_TOKEN";

// The name of the Azure Storage container.
const containerName = "YOUR_STORAGE_ACCOUNT_CONTAINER_NAME";

/**
 * Uploads a video to an Azure Storage blob.
 *
 * @param arrayBuffer The video data as an ArrayBuffer.
 * @param fileName The name of the blob. Defaults to "output".
 */
const uploadVideoToBlob = async (arrayBuffer, fileName = "output", contentType = "application/octet-stream") => {
    try {
        // Create a new Blob object from the ArrayBuffer.
        const blob = new Blob([arrayBuffer]);

        // Create a new BlobServiceClient object with the storage account name and SAS token.
        const blobService = new BlobServiceClient(`https://${storageAccountName}.blob.core.windows.net/?${sasToken}`);

        // Get the container client for the specified container.
        const containerClient = blobService.getContainerClient(containerName);

        // Get the size of the blob.
        const contentLength = blob.size;

        // Upload the blob to the container.
        await containerClient.uploadBlockBlob(fileName, blob, contentLength, {
            // Set the blob content type.
            blobHTTPHeaders: {
                blobContentType: contentType,
            },
        });
    } catch (error) {
        console.error("Error uploading blob:", error);
    }
};

// Export the uploadVideoToBlob function.
export { uploadVideoToBlob };

Here, we are explicitly setting the blobContentType to video/mp4, but you can set it as per your file type.

Thank you for reading! Be sure to send your questions and suggestions here.