Back to projects
-

Zelmira Learning

Siltium | Employment | Completed

Overview

Zelmira Learning is a multi-tenant educational system consisting of a platform for students and an administrative panel for teachers and administrators. It is aimed at educational institutions seeking a solution that caters to different user profiles, including accessibility options for people with disabilities.

Its main features include:

  • Authentication and access control.
  • Viewing subjects and classes, and completing activities.
  • Real-time notification management.
  • Forum with query and comment management by class.
  • Real-time chat for communication between students, teachers, and administrators.
  • Profile configuration and security options (such as changing or resetting passwords).
  • Management of both Zelmira’s own content and content specific to each tenant.
  • Management of subjects, classes, courses, students, teachers, users, and tenants.
  • Administrative panel with reports on student academic performance.
  • Dashboard with metrics related to classes and subjects.

Role

I worked as a frontend developer on both the student platform and the administrative panel, collaborating with designers, analysts, backend developers, and other frontend developers. My primary focus was on building an intuitive interface and integrating functionalities. In addition, I served as a layout consultant and advisor to the team on the architecture and methodology used in styles, as well as on the implementation of pages with SSR, ISR, and CSR strategies.

Responsibilities

  • Implementation and adaptation of the standards defined in the base template Uther Template.
  • Implementation of public and private pages.
  • Development of reusable components.
  • Adaptation of styles and visual components in accordance with design guidelines.
  • Advice on style conventions, folder structure, and best practices for naming.
  • Building forms for data management.
  • Handling the Context API in the React environment.
  • Creating custom hooks for logic reuse.
  • Developing server actions for communication with RESTful APIs.
  • Adapting models for handling HTTP responses.
  • Managing the global state of the application.
  • Handling cookies for information persistence.
  • Integrating third-party libraries.

Achievements

  • I contributed to the development of progressive single-page applications (PESPA) in Next.js 14, implementing SSR, ISR, and CSR strategies to optimize user experience and resource usage, thereby meeting project objectives.
  • Modified the directory structure and conventions defined in the Uther Template project, which helped to enhance the page generator for basic CRUD operations.
  • Developed new interface components, which, thanks to the success of the project, were approved for inclusion in the base project Uther Template.

Technical Implementation

Both the platform and the administrative panel are built using a decoupled client-server architecture. The frontend of both is developed as a single-page application with progressive enhancements (PESPA) using Next.js 14 App Router, combining server-side rendered (SSR) and client-side rendered (CSR) pages, as well as incrementally re-rendered (ISR) pages, as needed, allowing for optimized initial load, user interaction, and resource usage. Communication with the backend is done through a RESTful API developed by the internal team.

The interface was implemented with React 18 and TypeScript, organizing some pages by sections using parallel routes. Styles were done with Sass under the 7-1 Pattern architecture and the SUIT CSS methodology, ensuring consistency and maintainability throughout the interface.

Both applications adopted the technical guidelines set out in the Uther Template project, excluding:

  • Multilingual support.
  • Implementation of modals using parallel and interception routes.
  • Automation of basic CRUD operations using the page generator.

Additionally, all custom API query methods were implemented using server actions, following the guidelines defined in Uther Template.

Finally, real-time communication was implemented using native WebSocket for features such as chat and notifications.

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 Yup Yup Recharts Recharts Zustand Zustand Motion Motion ESLint ESLint Prettier Prettier npm npm

Related projects

Uther Template

Base template for the development of web sites and web applications, with special support for internal administration systems. Incorporates logical folder and file organization, process standardization, CRUD operation automation, authentication, access control, application state management and key interface components.