Full-Stack Web AppOpen Source2025

Gabay Keeper

A private digital archive for Somali oral poetry with OCR and visual export.

Sole Developer & Designer Timeline: 2025

Created a private digital archive for Somali oral poetry with OCR and visual export tools.

100%

OCR in-browser

Printed text is processed locally by Tesseract.js.

1:1

document ownership

Each archive document is scoped to its authenticated owner.

preservation paths

Metadata entry, OCR capture, and visual card export.

01 / Project evidence

Project visual and links

Original architecture illustration showing a Somali poem moving from OCR review into a private archive and export. — Original illustration
Gabay Keeper workflow illustration
An original architecture illustration of local OCR, reader review, private archive storage, and export; it is not a product screenshot.

02 / System design

Architecture diagram

A client-led archive uses Firebase as the identity and document layer while OCR and card generation stay inside the user’s browser.

Sign-in and private archive

Firebase Authentication establishes identity, and Firestore rules scope archive records to that identity.

STEP 01

React archive UI

Reader

Uses search, genre filters, footnotes, and reading views.

STEP 02

Firebase Authentication

Identity

Provides the signed-in user identity.

STEP 03

Firestore Security Rules

Authorization

Checks ownership before a document read or write.

User identity → data authorization

STEP 04

Cloud Firestore

Archive records

Stores structured poem metadata and user-owned documents.

Printed page → local OCR → archive entry

OCR runs in the browser; the visitor can review the extracted text before choosing what to save.

STEP 01

User-selected image

Printed page

The visitor chooses a page image in the browser.

STEP 02

Tesseract.js

Text recognition

Processes the image locally in the browser.

Local processing; no OCR upload

STEP 03

Archive form

Review

The reader checks and edits the recognized text and metadata.

STEP 04

Firestore + ownership rules

Save

Stores the entry only after an authenticated user action.

Archive record → shareable card

Card rendering is performed in the client and exported as a local image.

STEP 01

Archive UI

Selected record

The reader chooses a poem card to prepare.

STEP 02

html-to-image

Card rendering

Converts the card markup into an image in the browser.

STEP 03

PNG download/share

Export

Creates a shareable image without a separate image server.

Arrows show the main request or data handoff. Boundary labels mark local-only processing, browser-to-server transitions, or external services.

03 / Engineering decisions

Choices and trade-offs

Decision 01

Run OCR on the device

Choice: Use Tesseract.js in the browser so source page images are not sent to an OCR service.

Trade-off: The privacy boundary is smaller, while OCR speed and accuracy depend on the visitor’s device and source image.

Decision 02

Enforce ownership in Firestore rules

Choice: Apply per-user document checks at the data layer rather than relying only on hidden UI controls.

Trade-off: Each data path must keep the rules aligned with the document model and sign-in state.

Evidence

Evidence snapshot

Sanitized privacy review for the archive workflow. Personal poems, account identifiers, and OCR output are excluded.

Document ownershipPer-user rule enforcedIMPLEMENTED

OCR processingBrowser-sideIMPLEMENTED

Export pathGenerated locallyDOCUMENTED

Backend serverNot requiredDOCUMENTED

DATA CLASS: user-owned cultural archive
CONTROL: Firestore ownership rules
REDACTION: poem text, account IDs, and image payloads removed

The diagram separates local OCR from authenticated Firestore storage. “Local processing” applies to OCR and card rendering; saved archive records are stored in Firestore.

05 / Verification

Verification methodology

Define the ownership model

Started with the rule that a signed-in user can read and write only their own archive documents.

Test privacy-sensitive flows

Exercised sign-in, record creation, filtering, OCR import, footnotes, and export with empty and malformed inputs.

Validate the client boundary

Reviewed network assumptions, Firestore rules, offline UI states, and long-form reading behavior across screen sizes.

06 / Ownership

What I personally contributed

This section separates my direct contribution from broader project outcomes.

Sole developer and designer from information architecture through implementation.
Designed the privacy model and wrote the Firebase Security Rules.
Built the archive, filters, footnotes, OCR flow, and visual export pipeline.
Made the reading experience responsive, accessible, and optimized for dark mode.

View source More projects