YuukiTeam/snifferUI_Better
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
No description
23 commits 1 branch 0 tags 153 KiB
Find a file
Exact
Yuuki f9ece1b615 chore: update package-lock.json
2025-12-08 20:53:37 +08:00
docs feat: Add PCAP upload modal with drag-and-drop functionality, file processing, and monitoring status check. 2025-12-07 08:14:06 +08:00
public feat: Scaffold initial monitor application with core UI components and configuration. 2025-12-06 18:29:28 +08:00
src Rebuild all packet if upload new update proto 2025-12-08 20:52:38 +08:00
.gitignore feat: Implement initial packet monitoring UI with packet table display, search, and sorting. 2025-12-06 19:05:39 +08:00
eslint.config.js feat: Scaffold initial monitor application with core UI components and configuration. 2025-12-06 18:29:28 +08:00
index.html chore: Rename project from monitor to snifferUI Better across files. 2025-12-07 11:27:03 +08:00
package-lock.json chore: update package-lock.json 2025-12-08 20:53:37 +08:00
package.json chore: Rename project from monitor to snifferUI Better across files. 2025-12-07 11:27:03 +08:00
README.md chore: Rename project from monitor to snifferUI Better across files. 2025-12-07 11:27:03 +08:00
tsconfig.app.json chore: disable tsBuildInfoFile, erasableSyntaxOnly, and noUncheckedSideEffectImports, and downgrade tsconfig.node target/lib to ES2022. 2025-12-08 16:29:15 +08:00
tsconfig.json feat: Scaffold initial monitor application with core UI components and configuration. 2025-12-06 18:29:28 +08:00
tsconfig.node.json chore: disable tsBuildInfoFile, erasableSyntaxOnly, and noUncheckedSideEffectImports, and downgrade tsconfig.node target/lib to ES2022. 2025-12-08 16:29:15 +08:00
vite.config.ts feat: Scaffold initial monitor application with core UI components and configuration. 2025-12-06 18:29:28 +08:00

README.md

Packet Monitoring Dashboard

A modern, web-based dashboard for inspecting and monitoring network packets. Built with React, TypeScript, and Vite.

🚀 Features

  • Real-time Monitoring: View a live feed of network packets with timestamp, source, and status.
  • Advanced Search: Filter packets by Name, ID, or content within the JSON payload.
  • Deep Inspection: detailed JSON viewer for inspecting complex packet data.
  • Responsive Design: A modern, dark-themed UI optimized for readability and performance.
  • Mock Data Generation: Integrated mock data generator for testing and development.

🛠 Tech Stack

  • Frontend Framework: React (v19)
  • Language: TypeScript
  • Build Tool: Vite
  • Styling: Vanilla CSS with CSS Variables for theming

📦 Getting Started

Prerequisites

  • Node.js (v18 or higher recommended)
  • npm or yarn

Installation

  1. Clone the repository:

    git clone <repository-url>
cd snifferUI_Better

  2. Install dependencies:

    npm install

  3. Start the development server:

    npm run dev

The application will be available at http://localhost:5173.

📜 Scripts

  • npm run dev: Starts the development server.
  • npm run build: Builds the app for production.
  • npm run lint: Runs ESLint to check for code quality issues.
  • npm run preview: Previews the production build locally.

📂 Project Structure

snifferUI_Better/
├── src/
│   ├── components/      # Reusable UI components (PacketTable, PacketDetail, etc.)
│   ├── types/           # TypeScript interfaces and type definitions
│   ├── utils/           # Utility functions (Mock data generation)
│   ├── App.tsx          # Main application component
│   └── main.tsx         # Application entry point
├── public/              # Static assets
└── package.json         # Project dependencies and scripts

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License.