DEV Community

Cover image for Postmark Transaction Analyzer
JOHN RATNA KUMAR AKKISETTI
JOHN RATNA KUMAR AKKISETTI

Posted on

Postmark Transaction Analyzer

#devchallenge #postmarkchallenge #webdev #api

✨ Why I Built This

I wanted a dashboard that automatically parses bank transactions from my email, stores them neatly, and visualizes insights using charts — all with FastAPI, MongoDB, and React.

🚀 Features

  • 🧠 AI-based detection of bank transactions from emails
  • 📊 Frontend dashboard with Pie Chart summary
  • 🛠️ FastAPI backend with MongoDB aggregation
  • ⚡ Deployed on Render.com

🧱 Tech Stack

  • Backend: FastAPI, MongoDB
  • Frontend: React
  • Email Parsing: Postmark Inbound Webhooks + LLM
  • Deployment: Render.com (single service, no Docker needed)

📁 Project Structure 

.
├── backend
│   ├── main.py
│   ├── routers/
│   └── frontend/          # frontend build (dist folder goes here)
└── frontend
    └── postmark-dashboard
        ├── public/
        ├── src/
        └── dist/           # built files (copied to backend/frontend)
Enter fullscreen mode Exit fullscreen mode

🧪 Sample MongoDB Data

You can use the following test data to populate your MongoDB:

[
  {
    "is_transaction": true,
    "bank_name": "ICICI Bank",
    "amount": 2590,
    "currency": "INR",
    "transaction_type": "debit",
    "description": "UPI RRN :904123451122",
    "confidence": 100,
    "created_at": "2025-04-07T07:05:32.997Z"
  },
  {
    "is_transaction": true,
    "bank_name": "Bank Of Maharashtra",
    "amount": 1920,
    "currency": "INR",
    "transaction_type": "debit",
    "description": "UPI RRN :708312128688",
    "confidence": 98,
    "created_at": "2025-04-10T10:21:18.234Z"
  }
]
Enter fullscreen mode Exit fullscreen mode

🏁 How to Run

🌐 Setup Webhook using ngrok

To receive emails via webhook in local FastAPI:

ngrok http 8000
Enter fullscreen mode Exit fullscreen mode

Copy the public URL shown (e.g. https://abcd1234.ngrok.io)

Set Postmark inbound webhook to
https://abcd1234.ngrok.io/inbound-webhook

Make sure the FastAPI server is running when using ngrok.

🔧 Backend 

git clone https://github.com/Johnnaidu619/PostmarkChallenge.git
cd PostmarkChallenge/backend
python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt
uvicorn app.main:app --reload
Enter fullscreen mode Exit fullscreen mode

⚠️ Make sure MongoDB is running and connection string is set in .env with keys LLM_API_KEY,MONGO_URL,MONGO_DB_NAME
and for frontend .env key is VITE_SITE_URL.

💅 Frontend 

cd frontend/postmark-dashboard
npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

✅ Live Demo

👉 Check it here

Top comments (1)

Collapse
 
nevodavid profile image
Nevo David •

pretty cool setup, feels like something i'd use to get my mess together - you ever run into stuff that surprised you after seeing the data laid out?