Teaching tools for creating clean, exportable diagrams. Built for primary school educators — no installation required for end users.
| Tool | Route | Description |
|---|---|---|
| Circuit Diagrams | /tools/circuits |
Symbol and object-style circuit diagrams with battery, bulb, switch, and electromagnet components. Export as PNG. |
| Isometric Cube Builder | /tools/isometric-cube |
Build 3D cube structures and auto-generate top, front, and side orthogonal views. Export as PNG. |
The circuit tool has two modes (toggle without losing your work):
- Symbol — standard schematic symbols for worksheets
- Object — realistic apparatus style for apparatus diagrams
Visit /metrics to see PNG export counts per tool, all-time and for the current month.
Metrics use an anonymous browser UUID (no login). Only PNG exports are counted.
npm installCreate .env.local:
DATABASE_URL=your_neon_connection_string
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX
npm run devOpen http://localhost:3000.
Run lib/schema.sql once against your NeonDB instance.
Option A — Neon dashboard:
- Go to console.neon.tech → SQL Editor
- Paste and run the contents of
lib/schema.sql
Option B — psql:
psql $DATABASE_URL -f lib/schema.sql- Push this repo to GitHub
- Import the project in vercel.com
- Add environment variables in Vercel project settings:
DATABASE_URL— from your Neon project dashboardNEXT_PUBLIC_GA_ID— your GA4 Measurement ID (format:G-XXXXXXXXXX)
- Deploy
The diagram tools live in public/tools/ as standalone HTML files. You can edit them directly — no React knowledge needed.
Two things in each file must not be removed:
<!-- In <head> — identifies the tool for metrics tracking -->
<meta name="tool-id" content="circuit-symbol" />
<!-- Before </body> — loads the tracking script -->
<script src="/tracker.js"></script>app/
page.tsx # Index — links to all tools
tools/
circuits/page.tsx # Combined circuit view (symbol + object tabs)
isometric-cube/page.tsx # Isometric cube wrapper
metrics/page.tsx # Metrics dashboard
api/event/route.ts # POST endpoint — records PNG exports
layout.tsx # Root layout with GA4
lib/
db.ts # NeonDB connection (lazy)
schema.sql # Run once to create DB tables
public/
tools/ # HTML tool files (edit freely)
tracker.js # Shared tracking script
_archive/
circuit-diagram-suite.html # Retired — superseded by combined view
- Next.js 14 — framework
- Vercel — hosting
- NeonDB — Postgres for metrics
- Tailwind CSS — styling
- Google Analytics 4 — traffic analytics