Build a Web App to Transform Cover Letters / Proposals with Google DeepMind and React

In today’s competitive job market, crafting a compelling cover letter can be a game-changer. Imagine having a tool that can automatically align your cover letter with any job description, making your application stand out with minimal effort. In this article, we’ll walk you through building a web app that leverages Google DeepMind (Gemini Flash 1.5) and React to achieve this.

1. Introduction

We will create a Proof of Concept (POC) web app that transforms your cover letter based on a provided job description using advanced AI technology. This guide will cover setting up your development environment, integrating AI, and building the user interface.

2. Prerequisites

Before we dive into the code, make sure you have:

• Node.js and npm installed.
• Basic knowledge of React and JavaScript.
• Access to Google DeepMind (Gemini Flash 1.5) or a similar generative AI model.

3. Setting Up Your Development Environment

1. Initialise a New React Project

First, set up a new React project using Vite :

npm create vite@latest my-cover-letter-app --template react
cd my-cover-letter-app        

2. Setting up Your API Key (Google AI Studio):

To leverage the Gemini API, you must possess an API key. If you do not already have one, create a key through Google AI Studio.

3. Install Required Dependencies

Install Zustand for state management and Bootstrap for styling:

npm install zustand bootstrap        

Include Bootstrap in your project by adding it to index.css:

@import "~bootstrap/dist/css/bootstrap.min.css";        

4. Create the Store with Zustand

Create a file store.js to manage state across the application:

import { create } from 'zustand';

const useStore = create((set) => ({
  coverLetter: '',
  setCoverLetter: (newCoverLetter) => set({ coverLetter: newCoverLetter }),

  jobDescription: '',
  setJobDescription: (newJobDescription) => set({ jobDescription: newJobDescription }),

  transformedCoverLetter: '',
  setTransformedCoverLetter: (newText) => set({ transformedCoverLetter: newText }),
}));

export default useStore;        

5. Build the AI Integration

Create a function TransformCoverAi.js to interact with Google DeepMind:

export const TransformCoverAi = async (cover, jd) => {
  try {
    const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash-latest" });
    const prompt = `Generate a brand new catchy cover letter based on the provided JD: ${jd}, and cover: ${cover}`;
    const result = await model.generateContent(prompt);
    const response = await result.response;
    const text = await response.text();

    return text;
  } catch (error) {
    console.error("Error generating content:", error);
    return "An error occurred while generating the cover letter.";
  }
};        

6. Develop the Components

1. CoverLetter Component

Create a CoverLetter.js file for the cover letter input:

import React from 'react';
import useStore from '../store';

const CoverLetter = () => {
  const { coverLetter, setCoverLetter } = useStore();

  const handleChange = (e) => {
    setCoverLetter(e.target.value);
  };

  return (
    <div className="container">
      <h3 className="mb-2">Cover Letter</h3>
      <textarea
        value={coverLetter}
        onChange={handleChange}
        placeholder="Enter your cover letter here..."
        className="form-control"
        style={{ height: '50vh', resize: 'none' }}
      />
    </div>
  );
};

export default CoverLetter;        

2. JobDescription Component

Create a JobDescription.js file for the job description input:

import React from 'react';
import useStore from '../store';

const JobDescription = () => {
  const { jobDescription, setJobDescription } = useStore();

  const handleInputChange = (e) => {
    setJobDescription(e.target.value);
  };

  return (
    <div className="container mt-4">
      <h3 className="mb-2">Job Description</h3>
      <div className="form-group">
        <textarea
          value={jobDescription}
          onChange={handleInputChange}
          placeholder="Enter the job description here..."
          className="form-control"
          style={{ height: '50vh', resize: 'none' }}
        />
      </div>
    </div>
  );
};

export default JobDescription;        

3. Banner Component

Create a Banner.js file for the banner section:

import React from 'react';

const bannerStyle = {
  background: 'url(../img/banner.webp) no-repeat center center',
  backgroundSize: 'cover',
  color: 'white',
  textAlign: 'center',
  padding: '50px 20px',
  borderRadius: '8px',
  height: '50vh',
};

const Banner = () => {
  return (
    <div style={bannerStyle}>
      <h1 style={{ fontSize: '3rem', marginBottom: '20px' }}>Transform Your Cover Letter with Ease as per JD!</h1>
      <p style={{ fontSize: '1.25rem', maxWidth: '800px', margin: '0 auto' }}>
        Effortlessly align your cover letter with the job description.
        Using the power of Google DeepMind (Gemini Flash 1.5) and React, I built a POC web app to accomplish this task with just a few clicks.
      </p>
    </div>
  );
};

export default Banner;        

4. App Component

Update the App.js file to integrate all components:

import React from 'react';
import CoverLetter from './components/CoverLetter';
import JobDescription from './components/JobDescription';
import Banner from './components/Banner';
import { TransformCoverAi } from './core/api/transorm-cover';
import useStore from './store/cover-jd-store';

function App() {
  const { coverLetter, jobDescription, transformedCoverLetter, setTransformedCoverLetter } = useStore();

  const handleTransform = async () => {
    const transformedCoverLetter = await TransformCoverAi(coverLetter, jobDescription);
    setTransformedCoverLetter(transformedCoverLetter);
  };

  return (
    <>
      <Banner />
      <div className="container mt-5">
        <div className="row">
          <div className="col-lg-6 mb-4 mb-lg-0">
            <CoverLetter />
          </div>
          <div className="col-lg-6">
            <JobDescription />
          </div>
          <div className="col-12 text-center">
            <button className="btn btn-success mt-4 btn-lg" onClick={handleTransform}>Transform Cover Letter</button>
          </div>
        </div>
        <div className="mt-4">
          {transformedCoverLetter ? (
            <>
              <h3>Transformed Cover Letter</h3>
              <p>{transformedCoverLetter}</p>
            </>
          ) : (
            <p>No transformed cover letter available. Please input the cover letter and job description, then click "Transform Cover Letter."</p>
          )}
        </div>
      </div>
    </>
  );
}

export default App;        

7. Demo

8. Conclusion

In this guide, we walked through setting up a React app that uses Google DeepMind (Gemini Flash 1.5) to transform cover letters based on job descriptions. By integrating advanced AI with React, you can create a powerful tool that simplifies and enhances your job application process.