CryptGame

CryptGame is a React-based classical cryptography app with two modes:

• CipherQuest Game Mode: a 15-level interactive cipher challenge.
• Cipher Utility Mode: a tool for encrypting and decrypting text with supported classical ciphers.

The app is deployed on Netlify:

https://cryptgame1.netlify.app

Features

CipherQuest Game Mode

• 15 progressive levels with increasing difficulty.
• Encrypt and decrypt challenges across multiple cipher types.
• Score calculation based on level, guesses remaining, hints used, and completion speed.
• Hints with score penalties.
• Progress saved in browser localStorage.
• Animated interface built with Framer Motion.

Cipher Utility Mode

Supported ciphers:

• Caesar Cipher
• Polybius Cipher
• Rail Fence Cipher
• Transposition Cipher
• Monoalphabetic Cipher
• Vigenere Cipher
• Playfair Cipher
• Hill Cipher
• Row/Column Transposition

Tech Stack

• Frontend: React, Create React App, Tailwind CSS, Framer Motion
• Local Backend: Node.js, Express
• Production API: Netlify Functions
• Deployment: Netlify

Deployment Architecture

The project originally used a React frontend with a local Express API at http://localhost:8000.

For Netlify deployment, the API has been adapted into Netlify Functions:

• POST /encrypt
• POST /decrypt

The deployed frontend calls these same-origin endpoints directly:

https://cryptgame1.netlify.app/encrypt
https://cryptgame1.netlify.app/decrypt

Local development still supports the Express backend through the React proxy configuration in frontend/package.json:

"proxy": "http://localhost:8000"

Recent Deployment Fixes

The Netlify deployment required a few changes:

• Added netlify.toml with the frontend build command, publish directory, and function settings.
• Added netlify/functions/cipher.mts to expose /encrypt and /decrypt as Netlify Functions.
• Updated frontend API calls to use same-origin paths instead of http://localhost:8000.
• Added a root package.json with a Netlify-compatible build script.
• Added .netlifyignore to keep deploy uploads clean.
• Fixed the rowColumnTransposition backend mapping bug caused by lowercase cipher normalization.
• Removed unused frontend variables/imports so the production build compiles cleanly.

Prerequisites

• Node.js 20 or newer recommended
• npm

Local Development

Run the backend in one terminal:

cd backend
npm install
npm start

The backend runs on:

http://localhost:8000

Run the frontend in another terminal:

cd frontend
npm install
npm start

The frontend runs on:

http://localhost:3000

In local development, frontend requests to /encrypt and /decrypt are proxied to the Express backend.

Production Build

From the repository root:

npm run build

This installs frontend dependencies with npm ci and creates the production build in:

frontend/build

You can also build only the frontend:

cd frontend
npm run build

Netlify Configuration

The main Netlify config lives in netlify.toml:

[build]
  base = "."
  command = "npm --prefix frontend ci && npm --prefix frontend run build"
  publish = "frontend/build"

[functions]
  directory = "netlify/functions"
  included_files = ["backend/ciphers/**"]
  node_bundler = "esbuild"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

The redirect supports client-side routing by sending unknown paths back to index.html.

API Endpoints

POST /encrypt

Request:

{
  "text": "HELLO",
  "cipher_type": "caesar",
  "key": "3"
}

Response:

{
  "success": true,
  "cipherType": "caesar",
  "originalText": "HELLO",
  "result": "KHOOR",
  "key": "3"
}

POST /decrypt

Request:

{
  "text": "KHOOR",
  "cipher_type": "caesar",
  "key": "3"
}

Response:

{
  "success": true,
  "cipherType": "caesar",
  "encryptedText": "KHOOR",
  "result": "HELLO",
  "key": "3"
}

The local Express backend also includes:

• GET /health
• GET /ciphers

Project Structure

CryptGame/
|-- backend/
|   |-- ciphers/
|   |   |-- caesar.js
|   |   |-- hill.js
|   |   |-- monoalphabetic.js
|   |   |-- playfair.js
|   |   |-- polybius.js
|   |   |-- railFence.js
|   |   |-- rowColumnTransposition.js
|   |   |-- transposition.js
|   |   `-- vigenere.js
|   |-- index.js
|   `-- package.json
|-- frontend/
|   |-- public/
|   |-- src/
|   |   |-- components/
|   |   |-- game/
|   |   |-- App.js
|   |   |-- App.css
|   |   |-- index.js
|   |   `-- index.css
|   |-- package.json
|   |-- package-lock.json
|   |-- postcss.config.js
|   `-- tailwind.config.js
|-- netlify/
|   `-- functions/
|       `-- cipher.mts
|-- .netlifyignore
|-- netlify.toml
|-- package.json
`-- README.md

Cipher Key Requirements

• Caesar: numeric shift value.
• Polybius: no key required.
• Rail Fence: number of rails.
• Transposition: keyword.
• Monoalphabetic: 26-letter A-Z permutation.
• Vigenere: keyword.
• Playfair: keyword.
• Hill: matrix key such as 2x2:3,3,2,5.
• Row/Column Transposition: keyword.

Game Progression

• Levels 1-2: Caesar Cipher
• Level 3: Polybius Cipher
• Level 4: Rail Fence Cipher
• Level 5: Transposition Cipher
• Level 6: Monoalphabetic Cipher
• Level 7: Vigenere Cipher
• Level 8: Playfair Cipher
• Level 9: Row/Column Transposition
• Level 10: Hill Cipher
• Levels 11-15: harder variants of advanced ciphers

Troubleshooting

Frontend cannot reach the API locally

Make sure the backend is running:

cd backend
npm start

Then start the frontend:

cd frontend
npm start

Netlify function cannot find cipher modules

Check that netlify.toml includes:

[functions]
  included_files = ["backend/ciphers/**"]

Row/Column Transposition is rejected

The backend must register this cipher with the normalized lowercase key:

rowcolumntransposition

Game progress disappeared

Progress is stored in browser localStorage. Clearing browser data or using a different browser/profile resets progress.

Verification

The current deployment was verified with:

• Local root production build: npm run build
• Live site status check: https://cryptgame1.netlify.app
• Live Caesar encryption test: HELLO with key 3 returns KHOOR
• Live Row/Column Transposition endpoint test

Author

Yash Jha

• LinkedIn: @yashjha024

License

ISC