De-encrypt Hub Development Guide

Development guidance for De-encrypt Hub, a browser-based encryption and decryption toolkit built with React, TypeScript, and Vite. Provides secure, client-side cryptographic operations including symmetric/asymmetric encryption, hashing, digital signatures, and image encryption.

**Live Demo**: https://encryptioner.github.io/de-encrypt-hub/

Project Architecture

Core Structure

Key Directories

#### `src/components/`

Main UI components:

#### `src/hooks/`

Custom React hooks for crypto operations:

#### `src/lib/`

Core utilities:

#### `src/config/content.json`

Algorithm descriptions and educational content

Development Workflow

Setup and Development

1. **Install dependencies**:

```bash

pnpm i

```

2. **Start development server** (runs on port 8080):

```bash

pnpm run dev

```

3. **Run linting**:

```bash

pnpm run lint

```

4. **Preview production build**:

```bash

pnpm run preview

```

Building

```bash

pnpm run build

```

```bash

pnpm run build:dev

```

**Build Output**: `dist/` directory

**Base Path**: Production builds use `/de-encrypt-hub/` for GitHub Pages compatibility

Cryptographic Implementation

Supported Operations

1. **Symmetric Encryption** (via CryptoJS):

- AES

- DES

- TripleDES

- Rabbit

- RC4

2. **Asymmetric Encryption** (via Web Crypto API):

- RSA-OAEP

3. **Digital Signatures**:

- RSA-PSS

- Ed25519

4. **Hashing**:

- Web Crypto API: SHA-1, SHA-256, SHA-512

- CryptoJS: MD5

5. **Image Encryption**:

- Custom pixel manipulation algorithms

6. **JWT Operations** (via jose library):

- JSON Web Token creation and validation

Component Patterns

1. **Tool Components**: Use `mode` prop with values `"encrypt"` or `"decrypt"` for dual-purpose tools

2. **Hook Integration**: Each crypto operation has a dedicated custom hook in `src/hooks/`

3. **Error Handling**:

- Consistent error boundaries throughout the app

- User feedback via toast notifications

- Security warnings for deprecated algorithms (MD5, SHA-1, DES)

4. **Theme Support**: Dark/light mode implemented via next-themes

Configuration

Important Settings

Deployment

Security Considerations

**CRITICAL**: All cryptographic operations run client-side in the browser. No data is transmitted to external servers.

Guidelines

1. **Educational Purpose**: The application is designed for educational and utility purposes

2. **Algorithm Warnings**: Proper security warnings are displayed for deprecated algorithms:

- MD5 (cryptographically broken)

- SHA-1 (deprecated for security-critical uses)

- DES (weak key size)

3. **Client-Side Only**: Never add server-side data transmission for crypto operations

4. **Key Management**: Users are responsible for their own key management and storage

Making Changes

Adding New Crypto Operations

1. Create a new custom hook in `src/hooks/` (e.g., `useNewCrypto.ts`)

2. Implement the crypto logic (prefer Web Crypto API over libraries when possible)

3. Create a tool component in `src/components/` following existing patterns

4. Add educational content to `src/config/content.json`

5. Integrate into `DeencryptHub.tsx` tabbed interface

6. Add appropriate security warnings if needed

Modifying Existing Tools

1. Locate the relevant hook in `src/hooks/`

2. Update crypto logic while maintaining backward compatibility

3. Update corresponding UI component if needed

4. Test both encrypt and decrypt modes

5. Update `src/config/content.json` if algorithm details changed

UI/Styling Changes

1. Use existing shadcn/ui components from `src/components/ui/`

2. Follow Tailwind CSS utility-first approach

3. Maintain dark/light theme compatibility

4. Test responsive design on mobile and desktop

Testing Checklist

Before committing changes:

Common Tasks

Update Dependencies

```bash

pnpm update

```

Add New Dependency

```bash

pnpm add <package-name>

```

Add New Dev Dependency

```bash

pnpm add -D <package-name>

```

Clear Build Cache

```bash

rm -rf dist node_modules/.vite

pnpm run build

```

Constraints

1. **No Server-Side Operations**: All crypto must remain client-side

2. **Browser Support**: Target modern browsers with Web Crypto API

3. **Package Manager**: Use pnpm, not npm or yarn

4. **Port**: Development server must run on port 8080

5. **Base Path**: Production builds must use `/de-encrypt-hub/` base path

6. **No External Data Transmission**: Never send crypto data to external servers