How Mechanical Engineers Can Enter MERN Stack in 2026

// JavaScript — for an engineer mind.
// The syntax is not the hard part. The mental model is.

// ── 1. JavaScript is single-threaded ──
// Only one thing runs at a time — but I/O doesn't block.

console.log("1");
setTimeout(() => console.log("3"), 0);
console.log("2");
// Output: 1, 2, 3
//
// If you come from a C or MATLAB background, this feels
// surprising. Once you internalise that callbacks and
// promises are how I/O overlaps without threads, the
// rest of the language makes sense.

// ── 2. Objects and arrays are references ──
const a = { x: 1 };
const b = a;
b.x = 2;
console.log(a.x);  // 2 — not 1!

// This is a common source of bugs in React and Express.
// You will fix the same bug in your first React project.
// Learn to think in references early.

// ── 3. Functions are values ──
// This is the biggest mental shift. Functions can be passed
// around like any other variable.
const add = (a, b) => a + b;
const apply = (fn, a, b) => fn(a, b);

console.log(apply(add, 2, 3));  // 5

// In React, this pattern is everywhere:
//   <button onClick={() => setCount(count + 1)} />
//   useEffect(() => { fetchData(); }, []);
//
// Once "functions are values" clicks, React feels simple.

// ── 4. Async/await is a wrapper over promises ──
async function fetchData() {
  const res = await fetch("/api/items");
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
}

// What this teaches an engineer:
// - The syntax is small. The mental model is what takes time.
// - Async I/O is the biggest shift from procedural code.
// - Once you understand the mental model, the rest is practice.

// This is why engineers with prior systems experience learn
// faster than beginners — you already think in systems.

// A small React UI — the frontend layer of MERN.
// The structure is not unlike a mechanical dashboard:
// inputs, state, and outputs.

import { useState, useEffect } from "react";

export default function SensorList() {
  const [sensors, setSensors] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function load() {
      try {
        // Relative URL: in development, proxy "/api" to
        // http://localhost:4000 (Vite or CRA proxy setting).
        const res = await fetch("/api/sensors");
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        setSensors(await res.json());
      } catch (err) {
        console.error(err);
      } finally {
        setLoading(false);
      }
    }
    load();
  }, []);

  if (loading) return <p>Loading sensors…</p>;
  if (sensors.length === 0) return <p>No sensors yet.</p>;

  return (
    <div className="sensor-list">
      <h2>Sensors</h2>
      <ul>
        {sensors.map((s) => (
          <li key={s.id}>
            <strong>{s.name}</strong> — {s.value} {s.unit}
          </li>
        ))}
      </ul>
    </div>
  );
}

// What an engineer sees here:
// - useState is a local variable that survives re-renders
// - useEffect is a lifecycle hook (like a constructor + tick)
// - The JSX renders a view of the current state
//
// If you have ever written an HMI or HUD in any system,
// this mental model is familiar. React is just a
// declarative way to describe "what should show given state X".
//
// This project is mechanical-engineer-friendly because
// it maps to a domain you already understand.

// A small Express API — the backend layer of MERN.
// This is the layer that feels most like engineering code.

const express = require("express");
const app = express();

app.use(express.json());

// In-memory store — swap for MongoDB later
let sensors = [
  { id: 1, name: "Temperature", value: 24.5, unit: "°C" },
  { id: 2, name: "Humidity", value: 58.0, unit: "%" },
];
let nextId = 3; // never reuse ids, even after deletes

// GET — read all sensors
app.get("/api/sensors", (req, res) => {
  res.json(sensors);
});

// POST — add a new sensor
app.post("/api/sensors", (req, res) => {
  const { name, value, unit } = req.body;
  if (!name || value == null || !unit) {
    return res.status(400).json({ error: "Missing fields" });
  }

  const newSensor = {
    id: nextId++,
    name,
    value: Number(value),
    unit,
  };
  sensors.push(newSensor);
  res.status(201).json(newSensor);
});

// PATCH — update a value (only allowed fields, never the id)
app.patch("/api/sensors/:id", (req, res) => {
  const id = Number(req.params.id);
  const sensor = sensors.find((s) => s.id === id);
  if (!sensor) return res.status(404).json({ error: "Not found" });

  const { name, value, unit } = req.body;
  if (name !== undefined) sensor.name = name;
  if (value !== undefined) sensor.value = Number(value);
  if (unit !== undefined) sensor.unit = unit;
  res.json(sensor);
});

// DELETE — remove a sensor
app.delete("/api/sensors/:id", (req, res) => {
  sensors = sensors.filter((s) => s.id !== Number(req.params.id));
  res.status(204).end();
});

app.listen(4000, () => console.log("API at http://localhost:4000"));

// Why this is a great project for a mechanical engineer:
// - It is essentially a data acquisition system
// - You already understand the inputs (sensors) and outputs (values)
// - The code is a thin wrapper over that mental model
//
// Once this works, swapping the in-memory store for MongoDB
// is a small step — and now you have a full MERN project.
//
// This is the pattern that gets you hired: a small project
// in a domain you understand, built with the stack the
// job description asks for.