Side Projects & Explorations

npmsmell.com

Languages:
Astro Templates, TypeScript, CSS
Stack:
Astro, tailwindcss, Node Package Analyzer

Concerned by the growing risks of supply chain attacks in the NPM ecosystem, I created npmsmell.com as an educational resource for fellow developers. The core issue is that many popular packages either rely on outdated or unnecessary dependencies, creating significant security vulnerabilities.

npmsmell.com serves as an educational tool highlighting these issues. It helps developers by showing opportunities to replace packages with native features or implement trivial ones yourself.

The site is built with Astro and Tailwind CSS, utilizing data generated by a custom Node Package Analyzer project I developed as well.

Link

Node Package Analyzer

Language:
TypeScript
Stack:
Node.js, Jest, Azure Pipelines, SonarQube, codecov

This tool, built with Node.js and TypeScript, serves as the analytical engine behind npmsmell.com. The Node Package Analyzer aims to provide developers with clearer insights into package health like number of transitive dependencies, oldest dependency, last update time.

Developing the Node Package Analyzer involved a strong emphasis on code quality and reliability. The project features comprehensive unit testing with Jest (coverage tracked via Istanbul) and static code analysis using SonarQube. A full CI pipeline on Azure Pipelines ensures that these checks are run automatically on every single commit to enable a high level of maintainability.

Link

npmb💣mb

Languages:
TypeScript, CSS
Stack:
React, Emotion, Netlify, Jest, cypress, Percy, Azure

While developing the Node Package Analyzer, I built this "dependency guessing game" as a fun way to validate its data. It's a simple web tool where developers try to guess the total number of dependencies for various NPM packages - often with surprising results!

Beyond just validating the analyzer, this project was a focused effort to deepen my understanding of back then modern React. I intentionally built it using only Function Components and Hooks to compare them directly with Class Components.

Throughout the process, ensuring good Accessibility (A11Y) was a key priority. To ensure robustness, I implemented a comprehensive testing strategy using Jest for unit tests, Cypress for E2E testing, and Percy for visual regression checks. The application is styled with Emotion (CSS-in-JS), hosted on Netlify, and benefits from CI workflows set up with both Azure Pipelines and GitHub Actions.

Link

Vocabulary News

Languages:
C#, TypeScript, CSS, HTML
Stack:
React, ASP.NET core, EF Core, MobX, React Router, webpack, xUnit, cypress

To combine my passion for software development with my goal of improving my Spanish vocabulary (as mentioned in my About section!), I built Vocabulary News, a full-stack news reader application. It allows me to read current news in Spanish and easily look up unfamiliar words on the fly.

The application fetches news from various RSS feeds and integrates with the Google Translate API. Users can select words or phrases for instant translation and save them, along with their translations, to a personalized persistent vocabulary list.

I developed the backend, including the authorization logic using C# with ASP.NET Core, utilizing EF Core for data management. The frontend was built with React (using React Router and MobX for state management) and written in TypeScript.

To ensure functionality, I implemented backend unit tests with xUnit and integration tests with Cypress.