cool-dashboard

byNimesh ZestBrains

Project Description This project is a Device Monitoring and Live Camera Streaming Dashboard designed to allow users to monitor devices installed on boats and view live camera feeds in real time. The system provides a centralized interface where authenticated users can access their devices, monitor live streams, and analyze device performance data. The platform includes secure authentication, a device dashboard, live video streaming, device management views, and historical monitoring of device metrics. Core Modules 1. Authentication The application includes secure authentication pages for users. Login Page • Allows registered users to securely log into the system. Forgot Password • Enables users to recover or reset their password if they forget it. Only authenticated users can access the dashboard and device monitoring features 2. Dashboard The Dashboard serves as the main landing page after login. Features: • Displays the list of devices assigned to the logged-in user • Provides an overview of available devices • Allows quick navigation to live streaming and device details 3. Live Stream The Live Stream module allows users to watch live camera feeds from devices installed on boats. Features • Select a Device using its MAC Address • Choose the number of cameras to display • View live streaming for up to 8 cameras simultaneously Switch between cameras using a dropdown selector Video Player Controls • Play / Pause live stream • Change streaming quality • Capture screenshots of the current stream This module enables real-time monitoring of camera feeds from the selected device. 4. Device List The Device List section displays all devices associated with the user. Features • View all devices with their MAC Address • Search devices by MAC Address • View the list of cameras connected to each device • Read-only access (no edit functionality) This section helps users quickly identify devices and the cameras attached to them. 5. Device History The Device History module provides historical monitoring data for devices Features • View historical records of devices • Filter data using: • MAC Address • Date Range • Monitor system performance metrics such as: • Temperature • CPU Usage • GPU Usage • RAM Usage • Other system monitoring data This module helps users analyze device performance and system behavior over a selected time period. 6. Profile Section The Profile Section allows users to manage their account information. Features • View profile details • Update profile information User Flow 1. The user logs into the system through the Login page. 2. After authentication, the user is redirected to the Dashboard, where they can see all devices assigned to them. 3. The user navigates to the Live Stream section. 4. The user selects: • Device MAC Address • Number of cameras 5. The selected cameras start live streaming in the video player. 6. The user can: • Switch between cameras • Capture screenshots • Pause or play the stream • Change streaming quality 7. In the Device List, the user can search for devices and view camera details. 8. In Device History, the user can filter by MAC Address or date range to monitor system metrics like CPU, GPU, RAM, and temperature. 9. The Profile section allows the user to view and update their profile information. Mobile App Design

Landing
Landing

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 5

System Requirements Document (SRD)

Project Name: cool-dashboard

1. Introduction

The cool-dashboard project, developed by Nimesh ZestBrains, is a Device Monitoring and Live Camera Streaming Dashboard tailored for users to monitor devices installed on boats and view live camera feeds in real time. This platform provides a centralized interface for authenticated users to access their devices, monitor live streams, and analyze device performance data.

Designed with the Indian locale in mind, the system incorporates secure authentication, device dashboards, live video streaming, device management views, and historical monitoring of device metrics. The mobile app version ensures seamless access to critical functionalities while on the go.

2. System Overview

The cool-dashboard system is a comprehensive solution for real-time device monitoring and live camera streaming. It is designed to cater to users who require efficient surveillance and performance analysis of devices installed on boats.

Key Features:

  • Secure authentication for user access.
  • A dashboard displaying device overviews and quick navigation options.
  • Live streaming capabilities for up to 8 cameras simultaneously.
  • Device management views for detailed insights into connected devices.
  • Historical monitoring of device metrics such as temperature, CPU usage, GPU usage, and RAM usage.
  • Mobile app functionality for streamlined access to essential features.

The system is optimized for users in India, with default settings such as IST timezone and INR currency where applicable.

3. Functional Requirements

Page 2 of 5

As User:

  • As User I should be able to log in securely to access the dashboard.
  • As User I should be able to view all devices assigned to me on the dashboard.
  • As User I should be able to select a device using its MAC Address for live streaming.
  • As User I should be able to view live streams for up to 8 cameras simultaneously.
  • As User I should be able to switch between cameras using a dropdown selector.
  • As User I should be able to capture screenshots of live streams.
  • As User I should be able to change streaming quality.
  • As User I should be able to search devices by MAC Address in the Device List.
  • As User I should be able to view historical device metrics filtered by MAC Address or date range.
  • As User I should be able to update my profile information.

