Commercial Trucking Fleet - Class8 Carrier Network

 to build them a comprehensive driver-side mobile application for commercial truck operators. The app’s mission is simple but critical: give drivers real-time visibility into their trucks health so they can catch issues before it becomes an emergency.

One of our core features we at DETL had to build for 

 was a diagnostics dashboard which is a system that visualizes dozens of metrics like oil temperature, battery voltage, coolant flow, injector performance and many more. For each metric, we needed to show not just the data, but also colour-coded severity thresholds that indicate when values safe (blue), concerning (orange) or critical (red).

Draw horizontal threshold lines showing severity boundaries

Color the trendline dynamically — transitioning from safe to moderate to critical exactly where values cross those thresholds

Handle both “high-is-bad” metrics (like oil temperature) and “low-is-bad” metrics (like fuel efficiency)

Make it work smoothly on both iOS and Android

Our first implementation looked promising in demos, but when we tested with real truck data, we discovered a critical bug: 

the horizontal threshold lines didn’t align with the actual data

Figure 1: Injector Performance Trendline 

Class8

Look closely at the chart above. The “Moderate” threshold line (orange dashed line at the bottom) should align with the value 5.0 on the Y-axis — that’s where moderate severity begins for this metric. But it’s visibly offset, sitting somewhere around 3.5–4.0 instead. We had to manually adjust the “Critical” line position with a hard-coded number just to make it appear somewhat correct at the 15 mark, but this hack broke down as soon as different metrics with different value ranges loaded.


We’d manually calculate where threshold lines should appear based on the Y-axis min/max values

But Victory Native’s internal scaling would adjust the chart domain to better fit the data

Our pixel calculations didn’t match Victory’s final coordinates, causing the threshold guides to drift 10–20 pixels off from where they should be

Even worse, when the trendline crossed a threshold, the color change happened at the actual threshold value, but the visual guide was drawn somewhere else entirely

For a driver checking why their injector performance is flagged, seeing a data point at 4% in the “safe” (blue) zone when the moderate threshold appears to be at 3.5% destroys trust in the system. If the visual guides don’t match the actual severity logic, drivers start second-guessing the data, or worse, ignoring critical warnings entirely.

This blog post walks through how we solved this problem by fundamentally rethinking our approach. Instead of treating thresholds as visual overlays, we started treating them as data points themselves. This architectural shift solved multiple problems at once: perfect threshold alignment, accurate domain scaling, and truthful colour transitions.

The data structure challenges with bidirectional thresholds

Our breakthrough “thresholds as data” technique

How we split line segments at exact crossing points for pixel-perfect color transitions

The Victory Native + React Native Skia hybrid architecture that made it all work

Real-world examples from the deployed Class8 driver app

Whether you’re building diagnostic dashboards, financial charts, or any visualization where precise threshold rendering matters, the patterns we’ll share apply directly to your use case.

Before we could fix the alignment problem, we needed to understand why truck diagnostic thresholds are more complex than typical chart thresholds.

Diagnostic data comes with a structure that reflects the real-world complexity of vehicle monitoring:

Notice something unusual? Instead of simple threshold values like 

, we're working with comparison operators: 

. This is because truck diagnostics aren't one-directional.

 — the higher the value, the worse the situation:

: Safe below 230°F, critical above 250°F

 metric from our problematic screenshot , it’s actually a 

 measurement where values should stay close to zero. High variance in either direction is bad:

This complexity meant we couldn’t just draw lines at fixed Y-values and call it done. We needed a system that understood the 

Initially, we tried to calculate threshold line positions manually:

This worked in simple cases, but failed when:

Victory Native applied its own domain padding for visual balance

The data range was small (e.g., battery voltage 13.8V-14.2V) and Victory would auto-scale

Multiple thresholds needed to be visible, forcing Victory to expand the domain

The “moderate” line in the Injector Performance chart sitting at ~3.5 instead of 5.0 was a direct result of this mismatch between our pixel math and Victory’s actual scaling.
The Breakthrough: Treating Thresholds as Data

The solution came from a simple question: 

What if we stopped treating thresholds as visual overlays and started treating them as actual data points?

