README.md

🛡️ Netveris

Professional Security Analysis & Developer Tools Suite

---

📖 About

Netveris is a comprehensive suite of 40+ security analysis and developer tools built with modern web technologies. Designed for security professionals, developers, and enthusiasts who need quick access to essential security utilities without leaving their browser.

---

✨ Features

🔐 Security Analysis Tools

Tool	Description
🛡️ Security Analyzer	Comprehensive analysis of HTTP headers, cookies, and security configurations
🔑 JWT Analyzer	Decode, validate, and inspect JSON Web Tokens
🔏 JWT Generator	Create custom JWTs with various algorithms
🐛 JWT Debugger	Debug and troubleshoot JWT issues
📋 JWT Best Practices	Learn security best practices for JWT implementation
🔒 Password Checker	Analyze password strength with detailed feedback
📜 Certificate Decoder	Parse and analyze SSL/TLS certificates
🌐 CORS Checker	Test and validate CORS configurations
🛡️ CSP Generator	Generate Content Security Policy headers
🔍 Privacy Analyzer	Analyze privacy implications of web applications
🔐 API Security	Test and validate API security configurations
🔒 SSL Inspector	Inspect SSL/TLS configurations

🔢 Encoding & Hashing

Tool	Description
#️⃣ Hash Tools	Generate MD5, SHA-1, SHA-256, SHA-512 hashes
🔍 Hash Identifier	Identify hash types automatically
🔐 HMAC Generator	Create HMAC signatures
📝 Base64 Tools	Encode and decode Base64 strings
🔗 URL Encoder	URL encoding and decoding
📄 HTML Entities	Encode/decode HTML entities
🔢 Base Converter	Convert between binary, octal, decimal, hex

🔑 Encryption & Cryptography

Tool	Description
🔐 AES Encryption	Encrypt and decrypt with AES algorithm
🔑 RSA Generator	Generate RSA key pairs
🎯 Caesar Cipher	Classic encryption cipher
⊕ XOR Cipher	XOR encryption/decryption
🔢 TOTP Generator	Generate Time-based One-Time Passwords
🎲 Secret Generator	Generate secure random secrets
🔑 Password Generator	Create strong, random passwords

🛠️ Developer Utilities

Tool	Description
📝 JSON Formatter	Format and validate JSON data
🔗 URL Parser	Parse and analyze URLs
🆔 UUID Generator	Generate various UUID versions
⏰ Timestamp Converter	Convert between timestamp formats
🔤 Regex Tester	Test regular expressions
📊 Text Diff	Compare text and find differences
🎨 Color Converter	Convert between color formats
🌐 HTTP Builder	Build and test HTTP requests
🧹 Data Sanitizer	Sanitize and clean data
🌐 DNS Lookup	Perform DNS queries
📡 Subnet Calculator	Calculate network subnets

---

🚀 Quick Start

Prerequisites

• Node.js 20.x or higher
• npm 9.x or higher (or pnpm/yarn)

Installation

# Clone the repository
git clone https://github.com/netveris/netveris.github.io.git

# Navigate to project directory
cd netveris.github.io

# Install dependencies
npm install

# Start development server
npm run dev

Your application will be available at http://localhost:5173 🎉

---

🐳 Docker

Run Netveris instantly with Docker - no setup required!

Quick Run (Production)

# Build and run with Docker Compose
docker-compose up -d

# Access at http://localhost:3000

Development Mode

# Run with hot reload
docker-compose --profile dev up netveris-dev

# Access at http://localhost:5173

Manual Docker Build

# Build the image
docker build -t netveris .

# Run the container
docker run -d -p 3000:3000 --name netveris-app netveris

---

📦 Building for Production

# Create production build
npm run build

# The build output will be in:
# - build/client/  → Static assets
# - build/server/  → Server-side code (if SSR enabled)

---

🌐 Deployment

GitHub Pages (Automatic)

This repository is configured for automatic deployment to GitHub Pages:

1. Push to main branch
2. GitHub Actions builds and deploys automatically
3. Access at: https://netveris.github.io

Self-Hosting

You can also deploy Netveris on your own infrastructure:

# Using Docker
docker-compose up -d

# Or build manually
npm run build
npm run start

---

🏗️ System Architecture

High-Level Overview

