Educational AES Encryption App

I developed AES Encryption Educational Application, an interactive web-based learning tool designed to visualize and explain the Advanced Encryption Standard (AES) algorithm in Cipher Block Chaining (CBC) mode. The application focuses on cryptographic education by breaking down complex encryption processes into step-by-step visual representations, including SubBytes, ShiftRows, MixColumns, key expansion, and CBC chaining behavior.

Unlike typical encryption utilities, this project implements AES entirely from scratch without relying on external cryptography libraries. This design choice was intentional to support transparency and educational value, allowing users to observe how plaintext is transformed into ciphertext at each stage of the algorithm. The system also supports custom input for plaintext, encryption keys, and IV, enabling users to experiment with different scenarios and understand how changes affect the output.

My work covered the full frontend architecture, cryptographic logic implementation, and interactive visualization system. I also designed the modular structure separating AES core logic, CBC mode operations, and UI visualization components to ensure clarity, maintainability, and educational usability.

Tech Stack & Tools

• Frontend: ReactJS, TypeScript
• Styling: Tailwind CSS
• Build Tool: Vite
• Cryptography: Custom AES implementation (AES core, key expansion, CBC mode)
• Architecture: Modular separation of crypto engine and visualization layer
• Visualization: Step-by-step encryption/decryption flow, animated CBC chaining, AES transformation panels
• State Management: React hooks-based state handling
• Data Processing: Byte-level operations, hex/string conversions, block padding logic
• Development Practices: Component-based UI design, reusable crypto utilities, educational-focused UX