Instead of drawing threshold lines based on calculated pixel positions, we inject thresholds directly into the dataset that Victory Native processes. This means:

Victory scales the domain to include thresholds automatically

We can extract the exact pixel coordinates

 — threshold lines use Victory’s actual coordinate system, not our estimates

Implementation: Injecting Threshold Points

Here’s how we modify the time-series data:

The injected threshold points look like this in the dataset:

Victory treats these threshold markers as regular data points when computing the domain, but we filter them out when drawing the actual trendline. This gives us the best of both worlds: accurate scaling and precise positioning.

In the next section, we’ll see how to extract these coordinates and draw perfectly aligned threshold guides.

Rendering Perfect Threshold Lines with Skia

Now that thresholds are part of our dataset, we can extract Victory’s computed coordinates and use React Native Skia to draw pixel-perfect guides.

 handles all the math: domain scaling, coordinate transformations, data-to-pixel mapping

 handles custom rendering: threshold lines, labels, and typography

 object from Victory's render prop contains computed pixel coordinates for every data point—including our injected thresholds:

Now we can draw perfectly aligned dashed lines:

The critical difference from our buggy approach:

Building Pixel-Perfect Diagnostic Charts for 1,000+ Truck Drivers: A React Native Deep Dive

Mastering Full-Stack Deployment with Docker: DETL’s Blueprint for Scalable App Development

In today’s fast-paced development environments, container technology has revolutionized how applications are built, shipped, and deployed. At DETL, we specialize in full-stack deployment strategies that leverage Docker containerization, container orchestration, and DevOps tools to streamline development workflows and ensure infrastructure portability.

From AI-driven applications like Cap AI and Psyvatar to complex platforms like Hutsy and EMAS Toronto, our team has helped startups and enterprises unlock scalable, reliable deployment pipelines using modern containerization practices. In this guide, we’ll walk you through the real-world mechanics of deploying full-stack applications with Docker, including how to structure Dockerfiles, orchestrate services with Docker Compose, and apply container best practices to ensure performance and security.

Docker containerization offers a lightweight, portable way to package applications and their dependencies into isolated units that run consistently across any environment.

Benefits of Docker for Full-Stack Deployment

Seamlessly integrates front-end, back-end, and database services

Reduces “it works on my machine” issues

Accelerates CI/CD with reproducible builds

Supports microservices and monolithic architectures

Simplifies scaling with orchestration platforms like Kubernetes or Docker Swarm

For instance, when building Cap AI—a social media caption generator that relies on a Node.js API, a Python NLP engine, and a React frontend—Docker allowed us to unify all the services into a standardized containerized environment, simplifying deployment and testing.

Setting Up Your Development Environment with Docker

Before diving into production deployment, a robust development environment is key. Docker makes it easy to replicate the same setup across teams.

Here's a basic Dockerfile for containerizing a Node.js backend:

This container image can be version-controlled and pushed to a container registry for later deployment via Docker Compose or Kubernetes.

Best Practices for Development Containers

Use `.dockerignore` to exclude unnecessary files

Keep base images minimal to reduce image size

Tag images with meaningful semantic versions

At DETL, we maintain custom base images for projects like EMAS Toronto to ensure reproducibility across development, staging, and production environments.

Managing Multi-Container Applications with Docker Compose

Docker Compose simplifies container orchestration during development by defining how services interact in a single configuration file.

For full-stack applications combining backend APIs, frontend UIs, and databases, Docker Compose allows developers to spin up the entire environment with one command: `docker-compose up`.

Example: Full-Stack Setup with Node.js, React, and MongoDB

With DETL projects like Hutsy and Psyvatar, Docker Compose enabled rapid iteration during development, allowing our teams to test cross-service interactions without setting up separate servers.

To prepare containers for deployment, build and push images to a registry like Docker Hub or GitHub Container Registry.

Automating this with CI/CD platforms like GitHub Actions or GitLab CI ensures consistent image builds during pull requests and merges.

Deploying to Production: Orchestration Strategies

While Docker Compose is ideal for local development, production deployments benefit from container orchestration platforms.

**Docker Swarm**: Built-in clustering that’s simpler to set up, good for smaller teams

