Project-Based Lesson: Build a Mock TMS Integration—Intro to APIs for High Schoolers

Hook: Turn students' screen time into real-world skills—fast

Teachers: you need portable, high-engagement lessons that teach modern tech without drowning your class in jargon. Students: you want projects that feel like real work and show up on portfolios. This scaffolded, project-based lesson—"Build a Mock TMS Integration"—lets high schoolers simulate tendering, dispatching and real-time tracking with simple APIs. In a few class sessions your students will learn request-response cycles, basic authentication, and live updates—skills recruiters and colleges are asking for in 2026.

Why this matters in 2026: logistics tech, APIs, and classroom relevance

Logistics platforms and Transportation Management Systems (TMS) are evolving fast. In late 2025 industry-first integrations connected autonomous trucking systems to TMS platforms, demonstrating how APIs underpin modern supply chains. That real-world shift matters for classrooms: teaching APIs for students is no longer theoretical—it's vocational literacy.

By 2026, educators are expected to teach not only coding syntax but how software components communicate. Students who can design and consume APIs understand the backbone of modern apps—from ride-hailing to driverless freight. This lesson aligns with that need and fits into project-based learning objectives for computer science and technology courses.

Project snapshot: What students will build (high level)

• Create a simple mock TMS API (server) that supports tendering and dispatching requests.
• Build a small front-end client that tenders a load, accepts a dispatch, and subscribes to a real-time tracking feed.
• Implement simple authentication (API key or JWT) and show basic error handling.
• Demonstrate a live-tracking stream with Server-Sent Events (SSE) or WebSockets.

Learning objectives (measurable)

• Explain request-response flow between client and server using HTTP verbs (GET, POST).
• Implement a mock API endpoint and make authenticated requests to it.
• Consume a realtime stream (SSE or WebSocket) and visualize location updates.
• Design JSON payloads for tendering and dispatching operations.
• Reflect on ethics and operational implications of logistics automation (class discussion).

Classroom logistics: time, tools, and prerequisites

Recommended for grades 9–12. Prior knowledge: basic HTML/JavaScript or Python, understanding of HTTP (intro level). Time: 4–6 class periods (45–60 minutes each) or a block schedule condensed over 2–3 sessions. Tools: code editor (VS Code or Replit), modern browser, Node.js (or Python/Flask), and optional GitHub for version control. For classroom hosting use free/dev tiers of Render, Railway, or Vercel for front-end and server deployments. If your school blocks external hosts, run servers locally and pair students for network access.

2026 trends that make this lesson timely and transferable

• TMS & Autonomous Fleet Integrations: Late 2025’s Aurora–McLeod integration illustrated how APIs connect autonomous capacity directly into existing TMS workflows—an example students can tie back to their mock system.
• Standards & Tools: OpenAPI and AsyncAPI are standardizing API design; low-code API builders and AI-assisted code generation (2025–2026) speed prototyping.
• Real-time Tech: WebSockets, Server-Sent Events (SSE), and lightweight protocols (MQTT) are common in tracking and IoT systems.
• Ethics & Workforce: Classrooms must include discussions about automation, job impacts, and responsible data practices.

Project scaffolding: Step-by-step lesson plan

Session 1 — Warm-up & API concepts (45 min)

