May 2023 - Nov 2023

La Gaceta Scuore

Siltium | Employment | Completed

Overview

La Gaceta Scuore is a multi-tenant web system developed for media outlets, designed to enhance the daily work of editors and journalists. It offers features such as authentication and access control, browsing of notes and entities through lists with custom filters, content analysis with automatic recommendations, visualization of indicators through interactive widgets, user and customer management, and comprehensive account configuration.

Role

I worked as a frontend developer in an agile team, collaborating closely with analysts, designers, backend developers, and other frontend developers. My main focus was building the user interface and integrating functionalities, ensuring a solid structure and efficient connection with backend services.

Responsibilities

Implementation of public and private pages.
Development of the structure and content for the pages.
Development of reusable components.
Adaptation of styles and visual components in accordance with design guidelines.
Construction of forms for data management.
Management of the Context API in the React environment.
Creation of custom hooks for logic reuse.
Development of services for RESTful API consumption.
Adaptation of models for handling HTTP responses.
Implementation of middleware for route protection and access control.
Management of the global state of the application.
Integration of third-party libraries.

Achievements

I contributed to the development of an SPA using CSR in Next.js 13 App Router, which helped meet objectives, incorporate high interactivity, and reduce server load.
Developed the application layout structure using the parallel routing system provided by Next.js 13 App Router, which facilitated the creation and integration of components as well as the consumption of APIs.
Standardized the directory structure, which improved code organization and facilitated maintenance.

Technical Implementation

The system was built using a decoupled client-server architecture, in which the frontend operates as a single-page application (SPA) developed with Next. js 13 App Router using client-side rendering (CSR), and the backend was implemented using two RESTful APIs: one developed in-house by the backend team for customer, user, widget, authentication, and access control management; and another developed by an external entity for the visualization of notes, entities, and indicators.

From the frontend developer’s perspective, functional programming principles were used in conjunction with React 18 and TypeScript, both for building the user interface and for incorporating functionalities. The pages were organized into sections using the parallel routing system offered by Next.js 13 App Router, which allowed for a modular and scalable structure. Styles were implemented in a modular way using CSS Modules and Sass, with PrimeReact as the main component library.

During development, various design patterns were implemented, including:

State, using Redux to manage the global state of the application.
Adapter, using functions to adapt third-party API responses to the needs of the system.
Decorator, using the reflect-metadata library applied to class properties to add metadata and define behaviors declaratively.

Design patterns from the React ecosystem were also implemented, including:

Extensible Styles, for customizing styles and visual components.
Render Props, for reusing logic and creating components with extended functionality.
Custom Hooks, for encapsulating reusable logic and improving code readability.

Professional Context

This project was developed within the framework of an employment relationship with Siltium (2022-2024), who authorizes its inclusion in professional portfolios under the post-employment benefits agreement. However, since it is subject to confidentiality clauses, it is not accessible to the public and private demonstrations are not available.

Technologies