**Kubernetes**: Industry-standard orchestration solution, offering autoscaling, rolling updates, and fault tolerance

DETL deployed Absolute Football Training's backend using Docker Swarm for ease of management while containerizing the frontend on AWS ECS for global availability.

Minikube Example: Local Kubernetes Testing

These strategies allow development teams to emulate production behavior in isolated environments before scaling to real infrastructure.

DevOps Integration for Continuous Deployment

Relying on Docker unlocks powerful DevOps pipelines. At DETL, we adopt GitOps and CI/CD workflows to automate build, test, and deployment using tools like:

This configuration automates the application deployment cycle, giving teams confidence in consistent infrastructure and code delivery.

After integrating Docker into projects across verticals—from AI to fintech—our team has compiled several cornerstone practices for successful application deployment:

**Use multi-stage builds** to reduce image size (especially for languages like Go and Angular)

**Secure secrets** using `docker secrets` or third-party vaults

**Automate health checks** in orchestrators for service recovery

**Log to stdout/stderr** for centralized container logging

**Version container images clearly**, referencing them in Docker Compose or Kubernetes manifests

These containerization strategies helped ensure reliability and portability across our most demanding projects like Psyvatar, where uptime and data consistency were mission-critical.

Real-World Detl Deployments: Lessons Learned

Across DETL’s portfolio, we've containerized applications at virtually every layer of the tech stack:

**Cap AI**: Bundled PyTorch NLP engines with REST APIs and React components in a multi-container architecture, deployed via Docker Compose and GitHub Actions.

**Hutsy**: Containerized financial data pipelines for rapid iteration using Docker Swarm in staging and Kubernetes in production.

**Psyvatar**: Employed container best practices to ensure secure, HIPAA-compliant mental health app environments.

**EMAS Toronto**: Standardized on Docker containers to scale digital tools for community engagement.

**Absolute Football Training**: Built statically served frontend containers deployed on CDN-backed registries for speed and resiliency.

These real-world Docker implementations reveal the versatility of container technologies and their profound impact on development lifecycle efficiency.

Conclusion: Containerization Paves the Way for Scalable, Efficient Deployment

Adopting Docker containerization and orchestration tools is no longer optional for serious development teams—it’s a competitive advantage. Whether launching a new startup MVP or scaling a mature SaaS product, container-based full-stack deployment guarantees consistency, performance, and faster iteration.

At DETL, we don’t just build and ship modern applications—we empower teams to deploy them with confidence. With a battle-tested approach across industries, we’re ready to help you streamline your deployment workflow with infrastructure portability and best-in-class DevOps tools.

Ready to Future-Proof Your Deployment Strategy?

Let DETL help you containerize, orchestrate, and scale your next big idea. 

 to schedule a free consultation or explore how we can support your development environment transformation.

Docker for Full-Stack App Deployment Made Easy

A Practical Guide to Microservices Architecture for Scalable, Cloud-Native Applications

In today's fast-paced digital world, software needs to be scalable, resilient, and maintainable. DETL, a leader in cloud-native product development and system modernization, helps forward-thinking companies design and deploy robust digital platforms using microservices architecture and other modern infrastructure patterns.

From high-performance AI-powered platforms like Cap AI to scalable fintech solutions like Hutsy, DETL architects distributed systems that don't just work—they scale. In this guide, we'll demystify microservices architecture through real-world use cases, best practices, and code samples to help you modernize your systems the right way.

Microservices architecture is a software design pattern where an application is composed of small, loosely coupled services. These services are independently deployable and communicate with each other through APIs.

Unlike a monolith—where all features are implemented in a single codebase—microservices enforce the separation of concerns, enabling organizations to build more agile and resilient systems.

Loosely coupled services that allow for independent development and deployments.

Well-defined APIs to communicate across services, often through an API Gateway.

Technology-agnostic services, meaning each service can use different programming languages or databases.

Built for failure, with failover and fault tolerance baked into the system.

Monolith vs. Microservices: When to Choose What

Many startups begin with a monolith, and that’s okay—for small, domain-specific applications. But as you scale, monolithic systems become hard to manage, slower to deploy, and more error-prone.

