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
Portfolio Image
Portfolio Image
Portfolio Image

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! πŸ”