Selected projects Privacy-focused PWA / Secure Messaging

Encrypted one-time messages and a 1:1 room prototype

Owner-created product in Preview Owner-created product — Preview / private beta; independent audit pending 2026

BeSafe is a bilingual privacy-focused PWA for encrypted one-time messages and temporary 1:1 conversations. It combines client-side encryption, TTL, burn-after-reading, React, TypeScript, a Node.js API and MariaDB.

BeSafe Preview — PWA home with one-time messages, a password generator and a 1:1 room prototype

Role

Product designer and developer — from the client protocol and PWA through the API, ciphertext store, tests and separated environments.

Challenge

Share a secret or a short 1:1 exchange without giving the server plaintext. The public version had to separate what works on Preview from the Pro roadmap — without audit claims, anonymity claims, or presenting a finished messenger.

Solution

The React and TypeScript client encrypts in the browser. A separate Node.js/TypeScript (Fastify) API and MariaDB store ciphertext plus TTL, retrieval and room metadata. One-time messages run on the Preview API. The 1:1 room is an envelope prototype; live conversations are not yet a public product. Live Demo points at Preview.

Project overview

BeSafe is a bilingual React and TypeScript PWA designed for encrypted one-time messages and temporary two-participant conversations. Encryption is performed in the browser. The API and MariaDB storage receive ciphertext and the minimum metadata needed for expiration, one-time retrieval and room operation. The public demo is the Preview environment. No independent security audit has been completed.

Project context

The brief was a cautious privacy product: one-time secrets and a 1:1 room sketch, without presenting an audited E2EE messenger, Double Ratchet, or resistance to every compromise.

Process

A local generator and in-browser secret protocol came first, then a Preview API with ciphertext in MariaDB, separated Preview and Production, and an honest capability registry. WebSocket transport and Double Ratchet remain a planned technical stage.

Scope of work

  • React / TypeScript frontend with a PL/EN interface and an installable PWA.
  • Client-side encryption; the server does not receive message plaintext.
  • Node.js/TypeScript API with an origin allow-list and a diagnostics endpoint.
  • Persistent ciphertext storage in MariaDB on the Preview API.
  • Preview and Production kept apart; production is not the portfolio destination.

Functional scope

  • Encrypted one-time messages (Preview · working): complete link or phrase.
  • TTL and burn-after-reading (1 minute–7 days, 1–10 reads).
  • Local password and passphrase generator (Active) — browser-only.
  • Bilingual PL/EN interface and a responsive desktop, tablet and mobile layout.
  • Installable PWA with a service worker (shell and local generator).
  • Temporary 1:1 room as an envelope prototype — live conversations are not yet a public product.
  • QR transfer (Preview) for the generator and links; not identity verification.

Technologies used

  • React
  • TypeScript
  • PWA
  • Client-side encryption
  • Node.js
  • MariaDB
  • REST API
  • Fastify
  • PL/EN
  • TTL
  • Vitest

Development roadmap

The items below are not shipped in the current version.

  • HTTPS polling (Preview / flag; not a public messenger)
  • WebSocket / WSS
  • Authenticated session establishment
  • Double Ratchet
  • Forward secrecy
  • Post-compromise recovery
  • Safety numbers
  • Identity-verification QR
  • Encrypted ratchet-state storage
  • Independent security audit

Reliability

  • The Preview API stores ciphertext and the minimum TTL / retrieval / room metadata.
  • The Preview PWA host is separate from the Preview API origin.
  • TTL, read-count and plaintext-size limits are published in the capability registry.
  • Preview/Production storage does not fall back to in-memory automatically.

Security

  • Security architecture implemented and tested within the current project scope; independent audit pending.
  • Encryption in the browser; the server does not receive message plaintext, passwords, or decrypting keys.
  • CORS with an exact Origin allow-list; environment secrets stay off the frontend.
  • This is not an audited E2EE messenger and not a claim of anonymity.

Accessibility

  • Responsive interface on desktop, tablet and phone.
  • Bilingual PL/EN UI.
  • Motion preference in the BeSafe settings screen.

Testing

  • Vitest across the BeSafe monorepo packages.
  • Typecheck and lint in the BeSafe repository.
  • UTC build versioning inside the BeSafe application.

CI/CD and delivery

  • Git and GitHub (`hoody1333/besafe`) — the repository is still private.
  • Separated LOCAL, PREVIEW and PRODUCTION environments.
  • Public portfolio demo: https://preview.besafe.lukjohn.com/
  • BeSafe production is not a portfolio button without a separate owner order.

Verified outcomes

  • Working Preview: one-time messages with ciphertext in MariaDB.
  • Local password generator with no secret sent to the server.
  • Honest capability registry: Active, Preview · working, Planned, Unavailable.
  • PWA with a separate Preview API and Production as a distinct environment.

Current status

Owner-created product — Preview / private beta; independent audit pending

Preview: https://preview.besafe.lukjohn.com/

The public GitHub repository is forthcoming — the Source Code button will appear once it is published.

Welcome to my world! What can I do for you?