PX2EM Converter

ReactJS
Styled component
PWA
Storybook
Jest
Enzyme
ESDoc
Saturday, 20 June 2020

This is a project to showcase what I have learnt throughout the year - a simple pixel to em converter. The code itself might not be complicated, this is rather a project to demonstrate my ability to define the structure a project.

Unlike any other pixel to em conversion tool, PX2EM Converter allows you to convert a list of pixels at one time, and save your inputs for re-visit. You can also copy the result with just one click!

What's special about this project is that I tried to follow test driven development (TDD) practices. Tests are properly written for utility functions and components, which Jest and Enzyme are chosen for the purpose. To simplify UI testing, snapshot testing has also been implemented. Code coverage result are uploaded to Codecov via Github Actions.

For documentation, ESDoc is set up for documenting utility functions. Storybook is also used to show the available components in this project.

Another thing which worth mentioning is that I have setup Commit Lint and Standard Version for auto-generated change log.

Screenshot of PX2EM Converter
Screenshot of the Storybook