SecureNet Monitoring Platform

A full-stack real-time network security monitoring platform built with React, Node.js, and MongoDB.

Features

• Real-Time Traffic Monitoring: Live network traffic visualization with WebSocket streaming
• Threat Detection System: Signature-based detection for malicious IPs and suspicious ports
• Automated Response Mechanism: IP blocking, rate limiting, and alert notifications
• Role-Based Authentication: JWT-based auth with Admin/User roles
• Interactive Dashboard: Live charts, threat feeds, and comprehensive monitoring
• Historical Data: Alert history with filtering and export capabilities

Tech Stack

Frontend

• React 18 with TypeScript
• Tailwind CSS for styling
• Recharts for data visualization
• Socket.IO client for real-time updates
• React Router for navigation

Backend

• Node.js with Express.js
• Socket.IO for real-time communication
• MongoDB with Mongoose ODM
• JWT authentication
• bcryptjs for password hashing

Quick Start

Prerequisites

• Node.js (v16 or higher)
• MongoDB (local or cloud instance)
• npm or yarn

Installation

1. Clone the repository

git clone <your-repo-url>
cd securenet-monitoring

2. Install dependencies

# Install frontend dependencies
npm install

# Install backend dependencies
cd server
npm install
cd ..

3. Environment Setup Create a .env file in the root directory:

MONGODB_URI=mongodb://localhost:27017/securenet
JWT_SECRET=your-super-secret-jwt-key-here
JWT_EXPIRE=24h
PORT=3001

4. Start MongoDB Make sure MongoDB is running on your system.

5. Run the application

Start the backend server:

cd server
node index.js

Start the frontend development server:

npm run dev

The application will be available at:

• Frontend: http://localhost:5173
• Backend API: http://localhost:3001

Default Credentials

A default admin user is created automatically:

• Email: [email protected]
• Password: admin123
• Role: Admin

Project Structure

SecureNet/
├── src/                     # React frontend
│   ├── components/          # Reusable components
│   │   ├── Auth/           # Authentication components
│   │   ├── Charts/         # Chart components
│   │   ├── Dashboard/      # Dashboard components
│   │   ├── Layout/         # Layout components
│   │   ├── Threats/        # Threat-related components
│   │   └── Traffic/        # Traffic monitoring components
│   ├── contexts/           # React contexts
│   ├── pages/              # Page components
│   ├── services/           # API services
│   └── App.tsx             # Main app component
├── server/                 # Node.js backend
│   ├── models/             # MongoDB models
│   ├── routes/             # API routes
│   ├── middleware/         # Custom middleware
│   ├── services/           # Business logic services
│   ├── sockets/            # Socket.IO handlers
│   └── index.js            # Server entry point
├── public/                 # Static assets
└── package.json            # Dependencies and scripts

API Endpoints

Authentication

• POST /api/auth/register - User registration
• POST /api/auth/login - User login
• GET /api/auth/me - Get current user

Traffic

• GET /api/traffic - Get traffic data
• GET /api/traffic/stats - Get traffic statistics

Alerts

• GET /api/alerts - Get alerts with filtering
• PATCH /api/alerts/:id/status - Update alert status

Responses

• GET /api/responses - Get response history
• POST /api/responses - Create new response (Admin only)

Socket.IO Events

Client to Server

• subscribe-to-traffic - Subscribe to traffic updates
• subscribe-to-threats - Subscribe to threat updates

Server to Client

• traffic-update - Real-time traffic data
• threat-detected - New threat detected

Database Collections

users

• User authentication and role management

traffic_logs

• Network traffic data with timestamps, IPs, ports, protocols

alerts

• Security alerts with severity levels and status

responses

• Automated response actions and their results

Features Overview

Dashboard

• Real-time metrics and KPIs
• Live traffic visualization
• Recent threats feed
• System status indicators

Traffic Monitor

• Live and historical traffic data
• Protocol and status filtering
• Bandwidth usage charts
• Export functionality

Threat Center

• Active threat management
• Geographic threat mapping
• Severity-based filtering
• Status updates

Response Center

• Automated response triggers (Admin only)
• Response history and status
• Action configuration

Alert History

• Historical alert data
• Advanced filtering and search
• Date range selection
• CSV export

Security Features

• JWT-based authentication
• Role-based access control
• Password hashing with bcrypt
• Input validation and sanitization
• CORS configuration
• Secure headers

Development

Adding New Features

1. Create components in appropriate directories
2. Add API routes in server/routes/
3. Update MongoDB models if needed
4. Add Socket.IO events for real-time features

Testing

• Frontend: React Testing Library
• Backend: Jest with Supertest
• Database: MongoDB Memory Server for testing

Deployment

Frontend (Netlify/Vercel)

npm run build
# Deploy dist/ folder

Backend (Heroku/Railway/DigitalOcean)

# Set environment variables
# Deploy server/ directory

Database

• MongoDB Atlas (recommended)
• Self-hosted MongoDB instance

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

MIT License - see LICENSE file for details

Support

For issues and questions:

• Create an issue on GitHub
• Check the documentation
• Review the code comments

---

Built with Yafet-Yilma for network security monitoring