Cybersecurity dashboard
A data collection dashboard for internal needs of a cybersecurity company
* We developed this project under an NDA, so we can’t disclose its name or provide a link to the product.
Client
Our client is from a cybersecurity company.
They approached us to create a dashboard that conveniently represents the results of the company’s services and gives their employees valuable insights into threats.
Project idea
The dashboard should transform complex cybersecurity data into clear, visual representations through tables and diagrams to improve the company’s internal processes.
The platform would allow employees to filter information, track exploited vulnerabilities, and check recent cybersecurity news. Our client's company set aside a limited budget to test the idea.
Key objectives
Design and develop a functional dashboard within a constrained budget
Develop key features such as data filtering, authentication, and real-time updates
Complete the project within the estimated timeline of 380 hours.
UI/UX design
Our main goal in design was to create a simple and convenient interface to help users find important information quickly.
For UX, we prioritized clarity and avoided unnecessary elements to create a straightforward user journey.
We designed the dashboard’s UI in a dark theme with bright green highlights and light texts, making the needed information visible at a glance.
The company already had a logo, and we integrated it in white color for a consistent and professional look.
Key features
Login
The company’s employees can log in by entering their email and password, with the option to select ‘remember me’ for easier access next time. If there's a mistake, error messages indicate issues like an incorrect email or password. The process is implemented through Auth0 for secure authentication.
Dashboard
The dashboard lets users easily switch between sections. Users can filter data by options like group or country to customize their view.
The platform features charts that display trends in attack damage and case counts. It also offers a table for detailed incident information, making it straightforward to track specific events.
Search
Employees can search incidents by entering keywords and filtering results by parameters like country or industry. When matches exist, users see detailed incident information in a table.
Command & control tracking
Users can view top countries affected by malware and filter data by parameters like malware type, location, date range, and port, helping them identify specific threats. The dashboard features bar charts that clearly show the distribution and frequency of malware attacks.
Exploited vulnerabilities
Users can view top vendors and filter vulnerabilities by parameters like vulnerability ID and vendor name, making it easy to pinpoint specific issues. The platform displays vulnerabilities using a bar chart for top vendors and a line graph for daily counts.
Users can also see detailed descriptions and required actions for each vulnerability.
News feed
The news feed displays articles with details like the title, source, and date added, keeping employees informed on the latest threats and solutions. Users can also filter news by title, source, or date.
Development
We used Next.js for the frontend to create a dynamic user experience. For the backend, we chose Laravel to handle complex data operations efficiently. To organize search and data, we used a PostgreSQL database combined with efficient indexing.
We set up secure password reset features with Laravel’s built-in features, allowing users to recover their passwords via email.
Data was provided to the frontend through RESTful APIs, which are pathways that let the frontend and backend talk to each other. Using the WebSocket protocol, we enabled real-time updates.
Using interactive tables built with React Data Table Libraries, we implemented data presentation and filtering.
Navigation between dashboard sections was handled by Next.js built-in routing. Data fetching for charts and tables was performed with our tool @ronas-it/axios-api-client. We structured all vulnerabilities and incident records in relational tables using robust database migrations.
Integrations
Company’s internal CVE's and vulnerabilities database: To pull data on vulnerabilities and malware.
Google Cloud Storage: For reliable data hosting.
Auth0: For secure authentication.
SSL/TLS and AES: To encrypt data during transit and at rest.
Elasticsearch: For efficient and scalable search capabilities.
News API integration: To fetch cybersecurity news articles and updates.
Our main challenge involved our client’s temporary budget constraints.
We suggested breaking the project into phases so we could keep moving forward without delay while the client got additional funds.
Since cybersecurity dashboards handle sensitive data like login credentials, incident details, and vulnerabilities, they could be exploited if exposed. That’s why another challenge was to secure the dashboard. Technologies that we use provide strong security features. Laravel protects against vulnerabilities like DDoS attacks, SQL injections, and CSRF by default.
We transmit JWT authentication tokens via cookies, ensuring secure session management. We use third-party authentication services, like Auth0, and validate incoming data to ensure only expected fields are processed.
Results
Despite the challenges, we successfully built the dashboard with all key features in around 380 hours. We focused on delivering robust results and adapting to new tasks, working flexibly in the client's interest. Now, the company uses the dashboard to give its teams clear insights into threats, helping them make fast and informed decisions.
