This guide walks through deploying the complete ReproLab system: Python backend, FastAPI API wrapper, and React frontend.
┌─────────────────────────────────────────────────────────────┐
│ React Frontend (Vite) │
│ http://localhost:5173 (dev) │
│ │
│ • Supabase Authentication │
│ • Protocol Editor with Live Scoring │
│ • Dashboard and Protocol Management │
└─────────────────────┬───────────────────────────────────────┘
│ HTTP Requests
│ (/api/*)
▼
┌─────────────────────────────────────────────────────────────┐
│ FastAPI Backend (api/main.py) │
│ http://localhost:8000 │
│ │
│ • CORS enabled for frontend dev │
│ • Protocol CRUD operations │
│ • Real-time scoring via ReproLab Python engine │
└─────────────────────┬───────────────────────────────────────┘
│ Imports
│
▼
┌─────────────────────────────────────────────────────────────┐
│ ReproLab Python Engine (src/reprolab/) │
│ │
│ • ReproducibilityScorer class │
│ • Scoring algorithm (45/35/20 weights) │
│ • Protocol validation & preprocessing │
│ • Lineage tracking & constraint engine │
└─────────────────────────────────────────────────────────────┘
- Git
- Node.js 18+
- Python 3.10+
- Supabase (free tier): https://supabase.com
- For authentication and optional data storage
- VS Code (recommended)
- Postman or cURL (for API testing)
The Python backend should already be installed from the main ReproLab setup:
# From ReproLab root
python -m pip install -e .[dev]Verify installation:
python -c "from reprolab.scoring import ReproducibilityScorer; print('✓ ReproLab installed')"python -m pytestExpected output: 7 passed (scoring + existing tests)
cd api
pip install -r requirements.txtpython main.pyExpected output:
INFO: Uvicorn running on http://0.0.0.0:8000
INFO: Application startup complete
In another terminal:
curl http://localhost:8000/health
# Returns: {"status":"ok"}Interactive docs: http://localhost:8000/docs
curl -X POST http://localhost:8000/protocols/score \
-H "Content-Type: application/json" \
-d '{
"name": "DNA Extraction",
"materials": ["Taq polymerase (NEB M0273L)"],
"methods": ["Add sample to lysis buffer", "Incubate at 95°C for 10 min"],
"constraints": ["Temperature: 37°C ± 2°C"]
}'Expected response:
{
"overall": 67,
"metadata_completeness": 70,
"reagent_traceability": 65,
"step_granularity": 60
}cd frontend
npm install-
Create Supabase project at https://supabase.com
-
Get credentials:
- Project URL: https://YOUR-PROJECT.supabase.co
- Anon Key: In Settings → API
-
Create
.env.local:cp .env.example .env.local
-
Edit
.env.local:VITE_SUPABASE_URL=https://YOUR-PROJECT.supabase.co VITE_SUPABASE_ANON_KEY=your-anon-key VITE_API_URL=http://localhost:8000
- Go to Supabase dashboard → Authentication
- Click "Users" → "Add User"
- Create test user (email + password)
npm run devExpected output:
VITE v5.0.0 ready in 234 ms
➜ Local: http://localhost:5173/
➜ Press q to return to normal..
- Navigate to http://localhost:5173
- Click "Sign Up" or "Sign In"
- Use test credentials from Supabase user
- Click "New Protocol" button
- Fill in:
- Protocol Name: "DNA Extraction"
- Description: "Standard molecular extraction"
- Materials: Add "Taq polymerase (NEB M0273L)"
- Methods: Add "Incubate at 95°C for 10 min"
- Constraints: Add "Temperature: 37°C ± 2°C"
- Observe: Reproducibility score updates in real-time (right panel)
- Click "Save Protocol"
Score should show components:
- Metadata Completeness: ~70
- Reagent Traceability: ~65
- Step Granularity: ~60
- Overall: ~67
curl http://localhost:8000/protocols
# Should return created protocol in JSON array-
Push to GitHub:
git add . git commit -m "feat: add react frontend and fastapi api" git push origin main
-
Deploy with Vercel:
- Go to https://vercel.com
- Connect GitHub repo
- Set environment variables:
VITE_SUPABASE_URL=<production-url> VITE_SUPABASE_ANON_KEY=<production-key> VITE_API_URL=https://api.reprolab.io - Click "Deploy"
Option 1: Heroku
cd api
heroku login
heroku create reprolab-api
heroku config:set REPROLAB_ENV=production
git push heroku mainOption 2: Railway
- Connect GitHub repo at https://railway.app
- Select
api/main.pyas root - Set environment variables
- Deploy
Option 3: AWS Lambda (with Mangum)
pip install mangumCreate api/lambda_handler.py:
from mangum import Mangum
from api.main import app
handler = Mangum(app)-
Create
protocolstable in Supabase:CREATE TABLE protocols ( id UUID PRIMARY KEY REFERENCES auth.users, user_id UUID NOT NULL REFERENCES auth.users(id), name TEXT NOT NULL, description TEXT, materials JSONB[], methods JSONB[], constraints JSONB[], reproducibility_score JSONB, created_at TIMESTAMP DEFAULT NOW(), updated_at TIMESTAMP DEFAULT NOW() );
-
Update
api/main.pyto use Supabase:from supabase import create_client supabase = create_client( os.environ["SUPABASE_URL"], os.environ["SUPABASE_KEY"] )
-
Modify protocol endpoints to read/write to
protocolstable
Error: Failed to fetch from /api/protocols
Fix:
- Verify API running:
curl http://localhost:8000/health - Check CORS: API should log
CORS(*): * allows usage - Verify proxy in
vite.config.jspoints to:8000
Error: Missing Supabase environment variables
Fix:
cp .env.example .env.local- Check
.env.localhas correct URL and key - Reload browser (Ctrl+Shift+R)
Error: Score always shows 0/0/0/0
Fix:
- Check API logs for Python errors
- Verify ReproLab installed:
pip list | grep reprolab - Manually test scorer:
from reprolab.scoring import ReproducibilityScorer scorer = ReproducibilityScorer() score = scorer.score({"name": "Test", "materials": []}, {}) print(score)
- Tight integration between React UI and Python engine
- Single version control for full product
- Shared documentation and CI/CD
- Standard for web services
- Easy debugging (browser DevTools)
- Simple to scale horizontally
- WebSocket can be added for real-time later
- Drop-in PostgreSQL with auth
- Real-time subscriptions
- Multi-tenant support built-in
- Free tier sufficient for MVP
- Lightweight (1.2 KB)
- No boilerplate
- Perfect for auth + protocol state
- Easy to migrate to Redux later
- Add Supabase data storage (optional for MVP)
- Implement real-time updates with WebSocket
- Add payments with Stripe
- Build mobile app with React Native
- Add audit logging for compliance
- Backend docs: ../README.md
- API docs: ./api/README.md
- Frontend docs: ./frontend/README.md
- Issues: https://github.com/SID-6921/ReproLab/issues