Overview
This is an interactive insect observation report system designed for elementary school students, framed around a fourth-grader raising silkworms. It lets kids fill in a rearing journal online, draw by hand, upload photos, and plot growth curves — and finally reproduce the A4 layout of physical paper homework pixel-perfectly, turning the online learning record into printable homework ready to hand in.
Core experience: Online record and paper homework become one — complete the observation and analysis in the browser, then print A4 homework that matches the school’s format with a single click.
Key Features & Experience
- Rearing Prep & Ecology Notes: Guides kids through basic rearing info and records, in a playful tone, the insect’s adaptations, behaviors, and ecological reflections.
- Online Sketchpad + Photo Upload: An HTML5 Canvas drawing tool with brush size, a multi-color palette, eraser, and unlimited undo — or upload real photos directly.
- Growth Diary Timeline: A dynamic timeline showing the silkworm’s journey from egg, hatching, and molting/dormancy through the larval stage, with free add/edit/delete of daily entries.
- Growth Curve Analysis: Integrates Chart.js to auto-plot a growth trend curve from body length and rearing days, fostering scientific data-analysis thinking.
- Pixel-Perfect A4 Print Engine: A built-in
@media printstyle with BiauKai (標楷體) rendering, seamless continuous layout, and images snapping to grid lines — output that meets school homework specs. - Autosave & Dual-Write Backup: Edits back up to
localStoragein real time, and the backend database mirrors to a backup copy, eliminating data loss.
Tech Stack
Next.js · React · TypeScript · Chart.js
Status
✅ Completed - A fully working app built on Next.js (App Router) with a server-side JSON database, run locally.