Simple AI Resume Reviewer

Create project + install dependencies

npm create vite@latest resume-reviewer \
  -- --template react
cd resume-reviewer
npm install @google/generative-ai

src/gemini.js

import { GoogleGenerativeAI } from "@google/generative-ai"

const genAI = new GoogleGenerativeAI(
  import.meta.env.VITE_GEMINI_API_KEY
)

export async function reviewResume(text) {
  const model = genAI.getGenerativeModel({
    model: "gemini-1.5-flash"
  })

  const prompt = `
You are a professional resume reviewer.
Analyse this resume and return:

**Strengths:** (2-3 bullet points)
**Weaknesses:** (2-3 bullet points)  
**Suggestions:** (3 actionable improvements)
**Overall Score:** X/10

Resume:
${text}
  `
  const result = await model.generateContent(prompt)
  return result.response.text()
}

App.jsx

import { useState } from "react"
import { reviewResume } from "./gemini"
import "./App.css"

function App() {
  const [resume,   setResume]   = useState("")
  const [feedback, setFeedback] = useState("")
  const [loading,  setLoading]  = useState(false)
  const [error,    setError]    = useState("")

  const handleReview = async () => {
    if (!resume.trim()) {
      setError("Please paste your resume first.")
      return
    }
    setLoading(true)
    setError("")
    setFeedback("")
    try {
      const result = await reviewResume(resume)
      setFeedback(result)
    } catch (err) {
      setError("Something went wrong. Try again.")
    } finally {
      setLoading(false)
    }
  }
   return (
    <div className="container">
      <h1>AI Resume Reviewer</h1>
      <p>Paste your resume below for instant feedback</p>

      <textarea
        rows={12}
        placeholder="Paste your resume here..."
        value={resume}
        onChange={e => setResume(e.target.value)}
      />

      <button onClick={handleReview} disabled={loading}>
        {loading ? "Reviewing..." : "Review My Resume"}
      </button>

      {error && <p className="error">{error}</p>}

      {feedback && (
        <div className="feedback">
          <h2>Feedback</h2>
          <pre>{feedback}</pre>
        </div>
      )}
    </div>
  )
}
export default App

App.css

.container {
  max-width: 700px;
  margin: 40px auto;
  padding: 0 20px;
  font-family: sans-serif;
}
h1 { font-size: 24px; margin-bottom: 8px; }
textarea {
  width: 100%; padding: 12px;
  font-size: 14px; border-radius: 8px;
  border: 1px solid #ddd;
  resize: vertical; margin: 16px 0;
}
button {
  background: #4f46e5; color: white;
  padding: 10px 24px; border: none;
  border-radius: 8px; cursor: pointer;
  font-size: 15px;
}
button:disabled { opacity: 0.6; cursor: not-allowed; }
.error { color: red; margin-top: 10px; }
.feedback {
  margin-top: 24px; padding: 20px;
  background: #f9f9f9; border-radius: 8px;
}
pre { white-space: pre-wrap; line-height: 1.7; }

Final project structure

resume-reviewer/
├── src/
│   ├── gemini.js     ← AI logic
│   ├── App.jsx       ← UI + state
│   └── App.css       ← styling
├── .env              ← API key
└── index.html