Hi! I'm

Federico Calò

Software Developer | Technical Writer

I create modern web applications and custom digital tools to help businesses grow through technological innovation. My passion is combining computer science and economics to generate real value.

Contact Me

About Me

My passion for computer science was born at the Technical Commercial Institute of Maglie, where I discovered the power of programming and the fascination of creating digital solutions. From the start, I understood that computer science was not just code, but an extraordinary tool for turning ideas into reality.

During my studies in Business Information Systems, I began to interweave computer science and economics, understanding how technology can be the engine of growth for any business. This vision accompanied me to the University of Bari, where I obtained my degree in Computer Science, deepening my technical skills and passion for software development.

Today I put this experience at the service of businesses, professionals and startups, creating tailor-made digital solutions that automate processes, optimize resources and open new business opportunities. Because true innovation begins when technology meets the real needs of people.

My Skills

Data Analysis & Predictive Models

I transform data into strategic insights with in-depth analysis and predictive models for informed decisions

Process Automation

I create custom tools that automate repetitive operations and free up time for value-added activities

Custom Systems

I develop tailor-made software systems, from platform integrations to customized dashboards

const federico = {
  nome: "Federico Calò",
  ruolo: "Sviluppatore Software",
  città: "Bari, Italia",
  missione: "Aiutare attraverso l'informatica",
  passioni: [
    "Codice Pulito",
    "Innovazione",
    "Crescita Continua"
  ]
};

La Mia Missione

Credo fermamente che l'informatica sia lo strumento più potente per trasformare le idee in realtà e migliorare la vita delle persone.

Democratizzare la Tecnologia

La mia missione è rendere l'informatica accessibile a tutti: dalle piccole imprese locali alle startup innovative, fino ai professionisti che vogliono digitalizzare la propria attività. Ogni realtà merita di sfruttare le potenzialità del digitale.

Unire Informatica ed Economia

Non è solo questione di scrivere codice: è capire come la tecnologia possa generare valore reale. Intrecciando competenze informatiche e visione economica, aiuto le attività a crescere, ottimizzare processi e raggiungere nuovi traguardi di efficienza e redditività.

Creare Soluzioni su Misura

Ogni attività è unica, e così devono esserlo le soluzioni. Sviluppo strumenti personalizzati che rispondono alle esigenze specifiche di ciascun cliente, automatizzando processi ripetitivi e liberando tempo per ciò che conta davvero: far crescere il business.

Trasforma la Tua Attività con la Tecnologia

Che tu gestisca un negozio, uno studio professionale o un'azienda, posso aiutarti a sfruttare le potenzialità dell'informatica per lavorare meglio, più velocemente e in modo più intelligente.

Parliamone Insieme →

Join the Community

Join the developer community where we discuss software, AI, architecture and DevOps. Share ideas, ask questions and grow with us.

Channel

FC Dev Blog

Get notifications on new articles, complete series, weekly tips and featured tools. Bilingual IT/EN content directly in your Telegram.

New articles as they are published
Weekly tips and code snippets
Polls on future topics

Subscribe to Channel

Group

FC Dev Community

A bilingual IT/EN community for developers. Discussions, Q&A, mutual help and networking with other professionals.

Discussions on articles and technologies
Coding help and code review
Job opportunities and collaboration

Join the Group

Discussion Topics

View

Master SQL

RoadMap.sh

November 2024

View

Oracle Certified Foundations Associate

Oracle

October 2024

View

People Leadership Credential

Connect

September 2024

💻 Languages & Technologies

Java

Python

JavaScript

Angular

React

TypeScript

SQL

PHP

CSS/SCSS

Node.js

Docker

Git

💼

12/2024 - Present

Custom Software Engineering Analyst

Accenture

Bari, Puglia, Italy · Hybrid Analysis and development of computer systems through the use of Java and Quarkus in Health and Public Sector. Continuous training on modern technologies for creating customized and efficient software solutions and on agents.

💼

06/2022 - 12/2024

Software analyst and Back End Developer Associate Consultant

Links Management and Technology SpA

Experience analyzing as-is software systems and ETL flows using PowerCenter. Completed Spring Boot training for developing modern and scalable backend applications. Backend developer specialized in Spring Boot, with experience in database design, analysis, development and testing of assigned tasks.

💼

02/2021 - 10/2021

Software programmer

Adesso.it (prima era WebScience srl)

Experience in AS-IS and TO-BE analysis, SEO evolutions and website evolutions to improve user performance and engagement.

🎓

2018 - 2025

Degree in Computer Science

University of Bari Aldo Moro

Bachelor's degree in Computer Science, focusing on software engineering, algorithms, and modern development practices.

