TalentQL Pipeline Frontend Test

A frontend interview test which I did when I applied for the TalentQL pipeline program for the frontend track. The problem statement is to build a grid app that renders items from a json file. The items would be filtered by shapes and colors. All items would be selected by default, and the grid title should reflect the active filters.

My Role on the Project

• I built everything.
• I designed and implemented the frontend logic (reactjs, typescript).
• Step up static test, unit test, integration and e2e test (@testing-library/react, cypress).
• I run a validate script on every git commit (husky, lintstaged).
• I used GitHub Actions to handle the CI and CD to run the test on every push and pull request.
• Styling done with styled-components (Styled Components)
• Static testing was done for types, linting and formatting for styles, tsx,ts,js files (Typescript, Eslint, Prettier, Stylelint).
• Used React context api to manage the fake authentication.
• Used Redux to manage the state (Redux Toolkit).
• Maintaining a code coverage of 90% for branches, 80% for functions, 90% for lines and 90% for statements.
• I used vitejs to create the starter file with the react-ts template.

Motivation

I was trying to move from a backend major dev to frontend so I need to do more frontend related projects, the test came in handy. I wanted to become a generalist developer who can comfortably work on both side of the stack. Applying for the pipeline program to be mentored was all the push to get this done. The timeline was 7 days but I have since then added more features gradually to the App. I have learnt a lot trying to write clean code with this project. I have written some articles from some of the problems I encountered while working on this project.

• Writing test for the vitejs react app starter
• Migrating a react code base test from using ts-jest to babel-jest