binary-encryption-explorer

2026

Interactive binary, encryption & public-key crypto playground

TypeScriptReactViteCSS

About this project

Cryptography is usually taught with dense notation and static diagrams. binary-encryption-explorer takes the opposite approach: it turns the whole pipeline into something you can poke at. Type a message and watch it decompose into its character codes, flip into binary, and then flow through an encryption engine — each stage rendered as an animated card so the abstract becomes tangible. It's the tool I wish I'd had when the concepts first clicked.

Under the hood it's a modern React + TypeScript app scaffolded with Vite. The crypto logic lives in a dedicated engine and a set of pure utility functions, cleanly separated from the presentation layer, while a component per concept (input, output, character breakdown, education panel) keeps the UI composable. It's small enough to read in one sitting, but structured the way a much larger app would be.

Highlights

Live, animated pipeline: text → character codes → binary → encrypted output.
Covers both symmetric encryption and public-key concepts in one interface.
Pure, testable crypto utilities kept separate from the React presentation layer.
Component-per-concept architecture — readable in a sitting, structured like production code.

Live preview

See the final result in action — then scroll down to read the code behind it.

datacore.app — binary & encryption explorer

Fully interactive — type a message, encode it to binary, generate a key pair, then Lock and Unlock it. Everything runs in your browser.

Browse the code

Open the explorer and click through the files — read-only.

Secure one-time payment via Stripe.

binary-encryption-explorer — Visual Studio Codeopen source

Explorer

binary-encryption-explorer (workspace)

binary-encryption-explorerREADME.md

1# DataCore — Binary Encryption Explorer
2
3An interactive educational tool that shows how every digital file — text, images, anything — is just a pattern of 0s and 1s. Encode data to binary, edit individual bits, encrypt with a simulated public/private key pair, and watch the data transform.
4
5Built with **React + TypeScript + Vite**.
6
7## Features
8
9- **Text ↔ Binary** — Each character maps to 8 bits (ASCII). Type, encode, edit any bit, decode.
10- **Image ↔ Binary** — Drop in an image; every pixel becomes RGBA bytes you can edit.
11- **Public/Private key encryption** — Generate a paired key, encrypt with PUB, decrypt with PRV.
12- **Round-trip safe cipher** — Encrypted output stays printable so you can copy it, refresh, paste it back, and recover the original.
13- **Live SHA-256 hash** — Updates as you type. Demonstrates how flipping one bit changes the entire fingerprint.
14- **Character breakdown** — Visualizes which 8-bit pattern represents each character.
15
16## How the encryption works
17
181. Type `APPLE` → Encode to binary
192. Click **Generate Key Pair** → get a matched `PUB-XXXX` and `PRV-XXXX`
203. Click **Lock Binary** with the public key — binary changes
214. Click **Decode** — see the encrypted text (e.g. `W2~<w`)
225. **Clear everything**, type that encrypted text back, Encode
236. Click **Unlock Binary** with the matching private key — binary changes back
247. Decode — `APPLE` returns
25
26## Run locally
27
28```bash
29npm install
30npm run dev
31```
32
33## Build for production
34
35```bash
36npm run build
37```
38
39Output goes to `dist/`.
40
41## Deploy
42
43This project is configured for any static host. To deploy on Vercel:
44
451. Push this repository to GitHub
462. Go to [vercel.com](https://vercel.com) → New Project → Import this repo
473. Vercel auto-detects Vite — no configuration needed
484. Click Deploy
49
50## Tech stack
51
52- React 18
53- TypeScript 5
54- Vite 6
55- Plain CSS (no framework, custom design system)
56
57## License
58
59MIT▍

main0 errors, 0 warnings

Ln 59, Col 1UTF-8MarkdownPrettier ✓

Read-only preview — you can browse but not edit. Grab the full codebase with the Download button above.

1# DataCore — Binary Encryption Explorer

3An interactive educational tool that shows how every digital file — text, images, anything — is just a pattern of 0s and 1s. Encode data to binary, edit individual bits, encrypt with a simulated public/private key pair, and watch the data transform.

5Built with **React + TypeScript + Vite**.

7## Features

9- **Text ↔ Binary** — Each character maps to 8 bits (ASCII). Type, encode, edit any bit, decode.

10- **Image ↔ Binary** — Drop in an image; every pixel becomes RGBA bytes you can edit.

11- **Public/Private key encryption** — Generate a paired key, encrypt with PUB, decrypt with PRV.

12- **Round-trip safe cipher** — Encrypted output stays printable so you can copy it, refresh, paste it back, and recover the original.

13- **Live SHA-256 hash** — Updates as you type. Demonstrates how flipping one bit changes the entire fingerprint.

14- **Character breakdown** — Visualizes which 8-bit pattern represents each character.

16## How the encryption works

181. Type `APPLE` → Encode to binary

192. Click **Generate Key Pair** → get a matched `PUB-XXXX` and `PRV-XXXX`

203. Click **Lock Binary** with the public key — binary changes

214. Click **Decode** — see the encrypted text (e.g. `W2~<w`)

225. **Clear everything**, type that encrypted text back, Encode

236. Click **Unlock Binary** with the matching private key — binary changes back

247. Decode — `APPLE` returns

26## Run locally

28```bash

29npm install

30npm run dev

31```

33## Build for production

35```bash

36npm run build

37```

39Output goes to `dist/`.

41## Deploy

43This project is configured for any static host. To deploy on Vercel:

451. Push this repository to GitHub

462. Go to [vercel.com](https://vercel.com) → New Project → Import this repo

473. Vercel auto-detects Vite — no configuration needed

484. Click Deploy

50## Tech stack

52- React 18

53- TypeScript 5

54- Vite 6

55- Plain CSS (no framework, custom design system)

57## License

59MIT▍