| Feature         | Monolith                          | Microservices                     |

|-----------------|-----------------------------------|-----------------------------------|

| Scalability     | Vertical scaling                  | Horizontal, service-level scaling |

| Deployment Risk | High — one error affects all      | Isolated per service              |

| Codebase        | Single, tightly coupled           | Multiple, loosely coupled         |

| Team Structure  | Unified team                      | Distributed teams per service     |

At DETL, we helped migrate EMAS Toronto’s legacy architecture into a microservices-based platform to enable rapid deployment and isolated scaling of their event management tools. This approach allowed for much faster iteration without compromising reliability.

Core Components of Microservices Architecture

Transitioning to microservices means adopting complementary architectural patterns to support distributed systems. Below are the critical components:

The API Gateway acts as the single entry point for all client requests. It abstracts the internal services and manages cross-cutting concerns like authentication, rate limiting, and request routing.

In the build of Cap AI, DETL implemented a highly tuned API Gateway that managed thousands of NLP analysis requests per hour across AI microservices, ensuring low latency and high throughput.

Each service is packaged into its own container using tools like Docker and orchestrated with Kubernetes. This ensures portability, consistent environments, and rapid deployment.

Containerization played a critical role in our work with Psyvatar. We containerized each AI module and deployed them across a Kubernetes cluster for real-time mental health analytics. This not only enabled horizontal scaling but also CI/CD pipelines across teams.

As the number of services grows, managing inter-service communication becomes complex. A service mesh like Istio can handle observability, traffic management, and security transparently.

DETL leveraged service mesh infrastructure for Absolute Football Training, allowing seamless communication between player analytics, performance feedback, and scheduling microservices—while maintaining performance at scale.

Rather than relying solely on synchronous APIs, microservices thrive with event-driven approaches. Services publish and subscribe to events to decouple workflows and improve system responsiveness.

This pattern was instrumental in Hutsy’s financial platform. DETL introduced Kafka-based event pipelines to listen for banking transactions, validate them asynchronously, and trigger downstream fraud detection services.

A common driver for adopting microservices is improved scalability. Here are a few architectural patterns DETL regularly implements:

Each microservice manages its own data store to avoid tight coupling on a central database. This enables:

High availability through data replication

2. CQRS (Command-Query Responsibility Segregation)

Separates write and read responsibilities across services for better performance and autonomy. For example, data-rich dashboard services can have optimized read models while writes flow through secure, audited pathways.

Useful during legacy migrations, this pattern enables gradually replacing parts of a monolith with microservices.

At EMAS Toronto, DETL used the Strangler Pattern to incrementally peel off calendar functionality and notifications from the legacy system to microservices, avoiding major downtime and risk.

Microservices architecture aligns beautifully with cloud-native design principles. The premise of cloud-native is to build and run scalable applications in modern, dynamic environments such as public, private, and hybrid clouds.

At DETL, all our recent projects—including Cap AI, Hutsy, and Psyvatar—were built using cloud-native stacks incorporating:

This unlocks resilient deployments, granular autoscaling, and efficient resource consumption.

Let’s look at a few DETL projects where microservices brought transformative success:

Cap AI uses separate services for caption generation, tone analysis, and social media optimization. Each service is independently deployed and versioned, enabling rapid innovation in AI models without disrupting other components.

Hutsy — Secure Microservices for Fintech

We built financial APIs for bank integration, credit score retrieval, and transaction logs as separate services. With event-based triggers and user-specific scaling, the platform handles thousands of actions per minute—without bottlenecks.

The app uses microservice clusters for user onboarding, AI therapy session processing, and mood tracking. Services sync via event streams with built-in retries and fallback strategies to prevent dropped sessions or errors.

Challenges of Microservices—and How to Overcome Them

While powerful, microservices introduce their own set of complexities:

**Data consistency:** Eventual consistency must be accepted and managed.

**Operational overhead:** More services mean more deployments and monitoring.

**Distributed tracing:** Debugging across services can become difficult.

Chaos engineering to simulate failures and validate system resilience

