Build Real-Time Postmark Dashboard with FastAPI, React & Mon
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

포스트마크 거래 분석 대시보드 구현

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

  • 웹 개발자 및 데이터 시각화에 관심 있는 개발자
  • FastAPI, MongoDB, React 기술 스택 사용 경험자
  • 이메일 기반 거래 데이터 처리 시스템 구축이 필요한 개발자

핵심 요약

  • FastAPI + MongoDB + React 기반의 실시간 거래 분석 대시보드 구현
  • Postmark Inbound WebhooksLLM을 활용한 이메일 기반 거래 자동 파싱
  • Render.com에서 Docker 없이 단일 서비스 배포 가능

섹션별 세부 요약

1. 시스템 개요

  • 이메일에서 자동으로 은행 거래 추출 및 시각화 기능 제공
  • MongoDB에 거래 내역 저장 후 Pie Chart 기반 통계 분석 제공
  • FastAPI 백엔드와 React 프론트엔드 구성

2. 기술 스택

  • 백엔드: FastAPI, MongoDB 사용
  • 프론트엔드: React 기반 대시보드 개발
  • 이메일 파싱: Postmark Inbound Webhooks + LLM 활용
  • 배포: Render.com에서 Docker 없이 간단한 배포 가능

3. 데이터 형식 및 설정

  • MongoDB에 삽입할 샘플 데이터:

```json

{

"is_transaction": true,

"bank_name": "ICICI Bank",

"amount": 2590,

"currency": "INR",

"transaction_type": "debit",

"confidence": 100

}

```

  • .env 파일에 LLM_API_KEY, MONGO_URL, VITE_SITE_URL 설정 필요

4. 로컬 개발 환경 구축

  • ngrok http 8000으로 로컬 서버 노출 후 Postmark Webhook 설정
  • uvicorn app.main:app --reload으로 FastAPI 서버 실행
  • 프론트엔드: npm installnpm run dev로 개발 서버 실행

결론

  • Render.comngrok을 활용한 간편한 배포 및 로컬 개발 환경 구성
  • LLM 기반 이메일 파싱MongoDB 집계 기능을 통해 실시간 거래 분석 가능
  • Docker 없이도 단일 서비스 배포 가능해 개발 복잡도를 줄일 수 있음