Create A Simple Resume Builder App Using React

Resumes have an important role in getting a job. A company will first go through the resume of the candidate. So we need to build it with care. It will be helpful if there is an online resume maker. Here we are going to create a Resume Builder tool using React.

Prerequisites

Throughout this article, we discuss React, Material UI, and JavaScript code. So, the reader must have a basic idea about all of this. Refer to the official documentation of React.js and the official page of Material UI for better understanding.

What we will learn

After completing this tutorial, we will learn:-

• To create a react project.
• Create custom components
• Using material UI in a React project
• State management using the Context API.
• Using NPM packages

What is a Resume

Before starting the code, we can learn a bit about the Resume. A resume is a formal document that a job applicant creates to itemize his or her qualifications for a position.

To stand out among other applicants, you need a resume that markets your strengths and matches for the job

A resume should contain,

• Contact Information.
• Career Objective.
• Skills and Abilities
• Work experience
• Educational qualifications

We can add other information that describes us the most. But the resume that we are going to generate using our tool only contains the above fields.

The demo and workflow of the app are given below.

http://resume-builder.techomoro.com/

Create Resume Builder app using React

Now let us start to create the resume builder app in React using create-react-app tool.

Fo better understanding, I am giving the file structure of the app. Because the file structure will help to follow the remaining steps easily.

1. Create a new React project

The first step is setting up a React application on your system. This can be easily done using the NPX tool.

So, install Node.js on your system first and create a react application using NPX. Don’t bother about the term NPX, because it’s a tool coming with NPM(Node Package Manager) 5.2+ onwards which will install on your system with Node.js itself.

If you need further assistance in the installation of React on your system, use the below links.

Install React on Windows, Ubuntu, and macOS

npx create-react-app resume-builder

This command will create a react application with the project name react-memorize-word

Now enter the project directory and start the app.

cd resume-builder
npm start

It will open up the React application we have created in our browser window with the address https://localhost:3000. The port may vary if 3000 is busy.

Now we can use our favorite code editor to edit our project. I personally recommend Visual Studio Code.

2. Install and setup the material UI

In previous articles, we used Bootstrap to style a React app. But in this article, we are using material-UI. So, install material UI components using NPM.

npm i @material-ui/core
npm i @material-ui/lab
npm i @material-ui/icons

3. Create a Question component

Now we can set up each component required for the app. We will create the child components first and the parent components after it. All the components are placed inside the components directory.

So, we need to show an input box and a button to show the question and get the answer. The question can show on the screen as the label of the input. This is coded inside the Question component.

I am giving the view of the component below for better understanding.

It only consists of a TextField and Button field that is imported from the Material UI. The states and functions are passed from the App component with the help of Content API.

So that the role of the Question component is to show the values passed from the App component and pass the input value to the App component.

We will discuss the function and state in step 8 when discussing the App component. Because they are defined in the App component.

The complete code for the Question component is given below.

4. Questions component

We have created a Question component in the previous step. After completing all the questions, it should show the resume generated using these input values.

So we can create a Questions.jsx component to switch between the Question component and Resume component.

     <div className={classes.root}>
        {questions.length === answers.length ? (
          <Resume />
        ) : (
          <div className={classes.question}>
            <Question question={questionAnswer.question} />
          </div>
        )}
      </div>

The progress bar shown on top is also coded in this component.

The function LinearProgressWithLabel() is the view for the progress bar.

function LinearProgressWithLabel(props) {
  return (
    <Box display="flex" alignItems="center">
      <Box width="100%" mr={1}>
        <LinearProgress variant="determinate" {...props} />
      </Box>
      <Box minWidth={35}>
        <Typography variant="body2" color="textSecondary">{`${Math.round(
          props.value
        )}%`}</Typography>
      </Box>
    </Box>
  );
}

After answering each question, the answers are pushed to a state called answers. So that any change in the answers array will execute the setProgress() function.

  useEffect(() => {
    setProgress(
      (answers.length / questions.length) * 100
        ? (answers.length / questions.length) * 100
        : 0
    );
  }, [answers]);

The progress bar will hide after completing all questions.

  {questions.length !== answers.length ? (
        <LinearProgressWithLabel
          value={progress}
          className={classes.progressBar}
        />
      ) : null}

The complete code for the Questions component is given below.

5. Generate resume using the answers

We got answers to all the questions, and now we need to generate a resume in pdf format. This is generated from the Resume.jsx component.

