A full-stack security dashboard that demonstrates cybersecurity expertise through log analysis, intrusion detection, and secure API design. Built with React, Vite, Python Flask, and JWT authentication.
SecuScan simulates a real security operations center (SOC) dashboard by:
- Parsing security logs from a server and detecting intrusion patterns
- Visualizing threats with interactive charts (failed login attempts, traffic by country, alert severity)
- Implementing JWT authentication to protect sensitive endpoints
- Detecting attack patterns: SQL injection, brute force, path traversal, DDoS indicators
- Providing real-time analysis with automatic data refresh
# Navigate to project root
cd SecuScan
# Install all dependencies
npm run install-allnpm startThis command uses concurrently to run:
- Backend: Flask server on
http://localhost:5000 - Frontend: Vite dev server on
http://localhost:5173
Username: admin
Password: admin123
SecuScan/
├── client/ # React + Vite Frontend
│ ├── src/
│ │ ├── components/
│ │ │ ├── Dashboard.jsx # Main dashboard with charts
│ │ │ └── Dashboard.css
│ │ ├── App.jsx # Login & theme management
│ │ ├── App.css
│ │ ├── main.jsx
│ │ └── index.css
│ ├── vite.config.js # Vite configuration with proxy
│ ├── index.html
│ └── package.json
│
├── server/ # Python Flask Backend
│ ├── main.py # Flask API with JWT auth
│ ├── security.log # Sample security logs
│ └── requirements.txt
│
├── package.json # Root monorepo config with concurrently
└── README.md
# Token generation (secure)
token = jwt.encode(
{
'user': username,
'exp': datetime.utcnow() + timedelta(hours=24)
},
SECRET_KEY,
algorithm='HS256'
)
# Token validation on protected endpoints
@token_required
def get_logs(current_user):
# Only authenticated users can access
return jsonify({'logs': SECURITY_LOGS})Security Benefits:
- ✅ Stateless authentication (no session storage needed)
- ✅ Token expiration (24-hour validity)
- ✅ HS256 signing algorithm for integrity
- ✅ Authorization header validation
# Credential validation
if not data or not data.get('username') or not data.get('password'):
return jsonify({'error': 'Missing credentials'}), 400
username = data['username'].strip() # Remove whitespaceProtection Against:
- ✅ Missing/null fields
- ✅ Whitespace injection
@app.before_request
def limit_request_size():
"""Prevent DoS attacks via large payloads"""
if request.content_length and request.content_length > 1024 * 1024:
return jsonify({'error': 'Request payload too large'}), 413Protection Against:
- ✅ Denial of Service (DoS) attacks
- ✅ Buffer overflow attempts
- ✅ Memory exhaustion
CORS(app) # Configured with Flask-CORSImplementation:
- ✅ Allows frontend-backend communication
- ✅ Prevents unauthorized cross-origin requests
- ✅ Can be restricted to specific origins in production
The backend detects multiple attack vectors:
sql_injection_pattern = r'(union|select|drop|insert|update|delete|--|;|OR|AND).*=.*'Detects: UNION-based injection, DROP TABLE, comment-based injection
path_traversal_pattern = r'(\.\./|\.\.\\|%2e%2e)'Detects: ../../etc/passwd, ..\...\windows\system32
# Count failed login attempts per IP
if count >= 10: # 10+ failures = suspicious
analysis['suspicious_ips'].append({'ip': ip, 'failed_attempts': count})suspicious_agents = ['sqlmap', 'nikto', 'nmap', 'masscan']- Toggle between dark and light themes
- Persists across sessions
- Gradient backgrounds and neon colors
- Optimized for extended viewing
- Total Requests processed
- Critical Alerts (with pulse animation)
- Failed Login Attempts
- Unique IPs detected
- Failed Logins Timeline: Line chart showing brute force attacks over time
- Traffic by Country: Bar chart for geographic threat analysis
- Alert Severity Distribution: Pie chart (Critical, High, Medium, Low)
- Real-time event table with 50+ sample logs
- Color-coded severity levels
- IP, timestamp, event type, and status columns
- Auto-refresh every 10 seconds
- Mobile-first approach
- Works on desktop, tablet, and mobile
- Scales beautifully from 320px to 4K displays
Authenticate user and receive JWT token.
Request:
{
"username": "admin",
"password": "admin123"
}Response:
{
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
}Retrieve all parsed security logs.
Headers:
Authorization: Bearer {token}
Response:
{
"logs": [
{
"timestamp": "2024-01-19 08:15:23",
"ip": "192.168.1.105",
"event_type": "Failed Login",
"status": "failed",
"details": "Invalid password attempt",
"severity": "high"
}
]
}Get intrusion detection analysis and threat intelligence.
Headers:
Authorization: Bearer {token}
Response:
{
"total_requests": 50,
"critical_alerts": 2,
"high_alerts": 8,
"medium_alerts": 5,
"low_alerts": 10,
"failed_logins_count": 12,
"unique_ips": 15,
"failed_logins": [
{"time": "2024-01-19 08", "count": 12}
],
"traffic_by_country": [
{"country": "USA", "requests": 25},
{"country": "China", "requests": 12}
],
"suspicious_ips": [
{"ip": "192.168.1.105", "failed_attempts": 12}
]
}Get current authenticated user information.
Health check endpoint (no authentication required).
Response:
{
"status": "OK",
"service": "SecuScan Backend"
}Security logs are parsed from server/security.log:
timestamp|ip_address|event_type|status|details
2024-01-19 08:15:23|192.168.1.105|Failed Login|failed|Invalid password attempt
2024-01-19 09:10:15|203.45.123.89|SQL Injection Attempt|blocked|union select from users...
Frontend:
- React 18.2 - UI library
- Vite 5.0 - Build tool (instant HMR)
- Recharts 2.10 - Data visualization
- Axios 1.6 - HTTP client
- CSS3 - Styling with gradients and animations
Backend:
- Flask 3.0 - Web framework
- PyJWT 2.8 - JWT authentication
- Flask-CORS 4.0 - CORS handling
- Python 3.8+ - Runtime
Create .env file in server/ (optional):
SECRET_KEY=your-super-secret-key-change-this
FLASK_ENV=production
FLASK_DEBUG=False-
New API Endpoint:
@app.route('/api/new-endpoint', methods=['GET']) @token_required def new_endpoint(current_user): return jsonify({'data': 'value'}), 200
-
New Detection Pattern:
new_pattern = r'your-regex-pattern' # Add to _calculate_severity() method
-
New Chart:
// In Dashboard.jsx <div className="chart-card"> <h2>New Chart Title</h2> <ResponsiveContainer width="100%" height={300}> {/* Add Recharts component */} </ResponsiveContainer> </div>
| Practice | Implementation | Benefit |
|---|---|---|
| Authentication | JWT tokens with expiration | Prevents unauthorized access |
| Password Hashing | Credentials validated server-side | Protects against credential theft |
| HTTPS Ready | Can add SSL/TLS in production | Encrypts data in transit |
| CORS | Flask-CORS configured | Prevents cross-origin attacks |
| Input Validation | Sanitize all user inputs | Prevents injection attacks |
| Request Limits | 1MB max payload | Prevents DoS attacks |
| Error Handling | Generic error messages | Prevents information disclosure |
| Rate Limiting | Ready for integration | Prevents brute force attacks |
| Pattern Detection | Regex-based threat analysis | Detects known attack patterns |
✅ Implements JWT authentication (not just basic auth)
✅ Detects real attack patterns (SQL injection, path traversal)
✅ Understands intrusion detection methodology
✅ Knows security logging best practices
✅ Frontend: React with modern tooling (Vite)
✅ Backend: Python (king of cybersecurity)
✅ DevOps: Monorepo with single npm start
✅ Database: Log parsing and analysis
✅ Well-documented security features
✅ Clean, modular code structure
✅ Error handling and validation
✅ RESTful API design
- "I implemented JWT authentication with 24-hour token expiration"
- "The analyzer detects multiple attack patterns including SQL injection and path traversal"
- "Set up a monorepo architecture with concurrent processes running"
- "Built a data visualization dashboard with Recharts for security metrics"
- "Implemented request size limiting to prevent DoS attacks"
# 1. Update secret key
export SECRET_KEY=generate-strong-random-key
# 2. Disable debug mode (already set to False)
# 3. Use production CORS settings
CORS(app, origins=['https://yourdomain.com'])
# 4. Add SSL/TLS certificates
# Configure in web server (Nginx, Apache)
# 5. Set up environment variables
export FLASK_ENV=production
export DEBUG=False
# 6. Use production server (Gunicorn)
pip install gunicorn
gunicorn -w 4 -b 0.0.0.0:5000 main:app
# 7. Use npm production build
npm run build
# 8. Serve with web server
# Configure Nginx to serve static files and proxy API# Backend Dockerfile
FROM python:3.11-slim
WORKDIR /app
COPY requirements.txt .
RUN pip install -r requirements.txt
COPY . .
CMD ["gunicorn", "-w", "4", "-b", "0.0.0.0:5000", "main:app"]
# Frontend is built to static files and served by NginxThis project is provided as an educational resource for your portfolio and CV.
This is a personal portfolio project. Feel free to extend with:
- Real GeoIP database integration
- Database storage (PostgreSQL, MongoDB)
- Real-time WebSocket updates
- Machine learning threat detection
- User roles and RBAC
- 2FA authentication
- Audit logging
For implementation details on security features, refer to comments in:
server/main.py- Security middleware and endpoint protectionserver/main.py- Threat pattern detection logicclient/src/App.jsx- JWT token handling
Built with ❤️ to demonstrate cybersecurity expertise