flowchart TB
    subgraph Client["🌐 Client Browser"]
        UI["🖥️ User Interface"]
        SW["⚡ Service Worker"]
        LS["💾 Local Storage"]
    end

    subgraph App["⚛️ React Application"]
        Router["🔀 React Router v7"]
        Components["🧩 Components"]
        Hooks["🪝 Custom Hooks"]
        Utils["🔧 Utilities"]
    end

    subgraph Tools["🛠️ Security Tools Suite"]
        direction TB
        Security["🔐 Security Analysis"]
        Crypto["🔑 Cryptography"]
        Encoding["📝 Encoding/Hashing"]
        DevTools["🛠️ Dev Utilities"]
    end

    UI --> Router
    Router --> Components
    Components --> Hooks
    Components --> Utils
    Hooks --> Tools
    Utils --> Tools
    SW -.-> LS
    Tools -.-> LS

    style Client fill:#1a1a2e,stroke:#00a3c7,stroke-width:2px,color:#fff
    style App fill:#16213e,stroke:#e94560,stroke-width:2px,color:#fff
    style Tools fill:#0f3460,stroke:#00ff88,stroke-width:2px,color:#fff

Loading

Tool Categories Architecture

flowchart LR
    subgraph SecurityTools["🔐 Security Analysis"]
        direction TB
        SA["Security Analyzer"]
        JWT["JWT Suite"]
        SSL["SSL Inspector"]
        CORS["CORS Checker"]
        CSP["CSP Generator"]
        API["API Security"]
        Privacy["Privacy Analyzer"]
    end

    subgraph CryptoTools["🔑 Cryptography"]
        direction TB
        AES["AES Encryption"]
        RSA["RSA Generator"]
        HMAC["HMAC Generator"]
        Caesar["Caesar Cipher"]
        XOR["XOR Cipher"]
        TOTP["TOTP Generator"]
        SecretGen["Secret Generator"]
        PassGen["Password Generator"]
    end

    subgraph EncodingTools["📝 Encoding & Hashing"]
        direction TB
        Hash["Hash Tools"]
        HashID["Hash Identifier"]
        B64["Base64 Tools"]
        URL["URL Encoder"]
        HTML["HTML Entities"]
        Base["Base Converter"]
    end

    subgraph DevUtilities["🛠️ Developer Tools"]
        direction TB
        JSON["JSON Formatter"]
        URLParse["URL Parser"]
        UUID["UUID Generator"]
        Time["Timestamp Converter"]
        Regex["Regex Tester"]
        Diff["Text Diff"]
        Color["Color Converter"]
        HTTP["HTTP Builder"]
        DNS["DNS Lookup"]
        Subnet["Subnet Calculator"]
        Sanitize["Data Sanitizer"]
    end

    User((👤 User)) --> SecurityTools
    User --> CryptoTools
    User --> EncodingTools
    User --> DevUtilities

    style SecurityTools fill:#dc3545,stroke:#fff,stroke-width:2px,color:#fff
    style CryptoTools fill:#6f42c1,stroke:#fff,stroke-width:2px,color:#fff
    style EncodingTools fill:#fd7e14,stroke:#fff,stroke-width:2px,color:#fff
    style DevUtilities fill:#20c997,stroke:#fff,stroke-width:2px,color:#fff
    style User fill:#0d6efd,stroke:#fff,stroke-width:3px,color:#fff

Loading

Component Architecture

flowchart TB
    subgraph Root["📦 App Root"]
        RootTSX["root.tsx"]
    end

    subgraph Layout["🎨 Layout Layer"]
        Nav["Navigation"]
        Theme["Theme Toggle"]
        Toast["Toast System"]
    end

    subgraph Pages["📄 Route Pages"]
        Home["🏠 Home"]
        Dashboard["📊 Dashboard"]
        Favorites["⭐ Favorites"]
        Recent["🕐 Recent"]
        Docs["📚 Documentation"]
        ToolPages["🛠️ 40+ Tool Pages"]
    end

    subgraph SharedUI["🧩 Shared Components"]
        ToolHeader["Tool Header"]
        CodeWindow["Code Window"]
        CodeBlock["Code Block"]
        AnalysisPanel["Analysis Panel"]
        IssueCard["Issue Card"]
        RiskBadge["Risk Badge"]
        SecurityScore["Security Score"]
        ExportMenu["Export Menu"]
        KeyboardShortcuts["Keyboard Shortcuts"]
    end

    subgraph UIKit["🎯 UI Primitives"]
        Button["Button"]
        Input["Input"]
        Select["Select"]
        Dialog["Dialog"]
        Tabs["Tabs"]
        Card["Card"]
        Badge["Badge"]
        Tooltip["Tooltip"]
    end

    RootTSX --> Layout
    Layout --> Pages
    Pages --> SharedUI
    SharedUI --> UIKit

    style Root fill:#e91e63,stroke:#fff,stroke-width:2px,color:#fff
    style Layout fill:#9c27b0,stroke:#fff,stroke-width:2px,color:#fff
    style Pages fill:#673ab7,stroke:#fff,stroke-width:2px,color:#fff
    style SharedUI fill:#3f51b5,stroke:#fff,stroke-width:2px,color:#fff
    style UIKit fill:#2196f3,stroke:#fff,stroke-width:2px,color:#fff

