Building a Simple Exam Response Evaluator with React + Gemini API

Hey everyone 👋

In the last few blogs, we explored how Large Language Models (LLMs) are transforming the way we work, study, and even think. If you haven’t read them yet, here are some super helpful ones:

• Exploring Large Language Models (LLMs): Understanding System Prompts and LM Studio

• The Ultimate Guide to LM Studio & System Prompts (with Examples)

• The Ultimate Guide to Building a Persuasive Sales Chatbot with LLMs and Google’s Gemini API

Now, let’s take it one step further and build a simple AI application together: an Exam Response Evaluator. Sounds cool, right? Let’s dive in 🚀
 

Why Build an Exam Evaluator? 🤔

We’ve all been through exams — writing long answers, waiting weeks for evaluation, and sometimes even getting marks that don’t match our effort 😅.

What if AI could help teachers evaluate answers faster and give students instant feedback? That’s exactly what this app aims to do.

• For teachers, it saves time.

• For students, it gives clarity on where they stand.

• For developers, it’s an amazing example of using system prompts in real life.

So this small project becomes a great learning point both for coding and for understanding how LLMs like Gemini can act like real-world evaluators.

The Soul of This Application ❤️

Every application has a soul. For this one, the soul is not the React UI or Excel sheet — it’s the system prompt we design for the Gemini API.

Think about it:

• Without a good system prompt, the AI won’t know how to behave.

• With a well-crafted system prompt, the AI can act like a strict examiner, a friendly tutor, or even a creative writing coach.

👉 That’s why this project is not just about code — it’s about learning the art of guiding LLMs.
 

How the System Prompt Works Here 🎯

Here’s the kind of system prompt we’ll give Gemini:

“You are an exam evaluator. For each student’s written response, compare it with the model answer. Give a score out of 10 and provide 2–3 lines of feedback for improvement.”

This simple instruction transforms Gemini into a virtual teacher who evaluates answers consistently.

What We’ll Build 🛠️

• A React app to upload Excel sheets with student answers.

• Integration with Gemini API for evaluation.

• Automatic feedback and marks for each student.

• A clean UI to display results.

We’ll keep the dataset small for demo purposes — say 5–10 students and 4 written questions each.
 

React Code Example ⚛️

Here’s a simplified version you can build on:

import React, { useState } from "react";
import * as XLSX from "xlsx";

export default function ExamEvaluator() {
  const [results, setResults] = useState([]);

  const handleFileUpload = async (e) => {
    const file = e.target.files[0];
    const data = await file.arrayBuffer();
    const workbook = XLSX.read(data);
    const sheet = workbook.Sheets[workbook.SheetNames[0]];
    const jsonData = XLSX.utils.sheet_to_json(sheet);

    const systemPrompt = `You are an exam evaluator. Compare student answers 
    with model answers. Give marks out of 10 with short feedback.`

    const evaluated = await Promise.all(
      jsonData.map(async (student) => {
        const response = await fetch("https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=YOUR_API_KEY", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            contents: [{
              role: "user",
              parts: [{
                text: `${systemPrompt}\n
                Student: ${student.Name}\n
                Q1: ${student.Q1}\n
                Q2: ${student.Q2}\n
                Q3: ${student.Q3}\n
                Q4: ${student.Q4}`
              }]
            }]
          })
        });
        const data = await response.json();
        return { name: student.Name, feedback: data.candidates[0].content.parts[0].text };
      })
    );

    setResults(evaluated);
  };

  return (
    <div className="p-4">
      <h1 className="text-xl font-bold">Exam Evaluator with Gemini</h1>
      <input type="file" accept=".xlsx, .xls" onChange={handleFileUpload} className="my-4" />

      {results.map((res, i) => (
        <div key={i} className="p-2 border rounded mb-2">
          <h2 className="font-semibold">{res.name}</h2>
          <p>{res.feedback}</p>
        </div>
      ))}
    </div>
  );
}

👉 This code uploads an Excel file, sends each student’s answers to Gemini, and gets back marks + feedback.
 

Sample Excel Format 📊

Upload this sheet → Gemini does the rest 🪄
 

More Example System Prompts 💡

Want to make it more interesting? Try changing the prompt!

• Creative Writing Check:
  “Grade the essay on creativity, grammar, and storytelling. Give suggestions like a literature teacher.”

• Science Exam:
  “Check the correctness of scientific concepts. Mark out of 10 and highlight factual errors.”

• Soft Skills Assessment:
  “Evaluate the answers on clarity, communication, and logical flow. Give constructive feedback.”

This shows how the same app can be reused for multiple subjects by just tweaking the prompt.

Why This Matters 💡

This project may look small, but it has big takeaways:

• You learn React basics (file handling, state management).

• You understand system prompts (soul of the app).

• You see how Gemini API can be integrated in real-world scenarios.

• You realize how AI can save time for teachers and support students.

FAQs ❓

1. Can I use this for real exams in my college/university?
Not yet. This project is for learning and demo purposes only. For real exams, AI evaluation needs to be combined with teacher supervision.

2. What if AI gives wrong marks?
Great question! AI is not perfect. That’s why the system prompt design is important. You can guide the AI to be stricter or softer depending on the requirement.

3. Do I need a backend for this?
For small datasets (like our demo), React + API calls are enough. For large-scale exams, yes, you’d need a backend + database.

4. Can this handle multiple-choice questions (MCQs)?
Yes! In fact, evaluating MCQs is much easier since it’s just checking against correct answers.

5. Is my data safe if I use Gemini API?
If you’re testing with dummy data, you’re good. For real student data, make sure you follow privacy rules and keep everything secure.

Wrapping Up 🎉

We just created a mini exam evaluator app using:

• React (for frontend).

• Excel upload (for responses).

• Gemini API + system prompts (the soul of the app).

This project teaches us how a few lines of code + smart prompts can turn an AI model into a teacher’s assistant. And the best part? You can extend this into essay checkers, quiz evaluators, or even interview analyzers.

👉 Want me to create a full production-level version with backend + better UI so that teachers can use it live? Comment below or share your thoughts — I’d love to build it further!

And don’t forget to check out my related blogs for deeper learning:

• Exploring Large Language Models (LLMs): Understanding System Prompts and LM Studio

• The Ultimate Guide to LM Studio & System Prompts (with Examples)

• The Ultimate Guide to Building a Persuasive Sales Chatbot with LLMs and Google’s Gemini API