Mind Map Quiz Generator: A Developer's Guide to Building with Gemini

This isn't just a learning tool—it's a complete reference application for developers. The Mind Map Quiz Generator is a hands-on project designed to teach you how to build a sophisticated, full-stack, AI-powered application using the Google Gemini API.

The application allows a user to upload study materials (documents, images, or audio files), and it uses Gemini to:

1. Analyze the content and generate a hierarchical mind map of key topics.
2. Create an interactive multiple-choice quiz for each topic in the mind map.

By exploring this codebase, you will find clear, practical examples of how to leverage a Large Language Model (LLM) to power a feature-rich application.

Core Gemini Concepts You Will Learn

This project was built to demonstrate specific, powerful features of the Gemini API. By studying the code, you will learn how to:

1. Use Multimodal Inputs

Gemini can understand information from more than just text. This app shows you how to process various file types from the user and send them to the model in a single request.

• How it works: In App.tsx, the handleFilesProcess function takes user-uploaded files, reads them as base64 strings using FileReader, and formats them into the Part[] array that the Gemini SDK expects.
• File to Explore: App.tsx

2. Enforce Structured JSON Output (JSON Mode)

One of the most powerful features for building reliable apps is getting predictable JSON from the model. This project uses Gemini's JSON mode to guarantee the API returns data that perfectly matches our defined structure.

• How it works: In geminiService.ts, the API calls to Gemini include a config object with responseMimeType: "application/json" and a responseSchema. This schema, defined with Type.OBJECT, Type.ARRAY, etc., forces the model's output to conform to our MindMapNode and Question interfaces. Note the clever use of nested schemas (mindMapNodeSchemaL1, L2, L3) to define a tree-like structure.
• Files to Explore: services/geminiService.ts, types.ts

3. Engineer Complex, Instructive Prompts

The quality of your AI features depends heavily on the quality of your prompts. This app demonstrates how to write detailed prompts that give the model context, instructions, and conditional logic.

• How it works: The generateMindMap prompt instructs Gemini to act as an "expert at synthesizing information" and gives it rules for handling both cohesive and distinct documents. It explicitly demands a unique ID, a summary, and a quiz for every single node, ensuring a complete data structure.
• File to Explore: services/geminiService.ts

4. Implement Multi-Step AI Logic (Chaining Calls)

Complex applications often require more than one AI call. This project shows how to use the output of one Gemini call as the input for another, creating a more dynamic and intelligent user experience.

• How it works:
  1. The app first makes a single, large call to generateMindMap to create the entire learning experience.
  2. If a user answers a question incorrectly, the handleRegenerateQuestion function in App.tsx makes a new, targeted call to generateQuestion, using only that specific node's topic and summary as context to generate a fresh question.
  3. The handleRestartQuiz function recursively calls generateQuestion for every node to create an entirely new quiz from the existing mind map structure.
• Files to Explore: App.tsx (see handleRegenerateQuestion, handleRestartQuiz), services/geminiService.ts

5. Build a Full-Stack AI Application

See how all the pieces fit together, from user interface to API service, to create a seamless AI-powered product.

• How it works: The flow is clear: a user interacts with React components (FileUpload.tsx), which trigger state changes and API calls in the main App.tsx component. The geminiService.ts module isolates all AI-related logic, making the code clean and easy to understand. The AI-generated data is then visualized using the D3.js library in MindMap.tsx.
• Files to Explore: The entire project, paying attention to how data flows between components.

How It Works: Application Flow

1. File Upload: The user selects or drags-and-drops documents, images, or audio files into the FileUpload component.
2. File Processing: App.tsx converts these files into base64-encoded Part objects suitable for the Gemini API.
3. First Gemini Call: geminiService.ts sends the file parts and a detailed prompt to the gemini-1.5-flash model, requesting a single JSON object that conforms to the mindMapSchema.
4. Data Rendering: The returned JSON is parsed and stored in the application's state. The MindMap.tsx component then uses the D3.js library to render this hierarchical data as an interactive, force-directed graph.
5. Interactive Quiz: When a user clicks a node, the QuestionModal displays the pre-generated question for that topic.
6. Dynamic Regeneration: If a user wants a new question, a second, more specific Gemini call is made using only that node's context, and the modal updates with the new question.

Run and Deploy Your App

This contains everything you need to run your app locally and start learning.

Prerequisites: Node.js installed.

1. Install dependencies

   npm install

2. Set up your API Key
   • Create a new file in the root of the project named .env.local.
   • Get your API key from Google AI Studio.
   • Add your API key to the .env.local file like this:

     GEMINI_API_KEY=YOUR_API_KEY_HERE

3. Run the app

   npm run dev

The application should now be running on http://localhost:3000.