Skip to content
BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
CODEX
CODEX
 
 
backend
backend
 
 
docs
docs
 
 
frontend
frontend
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 

Repository files navigation

FlowTool

Proxy 기반 HTTP 요청/응답 Capture 및 Dashboard 조회 도구 100% AI(Vibe Coding) 기반으로 개발 중인 개인 프로젝트

프로젝트 소개

FlowTool은 개발 중 발생하는 HTTP 요청과 응답을 Proxy 방식으로 중계하고 저장하여, 개발자가 서비스 간 통신 흐름과 실패 지점을 빠르게 확인할 수 있도록 돕는 개발 지원 도구입니다.

v1은 Source Application이 FlowTool Proxy를 통해 Target Application을 호출하고, 그 과정에서 생성된 요청/응답 Capture Log를 PostgreSQL에 저장한 뒤 Dashboard에서 목록과 상세로 확인하는 흐름을 완성하는 데 초점을 맞췄습니다.

프로젝트 목표

FlowTool의 목표는 다음과 같습니다.

  • Proxy 기반 HTTP 요청 및 응답 수집
  • Target Application 응답을 Source Application에 반환
  • 요청/응답 데이터 저장 및 조회
  • Proxy 오류와 Target 오류 구분
  • 개발 중 디버깅 생산성 향상

개발 철학

이 프로젝트는 100% AI 기반(Vibe Coding) 으로 개발됩니다.

직접 코드를 작성하기보다 AI Agent(Codex)와 MCP(Model Context Protocol)를 활용하여 다음과 같은 개발 프로세스를 구축했습니다.

문서 기반 요구사항 정의

↓

AI 구현

↓

자동 테스트

↓

MCP 검증

↓

개발 히스토리 기록

AI는 단순히 코드를 생성하는 것이 아니라,

  • 구현
  • 테스트
  • 검증
  • 작업 기록

까지 하나의 작업 단위로 수행하도록 설계했습니다.

기술 스택

Backend

  • Node.js
  • Express.js
  • TypeScript

Database

  • PostgreSQL

Frontend

  • React
  • Vite
  • TypeScript

AI & Development Tools

  • OpenAI Codex
  • PostgreSQL MCP
  • FlowTool Server Manager MCP
  • Chrome DevTools MCP
  • Playwright MCP
  • Figma MCP
  • Notion MCP

시스템 아키텍처

v1의 핵심 구조는 Proxy 중심입니다.

FlowTool v1 System Architecture

Source Application
      ↓
FlowTool Proxy API
      ↓
Target Application
      ↓
FlowTool Capture 저장
      ↓
PostgreSQL
      ↓
Query API
      ↓
React Dashboard

FlowTool은 모든 Backend 요청을 자동으로 Capture하지 않습니다. Capture Log는 /proxy를 통해 실제로 중계된 요청과 응답만 대상으로 합니다.

Dashboard가 호출하는 GET /api/captures, GET /api/captures/:id와 GET /health는 Capture Log로 저장하지 않습니다.

프로젝트 구조

FlowTool

├── backend/        Express + TypeScript Backend
├── frontend/       React + Vite Frontend
├── CODEX/          AI 개발 문서
├── docs/           프로젝트 문서 및 테스트 시나리오
└── README.md

개발 문서

FlowTool은 문서 기반 개발(Document Driven Development)을 지향합니다.

주요 문서는 다음과 같습니다.

  • CODEX/AGENT.md
  • CODEX/L1_coding_rules.md
  • CODEX/L1_mvp_scope.md
  • CODEX/L2_architecture.md
  • CODEX/L2_entity_model.md
  • CODEX/L2_api_spec.md
  • CODEX/L2_ai_workflow.md
  • CODEX/L2_mcp_workflow.md
  • CODEX/L3_test_strategy.md
  • CODEX/L4_current_requirement.md
  • CODEX/L4_progress.md
  • docs/skills/systemTask/
  • docs/httpieExample.md

AI는 위 문서를 참고하여 구현, 검증, 기록을 진행합니다.

기능 / 동작 흐름

FlowTool v1은 Source Application의 요청을 Proxy로 중계하고, 그 결과를 Capture Log로 저장한 뒤 Dashboard에서 조회하는 흐름을 제공합니다.

