Back to projects
-

Uther Template

Siltium | Employment | Completed

Overview

Uther Template is a base template dedicated to the development of websites and web applications, with special support for internal administration systems. Its main objective is to establish and consolidate a set of standards that streamline and unify project development within the Siltium team. This template includes:

  • Directory structure and naming conventions.
  • Style standardization.
  • Automation of CRUD operations.
  • Authentication and access control.
  • Application status management.
  • Component standardization.
  • Internationalization.
  • Main libraries.
  • Documentation and user guides.

Role

I worked as a frontend developer collaborating with backend developers and other frontend developers. My main focus was on building development standards to ensure a solid, scalable, and reusable foundation for future projects.

Responsibilities

  • Defining the directory structure and naming conventions for resources.
  • Standardizing styles through the use of architectures and methodologies.
  • Developing reusable components.
  • Automating CRUD operations.
  • Implementing authentication and access control mechanisms.
  • Implementing server actions for communication with RESTful APIs.
  • Management of graphics, animations, forms, and validation libraries.
  • Application status management.
  • Documentation of key components and user guides for the team.
  • Collaboration with other developers to define common development patterns.
  • Maintaining visual and functional consistency throughout the interface.
  • Implementing model pages to demonstrate the integrated use of key components.
  • Updating libraries and frameworks.

Achievements

  • I contributed to the development of standards for future projects, which streamlined the start-up process, facilitated development, and optimized time in new projects.
  • I improved the 7-1 Pattern style architecture and SUIT CSS methodology defined in the Maintain project, which allowed us to reap all the related benefits presented in that project.
  • I developed a page generator dedicated to basic CRUD operations using Plop, which optimized development time in future projects.
  • I extended the functionality of PrimeReact form components for use with the Formik library by using the Render Props and High Order Component design patterns, which facilitated their implementation in all projects.

Technical Implementation

The template was built in Next.js, based primarily on the La Gaceta Scuore and Maintain projects. It is designed for systems that use server-side rendering (SSR), although it is easily adaptable to other approaches such as CSR, ISR, SSG, or combinations thereof.

The user interface components were developed with React and TypeScript. The methods required for CRUD operations, authentication, session management, and password recovery were standardized using server actions. Styles were defined under the 7-1 Pattern architecture and SUIT CSS methodology, using Sass.

In addition, a page generator was implemented using Plop to standardize the creation of basic CRUD operations. A uniform approach to the implementation of modals was defined, taking advantage of Next.js’s parallel routing and interception system. The template also offers multilingual support.

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

Likewise, design patterns from the React ecosystem were incorporated, 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.
  • 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

Next.js Next.js React React TypeScript TypeScript HTML5 HTML5 SASS SASS PrimeReact PrimeReact Auth.js Auth.js Formik Formik Zod Zod Yup Yup Recharts Recharts Zustand Zustand Motion Motion next-intl next-intl JavaScript JavaScript Plop Plop ESLint ESLint Prettier Prettier npm npm

Related projects

Maintain

Multi-tenant web system developed for real estate improvement management. Integrates authentication, access control, application status management, CRUD operations, metrics visualization through graphs, notifications and a Kanban board for task tracking.

La Gaceta Scuore

Web system with multi-tenant support developed for media. It incorporates authentication, access control, application status management, integration with third party services and visualization of metrics through graphs.