How React JS Helps You Land a Data Engineer Job Faster

// AddToCartButton.jsx
import { track } from "./analytics";

export function AddToCartButton({ product, onAdd }) {
  function handleClick() {
    onAdd(product);
    track("add_to_cart", {
      product_id: product.id,
      price: product.price,
      currency: "INR",
      schema_version: 2,
    });
  }
  return <button onClick={handleClick}>Add to cart</button>;
}

{
  "event": "add_to_cart",
  "event_id": "8f2b6c1e-6a0e-4c8e-9c1a-2d6f4b3a9e10",
  "occurred_at": "2026-11-06T10:42:13.512Z",
  "user_id": "u_48291",
  "properties": {
    "product_id": "p_1102",
    "price": 1249.0,
    "currency": "INR",
    "schema_version": 2
  }
}

{
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "title": "add_to_cart",
  "type": "object",
  "required": ["product_id", "price", "currency", "schema_version"],
  "properties": {
    "product_id": { "type": "string", "pattern": "^p_[0-9]+$" },
    "price": { "type": "number", "minimum": 0 },
    "currency": { "enum": ["INR"] },
    "schema_version": { "const": 2 }
  },
  "additionalProperties": false
}

# pip install jsonschema
import json
from jsonschema import Draft202012Validator

schema = json.load(open("add_to_cart.schema.json"))
validator = Draft202012Validator(schema)

def route(event: dict) -> str:
    errors = list(validator.iter_errors(event["properties"]))
    if errors:
        print("invalid:", [e.message for e in errors])
        return "dead_letter"
    return "events_clean"

// PipelineStatus.jsx — simple internal status table
import { useEffect, useState } from "react";

export default function PipelineStatus() {
  const [runs, setRuns] = useState([]);
  const [error, setError] = useState("");

  useEffect(() => {
    fetch("/api/pipeline-runs")
      .then(r => (r.ok ? r.json() : Promise.reject(r.status)))
      .then(setRuns)
      .catch(() => setError("Could not load pipeline runs"));
  }, []);

  if (error) return <p>{error}</p>;
  return (
    <table>
      <thead><tr><th>Pipeline</th><th>Status</th><th>Finished</th></tr></thead>
      <tbody>
        {runs.map(r => (
          <tr key={r.id}><td>{r.name}</td><td>{r.status}</td><td>{r.finished_at}</td></tr>
        ))}
      </tbody>
    </table>
  );
}

# FastAPI endpoint feeding the status page
from fastapi import FastAPI

app = FastAPI()

@app.get("/api/pipeline-runs")
def pipeline_runs():
    # In practice, read from your orchestrator's metadata database
    return [
        {"id": 1, "name": "daily_orders", "status": "success", "finished_at": "2026-11-06 02:14"},
        {"id": 2, "name": "events_clean", "status": "failed", "finished_at": "2026-11-06 02:31"},
    ]

Tracking plan
Event        | Fired when                     | Required properties
page_view    | route change, once             | path, referrer
add_to_cart  | after cart state updates       | product_id, price, currency
purchase     | after payment confirmation     | order_id, total, currency
search       | search submitted               | query_length (not raw text)

Data contract checklist
[ ] JSON Schema for each event in a shared repo
[ ] schema_version field on every event
[ ] event_id for de-duplication
[ ] No personal data unless approved
[ ] Dead-letter path for invalid events
[ ] Owner for each event (front end + data)

Questions for a tracking review with front-end developers
1. Can this event fire twice for one user action?
2. Is it sent before or after the action succeeds?
3. Which fields could be empty, and why?
4. Does any field contain personal data?
5. How will we version changes to this event?