<h1>Building My Own Enigma Machine Simulator</h1>
<h2>0. TL;DR</h2>
I built a full-stack Enigma machine simulator inspired by the historic WWII encryption device.
<ul>
<li>Frontend: React, TypeScript, Tailwind CSS, Jest</li>
<li>Backend: Express.js (TypeScript), MongoDB, Mongoose</li>
<li>Features symmetric encryption/decryption, custom machine generation via seed + email, and an interactive UI with rotor and plugboard simulation.</li>
<li>Learned a lot about dynamic rendering, SVG manipulation, and state management.</li>
<li><a href="https://github.com/MOHD-SHAMOON-04/EnigmaMach" target="_blank" rel="noopener nofollow">GitHub Repo</a> | <a href="https://enigma-shamoon-04.netlify.app/" target="_blank" rel="noopener nofollow">Live Demo</a></li>
</ul>
<hr>
<h2>1. Introduction</h2>
Enigma: a person, thing, or situation that is difficult to understand - and that’s exactly what we’re going to discuss.
Over the past few days, I have been working on a project that’s both a tribute to history and a fun technical challenge - an Enigma machine simulator.
As someone fascinated by history, I’ve always admired how, long before computers existed, people engineered incredibly sophisticated cryptographic systems using nothing more than electricity and precision mechanical parts. The Enigma machine is one of the most iconic examples.
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Enigma_%28crittografia%29_-_Museo_scienza_e_tecnologia_Milano.jpg/800px-Enigma_%28crittografia%29_-_Museo_scienza_e_tecnologia_Milano.jpg" alt="Military Model Enigma I encryption machine, used from 1930, on display at Museo della Scienza e della Tecnologia &quot;Leonardo da Vinci&quot; - Photo by Alessandro Nassiri, CC BY-SA 4.0, https://commons.wikimedia.org/w/index.php?curid=47910919">
<hr>
<h2>2. Historical Context</h2>
The Enigma machine was an encryption device used by the Germans during World War II to secure military communications. It relied on a series of rotors, plugboard connections, and a reflector to scramble messages into seemingly unreadable text.
<img src="https://media.daily.dev/image/upload/s--T2Lyu_SL--/f_auto/v1755346165/ugc/content_f10d5c92-6e5b-4429-abb8-21ecd637817f?_a=BAMClqZW0" alt="Diagram showing the scrambling process of Enigma’s rotors - Illustration by MesserWoland, based on original work by Matt Crypto, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=1794494">
Breaking Enigma was a monumental task that required not only brilliant minds but also ingenuity in engineering. Alan Turing and his team at Bletchley Park, building on the earlier work of Polish cryptographers and their invention of the bomba machine, ultimately cracked the code a breakthrough that significantly shortened the war.
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Wartime_picture_of_a_Bletchley_Park_Bombe.jpg/800px-Wartime_picture_of_a_Bletchley_Park_Bombe.jpg" alt="Black-and-white wartime photograph of a Bletchley Park Bombe decryption machine in operation - Public Domain, https://commons.wikimedia.org/w/index.php?curid=72819587">
<hr>
<h2>3. Project Motivation</h2>
I’ve always been amazed by the mix of engineering, mathematics, and human determination that went into the Enigma story. So, I decided to recreate the machine in code, both as a way to deepen my programming skills and to better appreciate the cryptographic principles behind it.
<hr>
<h2>4. The Algorithm</h2>
One of the most elegant aspects of the Enigma is that it uses symmetric encryption - meaning the same process is used for both encryption and decryption.
Example: If you type <code>A</code> with rotor settings <code>[7:3:6]</code> and the machine outputs <code>H</code>, then simply resetting the machine to <code>[7:3:6]</code> and typing <code>H</code> will give you back <code>A</code>.
<h3>4.1 The Rotors, Reflector &amp; Basic Flow</h3>
The rotors are the real stars of the show - they scramble your input letters using internal wiring.
Here’s the journey of a character:
Forward Pass
<ol>
<li>The typed letter enters Rotor I, where it’s mapped to a new letter (let’s call it <code>char°</code>).</li>
<li>This <code>char°</code> then enters Rotor II, producing <code>char°°</code>.</li>
<li>Then through Rotor III, resulting in <code>char°°°</code>.</li>
</ol>
The Reflector
The reflector takes this <code>char°°°</code> and maps it to another letter <code>REF(char°°°)</code>. This mapping is also one-to-one, meaning no letter ever maps to itself here.
Backward Pass
<code>REF(char°°°)</code> now travels back through the rotors in reverse order - but this time the mapping is reversed. After passing through all three rotors again, we get <code>REF(char°°°)°°°</code> - the raw encrypted output.
At this stage, the machine is symmetric but not secure by modern cryptographic standards.
With only three rotors, there are <code>26 × 26 × 26 = 17,576</code> starting positions. That’s a joke by today’s brute-force standards - you could crack it in milliseconds with a modern computer.
<h3>4.2 The Plugboard - Supercharging the Encryption</h3>
The plugboard sits between the keyboard and Rotor I.
<ul>
<li>When you type a letter, it first goes through the plugboard and may be swapped with another letter.</li>
<li>After the backward pass through the rotors, the letter passes through the plugboard again before appearing on the lampboard.</li>
</ul>
This simple addition skyrockets the number of possible configurations:
<ol>
<li>Plugboard swaps: In the real Enigma, you could connect up to 10 letter pairs, giving <code>(26!) / (6! x 10! x 2^10) ≈ 150,738,274,937,250</code> possible wirings.</li>
<li>Rotor positions: <code>17,576</code> possible starting points.</li>
<li>Rotor choice: If you allowed 3 rotors out of 5, there are <code>60</code> possible selections.</li>
</ol>
Total possible configurations: <code>17,576 x 150,738,274,937,250 x 60</code>
Which equals: 158,962,555,217,826,360,000 combinations - enough to keep early 20th-century cryptanalysts up at night. But with today’s computing power, this is still solvable - though orders of magnitude harder than without the plugboard.
<hr>
<h2>5. Tech Stack &amp; Implementation</h2>
I built the simulator using the following technologies:
<h3>Frontend:</h3>
<ul>
<li>React - to structure and render the UI.</li>
<li>TypeScript - for type safety and clarity in the core encryption logic.</li>
<li>Jest - to test the core <code>EnigmaEnigne</code>.</li>
<li>Tailwind CSS - to style components quickly and cleanly.</li>
</ul>
<h3>Backend:</h3>
<ul>
<li>Express.js with TypeScript - to handle API requests and business logic.</li>
<li>Mongoose - as the ODM for working with MongoDB.</li>
<li>MongoDB - to store user configurations and generated machine data.</li>
</ul>
The simulator includes both encryption and decryption logic (since Enigma is symmetric, the same configuration can reverse the encryption).
A standout feature I added is custom machine generation. Users can generate their own personalized machine by providing a seed and email. The app uses these inputs to create a unique configuration, which can be sent directly to them via an email.
<img src="https://media.daily.dev/image/upload/s--F-Bz68CR--/f_auto/v1755256262/ugc/content_bc14925e-8c0e-44cc-95a2-dc1bf6a26faa?_a=BAMClqZW0" alt="Screenshot of the Enigma machine simulator UI, showing rotor configuration and plugboard interface">
<hr>
<h2>6. Challenges &amp; Learnings</h2>
The most difficult part for me was UI design. It’s not my strongest area, and I tried to avoid relying on AI tools as much as possible though I did use them in a few spots.
This project also helped me:
<ul>
<li>Refresh my React and Tailwind CSS knowledge.</li>
<li>Learn new techniques for dynamic rendering (like overlapping SVGs for the plugboard).</li>
<li>Improve my state management skills.</li>
</ul>
On the backend side, everything went smoothly from database integration to deployment.
<img src="https://media.daily.dev/image/upload/s--h6gROwFx--/f_auto/v1755256268/ugc/content_d8aa5c10-d90c-46cb-9596-120e197efc97?_a=BAMClqZW0" alt="Initial plugboard layout with no scrambling applied">
<img src="https://media.daily.dev/image/upload/s---40K1vJK--/f_auto/v1755256279/ugc/content_b7eb9528-f42d-43c1-b672-d3ee2e32479c?_a=BAMClqZW0" alt="Plugboard layout after scrambling applied, showing altered connections">
<hr>
<h2>7. Results</h2>
The final simulator lets users experience the process of encrypting and decrypting messages just like an original Enigma machine would (minus the physical clicking of rotors, unfortunately).
The UI visually represents the machine’s key components, making it more than just functional it’s also Educational.
<img src="https://media.daily.dev/image/upload/s--WQm1t36k--/f_auto/v1755256273/ugc/content_8ff32693-eb62-45d1-86fe-7afd79c669ed?_a=BAMClqZW0" alt="Encrypted message output generated by the Enigma machine simulator">
<hr>
<h2>8. How to Use</h2>
<ul>
<li>Try the live demo to experience encryption in real time.</li>
<li>Enter your message, adjust machine settings, and see the encrypted output.</li>
<li>Use the same settings to decrypt and retrieve the original text.</li>
</ul>
<img src="https://media.daily.dev/image/upload/s--W5shGabk--/f_auto/v1755256285/ugc/content_a2404341-9d80-476c-a21c-7ddb92f29059?_a=BAMClqZW0" alt="Step-by-step usage guide for the Enigma machine simulator">
<hr>
<h2>9. Links</h2>
<ul>
<li>GitHub Repo: <a href="https://github.com/MOHD-SHAMOON-04/EnigmaMach" target="_blank" rel="noopener nofollow">MOHD-SHAMOON-04/EnigmaMach</a> (Code)</li>
<li>Live Demo: <a href="https://enigma-shamoon-04.netlify.app/" target="_blank" rel="noopener nofollow">enigma-shamoon-04</a> (Web App)</li>
<li>Further Reading and Resources:
<ul>
<li><a href="https://www.youtube.com/watch?v=G2_Q9FoD-oQ" target="_blank" rel="noopener nofollow">Enigma Machine - Numberphile</a> (Video)</li>
<li><a href="https://brilliant.org/wiki/enigma-machine/" target="_blank" rel="noopener nofollow">Brilliant.org: Enigma Machine</a> (History)</li>
<li><a href="https://en.wikipedia.org/wiki/Enigma_machine" target="_blank" rel="noopener nofollow">Wikipedia.org: Enigma Machine</a> (Reference)</li>
</ul>
</li>
</ul>
<hr>
<h2>10. Future Improvements</h2>
Some ideas I’m considering for future updates:
<ul>
<li>Saving &amp; sharing configurations Allow users to export an encrypted message as a link.</li>
<li>A visual animation of the encryption process explained in (<a href="#4-the-algorithm" target="_blank" rel="noopener nofollow">4. The algorithm</a>) in real time</li>
</ul>
<hr>
If you enjoy cryptography, history, or just love challenging programming projects, I hope you’ll check out the simulator and maybe even spin up your own custom Enigma.
<hr>
#cryptography #history-of-computing #enigma-machine #alan-turing #typescript #react #tailwindcss #expressjs #mongodb #javascript #cybersecurity #project-showcase #opensource

Mohd Shamoon

A developer built a full-stack Enigma machine simulator using React, TypeScript, and Express.js with MongoDB. The project recreates the historic WWII encryption device with features like symmetric encryption/decryption, custom machine generation via seed and email, and an interactive UI with rotor and plugboard simulation. The implementation includes both frontend visualization and backend API handling, demonstrating cryptographic principles while serving as an educational tool.

Building My Own Enigma Machine Simulator

Great project simulating something from real world which had a great impact on history.
It’s just crazy how people at those times developed such intricate methods and then others developed ways to crack them.

Thats brilliant! I specially like the part where we can use our own seed to create a new machine, very well done.

Fascinating work, and looks great! a tip since you said you struggle with design, check out design theory (not tech related but design in itself). There is usually an overlap between the two especially for color theory typography and other items!