> ## Documentation Index
> Fetch the complete documentation index at: https://academy.pathfindr.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Week 6 Challenge: Build Your First App

> Use the guided prompt framework to build a working app in Google AI Studio, then share it with the group.

export const Quiz = ({question, options, correctIndex, explanation}) => {
  const [selected, setSelected] = useState(null);
  const [showResult, setShowResult] = useState(false);
  const handleSelect = index => {
    if (showResult) return;
    setSelected(index);
    setShowResult(true);
  };
  const isCorrect = selected === correctIndex;
  return <div className="my-8 p-6 rounded-2xl border border-zinc-200 dark:border-zinc-700 bg-gradient-to-br from-zinc-50 to-white dark:from-zinc-900 dark:to-zinc-800 shadow-sm">
      <div className="flex items-center gap-3 mb-4">
        <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-blue-100 dark:bg-blue-900/40">
          <span className="text-xl">📝</span>
        </div>
        <div className="flex flex-col">
          <p className="font-semibold text-zinc-800 dark:text-zinc-100 m-0">Knowledge Check</p>
          <p className="text-xs text-zinc-500 dark:text-zinc-400 mt-0.5 m-0">Select the best answer</p>
      </div>
      </div>
      
      <p className="text-zinc-700 dark:text-zinc-200 font-medium mb-5 text-lg leading-relaxed">{question}</p>
      
      <div className="space-y-3">
        {options.map((option, index) => {
    const isSelected = selected === index;
    const isCorrectOption = index === correctIndex;
    let optionStyles = "border-zinc-200 dark:border-zinc-600 hover:border-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20";
    if (showResult) {
      if (isCorrectOption) {
        optionStyles = "border-green-500 bg-green-50 dark:bg-green-900/30";
      } else if (isSelected && !isCorrectOption) {
        optionStyles = "border-red-500 bg-red-50 dark:bg-red-900/30";
      } else {
        optionStyles = "border-zinc-200 dark:border-zinc-700 opacity-60";
      }
    }
    return <button key={index} onClick={() => handleSelect(index)} disabled={showResult} className={`w-full text-left p-4 rounded-xl border-2 transition-all duration-200 ${optionStyles} ${!showResult && 'cursor-pointer'} ${showResult && 'cursor-default'}`}>
              <div className="flex items-start gap-3">
                <div className={`flex-shrink-0 w-6 h-6 rounded-full border-2 flex items-center justify-center text-xs font-bold ${showResult && isCorrectOption ? 'border-green-500 bg-green-500 text-white' : showResult && isSelected && !isCorrectOption ? 'border-red-500 bg-red-500 text-white' : 'border-zinc-300 dark:border-zinc-500 text-zinc-500 dark:text-zinc-400'}`}>
                  {showResult && isCorrectOption ? '✓' : showResult && isSelected ? '✗' : String.fromCharCode(65 + index)}
                </div>
                <span className="text-sm text-zinc-700 dark:text-zinc-200 leading-relaxed">{option}</span>
              </div>
            </button>;
  })}
      </div>
      
      {showResult && <div className={`mt-5 p-4 rounded-xl ${isCorrect ? 'bg-green-100 dark:bg-green-900/40 border border-green-200 dark:border-green-800' : 'bg-amber-100 dark:bg-amber-900/40 border border-amber-200 dark:border-amber-800'}`}>
          <div className="flex items-start gap-3">
            <span className="text-xl">{isCorrect ? '🎉' : '💡'}</span>
            <div className="flex flex-col">
              <p className={`text-sm font-semibold m-0 mb-1 ${isCorrect ? 'text-green-800 dark:text-green-200' : 'text-amber-800 dark:text-amber-200'}`}>
                {isCorrect ? 'Correct!' : 'Not quite right'}
              </p>
              <p className="text-sm text-zinc-600 dark:text-zinc-300 m-0 leading-relaxed">{explanation}</p>
          </div>
          </div>
        </div>}
    </div>;
};

This challenge has one goal: build something real and share it.

You have 20 minutes. The app does not need to be polished. It needs to be something — a working prototype of a tool, dashboard, or workflow that would actually be useful in your role.

***

## Step 1 — Generate your build prompt

Start in Gemini chat (not Google AI Studio). Use the prompt below to get a clear, ready-to-use build prompt before you open the builder.

<Accordion title="Your starter prompt" icon="lightbulb">
  ```text theme={null}
  Ask me five questions one at a time to understand what I want to build in Google AI Studio.
  Start with my role and the problem I'm solving.
  Use plain, encouraging language.
  Summarise what I'm building in one bold sentence.
  Then write a ready-to-use build prompt.
  Make the final product visually elegant, clean, and modern.
  ```
</Accordion>