📚

2013 - 2018

Diploma - Corporate Information Systems

Technical Commercial Institute of Maglie

Technical diploma specializing in Business Information Systems, combining IT knowledge with business management.

Contattami

Hai un progetto in mente? Parliamone! Compila il form qui sotto e ti risponderò al più presto.

* Campi obbligatori. I tuoi dati saranno utilizzati solo per rispondere alla tua richiesta.

Building the User Interface for a Complex Platform

A platform with 86 domain entities, 100+ API endpoints, and features spanning event management, expense splitting, trip planning, and analytics needs a frontend that is both powerful and approachable. For Play The Event, the frontend is built with Angular 19, leveraging the latest features of the framework to deliver a fast, accessible, and maintainable user experience.

What You Will Learn in This Article

Why Angular 19 with standalone components was chosen
Signal-based reactive state management
Server-Side Rendering (SSR) for performance and SEO
27 lazy-loaded modules and the routing architecture
Responsive design strategy across devices
Internationalization with 21 languages
Rich UI components and accessibility considerations

Why Angular 19

The choice of Angular was driven by several factors. The platform is a large-scale application with complex forms, multiple interconnected views, and strict typing requirements. Angular's opinionated structure, built-in dependency injection, and first-class TypeScript support make it well-suited for this kind of project.

Angular 19 specifically brought stable Signals, improved SSR with hydration, and enhanced standalone component APIs that significantly reduced boilerplate compared to earlier versions.

Standalone Components: No NgModules

The entire frontend uses standalone components exclusively. There are no NgModules in the project. Every component declares its own imports, making dependencies explicit and enabling better tree-shaking. This approach also simplifies lazy loading, since each route can directly reference a standalone component without needing a wrapper module.

Signal-Based State Management

Angular Signals represent a paradigm shift in how reactive state is managed. Instead of relying on RxJS Observables for every piece of UI state, Signals provide a synchronous, fine-grained reactivity model that is easier to reason about and more performant for template rendering.

In Play The Event, Signals are used for:

Component-local state: Form values, UI toggles, loading indicators
Computed values: Derived data that updates automatically when dependencies change
Service-level state: Shared state across components within a feature area

Signal Usage in an Event Component

// Event detail component using Signals
export class EventDetailComponent {
  private eventService = inject(EventService);

  // Core signals
  event = signal<Event | null>(null);
  participants = signal<Participant[]>([]);
  loading = signal(true);

  // Computed signals (derived state)
  confirmedCount = computed(() =>
    this.participants().filter(p => p.status === 'CONFIRMED').length
  );

  pendingCount = computed(() =>
    this.participants().filter(p => p.status === 'PENDING').length
  );

  attendanceRate = computed(() => {
    const total = this.participants().length;
    return total > 0
      ? Math.round((this.confirmedCount() / total) * 100)
      : 0;
  });

  // Effect for side effects
  constructor() {
    effect(() => {
      const evt = this.event();
      if (evt) {
        document.title = `#123;evt.name} - Play The Event`;
      }
    });
  }
}

RxJS is still used for HTTP calls and WebSocket streams, but the results are typically fed into Signals at the boundary, keeping template code clean and synchronous.

Server-Side Rendering and Hydration

Performance is critical for a platform that users access on mobile devices at events. Play The Event uses Angular SSR to deliver pre-rendered HTML from the server, which is then hydrated on the client. This provides several benefits:

Faster First Contentful Paint: Users see meaningful content before JavaScript loads
SEO optimization: Search engine crawlers receive fully rendered HTML
Improved Core Web Vitals: LCP and CLS scores benefit from pre-rendered content
Social media previews: Open Graph tags are present in the initial HTML response

SSR Considerations

Browser-only APIs (localStorage, window) are guarded with isPlatformBrowser checks
Map components (MapLibre) are loaded lazily only on the client side
Authentication state is transferred from server to client via transfer state
API calls made during SSR are cached and reused during hydration to avoid duplicate requests

27 Lazy-Loaded Modules

The application is organized into 27 lazy-loaded feature areas, each loaded on demand when the user navigates to the corresponding route. This keeps the initial bundle small and ensures that users only download the code they actually need.

Route Architecture Overview

LAZY-LOADED ROUTES (27 modules)

CORE
├── /auth          → Login, Register, Password Reset
├── /dashboard     → User dashboard, event overview
├── /profile       → User profile, preferences, settings
└── /notifications → Notification center

EVENTS
├── /events/create       → Event creation wizard
├── /events/:id          → Event detail and management
├── /events/:id/guests   → Participant management
├── /events/:id/rsvp     → Public RSVP page
└── /events/:id/settings → Event settings and permissions

