Port Manager

A modern, beautiful web UI to monitor and manage all running ports on your system.
Search, filter, inspect, and kill processes — all from your browser.

---

Features

• Live Port Listing — Scans all listening TCP/UDP ports and displays them in a clean table
• Kill Processes — Terminate any process directly from the UI with a confirmation dialog
• Cross-Platform — Toggle between macOS, Linux, and Windows (uses OS-native commands)
• Process Details Drawer — Click any row to see CPU, memory, full command, open files, and network connections
• Stats Dashboard — At-a-glance cards showing total ports, TCP/UDP breakdown, and top process
• Protocol Filter — Filter by ALL, TCP, or UDP with one click
• Search — Instantly filter by port number, process name, or PID
• Pagination — Clean paginated table (10 per page) with smart page numbers
• Dark / Light Mode — Toggle themes with persistence across sessions
• Responsive — Works on desktop, tablet, and mobile

Quick Start

Prerequisites

• Node.js 18+ installed
• npm, yarn, or pnpm

Installation

# Clone the repository
git clone https://github.com/<your-username>/port-manager.git
cd port-manager

# Install dependencies
npm install

# Start the development server
npm run dev

Open http://localhost:3000 in your browser.

Production Build

npm run build
npm start

How It Works

Component	Description
GET /api/ports	Lists all listening ports using lsof (macOS), ss/netstat (Linux), or netstat -ano (Windows)
POST /api/kill	Kills a process by PID using kill -9 (Unix) or taskkill /F (Windows)
GET /api/process-details	Fetches detailed info — CPU, memory, parent PID, start time, open files, connections

All commands run server-side via Next.js API routes. The frontend is a single React client component with no external UI dependencies.

Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router)
Language	TypeScript 5
Styling	Tailwind CSS 4
Runtime	Node.js (child_process for system commands)
UI	Pure React — zero external component libraries

Project Structure

port-manager/
├── src/
│   └── app/
│       ├── page.tsx                    # Main UI
│       ├── layout.tsx                  # Root layout & metadata
│       ├── globals.css                 # Theme, animations, utilities
│       └── api/
│           ├── ports/route.ts          # List ports endpoint
│           ├── kill/route.ts           # Kill process endpoint
│           └── process-details/route.ts # Process details endpoint
├── public/                             # Static assets
├── LICENSE                             # MIT License
├── CONTRIBUTING.md                     # Contribution guide
├── CODE_OF_CONDUCT.md                  # Community guidelines
└── README.md

Screenshots

Dark Mode	Light Mode

Note: Add your own screenshots to public/ — take a screenshot of the app and save as screenshot-dark.png and screenshot-light.png.

Roadmap

• Auto-refresh with configurable interval
• Bulk select & kill multiple processes
• Column sorting (click headers)
• Export to CSV / JSON
• Process grouping by name
• Favorites / pinned ports
• Command palette (Ctrl+K)
• Real-time activity chart
• Docker container port mapping
• Webhook notifications

Contributing

Contributions are welcome! Please read the Contributing Guide before submitting a PR.

1. Fork the repo
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'feat: add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for details.

---

Built with Next.js, TypeScript, and Tailwind CSS