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:

cd backend

2. Create and activate a virtual environment:

# Windows
python -m venv venv
venv\Scripts\activate

# Linux/Mac
python -m venv venv
source venv/bin/activate

3. Install dependencies:

pip install -r requirements.txt

4. Run the FastAPI server:

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:

cd frontend

2. Install dependencies:

npm install

3. Run the development server:

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:

{
  "ip_address": "192.168.1.1",
  "cidr": 24
}

or

{
  "ip_address": "192.168.1.1",
  "subnet_mask": "255.255.255.0"
}

Response:

{
  "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