# Classical Cipher Tools A comprehensive, open-source educational web application for classical cryptography. Explore, encode, and decode messages using 22+ historical cipher implementations with interactive tools and detailed explanations. **Live Demo:** [caesarcipher.org](https://caesarcipher.org) ## Features - **22+ Cipher Implementations** - From beginner-friendly Caesar cipher to advanced matrix-based Hill cipher - **Interactive Encoder/Decoder** - Real-time encryption and decryption with instant feedback - **Educational Content** - Learn the history, mathematics, and techniques behind each cipher - **Responsive Design** - Works seamlessly on desktop, tablet, and mobile devices - **Modern UI** - Clean, accessible interface built with Tailwind CSS and Shadcn/ui - **SEO Optimized** - Structured data, meta tags, and sitemap for discoverability ## Supported Ciphers ### Beginner | Cipher | Description | |--------|-------------| | **Caesar** | Classic shift cipher used by Julius Caesar | | **Atbash** | Ancient Hebrew mirror substitution cipher | | **Pigpen** | Geometric symbol-based encryption system | | **Polybius** | Ancient coordinate-based cipher system | | **Keyword** | Substitution cipher using keyword-based alphabet | ### Historical | Cipher | Description | |--------|-------------| | **Vigen�re** | Renaissance polyalphabetic cipher using repeating keyword | | **Playfair** | Historic digraph encryption using 5�5 matrix | | **Beaufort** | Variant of Vigen�re with reciprocal property | | **Trithemius** | Progressive shift cipher with auto-incrementing key | | **Alberti** | First polyalphabetic cipher with rotating disks | | **Porta** | Giovanni Battista della Porta's 13-table encryption | ### Military | Cipher | Description | |--------|-------------| | **Four-Square** | Advanced digraph cipher with dual-key system | | **Running Key** | Polyalphabetic cipher using book-length keys | | **Vernam** | One-time pad cipher with perfect secrecy | | **Autokey** | Self-extending key using message text | | **Straddling Checkerboard** | Variable-length encoding cipher system | ### Visual & Mathematical | Cipher | Description | |--------|-------------| | **Baconian** | Francis Bacon's binary steganography method | | **Homophonic** | Frequency-balanced multiple-symbol encryption | | **Gronsfeld** | Numeric key polyalphabetic cipher | | **Affine** | Mathematical substitution using ax + b formula | | **Hill** | Matrix-based polygraphic encryption system | | **Quagmire** | Mixed alphabet polyalphabetic cipher system | ## Tech Stack - **Framework:** [Next.js 16](https://nextjs.org/) (App Router) - **Language:** [TypeScript](https://www.typescriptlang.org/) - **Styling:** [Tailwind CSS 4](https://tailwindcss.com/) - **UI Components:** [Shadcn/ui](https://ui.shadcn.com/) - **Icons:** [Lucide React](https://lucide.dev/) - **Internationalization:** [next-intl](https://next-intl-docs.vercel.app/) - **Content:** MDX with Shiki syntax highlighting - **Runtime:** React 19 ## Getting Started ### Prerequisites - Node.js 18+ - npm, pnpm, or yarn ### Installation 1. Clone the repository: ```bash git clone https://github.com/yourusername/caesar-cipher-org.git cd caesar-cipher-org ``` 2. Install dependencies: ```bash npm install ``` 3. Create environment file: ```bash cp .env.example .env.local ``` 4. Configure environment variables (see [Configuration](#configuration)) 5. Start the development server: ```bash npm run dev ``` 6. Open [http://localhost:3000](http://localhost:3000) in your browser. ### Build for Production ```bash npm run build npm run start ``` The production server runs on port 3008 by default. ## Configuration Create a `.env.local` file with the following variables: ```env # Website Configuration (Required) NEXT_PUBLIC_NAME='Caesar Cipher' NEXT_PUBLIC_EMAIL=contact@example.com NEXT_PUBLIC_HOST=https://example.com # CDN Configuration (Optional) NEXT_PUBLIC_CDN=https://cdn.example.com NEXT_PUBLIC_CDN_HOST=cdn.example.com # Cloudflare R2 Storage (Optional - for asset uploads) # R2_AK=your_r2_access_key # R2_SK=your_r2_secret_key # POST_R2_BUCKET_LOC=https://xxx.r2.cloudflarestorage.com/bucket-name ``` ## Project Structure ``` � app/ � � [locale]/ # Internationalized routes � � � ciphers/ # Individual cipher pages � � � � caesar/ # Caesar cipher (encoder, decoder, examples) � � � � vigenere/ # Vigen�re cipher � � � � ... # Other ciphers � � � learn/ # Educational content � � � page.tsx # Home page � � api/ # API routes � � menuConfig.ts # Navigation configuration � � sitemap.ts # Dynamic sitemap generation � components/ � � ciphers/ # Cipher-specific components � � � caesar/ � � � vigenere/ � � � ... � � ui/ # Shadcn/ui components � � Nav.tsx # Main navigation � config/ � � cipherTools.ts # Cipher tool navigation config � content/ � � ciphers/en/ # MDX educational content � messages/ � � en.json # Translation strings � utils/ � cipherIcons.ts # Icon mapping � mdxLoader.ts # MDX content loading ``` ## Adding a New Cipher 1. **Create the component** in `components/ciphers/[cipher-name]/`: ```tsx 'use client'; export default function CipherNameCipher() { // Implement encryption/decryption logic // Include: input, output, mode toggle, copy button } ``` 2. **Add route pages** in `app/[locale]/ciphers/[cipher-name]/`: - `page.tsx` - Main encoder page - `decoder/page.tsx` - Decoder page - `examples/page.tsx` - Examples page 3. **Register the cipher**: - Add to `implementedCiphers` array in `app/menuConfig.ts` - Add menu entry to appropriate category - Add icon mapping in `utils/cipherIcons.ts` - Add translations in `messages/en.json` - Add tool config in `config/cipherTools.ts` 4. **Verify integration**: - Cipher appears in navigation menu - All sub-pages are accessible - Responsive design works correctly - Run `npm run lint` to check for errors ## Scripts | Command | Description | |---------|-------------| | `npm run dev` | Start development server with Turbopack | | `npm run build` | Build for production | | `npm run start` | Start production server (port 3008) | | `npm run lint` | Run ESLint | ## Contributing Contributions are welcome! Here's how you can help: 1. **Fork** the repository 2. **Create** a feature branch (`git checkout -b feature/new-cipher`) 3. **Commit** your changes (`git commit -m 'Add new cipher implementation'`) 4. **Push** to the branch (`git push origin feature/new-cipher`) 5. **Open** a Pull Request ### Guidelines - Follow the existing code style and patterns - Add tests for new cipher implementations - Update documentation as needed - Use English for all code comments and documentation - Use Lucide icons (no emojis in code/UI) ## License This project is open source and available under the [MIT License](LICENSE). ## Acknowledgments - Inspired by the rich history of classical cryptography - Built with modern web technologies for accessibility and education - Thanks to all contributors who help improve this project --- **Visit [caesarcipher.org](https://caesarcipher.org) to try the live demo!**