Project Portfolio

Insect Observation Report System

Status: Completed

A fully working app built on Next.js (App Router) with a server-side JSON database, run locally.

Timeline: Started: Released:
Tech: Next.js 16 React 19 TypeScript Chart.js HTML5 Canvas JSON File Storage
Links: GitHub

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 format the report as A4 paper homework, 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.
  • A4 Print Layout: A built-in @media print style 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 localStorage in real time, and the backend database mirrors to a backup copy, providing an additional copy for recovery.