EXPENSES
├── /events/:id/expenses     → Expense list and dashboard
├── /events/:id/expenses/new → Add new expense
├── /events/:id/settlements  → Settlement tracking
└── /events/:id/budget       → Budget overview

TRIPS
├── /events/:id/trips        → Trip planner
├── /events/:id/trips/:tid   → Trip detail with map
└── /events/:id/trips/stops  → Stop management

AGILE
├── /events/:id/board    → Task board (Kanban)
├── /events/:id/sprints  → Sprint management
└── /events/:id/backlog  → Product backlog

ANALYTICS
├── /events/:id/analytics → Event analytics dashboard
└── /analytics/global     → Cross-event analytics

OTHER
├── /subscription → Stripe subscription management
├── /help         → Help center and documentation
├── /legal        → Terms, privacy, cookies
├── /landing      → Public landing pages
└── /admin        → Admin panel (role-gated)

Responsive Design Strategy

The platform supports three primary breakpoints with a mobile-first approach. Every component is designed to work on phone screens first, then progressively enhanced for tablet and desktop layouts.

Mobile (320px - 767px)

On mobile, the interface uses a single-column layout with a bottom navigation bar. Cards stack vertically, tables transform into card-based lists, and the map view takes the full screen. Touch targets are a minimum of 44px, and swipe gestures are supported for common actions like dismissing notifications or navigating between tabs.

Tablet (768px - 1023px)

The tablet layout introduces two-column grids for event cards, a collapsible side navigation, and split-view panels where the list appears on the left and details on the right. The map and itinerary views sit side by side.

Desktop (1024px+)

Desktop users get the full experience with a persistent sidebar, three-column grids, hover effects, keyboard shortcuts, and the embedded Univerjs spreadsheet at full width. The Kanban board for agile tasks displays all columns simultaneously.

Internationalization: 21 Languages

Play The Event supports 21 languages, covering the major European, Asian, and Middle Eastern markets. The internationalization system uses Angular's built-in i18n support combined with a custom translation service that loads language files on demand.

Supported Languages

SUPPORTED LANGUAGES (21)

EUROPEAN
├── English (en)      ├── French (fr)
├── Italian (it)      ├── German (de)
├── Spanish (es)      ├── Portuguese (pt)
├── Dutch (nl)        ├── Polish (pl)
├── Romanian (ro)     ├── Greek (el)
├── Czech (cs)        ├── Hungarian (hu)
└── Swedish (sv)

ASIAN
├── Chinese Simplified (zh)
├── Japanese (ja)
├── Korean (ko)
└── Hindi (hi)

OTHER
├── Arabic (ar)  ← RTL support
├── Turkish (tr)
├── Russian (ru)
└── Ukrainian (uk)

Arabic support required implementing full RTL (Right-to-Left) layout mirroring, including flipping navigation, adjusting padding and margins, and ensuring that icons and directional elements are properly reversed.

Rich UI Components

The frontend includes a comprehensive set of custom UI components built specifically for event management scenarios. These include:

Seating chart editor: Drag-and-drop table and seat assignment with real-time collaboration
Timeline view: Visual timeline for trip itineraries with zoom and pan
Budget charts: Chart.js-powered visualizations for expense breakdowns
Kanban board: Drag-and-drop task board with swimlanes for sprint planning
Guest list: Searchable, filterable, sortable table with inline editing
RSVP form: Public-facing form with custom fields and validation
Notification center: Real-time notification panel with categories and read state

Accessibility

Accessibility is not an afterthought. The platform targets WCAG 2.1 AA compliance with the following measures:

Accessibility Features

Semantic HTML5 elements throughout (nav, main, article, section)
ARIA labels on all interactive elements without visible text
Full keyboard navigation with visible focus indicators
Color contrast ratios of 4.5:1 or higher for all text
Screen reader announcements for dynamic content changes
Reduced motion support via prefers-reduced-motion media query
Skip-to-content links on every page

Key Takeaways

Lessons from Building the Frontend

Signals simplify state: Moving from RxJS-heavy templates to Signals reduced complexity and improved readability
Lazy loading is essential at scale: 27 modules keep the initial bundle under 200KB gzipped
SSR pays dividends: Pre-rendered pages improve both SEO and perceived performance, especially on mobile
Internationalization must be planned early: Adding 21 languages retroactively would have been far more expensive
Mobile-first is not optional: Most event participants access the platform from their phones during the event itself

In the next article, we dive into the analytics and machine learning capabilities of Play The Event, exploring how a Python FastAPI microservice provides intelligent insights to organizers.