Hardware components | ||||||
| × | 1 | ||||
Software apps and online services | ||||||
 |
| |||||
What is your project about? It's a teaching tool for our Web Design and Development students — a pocket-sized web server that makes the client/server relationship something you can actually hold.
I'm setting up the Cardputer Adv to serve real websites over WiFi. Students connect to it, load a page, and suddenly there is a connection to the physical object sitting on the desk in front of them. The cloud isn't magic. It's just a bunch of computers, and this is one of them. Same web dev they already do, layers are exposed instead of hidden behind a hosting provider.
From there we get to poke at the stuff that's usually invisible:
- Offline-first behavior — using service workers so the site keeps working when the connection drops, then syncs back up when things recover
- How deep the stack actually goes: the site is HTML/CSS/JS interpreted in the browser, being served by C++ compiled down to run on an ESP32-S3
- Watching GET and POST requests fly back and forth in real time
Why did you decide to make it?Every quarter, I watch the same lightbulb moments, and they're always about how physical the Internet is.
Students are genuinely surprised that actual cables run along the ocean floor connecting continents. That "the cloud" isn't a place or a thing — it's warehouses full of machines someone has to maintain. That the phone in their pocket is fully capable of serving websites to the entire world, right now.
The same gap shows up in code. The document.querySelector JavaScript code is eventually handed to a C++ method on a real C++ object (via the browser enging). There's a whole compiled world underneath the language they think they're writing in. The Cardputer shows how Arduino, which is C++, can trace the entire path from a button click in a browser all the way down to the code running on the chip.
How does it work?The Cardputer makes its own Wi-Fi network called Cardputer-ADV. You join it from a browser client, open http://192.168.4.1, and a web page loads — served by the device itself.
Access Point: On boot, the sketch tries to join a home Wi-Fi network. There's no SSID filled in, so it skips that and creates its own network instead. No router involved.
Listens on Port 80: The page's HTML lives inside the firmware, in flash memory. When a browser asks for /, the Cardputer hands it over. Two other addresses do the interesting work: /api/status returns live numbers as JSON uptime, battery, free memory, how many requests it's answered, and tilt from the motion sensors.
Page keeps asking: JavaScript in the browser hits /api/status once a second and updates the numbers on screen. Type into the text box, and the request goes out to /api/say — so words typed in a browser show up on the Cardputer screen.
AI ToolingI have not written C++ code since college, Claude Code was able to help resolve compile errors and help make use of the following resources.
- Cardputer Arduino Program Compilation & Upload
- Cardputer microSD Card
- Cardputer Keyboard
- Cardputer Display
- Cardputer-Adv IMU 6-Axis Motion Sensor
- Cardputer-Adv product page
- M5Cardputer library, Arduino Library Registry
Comments