first commit

2025-12-23 21:05:31 +02:00 · 2025-12-23 21:05:31 +02:00 · 8b341a9f3b
commit 8b341a9f3b
20 changed files with 3819 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,30 @@
 # Frontend
 node_modules/
 dist/
 .env
 .env.local
 # Backend
 __pycache__/
 *.py[cod]
 *$py.class
 *.so
 .Python
 venv/
 ENV/
 env/
 *.egg-info/
 # IDEs
 .vscode/
 .idea/
 *.swp
 *.swo
 *~
 # OS
 .DS_Store
 Thumbs.db
 my-recipes-chart/\
 helm/
--- a/.woodpecker.yaml
+++ b/.woodpecker.yaml
@ -0,0 +1,121 @@
 steps:
  build-frontend:
    name: Build & Push Frontend
    image: woodpeckerci/plugin-kaniko
    when:
      branch: [ master, develop ]
      event: [ push, pull_request, tag ]
      path:
        include: [ frontend/** ]
    settings:
      registry: harbor.dvirlabs.com
      repo: my-apps/${CI_REPO_NAME}-frontend
      dockerfile: frontend/Dockerfile
      context: frontend
      tags:
        - latest
        - ${CI_COMMIT_TAG:-${CI_COMMIT_BRANCH}-${CI_COMMIT_SHA:0:7}}
      username:
        from_secret: DOCKER_USERNAME
      password:
        from_secret: DOCKER_PASSWORD
  build-backend:
    name: Build & Push Backend
    image: woodpeckerci/plugin-kaniko
    when:
      branch: [ master, develop ]
      event: [ push, pull_request, tag ]
      path:
        include: [ backend/** ]
    settings:
      registry: harbor-core.dev-tools.svc.cluster.local
      repo: my-apps/${CI_REPO_NAME}-backend
      dockerfile: backend/Dockerfile
      context: backend
      tags:
        - latest
        - ${CI_COMMIT_TAG:-${CI_COMMIT_BRANCH}-${CI_COMMIT_SHA:0:7}}
      username:
        from_secret: DOCKER_USERNAME
      password:
        from_secret: DOCKER_PASSWORD
  update-values-frontend:
    name: Update frontend tag in values.yaml
    image: alpine:3.19
    when:
      branch: [ master, develop ]
      event: [ push ]
      path:
        include: [ frontend/** ]
    environment:
      GIT_USERNAME:
        from_secret: GIT_USERNAME
      GIT_TOKEN:
        from_secret: GIT_TOKEN
    commands:
      - apk add --no-cache git yq
      - git config --global user.name "woodpecker-bot"
      - git config --global user.email "ci@dvirlabs.com"
      - git clone "https://$${GIT_USERNAME}:$${GIT_TOKEN}@git.dvirlabs.com/dvirlabs/my-apps.git"
      - cd my-apps
      - |
        TAG="${CI_COMMIT_BRANCH}-${CI_COMMIT_SHA:0:7}"
        echo "💡 Setting frontend tag to: $TAG"
        yq -i ".frontend.image.tag = \"$TAG\"" manifests/${CI_REPO_NAME}/values.yaml
        git add manifests/${CI_REPO_NAME}/values.yaml
        git commit -m "frontend: update tag to $TAG" || echo "No changes"
        git push origin HEAD
  update-values-backend:
    name: Update backend tag in values.yaml
    image: alpine:3.19
    when:
      branch: [ master, develop ]
      event: [ push ]
      path:
        include: [ backend/** ]
    environment:
      GIT_USERNAME:
        from_secret: GIT_USERNAME
      GIT_TOKEN:
        from_secret: GIT_TOKEN
    commands:
      - apk add --no-cache git yq
      - git config --global user.name "woodpecker-bot"
      - git config --global user.email "ci@dvirlabs.com"
      - |
        if [ ! -d "my-apps" ]; then
          git clone "https://$${GIT_USERNAME}:$${GIT_TOKEN}@git.dvirlabs.com/dvirlabs/my-apps.git"
        fi
      - cd my-apps
      - |
        TAG="${CI_COMMIT_BRANCH}-${CI_COMMIT_SHA:0:7}"
        echo "💡 Setting backend tag to: $TAG"
        yq -i ".backend.image.tag = \"$TAG\"" manifests/${CI_REPO_NAME}/values.yaml
        git add manifests/${CI_REPO_NAME}/values.yaml
        git commit -m "backend: update tag to $TAG" || echo "No changes"
        git push origin HEAD
  trigger-gitops-via-push:
    when:
      branch: [ master, develop ]
      event: [ push ]
    name: Trigger apps-gitops via Git push
    image: alpine/git
    environment:
      GIT_USERNAME:
        from_secret: GIT_USERNAME
      GIT_TOKEN:
        from_secret: GIT_TOKEN
    commands: |
      git config --global user.name "woodpecker-bot"
      git config --global user.email "ci@dvirlabs.com"
      git clone "https://$${GIT_USERNAME}:$${GIT_TOKEN}@git.dvirlabs.com/dvirlabs/apps-gitops.git"
      cd apps-gitops
      echo "# trigger at $(date) by $${CI_REPO_NAME}" >> .trigger
      git add .trigger
      git commit -m "ci: trigger apps-gitops build" || echo "no changes"
      git push origin HEAD
--- a/README.md
+++ b/README.md
@ -0,0 +1,154 @@
 # IP Subnet Calculator
 A full-stack IP subnet calculator application with React + Vite frontend and FastAPI backend.
 ## Features
 - ✅ Calculate Network ID
 - ✅ Calculate Broadcast Address
 - ✅ Show First and Last Usable IP addresses
 - ✅ Display Total Hosts and Usable Hosts
 - ✅ Show Subnet Mask and Wildcard Mask
 - ✅ Identify Network Class (A, B, C, D, E)
 - ✅ Detect IP Type (Unicast, Multicast, Loopback, etc.)
 - ✅ Check if IP is Private or Public
 - ✅ Support both CIDR notation and Subnet Mask input
 ## Project Structure
 ```
 ip-calculator/
 ├── backend/          # FastAPI backend
 │   ├── main.py
 │   ├── requirements.txt
 │   └── README.md
 └── frontend/         # React + Vite frontend
    ├── src/
    │   ├── App.jsx
    │   ├── App.css
    │   ├── main.jsx
    │   └── index.css
    ├── index.html
    ├── package.json
    └── vite.config.js
 ```
 ## Setup Instructions
 ### Backend Setup
 1. Navigate to the backend directory:
 ```bash
 cd backend
 ```
 2. Create and activate a virtual environment:
 ```bash
 # Windows
 python -m venv venv
 venv\Scripts\activate
 # Linux/Mac
 python -m venv venv
 source venv/bin/activate
 ```
 3. Install dependencies:
 ```bash
 pip install -r requirements.txt
 ```
 4. Run the FastAPI server:
 ```bash
 uvicorn main:app --reload --host 0.0.0.0 --port 8000
 ```
 The API will be available at `http://localhost:8000`  
 API documentation at `http://localhost:8000/docs`
 ### Frontend Setup
 1. Navigate to the frontend directory:
 ```bash
 cd frontend
 ```
 2. Install dependencies:
 ```bash
 npm install
 ```
 3. Run the development server:
 ```bash
 npm run dev
 ```
 The application will be available at `http://localhost:3000`
 ## Usage
 1. Start the backend server (port 8000)
 2. Start the frontend server (port 3000)
 3. Open your browser and go to `http://localhost:3000`
 4. Enter an IP address (e.g., 192.168.1.1)
 5. Choose input method:
   - **CIDR Notation**: Enter a value between 1-32 (e.g., 24)
   - **Subnet Mask**: Enter a subnet mask (e.g., 255.255.255.0)
 6. Click "Calculate Subnet" to see all subnet information
 ## API Endpoints
 ### POST /calculate
 Calculate subnet information for a given IP address.
 **Request Body:**
 ```json
 {
  "ip_address": "192.168.1.1",
  "cidr": 24
 }
 ```
 or
 ```json
 {
  "ip_address": "192.168.1.1",
  "subnet_mask": "255.255.255.0"
 }
 ```
 **Response:**
 ```json
 {
  "ip_address": "192.168.1.1",
  "cidr": 24,
  "subnet_mask": "255.255.255.0",
  "network_id": "192.168.1.0",
  "broadcast_address": "192.168.1.255",
  "first_usable_ip": "192.168.1.1",
  "last_usable_ip": "192.168.1.254",
  "total_hosts": 256,
  "usable_hosts": 254,
  "wildcard_mask": "0.0.0.255",
  "network_class": "C",
  "is_private": true,
  "ip_type": "Unicast"
 }
 ```
 ## Technologies Used
 ### Backend
 - **FastAPI**: Modern, fast web framework for building APIs
 - **Uvicorn**: ASGI server for running FastAPI
 - **Pydantic**: Data validation using Python type annotations
 - **ipaddress**: Python standard library for IP address manipulation
 ### Frontend
 - **React**: UI library for building interactive interfaces
 - **Vite**: Fast build tool and development server
 - **Axios**: HTTP client for API requests
 - **CSS3**: Modern styling with gradients and animations
 ## License
 MIT
--- a/backend/Dockerfile
+++ b/backend/Dockerfile
@ -0,0 +1,16 @@
 FROM python:3.11-slim
 WORKDIR /app
 # Copy requirements and install dependencies
 COPY requirements.txt .
 RUN pip install --no-cache-dir -r requirements.txt
 # Copy application code
 COPY main.py .
 # Expose port
 EXPOSE 8000
 # Run the application
 CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]
--- a/backend/README.md
+++ b/backend/README.md
@ -0,0 +1,26 @@
 # IP Subnet Calculator - Backend
 ## Setup
 1. Create a virtual environment:
 ```bash
 python -m venv venv
 ```
 2. Activate the virtual environment:
 - Windows: `venv\Scripts\activate`
 - Linux/Mac: `source venv/bin/activate`
 3. Install dependencies:
 ```bash
 pip install -r requirements.txt
 ```
 ## Run the server
 ```bash
 uvicorn main:app --reload --host 0.0.0.0 --port 8000
 ```
 API will be available at http://localhost:8000
 API documentation at http://localhost:8000/docs
--- a/backend/main.py
+++ b/backend/main.py
@ -0,0 +1,264 @@
 from fastapi import FastAPI, HTTPException
 from fastapi.middleware.cors import CORSMiddleware
 from pydantic import BaseModel, validator
 import ipaddress
 import re
 from typing import Optional
 app = FastAPI(title="IP Subnet Calculator API")
 # CORS configuration
 app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
 )
 class SubnetInput(BaseModel):
    ip_address: str
    cidr: Optional[int] = None
    subnet_mask: Optional[str] = None
    @validator('ip_address')
    def validate_ip_address(cls, v):
        if not v or not v.strip():
            raise ValueError("IP address cannot be empty")
        # Check basic format
        ip_pattern = r'^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$'
        if not re.match(ip_pattern, v):
            raise ValueError("Invalid IP address format. Expected format: xxx.xxx.xxx.xxx")
        # Check each octet is valid (0-255)
        octets = v.split('.')
        for i, octet in enumerate(octets):
            try:
                num = int(octet)
                if num < 0 or num > 255:
                    raise ValueError(f"Octet {i+1} must be between 0 and 255. Got: {num}")
            except ValueError:
                raise ValueError(f"Invalid octet value: {octet}")
        # Validate with ipaddress library
        try:
            ipaddress.IPv4Address(v)
        except Exception as e:
            raise ValueError(f"Invalid IP address: {str(e)}")
        return v
    @validator('cidr')
    def validate_cidr(cls, v):
        if v is not None:
            if not isinstance(v, int):
                raise ValueError("CIDR must be a number")
            if v < 0 or v > 32:
                raise ValueError("CIDR must be between 0 and 32")
        return v
    @validator('subnet_mask')
    def validate_subnet_mask(cls, v):
        if v is not None:
            if not v.strip():
                raise ValueError("Subnet mask cannot be empty")
            # Check format
            parts = v.split('.')
            if len(parts) != 4:
                raise ValueError("Subnet mask must have 4 octets (e.g., 255.255.255.0)")
            # Validate with ipaddress
            try:
                mask = ipaddress.IPv4Address(v)
                # Check if it's a valid subnet mask (contiguous 1s followed by 0s)
                mask_int = int(mask)
                # Valid masks have all 1s on the left and all 0s on the right
                # Check by converting to binary and verifying pattern
                binary = bin(mask_int)[2:].zfill(32)
                if '01' in binary:  # If there's a 0 followed by 1, it's invalid
                    raise ValueError("Invalid subnet mask: bits must be contiguous (all 1s followed by all 0s)")
            except Exception as e:
                raise ValueError(f"Invalid subnet mask: {str(e)}")
        return v
 class SubnetInfo(BaseModel):
    ip_address: str
    ip_address_binary: str
    cidr: int
    subnet_mask: str
    subnet_mask_binary: str
    network_id: str
    network_id_binary: str
    broadcast_address: str
    broadcast_binary: str
    first_usable_ip: str
    last_usable_ip: str
    total_hosts: int
    usable_hosts: int
    wildcard_mask: str
    wildcard_binary: str
    network_class: str
    is_private: bool
    ip_type: str
@app.get("/")
 def read_root():
    return {"message": "IP Subnet Calculator API", "version": "1.0.0"}
@app.post("/calculate", response_model=SubnetInfo)
 def calculate_subnet(subnet_input: SubnetInput):
    try:
        # Validate that at least one of CIDR or subnet mask is provided
        if subnet_input.cidr is None and subnet_input.subnet_mask is None:
            raise HTTPException(
                status_code=400, 
                detail="You must provide either CIDR notation (e.g., 24) or subnet mask (e.g., 255.255.255.0)"
            )
        # Determine CIDR notation
        if subnet_input.cidr is not None:
            cidr = subnet_input.cidr
            ip_with_cidr = f"{subnet_input.ip_address}/{cidr}"
        elif subnet_input.subnet_mask is not None:
            # Convert subnet mask to CIDR
            try:
                subnet_mask = ipaddress.IPv4Address(subnet_input.subnet_mask)
                cidr = sum(bin(int(x)).count('1') for x in str(subnet_mask).split('.'))
                # Validate CIDR is reasonable
                if cidr == 0:
                    raise HTTPException(
                        status_code=400,
                        detail="Invalid subnet mask: 0.0.0.0 is not a valid subnet mask"
                    )
                ip_with_cidr = f"{subnet_input.ip_address}/{cidr}"
            except Exception as e:
                raise HTTPException(
                    status_code=400,
                    detail=f"Invalid subnet mask format: {str(e)}"
                )
        # Validate the IP address
        try:
            ip_obj = ipaddress.IPv4Address(subnet_input.ip_address)
        except Exception as e:
            raise HTTPException(
                status_code=400,
                detail=f"Invalid IP address format: {str(e)}"
            )
        # Create network object
        try:
            network = ipaddress.IPv4Network(ip_with_cidr, strict=False)
        except Exception as e:
            raise HTTPException(
                status_code=400,
                detail=f"Cannot create network from IP {subnet_input.ip_address} with CIDR /{cidr}: {str(e)}"
            )
        # Calculate network class
        first_octet = int(subnet_input.ip_address.split('.')[0])
        if first_octet < 128:
            network_class = "A"
        elif first_octet < 192:
            network_class = "B"
        elif first_octet < 224:
            network_class = "C"
        elif first_octet < 240:
            network_class = "D (Multicast)"
        else:
            network_class = "E (Reserved)"
        # Calculate wildcard mask
        subnet_mask_int = int(network.netmask)
        wildcard_int = (2**32 - 1) ^ subnet_mask_int
        wildcard_mask = str(ipaddress.IPv4Address(wildcard_int))
        # Get first and last usable IPs - Calculate mathematically to avoid memory issues
        total_hosts = network.num_addresses
        if cidr == 32:
            # Single host
            first_usable = str(network.network_address)
            last_usable = str(network.network_address)
            usable_hosts = 1
        elif cidr == 31:
            # Point-to-point network (RFC 3021)
            first_usable = str(network.network_address)
            last_usable = str(network.broadcast_address)
            usable_hosts = 2
        else:
            # Calculate first and last usable IPs mathematically
            # First usable = network address + 1
            # Last usable = broadcast address - 1
            network_int = int(network.network_address)
            broadcast_int = int(network.broadcast_address)
            first_usable = str(ipaddress.IPv4Address(network_int + 1))
            last_usable = str(ipaddress.IPv4Address(broadcast_int - 1))
            usable_hosts = total_hosts - 2  # Exclude network and broadcast addresses
        # Helper function to convert IP to binary representation
        def ip_to_binary(ip_str):
            ip = ipaddress.IPv4Address(ip_str)
            # Convert to 32-bit binary and format with dots every 8 bits
            binary = bin(int(ip))[2:].zfill(32)
            return f"{binary[0:8]}.{binary[8:16]}.{binary[16:24]}.{binary[24:32]}"
        # Determine IP type
        if ip_obj.is_loopback:
            ip_type = "Loopback"
        elif ip_obj.is_multicast:
            ip_type = "Multicast"
        elif ip_obj.is_link_local:
            ip_type = "Link-Local"
        elif ip_obj.is_reserved:
            ip_type = "Reserved"
        else:
            ip_type = "Unicast"
        return SubnetInfo(
            ip_address=subnet_input.ip_address,
            ip_address_binary=ip_to_binary(subnet_input.ip_address),
            cidr=cidr,
            subnet_mask=str(network.netmask),
            subnet_mask_binary=ip_to_binary(str(network.netmask)),
            network_id=str(network.network_address),
            network_id_binary=ip_to_binary(str(network.network_address)),
            broadcast_address=str(network.broadcast_address),
            broadcast_binary=ip_to_binary(str(network.broadcast_address)),
            first_usable_ip=first_usable,
            last_usable_ip=last_usable,
            total_hosts=network.num_addresses,
            usable_hosts=usable_hosts,
            wildcard_mask=wildcard_mask,
            wildcard_binary=ip_to_binary(wildcard_mask),
            network_class=network_class,
            is_private=ip_obj.is_private,
            ip_type=ip_type
        )
    except HTTPException:
        # Re-raise HTTP exceptions as-is
        raise
    except ValueError as e:
        # Pydantic validation errors
        raise HTTPException(status_code=400, detail=str(e))
    except Exception as e:
        # Unexpected errors
        raise HTTPException(
            status_code=500, 
            detail=f"Unexpected error during calculation: {str(e)}"
        )
@app.get("/health")
 def health_check():
    return {"status": "healthy"}
 if __name__ == "__main__":
    import uvicorn
    uvicorn.run("main:app", host="0.0.0.0", port=8000, reload=True)
--- a/backend/requirements.txt
+++ b/backend/requirements.txt
@ -0,0 +1,3 @@
 fastapi==0.104.1
 uvicorn[standard]==0.24.0
 pydantic==2.5.0
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -0,0 +1,32 @@
 version: '3.8'
 services:
  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile
    container_name: ip-calculator-backend
    ports:
      - "8000:8000"
    restart: unless-stopped
    healthcheck:
      test: ["CMD", "curl", "-f", "http://localhost:8000/health"]
      interval: 30s
      timeout: 10s
      retries: 3
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    container_name: ip-calculator-frontend
    ports:
      - "3000:80"
    depends_on:
      - backend
    restart: unless-stopped
    healthcheck:
      test: ["CMD", "curl", "-f", "http://localhost:80"]
      interval: 30s
      timeout: 10s
      retries: 3
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@ -0,0 +1,30 @@
 # Build stage
 FROM node:18-alpine as build
 WORKDIR /app
 # Copy package files
 COPY package*.json ./
 # Install dependencies
 RUN npm install
 # Copy application code
 COPY . .
 # Build the application
 RUN npm run build
 # Production stage
 FROM nginx:alpine
 # Copy built files from build stage
 COPY --from=build /app/dist /usr/share/nginx/html
 # Copy nginx configuration
 COPY nginx.conf /etc/nginx/conf.d/default.conf
 # Expose port
 EXPOSE 80
 CMD ["nginx", "-g", "daemon off;"]
--- a/frontend/index.html
+++ b/frontend/index.html
@ -0,0 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>IP Subnet Calculator</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
 </html>
--- a/frontend/nginx.conf
+++ b/frontend/nginx.conf
@ -0,0 +1,14 @@
 server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
    # Gzip compression
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
 }
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@ -0,0 +1,22 @@
 {
  "name": "ip-calculator-frontend",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "axios": "^1.6.2"
  },
  "devDependencies": {
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@vitejs/plugin-react": "^4.2.1",
    "vite": "^5.0.8"
  }
 }
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@ -0,0 +1,515 @@
 .app {
  width: 100%;
 }
 .container {
  background: white;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
 }
 .title {
  font-size: 2.5rem;
  color: #667eea;
  text-align: center;
  margin-bottom: 30px;
  font-weight: 700;
 }
 .mode-toggle {
  display: flex;
  gap: 15px;
  max-width: 600px;
  margin: 0 auto 30px;
  padding: 8px;
  background: #f8f9fa;
  border-radius: 12px;
 }
 .mode-btn {
  flex: 1;
  padding: 14px;
  border: 2px solid transparent;
  background: white;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #666;
 }
 .mode-btn:hover {
  background: #f0f0f0;
 }
 .mode-btn.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
 }
 .form {
  max-width: 600px;
  margin: 0 auto 40px;
 }
 .input-group {
  margin-bottom: 20px;
 }
 .input-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #333;
  font-size: 0.95rem;
 }
 .input-group input {
  width: 100%;
  padding: 12px 16px;
  font-size: 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  transition: all 0.3s ease;
  font-family: 'Courier New', monospace;
 }
 .input-group input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
 }
 .input-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.85rem;
  color: #666;
  font-style: italic;
 }
 .highlight-box {
  background: linear-gradient(135deg, #667eea10 0%, #764ba210 100%);
  border: 2px dashed #667eea;
  border-radius: 12px;
  padding: 20px;
 }
 .highlight-box label {
  color: #667eea;
  font-size: 1.05rem;
 }
 .highlight-box .input-hint {
  background: white;
  padding: 10px;
  border-radius: 6px;
  border-left: 3px solid #667eea;
  font-size: 0.9rem;
  color: #555;
 }
 .input-type-selector {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
 }
 .type-btn {
  flex: 1;
  padding: 12px;
  border: 2px solid #e0e0e0;
  background: white;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
 }
 .type-btn:hover {
  border-color: #667eea;
 }
 .type-btn.active {
  background: #667eea;
  color: white;
  border-color: #667eea;
 }
 .calculate-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 .calculate-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
 }
 .calculate-btn:active:not(:disabled) {
  transform: translateY(0);
 }
 .calculate-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
 }
 .error-message {
  background: #fee;
  border: 2px solid #fcc;
  color: #c33;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  text-align: center;
  font-weight: 600;
 }
 .detailed-error {
  text-align: left;
  line-height: 1.6;
 }
 .error-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: #c33;
 }
 .error-reason {
  background: #fff;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 12px;
  border-left: 4px solid #c33;
 }
 .error-info {
  background: #fff;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: 0.95rem;
 }
 .error-info > div {
  padding: 4px 0;
 }
 .error-suggestions {
  background: #e8f4fd;
  padding: 12px;
  border-radius: 6px;
  border-left: 4px solid #2196F3;
  color: #333;
 }
 .error-suggestions strong {
  color: #1976D2;
  display: block;
  margin-bottom: 8px;
 }
 .error-suggestions ul {
  margin: 0;
  padding-left: 20px;
 }
 .error-suggestions li {
  padding: 4px 0;
  color: #555;
 }
 .warning-message {
  background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
  border: 2px solid #ffc107;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 25px;
  display: flex;
  gap: 15px;
  align-items: flex-start;
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.2);
 }
 .warning-icon {
  font-size: 2rem;
  flex-shrink: 0;
 }
 .warning-content {
  flex: 1;
 }
 .warning-content strong {
  display: block;
  color: #856404;
  font-size: 1.05rem;
  margin-bottom: 8px;
 }
 .warning-text {
  color: #664d03;
  line-height: 1.6;
  padding: 6px 0;
  font-size: 0.95rem;
 }
 .results {
  margin-top: 40px;
  animation: slideIn 0.4s ease;
 }
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
 }
 .results-title {
  font-size: 1.8rem;
  color: #333;
  margin-bottom: 25px;
  text-align: center;
  font-weight: 700;
 }
 .section-title {
  font-size: 1.3rem;
  color: #667eea;
  margin: 30px 0 15px 0;
  font-weight: 700;
  text-align: center;
 }
 .binary-section {
  margin-bottom: 30px;
 }
 .binary-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
 }
 .binary-card {
  background: #f0f4ff;
  border: 2px solid #667eea;
  border-radius: 8px;
  padding: 12px 16px;
  transition: all 0.3s ease;
 }
 .binary-card:hover {
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
 }
 .binary-label {
  font-size: 0.75rem;
  color: #667eea;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
 }
 .binary-decimal {
  font-size: 0.95rem;
  color: #333;
  font-weight: 600;
  font-family: 'Courier New', monospace;
  margin-bottom: 6px;
 }
 .binary-value {
  font-size: 0.9rem;
  color: #666;
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
  word-break: break-all;
 }
 .results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
 }
 .info-card {
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
 }
 .info-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
 }
 .info-card.highlight {
  background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
  border-color: #667eea;
 }
 .info-label {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
 }
 .info-value {
  font-size: 1.2rem;
  color: #333;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  word-break: break-all;
 }
 .division-summary {
  margin-bottom: 30px;
 }
 .subnets-table,
 .ranges-table {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
 }
 .ranges-table .table-header {
  grid-template-columns: 60px 2fr 3fr 2fr 1fr;
 }
 .ranges-table .table-body {
  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
 }
 .ranges-table .table-row {
  grid-template-columns: 60px 2fr 3fr 2fr 1fr;
 }
 .network-address {
  font-weight: 700;
  color: #667eea;
 }
 .range-id {
  font-weight: 700;
  color: #667eea;
  text-align: center;
  font-size: 1rem;
 }
 .table-header {
  display: grid;
  grid-template-columns: 80px 2fr 2.5fr 1.5fr 1fr;
  gap: 10px;
  padding: 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: sticky;
  top: 0;
  z-index: 10;
 }
 .table-row {
  display: grid;
  grid-template-columns: 80px 2fr 2.5fr 1.5fr 1fr;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid #e9ecef;
  transition: background 0.2s ease;
  font-size: 0.9rem;
 }
 .table-row:hover {
  background: #f8f9fa;
 }
 .table-row:last-child {
  border-bottom: none;
 }
 .table-cell {
  font-family: 'Courier New', monospace;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
 }
 .subnet-id {
  font-weight: 700;
  color: #667eea;
  text-align: center;
  font-size: 1.1rem;
 }
 .subnet-network {
  font-weight: 700;
  color: #667eea;
 }
@media (max-width: 768px) {
  .container {
    padding: 20px;
  }
  .title {
    font-size: 1.8rem;
  }
  .results-grid {
    grid-template-columns: 1fr;
  }
  .table-header,
  .table-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .table-cell {
    white-space: normal;
    word-break: break-all;
  }
  .mode-toggle {
    flex-direction: column;
    gap: 10px;
  }
 }
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@ -0,0 +1,362 @@
 import { useState } from 'react'
 import axios from 'axios'
 import './App.css'
 const API_URL = 'http://localhost:8000'
 function App() {
  const [ipAddress, setIpAddress] = useState('')
  const [cidr, setCidr] = useState('24')
  const [subnetMask, setSubnetMask] = useState('')
  const [inputType, setInputType] = useState('cidr') // 'cidr' or 'mask'
  const [result, setResult] = useState(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')
  // Validate IP address format
  const validateIpAddress = (ip) => {
    if (!ip || !ip.trim()) {
      return 'IP address is required'
    }
    const ipPattern = /^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/
    if (!ipPattern.test(ip)) {
      return 'Invalid IP format. Expected: xxx.xxx.xxx.xxx'
    }
    const octets = ip.split('.')
    for (let i = 0; i < octets.length; i++) {
      const num = parseInt(octets[i])
      if (isNaN(num) || num < 0 || num > 255) {
        return `Invalid octet ${i + 1}: must be between 0-255`
      }
    }
    return null
  }
  // Validate subnet mask format
  const validateSubnetMask = (mask) => {
    if (!mask || !mask.trim()) {
      return 'Subnet mask is required'
    }
    const parts = mask.split('.')
    if (parts.length !== 4) {
      return 'Subnet mask must have 4 octets'
    }
    // Check each octet is 0-255
    for (let part of parts) {
      const num = parseInt(part)
      if (isNaN(num) || num < 0 || num > 255) {
        return 'Each octet must be between 0-255'
      }
    }
    // Common valid subnet masks
    const validMasks = [
      '255.255.255.255', '255.255.255.254', '255.255.255.252', '255.255.255.248',
      '255.255.255.240', '255.255.255.224', '255.255.255.192', '255.255.255.128',
      '255.255.255.0', '255.255.254.0', '255.255.252.0', '255.255.248.0',
      '255.255.240.0', '255.255.224.0', '255.255.192.0', '255.255.128.0',
      '255.255.0.0', '255.254.0.0', '255.252.0.0', '255.248.0.0',
      '255.240.0.0', '255.224.0.0', '255.192.0.0', '255.128.0.0',
      '255.0.0.0', '254.0.0.0', '252.0.0.0', '248.0.0.0',
      '240.0.0.0', '224.0.0.0', '192.0.0.0', '128.0.0.0', '0.0.0.0'
    ]
    if (!validMasks.includes(mask)) {
      return 'Invalid subnet mask (bits must be contiguous)'
    }
    return null
  }
  const calculateSubnet = async (e) => {
    e.preventDefault()
    setError('')
    setResult(null)
    // Frontend validation
    const ipError = validateIpAddress(ipAddress)
    if (ipError) {
      setError(ipError)
      return
    }
    if (inputType === 'cidr') {
      const cidrNum = parseInt(cidr)
      if (isNaN(cidrNum) || cidrNum < 0 || cidrNum > 32) {
        setError('CIDR must be between 0 and 32')
        return
      }
    } else {
      const maskError = validateSubnetMask(subnetMask)
      if (maskError) {
        setError(maskError)
        return
      }
    }
    setLoading(true)
    try {
      const payload = {
        ip_address: ipAddress,
      }
      if (inputType === 'cidr') {
        payload.cidr = parseInt(cidr)
      } else {
        payload.subnet_mask = subnetMask
      }
      const response = await axios.post(`${API_URL}/calculate`, payload)
      setResult(response.data)
    } catch (err) {
      const errorMessage = err.response?.data?.detail || err.message || 'Failed to calculate subnet'
      setError(errorMessage)
    } finally {
      setLoading(false)
    }
  }
  const InfoCard = ({ label, value, highlight }) => (
    <div className={`info-card ${highlight ? 'highlight' : ''}`}>
      <div className="info-label">{label}</div>
      <div className="info-value">{value}</div>
    </div>
  )
  const BinaryCard = ({ label, decimal, binary }) => (
    <div className="binary-card">
      <div className="binary-label">{label}</div>
      <div className="binary-decimal">{decimal}</div>
      <div className="binary-value">{binary}</div>
    </div>
  )
  // Calculate ALL next sequential networks based on the current network
  const calculateNetworkRanges = (result) => {
    const networkId = result.network_id
    const cidr = result.cidr
    const totalAddresses = result.total_hosts
    // Parse network ID to get starting IP
    const parts = networkId.split('.').map(Number)
    let networkNum = (parts[0] << 24) + (parts[1] << 16) + (parts[2] << 8) + parts[3]
    const networks = []
    // Calculate all possible networks until end of IPv4 space
    // For performance, limit to 10000 networks max
    const maxNetworks = 10000
    let count = 0
    // Generate next sequential networks
    while (count < maxNetworks) {
      const currentNetworkNum = networkNum + (count * totalAddresses)
      // Check if we're still within valid IPv4 range
      const broadcastNum = currentNetworkNum + totalAddresses - 1
      if (currentNetworkNum > 0xFFFFFFFF || broadcastNum > 0xFFFFFFFF) break
      // Convert number back to IP address
      const networkAddress = `${(currentNetworkNum >>> 24) & 0xFF}.${(currentNetworkNum >>> 16) & 0xFF}.${(currentNetworkNum >>> 8) & 0xFF}.${currentNetworkNum & 0xFF}`
      const broadcastAddress = `${(broadcastNum >>> 24) & 0xFF}.${(broadcastNum >>> 16) & 0xFF}.${(broadcastNum >>> 8) & 0xFF}.${broadcastNum & 0xFF}`
      // Calculate first and last usable IPs
      let firstUsable, lastUsable
      if (cidr === 32) {
        firstUsable = networkAddress
        lastUsable = networkAddress
      } else if (cidr === 31) {
        firstUsable = networkAddress
        lastUsable = broadcastAddress
      } else {
        const firstUsableNum = currentNetworkNum + 1
        const lastUsableNum = broadcastNum - 1
        firstUsable = `${(firstUsableNum >>> 24) & 0xFF}.${(firstUsableNum >>> 16) & 0xFF}.${(firstUsableNum >>> 8) & 0xFF}.${firstUsableNum & 0xFF}`
        lastUsable = `${(lastUsableNum >>> 24) & 0xFF}.${(lastUsableNum >>> 16) & 0xFF}.${(lastUsableNum >>> 8) & 0xFF}.${lastUsableNum & 0xFF}`
      }
      networks.push({
        networkAddress: `${networkAddress}/${cidr}`,
        firstUsable,
        lastUsable,
        broadcastAddress,
        usableHosts: result.usable_hosts
      })
      count++
    }
    return networks
  }
  return (
    <div className="app">
      <div className="container">
        <h1 className="title">🌐 IP Subnet Calculator</h1>
        <form onSubmit={calculateSubnet} className="form">
          <div className="input-group">
            <label htmlFor="ipAddress">IP Address</label>
            <input
              id="ipAddress"
              type="text"
              value={ipAddress}
              onChange={(e) => setIpAddress(e.target.value)}
              placeholder="e.g., 192.168.1.1"
              required
            />
          </div>
          <div className="input-type-selector">
            <button
              type="button"
              className={`type-btn ${inputType === 'cidr' ? 'active' : ''}`}
              onClick={() => setInputType('cidr')}
            >
              CIDR Notation
            </button>
            <button
              type="button"
              className={`type-btn ${inputType === 'mask' ? 'active' : ''}`}
              onClick={() => setInputType('mask')}
            >
              Subnet Mask
            </button>
          </div>
          {inputType === 'cidr' ? (
            <div className="input-group">
              <label htmlFor="cidr">CIDR (1-32)</label>
              <input
                id="cidr"
                type="number"
                min="1"
                max="32"
                value={cidr}
                onChange={(e) => setCidr(e.target.value)}
                required
              />
            </div>
          ) : (
            <div className="input-group">
              <label htmlFor="subnetMask">Subnet Mask</label>
              <input
                id="subnetMask"
                type="text"
                value={subnetMask}
                onChange={(e) => setSubnetMask(e.target.value)}
                placeholder="e.g., 255.255.255.0"
                required
              />
            </div>
          )}
          <button type="submit" className="calculate-btn" disabled={loading}>
            {loading ? 'Calculating...' : 'Calculate Subnet'}
          </button>
        </form>
        {error && (
          <div className="error-message">
            ⚠️ {error}
          </div>
        )}
        {result && (
          <div className="results">
            <h2 className="results-title">Subnet Information</h2>
            {/* Binary Representation Section */}
            <div className="binary-section">
              <h3 className="section-title">Binary Representation</h3>
              <div className="binary-grid">
                <BinaryCard 
                  label="Address" 
                  decimal={result.ip_address} 
                  binary={result.ip_address_binary} 
                />
                <BinaryCard 
                  label="Netmask" 
                  decimal={`${result.subnet_mask} = /${result.cidr}`} 
                  binary={result.subnet_mask_binary} 
                />
                <BinaryCard 
                  label="Wildcard" 
                  decimal={result.wildcard_mask} 
                  binary={result.wildcard_binary} 
                />
                <BinaryCard 
                  label="Network" 
                  decimal={`${result.network_id}/${result.cidr}`} 
                  binary={result.network_id_binary} 
                />
                <BinaryCard 
                  label="Broadcast" 
                  decimal={result.broadcast_address} 
                  binary={result.broadcast_binary} 
                />
              </div>
            </div>
            {/* Main Information Section */}
            <h3 className="section-title">Network Details</h3>
            <div className="results-grid">
              <InfoCard label="Network ID" value={`${result.network_id}/${result.cidr}`} highlight />
              <InfoCard label="Broadcast Address" value={result.broadcast_address} highlight />
              <InfoCard label="First Usable IP" value={result.first_usable_ip} />
              <InfoCard label="Last Usable IP" value={result.last_usable_ip} />
              <InfoCard label="Total Addresses" value={result.total_hosts.toLocaleString()} highlight />
              <InfoCard label="Usable Hosts" value={result.usable_hosts.toLocaleString()} highlight />
              <InfoCard label="Subnet Mask" value={result.subnet_mask} />
              <InfoCard label="Wildcard Mask" value={result.wildcard_mask} />
              <InfoCard label="Network Class" value={result.network_class} />
              <InfoCard label="IP Type" value={result.ip_type} />
              <InfoCard 
                label="Private IP" 
                value={result.is_private ? '✅ Yes' : '❌ No'} 
              />
            </div>
            {/* Next Networks Section */}
            <h3 className="section-title">
              📊 All Next Sequential Networks ({calculateNetworkRanges(result).length.toLocaleString()} networks)
            </h3>
            <div className="ranges-table">
              <div className="table-header">
                <div className="table-cell">#</div>
                <div className="table-cell">Network</div>
                <div className="table-cell">Usable Range</div>
                <div className="table-cell">Broadcast</div>
                <div className="table-cell">Hosts</div>
              </div>
              <div className="table-body">
                {calculateNetworkRanges(result).map((network, index) => (
                  <div key={index} className="table-row">
                    <div className="table-cell range-id">{index + 1}</div>
                    <div className="table-cell network-address">{network.networkAddress}</div>
                    <div className="table-cell">{network.firstUsable} - {network.lastUsable}</div>
                    <div className="table-cell">{network.broadcastAddress}</div>
                    <div className="table-cell">{network.usableHosts.toLocaleString()}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  )
 }
 export default App
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@ -0,0 +1,22 @@
 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
 }
 body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  padding: 20px;
 }
 #root {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
 }
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@ -0,0 +1,10 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
 import './index.css'
 ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
 )
