Back to projects

Project case study

Smart Ranch Vision AI

Operational intelligence web platform for herd management, combining an executive dashboard, assisted visual analysis, critical alerts, field missions, playbooks, and a voice assistant.

My roleProduct-minded Web Developer
Technologies used
  • Recharts
  • React
  • TypeScript
  • Vite
  • Tailwind CSS
  • Vercel Analytics
Open demo
Smart Ranch operational overview with indicators, health trend and weight distribution.
smart-ranch.vercel.app / Home page

Problem

Cattle operations can suffer from low visibility, scattered alerts, slow incident response, and lack of structured operational history.

Field teams need to prioritize occurrences clearly and record actions traceably.

Solution

Architecture at a glance
  • SaaS front-end with operations modules.
  • Contracts prepared for future APIs.
  • Mock data for a risk-free demo.
Technical decisions
  1. The system centralizes herd indicators, simulated cameras, severity-based alerts, operational missions, and response playbooks in one experience.
  2. The platform transforms operational signals into executive dashboards, prioritized alerts, and field missions.
  3. Each occurrence can be analyzed, classified, tracked, and converted into action, creating a clearer flow from diagnosis to decision and execution.

Result

API functions on Vercel
4
Private repository / api/ folder at commit 8b816c9 / 13 Oct 2026
Server validation tests
4
Private repository / server/tests/validation.test.js / 13 Oct 2026

Brings a herd's indicators, alerts and field missions into a single dashboard, over sample data.

  • Product storytelling for operational SaaS.
  • Dashboard UX for critical operations.
  • Frontend architecture prepared for future integrations.
  • Responsible application of simulated AI and assisted computer vision.

Learnings and limitations

  • Demonstrative AI preserves ethics and scope.
  • No real sensor integration in this version.
  • Demonstrative prototype with assisted visual analysis and architecture prepared for future integration with real AI models, sensors, and cameras.
  • The system does not detect real diseases and does not perform veterinary diagnosis.

More about the project

Full case details, collapsed for optional reading.

Full description

Demonstration web dashboard for running a herd: indicators, severity-based alerts, field missions and playbooks.

The data is sample data: the history comes from a fixed seed and the cameras are illustrative images, not cattle footage.

The demo's visual analysis returns a random result when no vision service is configured; the project makes no veterinary diagnosis.

The interface is a React and Vite SPA, with Recharts charts, a PWA and API functions on Vercel.

React, Vite, TypeScript, Tailwind CSS, analytical dashboards, PWA, Vercel, demonstrative serverless functions, and a dedicated Node.js backend for future evolution.

Smart Ranch Vision AI demonstrates a complete product vision for agribusiness focused on operations, priority, and traceability.

The solution creates a clear base to evolve from demonstrative prototype to integration with data, sensors, cameras, and real models.

Problem

  • Without a single view, it is harder to connect herd indicators, simulated cameras, missions, and playbooks.

System modules

  • Executive panel.
  • Live monitoring.
  • Herd intelligence.
  • Alert center.
  • Operations room.
  • Voice assistant.
  • PWA and deployment.
Features and highlights
  • Executive panel for fast operational reading.
  • Live monitoring with simulated cameras.
  • Herd intelligence with operational indicators.
  • Severity-based alert center.
  • Operations room with field missions.
  • Response playbooks and voice assistant.
  • PWA and frontend deployment on Vercel.
  • Demonstrative prototype with assisted visual analysis.
  • Architecture prepared for real AI models, sensors, and cameras.
  • SaaS experience with dashboards, alerts, missions, and playbooks.
  • Careful positioning without claiming real veterinary diagnosis.
Technical architecture and data

Technical architecture

How the case was designed as a product

Web platform for herd monitoring with dashboard, alerts, and assisted visual analysis.

IAAIComputer VisionAIReactFrameworkViteFrameworkTypeScriptLanguageTailwindFrameworkVercelDeploy
Problem

Problem

Low operational visibility.

Solution

Solution

Console with alerts and assisted analysis.

Product

Product

Demonstrable SaaS for rural operations.

Architecture

Architecture

Modular UI ready for APIs and models.

Outcome

Outcome

AI communicated without technical exaggeration.

Data used

  • Simulated herd, health, behavior, camera, alert, and field team data.
  • Indicators such as average herd health, critical alerts, open missions, and online cameras.
  • Architecture prepared for APIs, sensors, real cameras, databases, and future AI models.
  • Frontend deployment on Vercel with demonstrative serverless functions and a dedicated Node.js backend for future evolution.

Core components

  • Executive panel for fast operational reading.
  • Live monitoring with simulated cameras.
  • Herd intelligence with operational indicators.
  • Severity-based alert center.
  • Operations room with field missions.
  • Response playbooks and voice assistant.
  • PWA and frontend deployment on Vercel.

Technical decisions

  • Avoid claiming real diagnosis.
  • Separate operational UX from future AI model.

Trade-offs

  • Demonstrative AI preserves ethics and scope.
  • No real sensor integration in this version.

Next steps

  • Connect real event ingestion.
  • Create model precision evaluation.
How to run
  1. Open the published Vercel deployment.
  2. To run locally, clone the project repository.
  3. Install dependencies according to the project README.
  4. Run the frontend and explore dashboard, alerts, missions, and playbooks.
Frequently asked questions

What is Smart Ranch Vision AI?

It is a demonstrative web platform that simulates an operational intelligence center for herd management, with dashboard, alerts, missions, playbooks, and assisted visual analysis.

Does the system detect real diseases?

No. The project is a demonstrative prototype with assisted visual analysis and architecture prepared for future integration with real AI models, sensors, and cameras.

What problem does the project solve?

It simulates centralized alerts, indicators, cameras, field teams, and protocols to improve operational visibility and incident prioritization for herds.

Which technologies were used?

React, Vite, TypeScript, Tailwind CSS, Vercel, PWA, demonstrative serverless functions, and a Node.js backend prepared for future evolution.

Why is this project relevant for a portfolio?

It combines data, UX, SaaS product thinking, executive dashboards, automation, simulated applied AI, and scalable architecture vision.

Next evolutions
  • Integration with real cameras.
  • Database for persistent history.
  • Role-based user authentication.
  • IoT sensor integration.
  • Real computer vision model.
  • Real-time notifications.
  • Georeferenced map of lots.
  • PDF reports per occurrence.
  • Public documented API.
  • Advanced PWA for field teams.
Additional learnings and limitations
  • Data, cameras, and alerts are simulated for demonstration purposes.
  • Sensor integrations, persistent database, and real models are still roadmap items.
Credits

Developed by Matheus Siqueira - https://www.matheusdev.tech

Next projectEvery Sale Counts

Academic gross margin dashboard by period, channel and product, with a hand-built SVG chart and CSV export.

View full case