Pigpen Cipher Encoder
React Native app that encodes text into ancient cipher symbols
Client
Personal Project
Year
2020-01-14
Agency
Personal Project
Role
MobileLab
Tech
React NativeExpoMobileJavaScriptSVGCryptography



A React Native/Expo mobile application that encodes text into the Pigpen cipher, a geometric substitution cipher also known as the Freemasonโs cipher.
๐ฑ Features
- Text Encoding: Convert any text into Pigpen cipher symbols
- Visual Display: Beautiful SVG-based cipher symbols
- Cross-platform: Runs on iOS, Android, and Web
- Real-time Conversion: See your text transform into cipher symbols instantly
๐ค About Pigpen Cipher
The Pigpen cipher is a substitution cipher that replaces letters with symbols. Each letter is represented by a portion of a grid or crosses, creating a unique visual encoding system. This cipher was historically used by Freemasons and other secret societies.
๐ ๏ธ Technology Stack
- React Native: Cross-platform mobile development
- Expo SDK 36: Development platform and tools
- React Navigation: Navigation library
- React Native SVG: Vector graphics rendering
- Jest: Testing framework
๐ Key Challenges Solved
- SVG Rendering: Implemented custom SVG components for cipher symbols
- Real-time Encoding: Built efficient text-to-symbol conversion algorithm
- Cross-platform Compatibility: Ensured consistent experience across iOS, Android, and Web
- Legacy Node.js Support: Configured scripts with OpenSSL legacy provider for compatibility
๐ฑ Project Structure
โโโ App.js # Main app component
โโโ components/ # Reusable React components
โโโ navigation/ # Navigation configuration
โโโ screens/ # Screen components
โโโ HomeScreen.js # Main cipher encoding screen
โโโ arry_svg.js # SVG cipher symbol definitions
๐ Related Content
Read more about the development process in my blog post: Getting Started with React Native
Transform your messages into ancient symbols with the Pigpen Cipher! ๐