--- a/frontend/src/subnetCalculator.js
+++ b/frontend/src/subnetCalculator.js
@ -0,0 +1,292 @@
 /**
 * Pure subnet calculation utilities for IPv4
 * No DOM/UI dependencies - pure mathematical functions
 */
 /**
 * Convert IPv4 string to 32-bit unsigned integer
 * @param {string} ipStr - IPv4 address (e.g., "192.168.10.0")
 * @returns {number} 32-bit unsigned integer
 * @throws {Error} if invalid IPv4 format
 * 
 * Example: ipToInt("192.168.10.0") => 3232238080
 */
 export function ipToInt(ipStr) {
  if (!ipStr || typeof ipStr !== 'string') {
    throw new Error('IP address must be a non-empty string')
  }
  const octets = ipStr.split('.')
  if (octets.length !== 4) {
    throw new Error(`Invalid IPv4 format: ${ipStr}`)
  }
  let result = 0
  for (let i = 0; i < 4; i++) {
    const octet = parseInt(octets[i], 10)
    if (isNaN(octet) || octet < 0 || octet > 255) {
      throw new Error(`Invalid octet in IP ${ipStr}: ${octets[i]}`)
    }
    result = (result << 8) | octet
  }
  return result >>> 0 // Ensure unsigned 32-bit
 }
 /**
 * Convert 32-bit unsigned integer to IPv4 string
 * @param {number} ipInt - 32-bit unsigned integer
 * @returns {string} IPv4 address
 * 
 * Example: intToIp(3232238080) => "192.168.10.0"
 */
 export function intToIp(ipInt) {
  const uint = ipInt >>> 0 // Ensure unsigned
  const octet1 = (uint >>> 24) & 0xFF
  const octet2 = (uint >>> 16) & 0xFF
  const octet3 = (uint >>> 8) & 0xFF
  const octet4 = uint & 0xFF
  return `${octet1}.${octet2}.${octet3}.${octet4}`
 }
 /**
 * Calculate subnet mask as 32-bit integer from prefix length
 * @param {number} prefixLength - CIDR prefix (0-32)
 * @returns {number} 32-bit subnet mask
 * 
 * Example: maskFromPrefix(24) => 4294967040 (255.255.255.0)
 */
 export function maskFromPrefix(prefixLength) {
  if (prefixLength < 0 || prefixLength > 32) {
    throw new Error(`Prefix length must be between 0 and 32, got: ${prefixLength}`)
  }
  if (prefixLength === 0) {
    return 0
  }
  return (0xFFFFFFFF << (32 - prefixLength)) >>> 0
 }
 /**
 * Calculate the smallest prefix length needed for desired usable hosts
 * For IPv4: usable hosts = 2^h - 2 (excluding network and broadcast)
 * 
 * @param {number} desiredUsableHosts - Number of usable hosts needed
 * @returns {number} CIDR prefix length (0-30)
 * @throws {Error} if invalid input
 * 
 * Examples:
 *   prefixFromHosts(50) => 26 (2^6 - 2 = 62 usable hosts)
 *   prefixFromHosts(10) => 28 (2^4 - 2 = 14 usable hosts)
 *   prefixFromHosts(1) => 30 (2^2 - 2 = 2 usable hosts)
 *   prefixFromHosts(254) => 24 (2^8 - 2 = 254 usable hosts)
 */
 export function prefixFromHosts(desiredUsableHosts) {
  if (!Number.isInteger(desiredUsableHosts) || desiredUsableHosts < 1) {
    throw new Error(`Desired usable hosts must be a positive integer, got: ${desiredUsableHosts}`)
  }
  // Maximum usable hosts in IPv4 is 2^30 - 2 (prefix /2)
  if (desiredUsableHosts > 1073741822) {
    throw new Error(`Desired hosts ${desiredUsableHosts} exceeds IPv4 maximum (1,073,741,822)`)
  }
  // Find smallest h where 2^h - 2 >= desiredUsableHosts
  // This means 2^h >= desiredUsableHosts + 2
  const requiredTotal = desiredUsableHosts + 2
  // Find h: smallest integer where 2^h >= requiredTotal
  let h = 0
  while ((1 << h) < requiredTotal) {
    h++
  }
  // Prefix length = 32 - h
  const prefix = 32 - h
  // Ensure we don't return /31 or /32 (no usable hosts in standard model)
  if (prefix > 30) {
    return 30 // /30 gives 2 usable hosts
  }
  return prefix
 }
 /**
 * Align an IP address to the network boundary for a given prefix
 * @param {number} ipInt - IP address as 32-bit integer
 * @param {number} prefixLength - CIDR prefix length
 * @returns {number} Aligned network address
 * 
 * Example: alignToNetwork(ipToInt("192.168.10.5"), 24) => ipToInt("192.168.10.0")
 */
 export function alignToNetwork(ipInt, prefixLength) {
  const mask = maskFromPrefix(prefixLength)
  return (ipInt & mask) >>> 0
 }
 /**
 * Calculate subnets based on base network, desired hosts per subnet, and subnet count
 * 
 * @param {string} baseNetwork - Base IPv4 address (e.g., "192.168.10.0")
 * @param {number} desiredUsableHosts - Number of usable hosts needed per subnet
 * @param {number} subnetCount - Number of subnets to generate
 * @returns {Object} Subnet calculation results
 * 
 * Example:
 *   calculateSubnets("192.168.10.0", 50, 4)
 *   => {
 *        prefixLength: 26,
 *        subnetMask: "255.255.255.192",
 *        totalAddressesPerSubnet: 64,
 *        usableHostsPerSubnet: 62,
 *        alignedBaseNetwork: "192.168.10.0",
 *        warnings: [],
 *        subnets: [
 *          { index: 0, network: "192.168.10.0/26", firstUsable: "192.168.10.1", 
 *            lastUsable: "192.168.10.62", broadcast: "192.168.10.63" },
 *          { index: 1, network: "192.168.10.64/26", firstUsable: "192.168.10.65",
 *            lastUsable: "192.168.10.126", broadcast: "192.168.10.127" },
 *          ...
 *        ]
 *      }
 */
 export function calculateSubnets(baseNetwork, desiredUsableHosts, subnetCount) {
  const warnings = []
  // Validate inputs
  if (!baseNetwork || typeof baseNetwork !== 'string') {
    throw new Error('Base network must be a valid IPv4 string')
  }
  if (!Number.isInteger(desiredUsableHosts) || desiredUsableHosts < 1) {
    throw new Error('Desired usable hosts must be a positive integer')
  }
  if (!Number.isInteger(subnetCount) || subnetCount < 1) {
    throw new Error('Subnet count must be a positive integer')
  }
  // Convert base network to integer
  let baseInt
  try {
    baseInt = ipToInt(baseNetwork)
  } catch (err) {
    throw new Error(`Invalid base network: ${err.message}`)
  }
  // Calculate required prefix length
  const prefixLength = prefixFromHosts(desiredUsableHosts)
  if (prefixLength < 0 || prefixLength > 30) {
    throw new Error(`Calculated prefix length ${prefixLength} is out of valid range (0-30)`)
  }
  // Calculate subnet properties
  const hostBits = 32 - prefixLength
  const totalAddressesPerSubnet = Math.pow(2, hostBits)
  const usableHostsPerSubnet = totalAddressesPerSubnet - 2 // Exclude network and broadcast
  const subnetMaskInt = maskFromPrefix(prefixLength)
  const subnetMask = intToIp(subnetMaskInt)
  // Align base network to proper boundary
  const alignedBaseInt = alignToNetwork(baseInt, prefixLength)
  const alignedBaseNetwork = intToIp(alignedBaseInt)
  if (alignedBaseInt !== baseInt) {
    warnings.push(
      `Base network ${baseNetwork} is not aligned to /${prefixLength} boundary. ` +
      `Adjusted to ${alignedBaseNetwork}`
    )
  }
  // Generate subnets
  const subnets = []
  const maxIpInt = 0xFFFFFFFF // Maximum IPv4 address
  for (let i = 0; i < subnetCount; i++) {
    const networkInt = alignedBaseInt + (i * totalAddressesPerSubnet)
    // Check for overflow
    if (networkInt > maxIpInt) {
      warnings.push(
        `Subnet generation stopped at index ${i} due to IPv4 address space overflow. ` +
        `Requested ${subnetCount} subnets but only ${i} can fit.`
      )
      break
    }
    const broadcastInt = networkInt + totalAddressesPerSubnet - 1
    // Check if broadcast would overflow
    if (broadcastInt > maxIpInt) {
      warnings.push(
        `Subnet ${i} would exceed IPv4 address space. ` +
        `Generated ${i} subnets out of ${subnetCount} requested.`
      )
      break
    }
    const firstUsableInt = networkInt + 1
    const lastUsableInt = broadcastInt - 1
    subnets.push({
      index: i,
      network: `${intToIp(networkInt)}/${prefixLength}`,
      networkAddress: intToIp(networkInt),
      firstUsable: intToIp(firstUsableInt),
      lastUsable: intToIp(lastUsableInt),
      broadcast: intToIp(broadcastInt)
    })
  }
  return {
    prefixLength,
    subnetMask,
    totalAddressesPerSubnet,
    usableHostsPerSubnet,
    alignedBaseNetwork,
    warnings,
    subnets
  }
 }
 /**
 * Test examples (can be run in console or test suite)
 */
 export const testExamples = {
  // Example 1: 50 hosts => /26
  example1: () => {
    console.log('Example 1: 50 hosts per subnet')
    const result = calculateSubnets('192.168.10.0', 50, 4)
    console.log('Prefix:', result.prefixLength) // 26
    console.log('Subnet Mask:', result.subnetMask) // 255.255.255.192
    console.log('Usable Hosts:', result.usableHostsPerSubnet) // 62
    console.log('First subnet:', result.subnets[0])
    return result
  },
  // Example 2: Unaligned base network
  example2: () => {
    console.log('Example 2: Unaligned base network')
    const result = calculateSubnets('192.168.10.5', 10, 2)
    console.log('Aligned to:', result.alignedBaseNetwork) // 192.168.10.0
    console.log('Warnings:', result.warnings)
    return result
  },
  // Example 3: Large subnet
  example3: () => {
    console.log('Example 3: 1000 hosts per subnet')
    const result = calculateSubnets('10.0.0.0', 1000, 3)
    console.log('Prefix:', result.prefixLength) // 22
    console.log('Usable Hosts:', result.usableHostsPerSubnet) // 1022
    return result
  }
 }
 // Uncomment to run examples:
 // testExamples.example1()
 // testExamples.example2()
 // testExamples.example3()
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@ -0,0 +1,9 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
  },
 })