Answer each question briefly. Once Gemini has summarised your idea and written your build prompt, copy it into Google AI Studio to start building.

<Tip>
  If you are not sure what to build, think about a task you do manually right now — something that involves gathering information, comparing options, or producing a consistent output. That is usually the clearest starting point.
</Tip>

***

## Step 2 — Build in Google AI Studio

Go to <b>aistudio.google.com/apps</b>, paste your build prompt, and start.

Keep the model set to Gemini Flash. Iterate in short cycles: see what it produces, react to it specifically, and prompt again. Aim for three to five iterations in your available time.

<AccordionGroup>
  <Accordion title="If you get stuck">
    If the result is not moving in the right direction, try being more specific about one element at a time rather than describing everything at once.

    If a bug persists after two or three attempts on Flash, switch to Gemini Pro temporarily and ask it to fix the specific issue. Then switch back to Flash to continue.
  </Accordion>

  <Accordion title="If you finish early">
    Try adding a second feature. Or take a screenshot of your app and start a fresh project — paste in the screenshot and ask it to rebuild a cleaner version. This is good practice for the "start fresh, build properly" technique.

    Alternatively, open a second tab and build something entirely different. The best way to get faster at vibe coding is to do more of it.
  </Accordion>
</AccordionGroup>

***

## Step 3 — Share what you built

When the group comes back together, you will have two to three minutes to share your screen and walk through what you built.

You do not need a polished result. The goal is to show:

<Columns cols={2}>
  <Card title="What you set out to build" icon="bullseye-arrow">
    Describe the problem you were trying to solve and what you asked the AI to create.
  </Card>

  <Card title="What you actually got" icon="display">
    Show the working app — even if it is 70% of the way there. That is still the result of 20 minutes of work.
  </Card>
</Columns>

<Columns cols={2}>
  <Card title="What surprised you" icon="lightbulb">
    Share one thing the AI did that you did not expect — positive or not. These are often the most useful moments for the group.
  </Card>

  <Card title="What you would do next" icon="arrow-right">
    If you had another 20 minutes, what would you change, add, or rebuild? This shows you are thinking like a builder.
  </Card>
</Columns>

***

## What others built in 20 minutes

These examples come from participants across different roles and industries, all working in their first vibe coding session.

<AccordionGroup>
  <Accordion title="A building database with voice-note and PDF ingestion">
    A participant in the property sector built a searchable database of buildings that accepted voice notes and PDF uploads as input. The app extracted key data from each source and presented it in a consistent, filterable table.
  </Accordion>

  <Accordion title="A live project tracker from a process map">
    A team uploaded a FigJam process map PDF and asked the AI to generate a live project tracker with team progress views. The dashboard showed status per stage, owner assignments, and completion percentages — all from a single uploaded file.
  </Accordion>

  <Accordion title="An investor eligibility and data collection flow">
    An investor-focused tool that collected intake information, assessed eligibility based on defined criteria, and presented results in a sortable dashboard. The participant noted it would reduce hundreds of emails into a structured, reviewable database.
  </Accordion>

  <Accordion title="A sales deal trade-off analyser">
    A tool designed to pull deal data and present it through a priority matrix — helping a sales team decide which deals to pursue based on weighted criteria. Connected to a CRM data structure and produced a visual output with ranking.
  </Accordion>

  <Accordion title="An office space estimator">
    Started as a chatbot asking questions about team size, work patterns, and preferences. Evolved into an estimator that produced market deal analysis and space recommendations based on the answers collected. A clear example of how a first iteration becomes something more useful through prompting.
  </Accordion>
</AccordionGroup>

***

## Keep the practice going

Vibe coding gets faster with repetition. Each session, you learn a new way to phrase a prompt, a new type of problem it handles well, and a new shortcut in the tool.

Set a small challenge for yourself this week: find one manual task in your work and spend 30 minutes trying to build a tool that handles it.

<Tip>
  Keep a note of what you build. In three weeks, you will have a list of working tools and a much clearer sense of what is worth building next.
</Tip>

***

<Accordion title="Test your understanding">
  <Quiz
    question="You have built an app you are happy with in Google AI Studio. You want to share a link with your team so they can use it. What should you do?"
    options={[
  "Share your Google AI Studio project link directly — it is accessible to anyone with the URL",
  "Export the code and ask IT to deploy it on the company server",
  "Move the project to Replit, run the security scan, then publish with your preferred access settings",
  "Save a screenshot and share that instead"
]}
    correctIndex={2}
    explanation="Google AI Studio is a build environment, not a hosting platform. To share a working app with others, move the project to Replit. Before publishing, Replit runs an automated security scan — an important step before any app is accessible to your team or beyond."
  />
</Accordion>