TransCipher

A dynamic web-based puzzle game utilizing transposition ciphers to engage users in decoding scrambled phrases. Includes features like leaderboards, user profiles, anda interactive game.

---

Features

• Decode scrambled phrases using a transposition cipher.
• Real-time score tracking and leaderboards.
• User authentication and profiles.
• Interactive tutorial for new players.
• Dynamic gameplay with customizable difficulty.

---

Getting Started

Prerequisites

• Node.js
• npm
• MongoDB instance.

Installation

1. Clone the Repository:

   git clone <repository-url>
   cd <repository-folder>

2. Install Dependencies: Navigate to the root directory and install dependencies:

   npm install
   cd client
   npm install
   cd ../server
   npm install

3. Set up Environment Variables: Copy the provided .env file or create a new one in the root directory and include the following:

   MONGODB_URI=<your-mongodb-uri>
   JWT_SECRET=<your-jwt-secret>
   BAD_WORDS_API_KEY=<bad-words-api-key>
   CLOUDINARY_CLOUD_NAME=<cloudinary-cloud-name>
   CLOUDINARY_API_KEY=<cloudinary-api-key>
   CLOUDINARY_API_KEY_SECRET=<cloudinary-api-key-secret>

---

Running the Application

1. Start Server and Client Concurrently: Use npm start from the root directory:

   npm start

2. Access the Application: Open your browser and navigate to http://localhost:3000.

---

Transposition Cipher Explanation

A transposition cipher rearranges characters of plaintext according to a defined key, creating a cipher text. The algorithm involves:

1. Stripping whitespace and uppercasing the text.
2. Arranging text into a grid based on the cipher key.
3. Reading the columns in the order defined by the key.

Example:

• Plaintext: HELLO WORLD
• Key: 4312
• Cipher Text: LOEHLWRLDO

Implemented in game.jsx using the transpositionCipher function.

---

Routes

Frontend

• /: Title page with links to gameplay, leaderboard, and user actions.
• /signup: User signup form.
• /login: User login form.
• /play: Game interface.
• /profile: User profile with editable bio and image upload.
• /leaderboard: Leaderboard of top scores.
• /tutorial: Step-by-step gameplay instructions.

Backend

Refer to the server code for API endpoints, such as:

• /auth/signup: User registration.
• /auth/login: User login.
• /auth/logout: User logout.
• /scores/leaderboard: Fetch leaderboard data.

Render Links:

• https://react-decipher-app.onrender.com/
• https://react-decipher-app-backend.onrender.com/

---

Screenshots

Title Page

Game Screen

Leaderboard

---