--- a/values.yaml
+++ b/values.yaml
@ -0,0 +1,72 @@
 # Basic configuration values for IP Calculator application
 # Application metadata
 app:
  name: ip-calculator
  version: "1.0.0"
  description: "IP Subnet Calculator with React + Vite frontend and FastAPI backend"
 # Backend configuration
 backend:
  port: 8000
  host: "0.0.0.0"
  apiUrl: "http://localhost:8000"
  cors:
    enabled: true
    origins:
      - "http://localhost:3000"
      - "http://localhost:5173"
 # Frontend configuration
 frontend:
  port: 3000
  apiUrl: "http://localhost:8000"
 # Development settings
 development:
  hotReload: true
  debug: true
 # Production settings
 production:
  debug: false
  minify: true
 # Docker configuration
 docker:
  backend:
    image: "ip-calculator-backend"
    tag: "latest"
  frontend:
    image: "ip-calculator-frontend"
    tag: "latest"
 # Kubernetes/Helm configuration (for helm chart)
 kubernetes:
  namespace: "default"
  replicas:
    backend: 1
    frontend: 1
  resources:
    backend:
      limits:
        cpu: "500m"
        memory: "512Mi"
      requests:
        cpu: "250m"
        memory: "256Mi"
    frontend:
      limits:
        cpu: "200m"
        memory: "256Mi"
      requests:
        cpu: "100m"
        memory: "128Mi"
 # Ingress configuration
 ingress:
  enabled: false
  host: "ip-calculator.example.com"
  tls:
    enabled: false
    secretName: "ip-calculator-tls"