Back to List

How BioPlayground Was Built โ€” A Researcher's Journey to Developer

A biotech researcher's real-world experience building BioPlayground bio tools. From coding basics to web deployment.

Beginner
|
30min
|
Verified (2026-06)
BioPlaygroundWeb DevelopmentBio ToolsVisualizationReal-world Experience
Progress0/8 (0%)

How BioPlayground Was Built

This isn't a coding tutorial. It's a story about "why I started, what walls I hit, and how I got past them."

How a researcher who didn't know a single line of code ended up building bio tools โ€” I hope this experience gives you the courage to start DevBench.

The Beginning: "Do I Have to Draw This Graph by Hand Every Time?"

It all started with repetitive tasks.

Every week: organize experiment results in Excel, create the same type of graph over and over, email it to colleagues. The question "Can't I automate this?" was the seed of BioPlayground.

It started as a single Python script:

python
import matplotlib
matplotlib.use("Agg")
import matplotlib.pyplot as plt
data = [23.5, 45.2, 67.8, 89.1, 12.3]
labels = ["Sample A", "Sample B", "Sample C", "Sample D", "Sample E"]
fig, ax = plt.subplots(figsize=(8, 5))
ax.bar(labels, data, color="#2d5a3d")
ax.set_ylabel("Expression Level")
ax.set_title("Gene Expression Comparison")
fig.savefig("expression.png", dpi=150, bbox_inches="tight")
plt.close(fig)
print("Chart saved: expression.png")
assert len(data) == len(labels)

That one script saved 30 minutes every week. "Coding is actually useful."

First Wall: "How Do I Let Others Use This?"

Python scripts only I could use. When I told a colleague "install Python and run this script," the answer was always the same.

"Just send me the results."

A web app was the answer. One URL, and anyone can use it from any device.

python
tech_stack = {
"Frontend": "React (Next.js)",
"Styling": "Tailwind CSS",
"Backend": "Supabase",
"Deployment": "Vercel",
"Charts": "Recharts",
}
for category, tool in tech_stack.items():
print(f"{category}: {tool}")
assert len(tech_stack) == 5

These tech names felt like an alien language at first. But learning them one by one, I realized something โ€” frameworks are just tools; what matters is the problem you want to solve.

Second Wall: "This Code Worked Yesterday โ€” Why Not Today?"

The nightmare of coding without Git.

  • app_v1.py
  • app_v2_final.py
  • app_v2_final_REALLY.py
  • app_backup_20260315.py

After learning Git, this problem disappeared completely. Every change is recorded, and you can go back to any point in time.

python
git_lessons = [
"Commit often, commit small",
"Write 'why' in commit messages",
"Don't push directly to main",
"Code review is a safety net for catching mistakes",
]
for i, lesson in enumerate(git_lessons, 1):
print(f"Lesson {i}: {lesson}")
assert len(git_lessons) == 4

Third Wall: "The Data Is Too Big โ€” The Browser Freezes"

Bio data is huge. GTEx datasets with tens of thousands of rows, TCGA clinical data with thousands of patients. Load all of it into the browser and the tab crashes.

The solution was summarize on the server, send only results to the browser:

python
strategies = {
"Server-side filtering": "Send only the needed portion of data via API",
"Pagination": "Show only 100 rows at a time",
"Pre-computation": "Calculate statistics in advance and store them",
"Lazy loading": "Load additional data on scroll",
}
for strategy, desc in strategies.items():
print(f"- {strategy}: {desc}")
assert "Server-side filtering" in strategies

Looking Back: What a Researcher Gains from Learning to Code

Learning to code doesn't make you a developer. But it makes you a more powerful researcher.

python
gains = {
"Automation": "Freedom from repetitive tasks โ†’ focus on research",
"Reproducibility": "Scripts = perfect experiment notes",
"Communication": "Speak the same language as the dev team",
"Independence": "Build the tools you want yourself",
"Career": "Expand into bioinformatics, data science",
}
for gain, desc in gains.items():
print(f"- {gain}: {desc}")
assert len(gains) == 5

To You, Starting DevBench

Don't try to learn everything perfectly before starting. Imperfect code that solves a problem is good code.

BioPlayground's first commit was embarrassingly messy. But that messy code is what built today's tool.

No one knows where your first print("Hello, Biology!") will lead.


The tools mentioned in this article are taught one by one in other DevBench topics. Start with the common fundamentals.

๐Ÿ’ฌ Questions & Comments

0 comments

You can post without signing in. Guest comments cannot be edited or deleted by their author.

0/2000

Loading...