So the data to generate the resume is passed using Context API.

We are using a package react-to-pdf to generate the PDF file. So, install the package on our project.

npm i react-to-pdf

The contact information we collected is shown at the right top. Other informations are listed line by line.

      <div>
              {answer.resumeFieldId === "name" ||
              answer.resumeFieldId === "email" ||
              answer.resumeFieldId === "address" ||
              answer.resumeFieldId === "phoneNumber" ? (
                <div
                  style={{
                    textAlign: "right",
                  }}
                >
                  <label>{answer.answer}</label>
                </div>
              ) : (
                <div>
                  <h4>{answer.resumeField}</h4>
                  <p>{answer.answer}</p>
                </div>
              )}
            </div>

We need two buttons Build New and Download Resume the bottom. Here, the Build New will simply refresh the page that clears all the states. Download Resume will download a PDF copy of the resume created with the help of the react-to-pdf package.

   <div
        style={{
          display: "flex",
          justifyContent: "space-around",
        }}
      >
        <button className={classes.buttonBuildNew} onClick={refreshPage}>
          Build New
        </button>
        <Pdf targetRef={ref} filename="code-example.pdf">
          {({ toPdf }) => (
            <button onClick={toPdf} className={classes.buttonDownload}>
              Download Resume
            </button>
          )}
        </Pdf>
      </div>

The resume generated will look the same as below.

After downloading it as a PDF file, it will be the same as below.

The complete code for the Resume.jsx component will look the same as below.

6. Store questions array in constants directory

The questions shown on the screen are stored in a file questionsArray.js in array format. This is located inside the constants directory.

7. Create a context

Inside the src directory, create a file named AppContext.jsx. From there, export a context named AppContext with createContext API.

8. App component

All the states to store questions, answers, single questions showing on the screen are declared in the App component.

  let [questions, setQuestions] = useState([]);
  let [answers, setAnswers] = useState([]);
  let [questionAnswer, setQuestionAnswer] = useState({});

After mounting the App component, it will set the questions from questionsArray to questions state. Also, the first question is set to questionAnswer state.

  useEffect(() => {
    setQuestions(questionsArray);
    setQuestionAnswer(questionsArray[0]);
  }, []);

The answer entering to the input field from the Question component is handled by the handleChangeInput function defined here. The answer is set to the questionAnswer state with the current question.

  let handleChangeInput = (e) => {
    setQuestionAnswer({
      ...questionAnswer,
      answer: e.target.value,
    });
  };

When the Next button is clicked from the Question component, it reaches the function nextQuestion in the App component.

Here the answer is set to answers state and the next question is set to questionAnswer state.

So as a result, the progress bar moves, and the next question will display on the screen.

  let nextQuestion = (e) => {
    e.preventDefault();
    questions.map((question) => {
      if (question.resumeFieldId == questionAnswer.resumeFieldId) {
        setAnswers([
          ...answers,
          { ...question, answer: questionAnswer.answer },
        ]);
      }
    });

    questions.map((qa, index) => {
      if (index <= questions.length) {
        if (qa.resumeFieldId === questionAnswer.resumeFieldId) {
          setQuestionAnswer(questions[index + 1]);
        }
      }
    });
  };

The entire app is wrapped inside a component called AppContext.Provider to use the benefit of Context API.

So that we can pass the states and functions required for the child components through the Context API.

    <AppContext.Provider
      value={{
        state: {
          questionAnswer,
          questions,
          answers,
        },
        function: {
          handleChangeInput: handleChangeInput,
          nextQuestion: nextQuestion,
        },
      }}
    >
</AppContext.Provider>

A header and the Questions component are rendered inside the App component.

    <div className="App">
        <Typography
          variant="h6"
          style={{
            textAlign: "center",
            margin: "2rem",
          }}
        >
          Resume Builder
        </Typography>
        <Questions />
      </div>

Codesandbox

Refer to the CodeSandbox link to view the live app. So that we can always edit the code by seeing the live app.

https://codesandbox.io/s/vigorous-franklin-mvntp

GitHub repository

You can always refer to the GitHub repository to clone this project. Because this is a react application, after cloning this project, install all the packages first and then, run the app.

https://github.com/techomoro/react-resume-builder

Summary

So in this article, we have discussed the steps to create a simple resume builder using React, Material UI, and Context API. We used a package react-to-pdf to generate the PDF file of the resume.