USS Digital Kit
Calculando...

I contributed to the development of the USS Digital Kit, two component libraries (Vanilla JS and React) that are accessible, modular, and translate the institutional design system into reusable code.

USS Digital Kit (In progress)

The USS Digital Kit is an ambitious project that aims to elevate the design and development experience at Universidad San Sebastián. It consists of creating two complementary component libraries: one in Vanilla JavaScript and another in React, with the goal of supporting both traditional applications and modern projects.

This kit represents the natural evolution of previous design systems, incorporating lessons learned and adopting current best practices in accessibility, modularity, and developer experience.

Key features

  • Dual implementation (Vanilla JS and React) for maximum flexibility.
  • Advanced accessibility with full ARIA support from the design stage.
  • Comprehensive documentation with interactive examples and clear guidelines.
  • Advanced theming system for institutional customization.
  • Modular architecture that allows importing components individually.

Technologies used

  • JavaScript ES2023 and semantic HTML as a universal base.
  • CSS/SCSS with BEM methodology and Custom Properties for scalable styling.
  • Rollup as the bundler with optimized tree-shaking.
  • React 18+ with hooks and concurrent features.
  • TypeScript for type safety in the React version.

My contribution

I have contributed to the development of both the Vanilla JavaScript version and the React version, specifically in:

  • Implementing core and advanced components.
  • Defining accessibility patterns and ARIA role usage.
  • Integrating scalable styles through SCSS and CSS Custom Properties.
  • Translating the institutional design system into code, implementing design tokens directly into components.
  • Documenting components with clear, reusable examples.