155 lines
3.2 KiB
Markdown
155 lines
3.2 KiB
Markdown
# 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
|