Zavus LED Configurator - LED Wall Configuration Web Application

Project Context

The Zavus LED Configurator project represents an innovative solution developed for Jupiter Systems, a global leader in LED display wall manufacturing. This web application enables customers and sales teams to configure complex LED walls in real-time, automatically calculating all necessary technical specifications.

The Main Challenge

Jupiter Systems needed a high-performance web application that could:

• Configure LED walls with different models, pitches, and dimensions
• Calculate technical specifications in real-time (power, BTU, air conditioning, electrical requirements)
• Export configurations in different formats
• Provide an intuitive user experience despite technical complexity

Technical Architecture

Technology Stack

The application was developed with Angular using the latest framework features:

• Angular 17+ with new standalone components features
• TypeScript for strong typing and better maintainability
• Tailwind CSS for a consistent and performant design system
• Angular Universal for Server-Side Rendering (SSR)
• RxJS for reactive management of real-time calculations

Reactive Architecture

One of the major challenges was managing complex real-time calculations without impacting performance. I implemented a reactive architecture with RxJS:

// Example of reactive calculation management
private calculateSpecifications(): Observable<LEDSpecs> {
  return combineLatest([
    this.model$,
    this.pitch$,
    this.dimensions$
  ]).pipe(
    debounceTime(300),
    switchMap(([model, pitch, dimensions]) => 
      this.specsService.calculate(model, pitch, dimensions)
    ),
    shareReplay(1)
  );
}

This approach enables:

• Debouncing calculations to avoid unnecessary recalculations
• Sharing results between multiple components
• Automatically handling errors and loading states

Performance Optimizations

Server-Side Rendering (SSR)

Server-side rendering with Angular Universal brings:

• First display: the page arrives already built, without waiting for JavaScript
• SEO: Better indexing thanks to pre-rendered content

Code Splitting and Lazy Loading

To optimize the initial bundle, I implemented:

• Route lazy loading: Each configuration section is loaded on demand
• Dynamic imports: Complex calculations are loaded only when needed
• Tree shaking: Automatic optimization of the final bundle

Calculation Optimization

LED specification calculations are complex and can be performance-intensive. I optimized this by:

• Memoizing results of frequent calculations
• Using Web Workers for heavy calculations
• Implementing an intelligent caching system

User Experience

Design System with Tailwind CSS

Using Tailwind CSS enabled creating a consistent and maintainable design system:

• Reusable components: Creation of a shared component library
• Responsive design: Adaptive interface for desktop, tablet, and mobile
• Accessibility: Compliance with WCAG 2.1 level AA standards
• Dark/light theme: Native support for user preferences

Intuitive Interface

Despite the technical complexity of parameters, the interface remains intuitive thanks to:

• Configuration wizard: Step-by-step guide for new users
• Real-time preview: Immediate visualization of changes
• Contextual validation: Clear and actionable error messages
• Automatic saving: Configurations are automatically saved

Key Features

Complete Configuration

The application allows configuring:

• LED models: Selection from the complete Jupiter Systems catalog
• Pitch: LED panel resolution configuration
• Dimensions: Automatic calculation of required modules
• Technical specifications: Power, BTU, air conditioning needs
• Electrical requirements: Automatic calculation of required power supplies

Configuration Export

Users can export their configurations in different formats:

• PDF: Complete documentation with diagrams and specifications
• Excel: Detailed list of components and costs
• JSON: Technical format for integration with other systems
• Link sharing: Direct sharing of configuration via URL

Real-Time Calculations

All calculations are performed in real-time:

• Instant update when modifying parameters
• Automatic validation of technical constraints
• Intelligent suggestions based on previous configurations

What the Application Delivers

The application handles the specification calculations (module count, power, BTU and air conditioning needs, power supplies) and updates them whenever the model, pitch or dimensions change. Automatic validation of technical constraints flags configurations that cannot be built.

A finished configuration can be shared through a link and exported as PDF for client presentations, Excel for sales teams and JSON for integration with other systems. Server-side rendering and on-demand loading of each section keep the first display light despite the amount of calculation.

Technologies and Best Practices

Development

• TypeScript strict mode: Strong typing to avoid errors
• ESLint and Prettier: Consistent and maintainable code
• Unit and E2E tests: Validation of critical user journeys

Deployment

• CI/CD: Automated pipeline with GitHub Actions
• Progressive deployment: Gradual rollout to minimize risks
• Monitoring: Integration with Sentry for error tracking
• Analytics: Performance and usage tracking

Conclusion

The Zavus LED Configurator project demonstrates how a modern, well-thought-out architecture can transform a complex application into a smooth and performant user experience. Using Angular with SSR, combined with a reactive approach and targeted optimizations, gives an application that displays quickly and whose calculations follow every change.

This case study illustrates the importance of:

• Choosing the right technologies for the right use case
• Continuously optimizing performance
• Prioritizing user experience even in complex technical contexts
• Implementing robust development processes

For Jupiter Systems, the application brings LED wall configuration, technical calculations and client-facing exports together in a single tool.