FlowTool v1 Function Process

v1 구현 범위

현재 구현 완료

  • Express.js Backend 구성
  • PostgreSQL 연동
  • Capture Log 저장 모델 / Repository / Service
  • Query API 분리
  • GET /api/captures
  • GET /api/captures/:id
  • GET /health
  • FlowTool 내부 API 자동 Capture 제외
  • Proxy Core 구현 (ANY /proxy)
  • X-FlowTool-Target-Url 기반 Target URL 전달
  • X-FlowTool-Source-Service 기반 Source Service 저장
  • HTTP Method / Query / Header / Body 전달
  • Target Application 응답 Status / Header / Body 반환
  • Proxy 요청 및 응답 Capture Log 저장
  • Proxy 요청 1건당 Capture Log 1건 저장
  • Target URL 누락 / 잘못된 Target URL 처리
  • Target 연결 실패 502
  • Target Timeout 504
  • Target Application 4xx, 5xx 응답 passthrough
  • Proxy 오류와 Target 오류 구분
  • React + Vite Dashboard
  • Capture Log 목록 화면
  • Capture Log 상세 화면
  • Source Service / Target URL / Response Headers / Proxy Error 표시
  • Loading / Empty / Error / Not Found 상태 처리
  • Figma 기반 Dashboard UI 개선
  • Backend 자동 검증 스크립트
  • System Test 시나리오 문서화
  • Notion 기반 Development History / System Test History 기록 흐름

v1 제외

  • Spring Starter
  • Node SDK
  • Target Service 매핑
  • 검색 / 필터 / 정렬 / 페이지네이션
  • 통계 / 차트
  • 실시간 갱신
  • 인증 / 권한
  • AI 분석
  • 요청 재실행
  • Streaming / SSE / WebSocket

주요 API

Proxy API

ANY /proxy
X-FlowTool-Target-Url: http://localhost:4000/api/example
X-FlowTool-Source-Service: source-application

Proxy API는 Target Application의 응답 Status, Header, Body를 가능한 한 그대로 Source Application에 반환합니다.

Query API

GET /api/captures
GET /api/captures/{captureId}

Query API는 저장된 Capture Log를 조회하며, Query API 요청 자체는 Capture Log로 저장하지 않습니다.

System API

GET /health

실행 방법

Backend 실행

cd backend
npm install
npm run dev

Frontend 실행

cd frontend
npm install
npm run dev

기본 접속 주소

Backend:  http://localhost:3000
Frontend: http://localhost:5173

검증 방법

Backend 검증

cd backend
npm run build
npm run verify:capture
npm run verify:capture-logs
npm run verify:no-auto-capture
npm run verify:proxy-core
npm run verify:proxy-errors

Frontend 검증

cd frontend
npm run build

수동 HTTPie 예제는 아래 문서를 참고합니다.

docs/httpieExample.md

System Test

v1 System Test는 docs/skills/systemTask/systemTest.md를 진입점으로 수행합니다.

현재 시나리오 문서는 다음과 같습니다.

  • 001_basic_capture.md
  • 002_proxy_forwarding.md
  • 003_proxy_error_handling.md
  • 004_target_error_passthrough.md
  • 005_target_service_integration.md
  • 006_dashboard_states.md
  • 007_internal_api_exclusion.md

최종 v1 통합 테스트에서는 Proxy → Capture 저장 → Query API → Dashboard 표시 흐름의 핵심 데이터가 PostgreSQL, API, UI에서 일치함을 확인했습니다.

향후 계획

v2 이후 후보

  • Spring 연동 모듈
  • Node 연동 모듈
  • Target Service 매핑
  • Dashboard 검색 / 필터
  • JSON Copy / 접기 기능
  • 테스트 환경 격리
  • AI 로그 요약
  • Trace 기반 요청 흐름 분석

프로젝트 특징

  • AI와 협업하는 개발 프로세스 구축
  • 문서 기반 개발
  • Proxy 중심 Capture 구조
  • MCP를 활용한 자동 검증
  • Development History와 System Test History 분리
  • MVP 중심의 점진적 개발

About

HTTP request/response capture and visualization tool built with Express, React, and PostgreSQL.

Topics

developer-toolshttp-capturevibe-coding

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages