SecureEntryHub is a modern React + TypeScript Security Operations Center (SOC) frontend template with 28 specialized security module UIs. Built for developers, cybersecurity consultants, MSSPs, and teams who need a complete, polished frontend to build on — without starting from scratch. Every module is fully designed and wired to a local mock data layer so you can run the full demo instantly without a backend.

Connect your own REST API, GraphQL service, Firebase, or any backend to replace mock data and go live. The architecture is designed for clean separation between UI and data layer, making integration straightforward.

28 Security Module UIs Across 10 Categories

• Threat Intelligence & Analysis – Feed dashboards, IOC tables, enrichment views
• Incident Response & Management – Lifecycle tracker, playbook UI, case management
• Digital Forensics & Malware Analysis – Evidence viewer, analysis workflows, custody log UI
• Alert Detection & Correlation – Alert queue, rule builder UI, multi-source correlation view
• Threat Hunting & APT Detection – Hunt workspace, behavioral timeline, threat tracker
• Compliance & Risk Management – SOC 2, ISO 27001, NIST, GDPR report UIs
• Vulnerability & Asset Management – Asset inventory, vulnerability list, remediation tracker
• Security Awareness Training – Course management, competency tracking, certification views
• Access Control & Administration – Role management UI, audit trail viewer, user lifecycle
• Enterprise Integration & SOAR – Integration dashboard, webhook config UI, connector screens

Role-Based Access Control (4 Demo Roles)

The demo ships with 4 hard-coded roles for evaluation. Role logic is centralized in the codebase and can be refactored to connect to your own auth and permissions backend.

Technology Stack

• React 19 with modern concurrent rendering
• TypeScript — full type safety across all 28 modules
• Tailwind CSS — utility-first, fully responsive design
• Vite — fast development and optimized production builds
• Mock Data Services — structured local data simulating enterprise security datasets
• Local Storage — demo persistence (replaceable with your database)

Use Cases

• SOC Platform Development: Use as your frontend foundation and connect your own backend
• Team Training: Hands-on security operations training with realistic UI
• Client Demos: Show stakeholders a complete SOC workflow without live data
• MSSP Presentations: Demonstrate platform capabilities to prospects
• Prototyping: Rapidly prototype and validate SOC tool concepts
• Portfolio Projects: Showcase a full-scale security platform UI

Installation & Setup

Prerequisites

• Node.js v18+ (LTS recommended)
• npm v8+ or yarn v3+
• Modern browser: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+

Step 1: Run the Demo

npm install
npm run dev

Application launches at http://localhost:5173 with all 28 modules running on mock data.

Step 2: Demo Login Credentials

These are hard-coded demo credentials for local evaluation only. They are not connected to any auth service.

Step 3: Connecting Your Backend (Integration Guide)

The mock data layer is located in src/services/mock/. Replace any mock service file with your real API calls (REST, GraphQL, Firebase, Supabase, etc.) to go live. No architectural changes are needed — the UI components consume data through service interfaces, not hard-coded values.

Example: Connecting Firebase Auth

The demo auth is hard-coded and local. To connect Firebase Authentication, install the Firebase SDK and replace the auth service layer with your Firebase config. A sample firebase.config.ts template is included in the docs/ folder as a starting point.

npm install firebase

Step 4: Integration-Ready UI Screens

SecureEntryHub includes pre-built UI screens and mock workflows designed around industry-standard security tools. These are frontend interfaces only — no live API connections are included out of the box. You can wire these screens to real APIs from tools such as:

• SIEM: Splunk, QRadar, ArcSight, Elasticsearch — UI screens ready for API integration
• Threat Intelligence: MISP, ThreatConnect, Anomali, AlienVault OTX — feed display UIs included
• Endpoint Detection: CrowdStrike, SentinelOne, Carbon Black, Tanium — alert and endpoint UIs included
• Vulnerability Management: Nessus, Qualys, Tenable, Rapid7 — scan result and remediation UIs included

Connect these by replacing the corresponding mock service in src/services/mock/ with your real API client.

Step 5: Build & Deploy

npm run build
npm run preview