Resume created using React, and React-PDF demonstracting my programming and codebase management abilities.
-
Run development environment.
Navigate into the resume directory. Install project dependencies:
npm install
Run webpack development environment:
npm run develop
Your browser should open to http://localhost:8080/.
-
Run unit tests.
Navigate into the resume directory.
npm test -
Compile PDF
Navigate into the resume directory.
npm run build
LukeChapman-Resume.pdf will be created in the
distfolder.
-
ESLint & Prettier combination
Prettier is an opinionated and hassle free tool for managing code formatting style. It's recommended to enable Prettier "Format On Save" using a tool similar to the Prettier VS code extension.
Eslint is useful for finding problematic patterns in the code as well as formatting style. I'm using the recommend settings from airbnb, typescript, react and prettier with some minor adjustments. Linting is ran each commit by a git hook thanks to husky.
-
Typescript
Everything is written using TypeScript with strict typing enabled.
-
Jest & React Testing Library unit testing
Jest unit tests are used throughout and the pattern applied is that they live in a __tests__ child directory to the unit being tested. The files also have the extension .test.ts or .test.tsx for clear seperation when editing files. Unit tests are ran each commit by a git hook thanks to husky.
-
Content management
Content is seperated from the souce code in the content directory, it is then loaded using webpack then transformed to a markdown abstract syntax tree (AST) then transformed into a HTML abstract syntax tree (or HAST) for which I've written a basic transform to a format that can be used by React-PDF.
-
React generated PDF
My original goal was to create my resume PDF using React so that I would have full control over reusable components, JSX formatting and CSS styling. Kendo React UI has a great tool for transforming React into PDF, but the trial license is only for 30 days and I'd like to include the resume PDF generation in open source projects in the future. For these reasons I've chosen to use React-PDF. The implementation of the resume PDF can be see here.
-
Customised typography
The final resume PDF uses 4 open licensed fonts that have been configured for use in React-PDF. 3 text fonts used for the body and headings, and Font Awesome Free for icons.