DataFlowX
Think in flows. Work with data.
PROJECT STUDY2026
The flow should explain the work.
A sequence of scripts can hide the logic.
Small data transformations often turn into hard-to-follow scripts. A visual workflow should make the sequence, configuration, and output of each step easier to understand.
The visual graph and the executable graph have different jobs. Node positions belong to the interface; operation types, dependencies, and configuration belong to the processing contract.
Make each operation explicit.
A visual data-processing platform connecting a React workflow interface to Python, FastAPI, and Pandas. This portfolio includes a self-contained browser demo using synthetic data.
My part in the project.
- 01
Built a node-based interface around explicit data operations.
- 02
Separated graph layout from operation configuration and execution state.
- 03
Explored graph serialization, validation, and preview behaviour.
A visual graph with an explicit execution contract
A sequence of clear responsibilities. Select a stage to inspect its role in the project.
Input dataset
A dataset provides rows and a known schema.
The details between the pieces.
Keeping drag position updates separate from processing state.
Rejecting invalid configurations before execution.
Showing intermediate data clearly.
Workflow scope
Node selection / Operation configuration / Graph validation / Sample previews / Workflow serialization
One sequence.
Clear responsibilities.
A visual data-processing platform connecting a React workflow interface to Python, FastAPI, and Pandas. This portfolio includes a self-contained browser demo using synthetic data.
Dataset → Filter → Transform → Group → Output
Input dataset
A dataset provides rows and a known schema.
Visual graph
Nodes describe filters, transformations, grouping, and output.
Validation
Validate required configuration and graph dependencies.
Processing
FastAPI and Pandas are the backend project direction; the portfolio runs locally in the browser.
Preview
Inspect intermediate state and output without hiding validation failures.
See the steps. Understand the result.
In development. The portfolio demo processes its small synthetic dataset in the browser and simulates execution stages; it does not connect to a production data backend.
Independent project.
In development.
THE TOOLS BEHIND IT
Python / FastAPI / Pandas / React / TypeScript / React Flow / PostgreSQL
Explore the interactive preview
Representative interface built for this portfolio with synthetic data and local browser state.
The goals guiding the work.
Three qualitative design goals for DataFlowX, drawn from the project’s scope and engineering decisions.
Make the steps explicit.
Represent operation types, dependencies, and configuration separately from visual node positions.
Expose intermediate state.
Let a reader inspect the data between operations as well as the final output.
Explain what needs attention.
Check required configuration and graph dependencies before processing a workflow.