1. Hook (5–10 min): Present logistics scenario—company needs to tender a load to carriers. Show a short clip or screenshot of a TMS dashboard.
2. Mini-lecture (10 min): Request-response model, HTTP verbs, JSON payloads, endpoint anatomy (URL, path, query).
3. Interactive demo (15 min): Use Postman/Insomnia or the browser’s fetch console to call a public test API (e.g., https://jsonplaceholder.typicode.com) and inspect responses.
4. Pair activity (10 min): Students sketch the endpoints they expect for a TMS mock: /tenders, /dispatches, /tracking.

Session 2 — Design API & implement a mock server (60 min)

Goal: Stand up a basic server that responds to POST /tenders and POST /dispatches.

1. Review API design using OpenAPI-style quick doc (teacher provides template).
2. Choose runtime: Node.js + Express (example below) or Python + Flask.
3. Implement endpoints and return JSON confirmations with generated IDs.

Session 3 — Authentication & error handling (45–60 min)

Goal: Add an API key check and simple validation with meaningful error codes.

1. Discuss why authentication matters (data integrity, access control).
2. Add API key middleware; show invalid vs. valid responses (401, 400, 200).
3. Students test via curl/Postman and fix their front-end requests.

Session 4 — Real-time tracking (60 min)

Goal: Implement a tracking feed using SSE or WebSockets and connect front-end to show live location updates.

1. Explain push vs pull and explore SSE vs WebSocket trade-offs.
2. Implement a server-side tracker that emits simulated GPS coordinates every few seconds.
3. Build front-end code to receive events and animate a marker on a map (Leaflet or Google Maps).

Session 5 — Polishing, testing & reflection (45–60 min)

1. Bug fixes and UX improvements: status messages, error handling, retry logic.
2. Group presentations: each group demonstrates tender → dispatch → tracking flow.
3. Reflection & ethics discussion: What did we learn? What are real-world risks?

Concrete code examples (teacher-ready)

Below are minimal, copy-paste-ready snippets to get class prototypes running. Keep them short and explanatory. These are intentionally simple for classroom use—do not use as production security patterns.

Node.js + Express: basic server (save as server.js)

// npm init -y && npm i express cors
const express = require('express');
const app = express();
app.use(express.json());

// Simple API key middleware
const VALID_KEY = 'CLASSROOM_KEY_123';
app.use((req, res, next) => {
  const key = req.header('x-api-key');
  if (!key || key !== VALID_KEY) return res.status(401).json({error: 'Invalid API key'});
  next();
});

let tenders = {};
let dispatches = {};
let nextId = 1;

app.post('/tenders', (req, res) => {
  const id = nextId++;
  tenders[id] = {id, ...req.body, status: 'tendered'};
  res.json({id, status: 'tendered'});
});

app.post('/dispatches', (req, res) => {
  const id = nextId++;
  dispatches[id] = {id, ...req.body, status: 'dispatched'};
  res.json({id, status: 'dispatched'});
});

// Simple SSE tracking stream
app.get('/tracking/:id/events', (req, res) => {
  const id = req.params.id;
  res.set({ 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache' });
  let lat = 40.0, lng = -74.0;
  const iv = setInterval(() => {
    lat += (Math.random() - 0.5) * 0.01;
    lng += (Math.random() - 0.5) * 0.01;
    res.write(`data: ${JSON.stringify({id, lat, lng, timestamp: Date.now()})}\n\n`);
  }, 2000);
  req.on('close', () => clearInterval(iv));
});

app.listen(3000, () => console.log('Mock TMS API running on :3000'));

Minimal front-end: tender form + SSE listener (index.html)

<!doctype html>
<html>
<head> <meta charset="utf-8"> <title>Mock TMS Client</title> </head>
<body>
<h3>Tender a load</h3>
<form id="tenderForm">
  <input name="origin" placeholder="Origin" required>
  <input name="destination" placeholder="Destination" required>
  <button>Send Tender</button>
</form>
<div id="status"></div>

<h3>Tracking</h3>
<div id="track">No track yet</div>

<script>
const API_KEY = 'CLASSROOM_KEY_123';

document.getElementById('tenderForm').onsubmit = async (e) => {
  e.preventDefault();
  const form = e.target;
  const data = {origin: form.origin.value, destination: form.destination.value};
  const res = await fetch('/tenders', {
    method: 'POST', headers: {'Content-Type': 'application/json', 'x-api-key': API_KEY},
    body: JSON.stringify(data)
  });
  const json = await res.json();
  document.getElementById('status').innerText = 'Tendered id: ' + json.id;
  startTracking(json.id);
}

function startTracking(id) {
  const es = new EventSource(`/tracking/${id}/events`, {headers: {'x-api-key': API_KEY}});
  // Note: browsers do not support custom headers for EventSource; in class use query param: /tracking/:id/events?key=KEY
  es.onmessage = (e) => {
    const data = JSON.parse(e.data);
    document.getElementById('track').innerText = `Truck ${data.id}: ${data.lat.toFixed(4)}, ${data.lng.toFixed(4)}`;
  };
}
</script>
</body>
</html>

Authentication options (age-appropriate explanations)

• API Key — simplest: client sends a shared key with each request. Good for classroom demos but not secure for production.
• JWT (JSON Web Token) — students learn token issuance (login → token) and token-based access. Demonstrates session-free auth.
• OAuth2 (overview) — concept-level only: how third-party authorization works (use in advanced classes).

Classroom tip: start with API keys, then add a JWT session token for an extension session.

Real-time tracking: SSE vs WebSocket (teacher notes)

Server-Sent Events (SSE) are easy: server pushes text events over HTTP and browsers support EventSource. Use SSE for one-way tracking (server → client).

WebSockets allow full two-way communication (client ↔ server). Use WebSockets when the client must send frequent commands back (e.g., live driver chat).

For most classroom tracking demos SSE is simpler and robust, which is why it's used in the example code above. If students are ready for more, show a WebSocket variant.

Assessment rubric (practical and simple)

Use a 0–4 scale for each criterion. Provide students with the rubric ahead of time.

• Functionality (0–4): Does tender → dispatch → tracking workflow work end-to-end?
• API Design (0–4): Clear endpoints and JSON schema, documented input and output.
• Authentication & Error Handling (0–4): Proper use of API key/JWT and meaningful error responses.
• UI/UX (0–4): Front-end clarity and helpful status messages.
• Reflection & Ethics (0–4): Students discuss implications of automation and data privacy in logistics.

Differentiation & extensions

• Beginners: Use Postman or no-code tools to simulate requests; visual mapping via Google Sheets + add-ons.
• Intermediate: Add JWT-based login, persistent in-memory storage, or small database (SQLite).
• Advanced: Integrate a map (Leaflet + OpenStreetMap) and animate route replay; implement a basic dispatch algorithm that picks nearest carrier.
• Industry tie-in: Research project—compare your mock TMS to a real-world TMS integration such as the Aurora–McLeod example from late 2025.

Classroom-ready templates & checklists

Teacher checklist before class:

• Pre-configure a server template repo for students (Node or Python).
• Create a one-page API spec (endpoints, method, payload examples).
• Prepare demo keys and map API tokens (Leaflet needs none; Mapbox requires key).
• Plan group size (pairs work best: one backend, one frontend).

Assessment examples & sample student deliverables

Ask students to submit the following:

• A short demo video (3–5 min) of tendering, dispatching and tracking flow.
• README with API endpoints, sample requests and responses.
• Reflection paragraph: what worked, what broke, and an ethical implication learned.

Real-world context: connecting the lesson to logistics trends

Instructors should reference the late-2025 Aurora–McLeod rollout as a classroom case study: a real TMS used an API to tender and dispatch autonomous trucks, unlocking operational capacity without changing core workflows. That example illustrates the practical outcomes of the techniques students build in this project—APIs are the glue connecting fleets, carriers and management systems.

“The ability to tender autonomous loads through our existing dashboard has been a meaningful operational improvement,” said Rami Abdeljaber, Executive VP at Russell Transport, as companies tested early integrations in 2025.

Classroom discussion prompts (ethics & policy)

• Who benefits from automating tender and dispatch? Who might be harmed?
• What privacy issues arise from live-tracking drivers or vehicles?
• How should companies balance efficiency gains with worker safety?

Common pitfalls and teacher troubleshooting

• Cross-origin issues: make sure CORS is enabled on your mock server if front-end and server run on different origins.
• EventSource headers: browsers don’t support custom headers for EventSource—use query parameters for API keys during demos or proxy the stream.
• Network limits: school networks can block ports—use HTTPS hosting (Vercel/Render) or run everything locally on a single device.

Extensions for project-based assessment or competition

• Time-based challenge: Which group builds the most robust tender-dispatch-tracking flow in 3 sprints?
• Integrate AI: Use an LLM to generate optimized routing suggestions for dispatchers (ethical guardrails required).
• Data dashboards: Export mock dispatch logs to a CSV and make performance charts (delivery time, failed tenders).

Teacher resources & references (2024–2026 context)

• OpenAPI and AsyncAPI docs — teach API-first thinking.
• Browser EventSource and WebSocket MDN docs — for realtime examples.
• Recent industry example: Aurora + McLeod integration (late 2025) as classroom case study.
• Hosting options (2026): Vercel, Render, Railway; Replit for in-browser coding.

Actionable takeaways (use next class)

1. Download the starter repo and run the server template locally or on Replit.
2. Have students write one JSON example for a tender and one for a dispatch before coding.
3. Assign roles: backend developer, frontend developer, tester/documenter, presenter.
4. Reserve one session for ethics and industry context—use the Aurora–McLeod case as a real-world bridge.

Conclusion & call-to-action

APIs power the modern economy—teaching them through a mock TMS gives students tangible experience with request-response flows, authentication, and realtime tracking. This lesson is classroom-ready, adaptable, and directly tied to 2025–2026 industry developments. Use the provided templates to launch your students into building meaningful tech artifacts that belong on resumes and portfolios.

Try it now: download the starter kit, run the mock server, and run one end-to-end tender → dispatch → track demo in your next class. If you want a complete teacher pack with slides, rubrics, and hosted starter repos, visit gooclass.com/teachers to get the lesson kit and join our educator community for updates and 2026-ready resources.

Related Reading

• Best microSD Cards for Nintendo Switch 2: Performance, Price, and Compatibility
• Avoiding Ski Lift Lines: Best UK and Nearby Mountains for Quieter Winter Adventures
• Using ClickHouse for fast feature-flag analytics: Architecting observability at scale
• How to Host a Live-Streamed Celebration: Invitations, Tech Setup, and Keepsake Ideas
• How Media Consolidation Affects Ad Rates and Subscriber Strategies—A Guide for Marketers and Investors