Loading

Data Flow Architecture

flowchart LR
    subgraph Input["📥 User Input"]
        Text["Text Input"]
        File["File Upload"]
        Paste["Clipboard Paste"]
    end

    subgraph Processing["⚙️ Processing Layer"]
        Validate["✅ Validation"]
        Transform["🔄 Transform"]
        Analyze["🔍 Analysis"]
    end

    subgraph Output["📤 Output"]
        Display["🖥️ Display Results"]
        Copy["📋 Copy to Clipboard"]
        Export["💾 Export File"]
        Share["🔗 Share Link"]
    end

    subgraph Storage["💾 Persistence"]
        LocalStorage["Local Storage"]
        Favorites["Favorites"]
        History["Recent History"]
        Settings["User Settings"]
    end

    Input --> Processing
    Processing --> Output
    Processing -.-> Storage
    Storage -.-> Input

    style Input fill:#4caf50,stroke:#fff,stroke-width:2px,color:#fff
    style Processing fill:#ff9800,stroke:#fff,stroke-width:2px,color:#fff
    style Output fill:#2196f3,stroke:#fff,stroke-width:2px,color:#fff
    style Storage fill:#9c27b0,stroke:#fff,stroke-width:2px,color:#fff

Loading

Technology Stack

flowchart TB
    subgraph Frontend["🎨 Frontend Layer"]
        React["⚛️ React 19"]
        TS["📘 TypeScript 5"]
        CSS["🎨 CSS Modules"]
    end

    subgraph Build["🔨 Build Tools"]
        Vite["⚡ Vite 7"]
        ESBuild["📦 ESBuild"]
        PostCSS["🎨 PostCSS"]
    end

    subgraph Routing["🔀 Routing"]
        RR7["React Router 7"]
        FileRoutes["File-based Routes"]
    end

    subgraph UI["🧩 UI Libraries"]
        Radix["Radix UI"]
        Lucide["Lucide Icons"]
        Recharts["Recharts"]
        Sonner["Sonner Toasts"]
    end

    subgraph Forms["📝 Form Handling"]
        RHF["React Hook Form"]
        Zod["Zod Validation"]
    end

    subgraph Deploy["🚀 Deployment"]
        GHPages["GitHub Pages"]
        Docker["Docker"]
        PWA["PWA Support"]
    end

    Frontend --> Build
    Build --> Routing
    Frontend --> UI
    Frontend --> Forms
    Build --> Deploy

    style Frontend fill:#61dafb,stroke:#000,stroke-width:2px,color:#000
    style Build fill:#646cff,stroke:#fff,stroke-width:2px,color:#fff
    style Routing fill:#ca4245,stroke:#fff,stroke-width:2px,color:#fff
    style UI fill:#ff6b6b,stroke:#fff,stroke-width:2px,color:#fff
    style Forms fill:#00d4aa,stroke:#000,stroke-width:2px,color:#000
    style Deploy fill:#2ea44f,stroke:#fff,stroke-width:2px,color:#fff

Loading

Request Flow Sequence

