Using React, Google Sheets, and CSS to create a dynamic cv and cover letter generator.
The last few months have not been easy for those working in the tech industry. Week after week, we read news about hundreds of good professionals being left without jobs because of a new layoff.
And now, with an excedent of good talent free in the job market, hunting jobs is more difficult. Having a CV that has a visual impact and at the same time is tailored to the post you are applying to becomes critical. But changing and managing those curriculums, especially when we’re talking about a custom layout, can be a time-consuming job.
With that in mind, I decided to make a new little product, a web application that would make that job easier, based on these three things:
- For an easy (and free) “backend” alternative for this application, I would use Google Sheets, as it is already a well-known tool. There, I stored information common to every generated CV, such as for example, your introduction, contact information, and past experiences.
- I used React for a dynamic front-end, where I would be able to communicate with Google’s API, but change specific CV data as well, such as the objectives or even select which experiences would be more relevant for a job post. For a cover letter, everything would be generated directly from the front end, as it’s a post-specific document.
- At last, I used the “react-pdf” library to generate a PDF that could be customized using CSS.
As a prototype, this is what I was aiming for:
Enabling Google Sheets as a backend.
There are a few online tools (both free and paid) that do that job. But as this is not a client-facing application (you don’t want strange people generating curriculums for you), I thought it would be easier to use Google Cloud’s free API directly, and not be dependent on another library.
Google has some good documentation on how to enable that API: https://developers.google.com/sheets
Afterward, the best way to organize Google Sheets as your backend is to think of each page as a specific data collection. One page would have items for your introduction, another page for your past experience, and so on…
Using React.js
The React.js application is not that much complicated. Something useful I did was a way to transform the response from Google’s API — which returns an array of arrays into an array of objects, that is a little easier to use.
Besides that, no big secret using React. You should read the data from the API, and add a simple user interface where you can add some extra data and that should be it. :)
Integrating with the React-PDF library
This is where the majority of the work lies because here is where all the layout will be done, by creating a pdf using CSS. Not every CSS property is available for creating those layouts, but they should be more than enough for most scenarios, especially if you are willing to adventure yourself with some SVG code.
After the layout is done, you should integrate it with the React application, and you will have an interface generating pdfs in real-time, with data coming from both your Google spreadsheet and your web interface, creating position-specific curriculums in no time. :)
I hope this helps a few other designers and developers in their searches. Do some user testing on the tool, and please do reach out if you have any comments or questions about this little application, and let me know if that actually was useful to any of you.
I have used this tool to make my own CV as well. You can see it live in my portfolio: https://aleixo.me/
I made a repository where you can grab the initial code to make your own version: https://github.com/raphaelaleixo/cv-generator
And here is a sample spreadsheet that you can copy: https://docs.google.com/spreadsheets/d/1wLQ-nwaZcGZtafRrYnJi02huqao4YULmfU3m03m43U4/
