Skip to content
Juan David Ríos Rodríguez
← All projects

Case study · Professional experience

Foreign trade,connected and clear.

Full-stack development and front-end leadership on a platform to manage imports, exports and foreign trade operations.

Illustrative foreign trade operations center: active operations, shipments in transit, document control and shipment tracking

Illustrative interface · Fictional data

IMP-0268· Andina Industrial
  1. Order confirmedOct 12, 2026
  2. ShippedOct 18, 2026
  3. In transitOct 22, 2026
  4. CustomsIn progress
  5. DeliveryPending
My role
Full-stack · Front-end leadership
Technologies
Angular · .NET · TypeScript · C#
Context
B2B foreign trade
Scope
Interface, services and quality

Company product. This case describes my participation and contributions.

01 / The context

Many operations.One coherent experience.

The platform brings together foreign trade processes and related catalogs. The challenge was to turn that complexity into clear interfaces and a maintainable development base.

  • Imports and exports

    Operations management, shipment tracking and customs processes.

  • Purchase orders

    Creation, tracking and control of orders tied to each operation.

  • Products and catalogs

    Management of products, categories and catalogs linked to foreign trade.

  • Customers and suppliers

    Registration and administration of customers, suppliers and their key data.

  • Contacts and branches

    Management of contacts and branches across different locations.

  • Settings and permissions

    System configuration, parameters and role and permission management.

02 / My participation

From development toteam decisions.

01

Front-end leadership

Interface architecture, conventions, code reviews and support for the team.

  • 02Full-stack development

    Angular interfaces and contributions to .NET services.

  • 03Shared design system

    Co-creation of reusable components, variables and patterns.

  • 04Business flows

    Forms, catalogs and connected operations.

03 / Technical decisions

A foundation built togrow with the product.

Complexity is also solved in the architecture, consistency and the team’s work.

Illustrative Logit screen for creating a new import: general data, supplier, incoterm, ports and product list
Conceptual view of an operational flow for creating a new import. Fictional data.
  1. 01

    Reactive forms and flows.

    Validation, catalog loading, filters, pagination and shared CRUD patterns.

    I designed and led the implementation of reactive forms in Angular, with real-time validation, dynamic catalog loading, filters and pagination. We established reusable patterns for the platform’s main flows, keeping a consistent experience aligned with the design system.

  2. 02

    Modular architecture.

    Components, services and conventions to keep a consistent base.

    I co-created the front-end architecture with Angular, defining modules, components, services and code conventions. This structure made teamwork easier, enabled feature reuse and let the product evolve across multiple fronts.

  • Access and permissions

    Authentication and granular role and permission checks, aligned with the platform’s different profiles.

  • Internationalization

    Shared translations and criteria for a multilingual interface, considering multiple locales, date, currency and unit formats.

  • Audit and traceability

    Action logging and support for error diagnosis, with structured and observable information in key modules.

  • Backend contributions

    .NET services, Entity Framework and Clean Architecture, DDD and CQRS patterns, collaborating on business logic and validation.

Design system

  • Tokens
  • SCSS
  • Components
  • Layouts
  • Consistency

I co-created a design system with centralized variables, reusable components and usage guidelines to keep the experience consistent across the platform.

How I worked

Technical judgment, collaborationand continuous improvement.

  1. 01

    Understand the flow

    Turn business needs into clear interactions.

  2. 02

    Build as a team

    Implement, review and share decisions.

  3. 03

    Care for quality

    Validate behavior and keep traceability.

AI tools as development support, together with technical review and my own judgment.

04 / Learnings

What this experienceadded to how I build.

  • Think in systems, not just screens.

    Understand the platform’s full context, its users and its dependencies.

  • Make team decisions explicit.

    Document criteria, agree on conventions and make collaboration easier.

  • Connect design, business and maintainability.

    Look for solutions that balance user experience, business goals and a sustainable technical base.

This experience strengthened my ability to take responsibility for the interface and collaborate on a complex business platform.

Looking for this approach for your team or product?

Let’s talkBack to portfolio
Next projectBosvia →