Development guide for De-encrypt Hub, a browser-based encryption toolkit with React, TypeScript, and crypto operations
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/
#### `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
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
```
```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
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
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
**CRITICAL**: All cryptographic operations run client-side in the browser. No data is transmitted to external servers.
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
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
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
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
Before committing changes:
```bash
pnpm update
```
```bash
pnpm add <package-name>
```
```bash
pnpm add -D <package-name>
```
```bash
rm -rf dist node_modules/.vite
pnpm run build
```
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
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/de-encrypt-hub-guide/raw