sequenceDiagram
    participant U as 👤 User
    participant B as 🌐 Browser
    participant SW as ⚡ Service Worker
    participant R as 🔀 Router
    participant C as 🧩 Component
    participant T as 🛠️ Tool Logic
    participant S as 💾 Storage

    U->>B: Navigate to Tool
    B->>SW: Check Cache
    SW-->>B: Return Cached/Fetch
    B->>R: Route Match
    R->>C: Render Component
    C->>T: Initialize Tool
    T->>S: Load Preferences
    S-->>T: Return Settings
    T-->>C: Ready State
    C-->>U: Display UI
    
    U->>C: Input Data
    C->>T: Process
    T->>T: Validate & Transform
    T-->>C: Return Results
    C-->>U: Show Output
    
    U->>C: Save to Favorites
    C->>S: Store Data
    S-->>C: Confirm
    C-->>U: Show Success

Loading

---

🛠️ Tech Stack

React 19

TypeScript

Vite 7

React Router

CSS Modules

Additional Libraries:

• 🎨 Radix UI - Accessible component primitives
• 📊 Recharts - Data visualization
• 🎭 Lucide Icons - Beautiful icons
• 🔔 Sonner - Toast notifications
• 📝 React Hook Form - Form management
• ✅ Zod - Schema validation

---

📁 Project Structure

flowchart TB
    subgraph Root["📦 netveris/"]
        subgraph AppDir["📁 app/"]
            Components["📁 components/"]
            Hooks["📁 hooks/"]
            Routes["📁 routes/"]
            Styles["📁 styles/"]
            Types["📁 types/"]
            Utils["📁 utils/"]
            RootFile["📄 root.tsx"]
            RoutesFile["📄 routes.ts"]
        end
        
        subgraph PublicDir["📁 public/"]
            Manifest["📄 manifest.json"]
            ServiceWorker["📄 sw.js"]
            Robots["📄 robots.txt"]
            Sitemap["📄 sitemap.xml"]
        end
        
        subgraph ConfigFiles["⚙️ Config Files"]
            Package["📄 package.json"]
            TSConfig["📄 tsconfig.json"]
            ViteConfig["📄 vite.config.ts"]
            Docker["🐳 Dockerfile"]
            DockerDev["🐳 Dockerfile.dev"]
            Compose["🐳 docker-compose.yml"]
        end
    end

    style Root fill:#1a1a2e,stroke:#00a3c7,stroke-width:2px,color:#fff
    style AppDir fill:#16213e,stroke:#e94560,stroke-width:2px,color:#fff
    style PublicDir fill:#0f3460,stroke:#00ff88,stroke-width:2px,color:#fff
    style ConfigFiles fill:#533483,stroke:#ffd700,stroke-width:2px,color:#fff

Loading

netveris/
├── 📁 app/
│   ├── 📁 components/     # Reusable UI components
│   │   └── 📁 ui/         # Base UI primitives
│   ├── 📁 hooks/          # Custom React hooks
│   ├── 📁 routes/         # Page components
│   ├── 📁 styles/         # Global styles & tokens
│   ├── 📁 types/          # TypeScript definitions
│   ├── 📁 utils/          # Utility functions
│   ├── 📄 root.tsx        # App root component
│   └── 📄 routes.ts       # Route definitions
├── 📁 public/             # Static assets
├── 📄 Dockerfile          # Production Docker config
├── 📄 Dockerfile.dev      # Development Docker config
├── 📄 docker-compose.yml  # Docker Compose config
├── 📄 package.json        # Dependencies & scripts
├── 📄 tsconfig.json       # TypeScript config
├── 📄 vite.config.ts      # Vite config
└── 📄 README.md           # You are here! 👋

---

⌨️ Keyboard Shortcuts

Shortcut	Action
Ctrl + K	Open command palette
Ctrl + /	Show keyboard shortcuts
Ctrl + D	Toggle dark mode
Esc	Close dialogs

---

🤝 Contributing

Contributions are welcome! Here's how you can help:

1. 🍴 Fork the repository
2. 🌿 Create a feature branch: git checkout -b feature/amazing-feature
3. 💾 Commit changes: git commit -m 'Add amazing feature'
4. 📤 Push to branch: git push origin feature/amazing-feature
5. 🔃 Open a Pull Request

Development Guidelines

• Follow TypeScript best practices
• Use CSS Modules for styling
• Write meaningful commit messages
• Test your changes thoroughly

---

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

🙏 Acknowledgments

• React - UI Library
• Vite - Build Tool
• Radix UI - UI Primitives
• Lucide - Icons
• Open Props - CSS Variables

---

Made with ❤️ by the Netveris Team

_{⭐ Star this repo if you find it useful!}