Microservices architecture is more than a tech trend—it's a practical pathway to delivering scalable, cloud-native applications. Whether you’re modernizing a legacy platform or launching a new digital product, the flexibility, resilience, and development velocity of microservices can’t be overstated.

At DETL, we bring deep experience in designing distributed systems, fine-tuning scalability patterns, and orchestrating event-driven microservices at scale.

Want to transform your application architecture? Let's talk. Whether it’s converting your monolith into flexible modules or starting fresh with a cloud-native system, DETL is ready to be your partner in digital innovation.

 to accelerate your journey with microservices.

Microservices Architecture: When and How to Use It

Building Modern Progressive Web Apps with Next.js: A Deep Dive by DETL

Progressive Web Apps (PWAs) have transformed the way developers think about web and mobile experiences. By combining the best of web and native applications—speed, offline functionality, and installability—PWAs unlock a new standard in performance and user engagement. At DETL, we’ve been at the forefront of PWA development, leveraging frameworks like React and Next.js to deliver experiences that are fast, reliable, and mobile-optimized by design.

In this article, we’ll walk you through how to create a high-performance Progressive Web App using Next.js. We’ll explore service workers, the app manifest, offline caching strategies, and key optimization techniques. Along the way, we’ll share real-world insights from the successful PWAs we’ve built for clients like Hutsy, Cap AI, and Psyvatar. Whether you’re new to PWAs or looking to scale your web presence with installable web apps, this guide is your go-to resource.

Progressive Web Apps bridge the gap between websites and mobile apps. Built using standard web technologies (HTML, CSS, JavaScript), PWAs are:

Installable on devices directly from the browser

Capable of offline access through caching and service workers

Converting standard web apps into PWAs enhances user retention and opens new capabilities like push notifications, background sync, and native-like user interfaces—all without requiring the App Store.

At DETL, we successfully implemented these features in fintech and AI-driven projects like Hutsy and Psyvatar, helping our partners offer standout mobile web apps across platforms.

Next.js is a React-based framework known for its performance, scalability, and developer-friendly features. It brings built-in support for server-side rendering, static site generation, and API routes. These characteristics make Next.js an excellent foundation for building Progressive Web Apps.

Key benefits of pairing Next.js with PWAs:

Structured routing and performance optimization out of the box

Easy integration with service workers and manifests

SEO optimization through server-rendered content

React reusability across web and mobile codebases

At DETL, we’ve integrated these advantages into Cap AI—an AI-powered caption generator. It performs seamlessly online or offline, giving users consistent utility even without internet access.

Essential PWA Components: Service Workers and the App Manifest

A PWA is more than just a fast web app. It needs specialized components that enable advanced capabilities. Two core building blocks are:

Service workers are background scripts that run separately from the main browser thread. They intercept network requests, cache assets, and handle key PWA features like offline support and push notifications.

Here’s how to register a service worker in a Next.js app:

Then, register the worker in your Next.js app:

The manifest file defines meta-information for the browser, enabling installable web apps that appear like native apps on home screens.

Add a `manifest.json` in your `public` folder:

My Next.js PWA

With these pieces in place, your Next.js app will be recognized as a PWA by modern browsers.

Offline Functionality and Caching Strategies

Offline access is a cornerstone of PWA development. Through service workers, you can cache important assets and fallback content to ensure a functional experience in poor connectivity scenarios.

At DETL, we emphasized offline functionality in EMAS Toronto, enabling their mobile workforce to access critical geolocation tools even in remote areas without signal.

Here's an example of dynamic caching in a service worker:

NEXT LEVELDESIGN&ENGINEERING

4+

7+

Who We Are?

Explore Our Cutting-Edge Services

Working with DETL to create multiple websites was an absolute delight. Their outstanding customer support and commitment to exceeding expectations made the process smooth and enjoyable, resulting in visually stunning and highly functional websites.

Nawid Omid

Mahmoud Husain

DETL was able to create an MVP for my startup in less than 4 months. We went from no product to user testing in less than four months. It is crazy to know what engineers can do when they know their stuff.

TEFARI BAILEY

The engineers at DETL are second to none. They have tons of experience building great software for their clients. You feel like a real team when working with DETL.

Mustafa Ismail

Read our Blogs