Resume Builder using React and Node.js

Working with react has always been fun. Agreed, this is quite a late post (reason being, I posted the live link to this app on my linked in profile first), but still, I like to document some of my works, especially the ones which I enjoy working on. One such idea came into my mind, when I watched a video on how to generate a PDF file, based on some user input, using React and Node.js. I will try my best to keep the description brief.

So the steps involved were:

1. A node and express app was created, by including modules of ‘cors’, ‘body-parser’ and ‘html-pdf’(among others).
2. In the same directory, a pdf template was created inside the documents folder. Then a react app was initialized using create-react-app in a folder name client.
3. There had to several fields for the user to enter, namely their experience information, education etc. Each section was made into a different component and was then imported to a base component named UserForm.js
4. All these components, were rendered with the help of a switch case, which helped us to maintain the exact component which the user was on at that particular moment. It was basically a multistep react form(the entire front-end), inspired from the react-multi-step form video by Brad Traversy on YouTube. The video lies here:

React Multi Step form

5. After the user submitted the last component, a success message was printed.

6. The backend was handled using node.js to create a pdf and save it in a file named ‘Resume.pdf’. This api was hit from the front end as soon as the user submitted the last component in the form. The link to backend from react was done using ‘axios’.

7. The app is so designed that at any given time, the user can go back to any of the form sections and make necessary changes.

The link to the live app is here:

Resume Builder

The entire code base for this app can be found here:

Lakshyajit Laxmikant / React_Resume

I previously mentioned in this post that I posted this app on linkedin first, I must say, it garnered a lot of positive attention. :-)

Lakshyajit Laxmikant on LinkedIn: "I built a full stack web app, a resume builder, using React.js…

Edit: It’s been more than 2 years since I wrote this article and I must admit it has earned a lot of attention(for a simple app as this — atleast I think so!). I have revamped the application using Angular. Here is the link to the updated version: https://lk-resume-builder.web.app/. While updating this app I’ve learnt a lot about Angular Reactive Forms and how easy Angular makes it for a developer to design complex and nested forms.