Microbiology notebook

Build with Vlak
Collection notebookSeptember field records
Local collection
C-042 / S-204

Courtyard collection

Collection north · 04 Sep

Needs review
0 local notes
Plate 042

Source count: 12

Transcribed source record · illustrative positions

4 marker records supplied; 3 positioned

Coordinates are percentages, measured from the upper left. The dish center is 50, 50.

  1. x 28%, y 36%

    Round outline · source note

  2. x 62%, y 28%

    Irregular outline · source note

  3. x 56%, y 67%

    Small outline · source note

  4. Position not supplied

    Position was not recorded

No record selected

Source counts and supplied markers are separate records. Select a marker to add context; the source record stays intact.

Culture-level notebook
C-042 / Culture

Observation notebook

Selected source recordPlate 042

12 colonies recorded in the source.

Saved in this session. A note reopens the culture review.

Saved in this session

No local notes yet.

0/1200
C-042 · S-204Fictional records · session only

Choose a culture → inspect a colony → save a note or review

View source
About this download

A standalone Vite and React project using Vlak 0.5.0. Extract the ZIP, open its folder, then run npm install and npm run dev. Requires Node 22.12 or newer.

Cultures, samples and counts are fictional fixtures. Notes and reviews stay local. No laboratory system, image detection or culture recommendation service is connected.

Installation and base examples

Inside the interface

A sample-first laboratory notebook. The collection leads into a recorded plate, where supplied colony markers stay connected to their source records. A deeper inspector keeps notes and review decisions beside the selected culture.

All cultures, samples, and observations are fictional. Notes and reviews last for this browser session; no laboratory system is connected. Colony positions and recorded counts are supplied data, with no image detection or culture recommendations.

Watch the 20-second walkthrough

A short walkthrough of the working microbiology notebook study.

Components used

Use this as a starting point

Build with Vlak

Install the components, add the stylesheet, and bring your own content. The study’s source shows how the pieces fit together.

React componentsCSS includedMIT licensed

Download the Microbiology notebook starter

Install the package
npm install @noorddev/vlak-react
import "@noorddev/vlak-react/css";
Installation guide View study source

Start with your coding agent

A ready-to-use brief with this study, Vlak’s components, and the design guide.

Component modifications

  • Colony plate supplies its diagram, exact source counts, and keyboard-accessible record list. Selecting a marker opens the matching local notebook without changing the source count.
  • Culture log receives chronological source observations and locally saved notes. Input, Textarea, and Button compose the notebook form, while Toggle group switches plate and history views.
  • Card provides the collection summary inside a flush bordered workspace. The list and inspector are custom compositions using Vlak controls and local state.
  • Below a 640px specimen width, Cultures, Plate, and Notebook become separate screens. Choosing a culture opens its plate; a colony opens a focused notebook with a pinned Save note action. Back retains the selected record and returns focus to its opening control.