Oct 2023 - Jan 2024

Maintain

Siltium | Employment | Completed

Overview

Maintain is a multi-tenant web system designed for managing improvements to real estate properties. It centralizes the surveying of construction work and facilitates decision-making by recording interventions, assigning responsible parties, and providing real-time monitoring of the status of each improvement. It offers features such as authentication and access control, user, customer, and property management, real-time notifications, preference settings, and metric visualization.

Role

I worked as a frontend developer in an agile team, collaborating closely with analysts, designers, backend developers, and other frontend developers. I actively participated in the implementation of the user interface and the integration of functionalities. In addition, I served as a reference point for the project’s style architecture, defining naming conventions, file organization, and general guidelines for implementation.

Responsibilities

Implementation of public and private pages.
Development of reusable components.
Design and maintenance of the project’s style architecture.
Adaptation of styles and visual components in accordance with design guidelines.
Advice on style conventions, folder structure, and best practices for naming.
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 a progressive enhancement single-page application (PESPA) in Next.js 14, using SSR and CSR strategies to optimize user experience and resource usage, achieving the project’s objectives.
I established a standard for architecture and style methodology based on 7-1 Pattern and SUIT CSS, which improved code maintenance, organization, and readability.

Technical Implementation

The system was built using a decoupled client-server architecture, in which the frontend operates as a progressive enhancement single-page application (PESPA), developed with Next.js 14 App Router. The application combines server-side rendered (SSR) and client-side rendered (CSR) pages, enabling a smooth and enriched user experience without sacrificing the modular and maintainable structure of a multi-page application. The backend was implemented using a RESTful API developed by the internal team.

From the frontend developer’s perspective, practices inspired by functional programming were adopted for component development and interface logic organization, using React 18 and TypeScript both in the construction of the user interface and in the integration of functionalities. The pages were organized by sections using the parallel routing system offered by Next.js 14 App Router, which allowed for a clear, scalable structure that could be adapted to different contexts within the system. Styles were implemented using Sass, applying the 7-1 Pattern architecture together with the SUIT CSS methodology. PrimeReact was used as the basis for visual components, complemented by CSS utilities from PrimeFlex.

During development, the State design pattern was applied, using Redux, to manage the global state of the application.

Design patterns specific to the React ecosystem were also applied, such as:

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.
High Order Components, for extending component functionality and encapsulating common logic, such as access control to protected pages.
Compound Component, for building interfaces composed of reusable parts that share the same context and coordinate with each other.

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