Projects

Node Package Analyzer

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

Node Package Analyzer or npa gives you insight about a Node.js package.

  • Number of dependencies
  • Oldest dependency
  • Licenses
  • etc.

It is an open source Node.js application written in TypeScript.
Unit testing is done via Jest, code coverage is generated by istanbul
SonarQube is used to statically analyse the integrity of the code
Continuous Integration (CI) is provided by Azure pipelines
Every commit automatically triggers tests, code coverage and static code quality analysis.

Link

npmb💣mb

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

During the development of the packageanalyzer I tried to validate its usefulness by building a little website where you could guess the total amount of dependencies for a particular package.
All the data for this project was gathered by the packageanalyzer
A goal of the project was to build a React application solely with function components to figure out their pros and cons compared to class components.

Special care was taken to provide A11Y.
Styling was done via CSS in JS framwork Emotion.
Unit testing is done via Jest.
E2E tests are handled via cypress.
Percy was used to provide visual regression testing.
Netlify was used to host the final application
CI workflow was setup with Azure and GitHub Actions.

Link

Vocabulary News

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

In an effort to grow my vocabulary in Spanish I made a news site that would show me the news in Spanish, where I can easily translate a word and save it to my list of vocabularies

The application fetches RSS feeds from various news sites and provides translations via Google Translate

For the backend I used C# in conjunction with ASP.NET core to provide the API and authorization.
EF Core is used to supply the API with data.
The frontend is powered by React and React router written with TypeScript. MobX is used for state management.

Backend code is unit tested with xUnit.
Frontend integration tests are done via cypress.

PoolParty Semantic Suite

Languages:
Java, TypeScript, CSS, HTML
Stack:
React, Spring, webpack, YUI

My day job involves bridging the frontend and backend for the PoolParty Semantic Suite.
The main component is PoolParty, a web based Thesaurus Manager utilizing Semantic Web technologies to create and view linked data.

Initially released in 2009, the sofware exclusively relied on JSP‘s and Spring MVC to communicate with the frontend. This was very error prone as data structures where directly passed to the JSP templates. Refactorings often inadvertently broke the frontend.

When I joined in late 2012 as the first dedicated frontend dev I saw a lot of room for improvements, since then I‘m trying to modernize the workflow and educate about modern web development practices
One key aspect is to remove error prone JSP‘s and convert them to JSON endpoints with dedicated DTO‘s
A big improvement was also the transition to TypeScript, while quite challenging because at that point the code base was already quite big and messy, it was also very rewarding when it finally worked and a huge productivity boost.
Since then I also introduced webpack for frontend asset management and React to further modernize the stack.

Link