Cryptography Learning Application

A full-stack cryptography learning app built with Node.js, Express, React, Vite, and Tailwind CSS.

It is designed as an interactive lab where users can explore:

• classical ciphers
• transposition ciphers
• modern encryption algorithms
• password hashing algorithms
• security comparisons
• learning-focused explanations and visualizations

The application helps beginners understand the difference between encryption and hashing, why classical ciphers are insecure today, and why modern algorithms like AES, ChaCha20, bcrypt, scrypt, and Argon2 are used in real systems.

🚀 Quick Start

# Install dependencies
npm install

# Run locally (frontend + backend)
npm run dev

# Frontend: http://localhost:5173
# Backend API: http://localhost:3001

Or try the live demo:

Live URL

🔗 Live Demo: https://password-hash-generator-psi.vercel.app

Requirements

• Node.js: v16 or higher
• npm: v7 or higher
• Browser: Modern browser with ES6+ support (Chrome, Firefox, Safari, Edge)

Tech Stack

• Frontend: React 19, Vite, Tailwind CSS
• Backend: Node.js, Express
• Crypto / Hashing: Node crypto, bcryptjs, argon2
• Tooling: ESLint, concurrently

Main Features

1. Interactive crypto workspace

• Select an algorithm from grouped categories
• Enter plaintext, ciphertext, or password input
• Provide keys, keywords, salts, rounds, or other required settings
• Run Encrypt, Decrypt, Hash, or Verify
• Export the current result as JSON

2. Classical cipher learning

Implemented classical substitution ciphers:

• Caesar Cipher
• Monoalphabetic Cipher
• Vigenere Cipher
• Playfair Cipher
• Homophonic Substitution
• Polygram Substitution
• Fractionated Morse Cipher

3. Transposition cipher learning

Implemented transposition ciphers:

• Rail Fence Cipher
• Columnar Transposition Cipher

4. Modern cipher demonstrations

Implemented modern and modern-style algorithms:

• AES-256-CBC
• DES-family demo using a compatible legacy mode
• ChaCha20-Poly1305
• RSA public/private key encryption
• Block cipher demo
• Stream cipher demo

5. Hashing and password security

Implemented password and digest algorithms:

• SHA-256
• bcrypt
• scrypt
• Argon2

Supported hashing features:

• hash a password or text input
• verify a password against a stored hash
• demonstrate salting
• measure execution time

6. Education and comparison panel

For each algorithm, the app explains:

• type of algorithm
• whether it is reversible
• security level
• speed vs security tradeoff
• real-world use cases

7. Visualization and attack learning

• step-by-step output for supported algorithms
• frequency analysis for weak ciphers
• Caesar brute-force simulation
• block vs stream learning view

8. UI improvements

• Tailwind-based responsive interface
• simplified workflow-oriented layout
• dark mode toggle
• modular React component structure

Why This Application Is Useful

This project is useful for:

• cybersecurity students
• beginners learning cryptography
• classroom demos
• portfolio projects
• understanding secure password storage

It shows:

• encryption vs hashing
• classical vs modern cryptography
• reversible vs one-way algorithms
• why weak ciphers fail under modern analysis
• why secure password hashing must be slow and salted

Project Structure

.
├── api/                                 # Vercel serverless functions
│   ├── algorithms.js                    # GET /api/algorithms
│   └── process.js                       # POST /api/process
├── server/                              # Local development server
│   ├── index.js
│   └── services/
│       ├── analysis.js
│       ├── classicalCiphers.js
│       ├── cryptoEngine.js
│       ├── hashing.js
│       └── modernCrypto.js
├── shared/
│   └── algorithmCatalog.js
├── src/                                 # React frontend
│   ├── components/
│   │   ├── ActionToolbar.jsx
│   │   ├── AlgorithmSelector.jsx
│   │   ├── EducationPanel.jsx
│   │   ├── FrequencyPanel.jsx
│   │   ├── Header.jsx
│   │   ├── InputPanel.jsx
│   │   ├── ResultPanel.jsx
│   │   └── VisualizationPanel.jsx
│   ├── hooks/
│   │   └── useCryptoWorkbench.js
│   ├── services/
│   │   └── api.js
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── vercel.json                          # Vercel configuration
├── vite.config.js
├── package.json
├── README.md
└── VERCEL_DEPLOYMENT.md                # Deployment guide