4. User Personas

Admin:

  • Responsible for managing user accounts and overseeing system operations.
  • Can access all devices and monitor system-wide metrics.

User:

  • Authenticated individual with access to devices assigned to them.
  • Can monitor live streams, analyze device performance, and update profile information.

Guest:

  • Limited access to explore the platform (e.g., demo mode).
  • Cannot access live streams or device metrics.

5. Visuals Colors and Theme

Page 3 of 5

Color Palette:

The cool-dashboard will feature a unique color palette inspired by the marine environment and technological sophistication:

  • Background: #0A1F44 (Deep Navy Blue)
  • Surface: #1E3A5F (Oceanic Slate)
  • Text: #F5F7FA (Soft White)
  • Accent: #00A8E8 (Vibrant Aqua)
  • Muted Tones: #6C7A89 (Steel Gray)

This palette ensures a professional yet visually appealing interface, enhancing usability and engagement.

6. Signature Design Concept

Concept: Interactive Ocean Dashboard

The homepage of cool-dashboard will resemble an interactive ocean map. Users will see a dynamic, animated ocean background with subtle wave movements. Each device will appear as a floating buoy on the map, marked with its MAC Address.

Key Features:

  • Hover Interaction: Hovering over a buoy will display device details in a tooltip.
  • Click Interaction: Clicking on a buoy will zoom into a detailed view of the device, including live camera feeds and performance metrics.
  • Dynamic Animations: The ocean background will subtly shift colors based on the time of day (e.g., sunrise hues in the morning, deep blues at night).
  • Micro-Interactions: Buoys will gently bob up and down, creating a lifelike feel.

This design ensures the homepage is not only functional but also unforgettable, immersing users in a visually stunning experience.

7. Non-Functional Requirements

  • Performance: The system must support live streaming for up to 8 cameras simultaneously without lag.
  • Scalability: The platform should handle increasing numbers of devices and users efficiently.
  • Security: All user data and device information must be encrypted and securely stored.
  • Availability: The system should maintain 99.9% uptime.
  • Localization: Default settings should align with the Indian locale (e.g., IST timezone, INR currency).

8. Tech Stack

Page 4 of 5

Frontend:

  • React for Web
  • React Native for Mobile App

Backend:

  • Python
  • FastAPI

Database:

  • MySQL or MariaDB (preferred for RDBMS)
  • MongoDB for NoSQL storage
  • WeaviateDB for VectorDB

AI Models:

  • GPT 5.2 for user-friendly responses
  • Claude 4.5 Opas for academic or coding work
  • Gemini 3 Pro for friendly responses
  • Google Nano Banana for image generation

AI Tools:

  • Litellm for LLM Routing
  • Langchain

Orchestration:

  • Docker and docker-compose for local orchestration
  • Kubernetes for server-side orchestration

9. Assumptions and Constraints

Assumptions:

  • Users have stable internet connections for live streaming.
  • Devices installed on boats are equipped with cameras and monitoring sensors.
  • The mobile app will prioritize essential functionalities for lightweight operation.
Page 5 of 5

Constraints:

  • Live streaming quality may vary based on network bandwidth.
  • Historical data storage is limited to a predefined retention period.
  • The system must comply with data protection regulations in India.

10. Glossary

  • MAC Address: A unique identifier assigned to network devices.
  • Dashboard: The main interface displaying device overviews and navigation options.
  • Live Stream: Real-time video feed from cameras installed on devices.
  • Device Metrics: Performance data such as temperature, CPU usage, GPU usage, and RAM usage.
  • Authentication: Secure login mechanism for accessing the system.

This document outlines the updated system requirements for the cool-dashboard project, ensuring clarity and alignment with Nimesh ZestBrains' vision.

Landing design preview
Login: Sign In
Dashboard: View All Devices
Dashboard: Navigate System
Device List: Manage Devices
Device History: Monitor Metrics
Profile: Update Account