Verdant

A plant care dashboard demo: see at a glance which plants need water, mark them as watered, and add, edit, or remove plants on the shelf. Plants and settings persist in MongoDB behind a small Hono API.

Claude Code built it from a few prompts, to show how far that gets you. Watch the build.

Run it

pnpm install
pnpm db:up     # start MongoDB 8 in Docker
pnpm dev       # web app on :5173, API on :3001

Then open http://localhost:5173. The database is seeded with six plants on first start. pnpm db:down stops MongoDB; the data survives in a named Docker volume.

Configuration is optional — copy .env.example to .env to change the MongoDB URI or API port.

Other commands

pnpm build         # type-check and production build
pnpm test          # Playwright end-to-end tests (needs MongoDB up; builds and serves automatically)
pnpm lint          # ESLint
pnpm typecheck     # tsc only
pnpm format        # Prettier write
pnpm format:check  # Prettier check
pnpm preview       # serve the production build
pnpm dev:web       # just the Vite dev server
pnpm dev:server    # just the API server

Before the first pnpm test, install the browser once with npx playwright install chromium.

Screenshots

Calendar	Settings

What's inside

• React 19 + TypeScript on Vite
• A small Hono API server (server/) on Node with the official MongoDB driver — plants and settings live in MongoDB, seeded from shared/seed.ts when empty
• Types shared between client and server through shared/types.ts
• Vite proxies /api to the API server in both dev and preview
• Hand-drawn SVG botanical illustrations, one per species (src/components/PlantIllustration.tsx)
• Soil moisture rings drawn with SVG stroke offsets (src/components/MoistureRing.tsx)
• A native <dialog> shared by the add and edit plant forms
• A month calendar that derives watering, misting, and soil-check tasks from each plant's moisture and species (src/data/careSchedule.ts), with a day-details panel for checking tasks off
• Settings change the thirst threshold, card order, and reminder time across the app
• Playwright end-to-end tests in tests/, pinned to a fixed clock, running serially against a dedicated API instance and verdant-test database that resets before each spec