How It Works

Frontend

The frontend is a React application that:

• loads the algorithm catalog
• lets the user select an algorithm
• collects input and configuration values
• sends requests to the backend API
• displays results, explanations, timing, and learning panels

Backend

The backend is an Express API that:

• serves the algorithm catalog
• processes encryption, decryption, hashing, and verification requests
• measures execution time
• returns educational metadata, analysis, and algorithm-specific details

API Endpoints

GET /api/algorithms

Returns the algorithm catalog used by the UI.

Response:

{
  "algorithms": [
    {
      "id": "aes",
      "name": "AES-256-CBC",
      "section": "Modern Encryption",
      "category": "Symmetric",
      "type": "Cipher",
      "reversible": true,
      "securityLevel": "High",
      "description": "Advanced Encryption Standard with 256-bit key and CBC mode...",
      "actions": ["encrypt", "decrypt"],
      "inputKind": "text",
      "options": [...],
      ...
    }
  ]
}

POST /api/process

Processes one crypto operation (encrypt, decrypt, hash, verify).

Request:

{
  "algorithmId": "aes",
  "action": "encrypt",
  "input": "Hello world",
  "options": {
    "secretKey": "my-secret-key"
  },
  "compareAgainst": ""
}

Response (Example for AES encryption):

{
  "result": "U2FsdGVkX1...",
  "explanation": "AES-256-CBC encrypts the plaintext using the provided key...",
  "elapsedMs": 2.345,
  "bruteForce": [],
  "frequencyAnalysis": {...}
}

GET /api/health (Local only)

Health check endpoint (for local development).

Response:

{
  "ok": true
}

## Local Development

### 1. Install dependencies

```bash
npm install

2. Start the full app

npm run dev

This runs:

• the Express backend on http://localhost:3001
• the Vite frontend on its local development port

3. Run only the backend

npm run server

4. Build the frontend

npm run build

5. Lint the project

npm run lint

Educational Notes

Encryption

Encryption is reversible when you have the correct key.

Examples:

• Caesar
• Vigenere
• AES
• RSA

Hashing

Hashing is one-way and is mainly used for verification, especially password storage.

Examples:

• SHA-256
• bcrypt
• scrypt
• Argon2

Classical ciphers

Classical ciphers are useful for learning logic and history, but they are not secure for modern use.

Modern algorithms

Modern algorithms are built to resist current attacks and should be used in real applications.

Notes About Security

• Classical ciphers in this app are for education only.
• The DES entry is included as a legacy comparison demo.
• SHA-256 is shown for hashing education, but password storage should prefer bcrypt, scrypt, or Argon2.
• Real production systems require secure key management, proper randomness, authenticated encryption, and careful deployment practices.

Deployment

This application is deployed on Vercel and automatically deploys from the main branch on GitHub.

Deploy Your Own Copy

1. Fork this repository on GitHub
2. Connect to Vercel: Go to vercel.com, sign in, and create a new project from your fork
3. Vercel will automatically:
   • Build the React frontend with Vite
   • Create serverless API functions from the api/ folder
   • Deploy both together to your own domain

For detailed deployment instructions, see VERCEL_DEPLOYMENT.md.

Troubleshooting

Local development issues

Problem: "Port 3001 already in use"

# Find and kill the process
lsof -ti:3001 | xargs kill -9

Problem: API requests failing locally

• Ensure npm run dev is running (starts both frontend and backend)
• Check that backend is on http://localhost:3001
• Clear browser cache

Deployment issues

Problem: 404 errors for /api/algorithms or /api/process on Vercel

• Ensure the api/ folder is committed and pushed to Git
• Check Vercel deployment logs for build errors
• Verify vercel.json is in the root directory

Future Improvements

• add algorithm search and filtering
• add more guided examples for each algorithm
• expand ECC (Elliptic Curve Cryptography) support
• add downloadable reports or operation history tracking
• add unit tests and integration tests
• add internationalization (i18n) support
• add keyboard shortcuts for power users

Verification

The project has been verified with:

• npm run lint — ESLint code quality checks
• npm run build — Vite production build
• Deployed on Vercel serverless platform

License

This project is open source and available for educational purposes.