Building a Web App with Gemini

A Prompt-Driven Approach

https://ai-app.ripplebroadband.com

The Iterative Process

We will build our application in three distinct steps. Each step uses a single, complete prompt that you can copy and paste into a Gemini chat window. This simulates building an app from scratch with each new feature request.

Build a foundational To-Do List app.
Rebuild the app, adding AI-powered features.
Rebuild the app again, adding a dark mode toggle.

Iteration 1: The Basic App

This prompt contains all the instructions needed to build the core application.

Create a fully functional to-do list application using HTML, CSS, and JavaScript, all within a single HTML file. The application should have a clean and modern user interface. It must include the following features: 1. An input field to add new tasks. 2. A button to submit new tasks. 3. A list that displays the tasks. 4. Each task in the list must have a checkbox to mark it as complete. When a task is marked complete, its text should have a line-through decoration. 5. The ability to edit a task by clicking on its text. 6. A "Clear Completed" button that removes all completed tasks from the list. 7. A "Clear All" button that removes all tasks from the list.

Iteration 2: Adding AI Features

This new prompt rebuilds the app from scratch, but adds instructions for AI integration.

Create a fully functional, AI-powered to-do list application using HTML, CSS, and JavaScript, all within a single HTML file. **Core Features:** 1. A clean, modern UI with an input field and "Add" button for tasks. 2. A list for tasks, each with a checkbox. Completed tasks should be styled with a line-through. 3. Clicking a task's text should allow editing. 4. "Clear Completed" and "Clear All" buttons. **AI-Powered Features:** The app must integrate with the Google Gemini API (gemini-2.5-flash-preview-05-20 model). 1. **Suggest Tasks:** * Include a separate section with an input field for a "project title" and a "✨ Suggest Tasks" button. * When this button is clicked, call the Gemini API with a prompt to generate 5-7 tasks for the given project title. * The API response must be a JSON object: `{ "tasks": ["task1", "task2", ...] }`. * Parse this JSON and add the suggested tasks to the main to-do list. 2. **Break Down Task:** * Add a "✨" icon button next to each individual task in the list. * When clicked, call the Gemini API with a prompt to break down that specific task into 3-5 smaller sub-tasks. * The API response must be the same JSON format: `{ "tasks": [...] }`. * Insert these sub-tasks into the list directly below the original task. **API Key Handling:** * Do not hardcode the API key. * If an AI feature is used and no API key is available, display a modal dialog prompting the user to enter their Gemini API key. * Store the entered key in the browser's session storage for subsequent API calls.

Iteration 3: Adding Dark Mode

This final prompt includes all previous features and adds the dark mode requirement.

Create a fully functional, AI-powered to-do list application with a dark mode feature, using HTML, CSS, and JavaScript in a single file. **Core Features:** 1. A clean, modern UI with an input field and "Add" button. 2. A list for tasks with checkboxes and line-through styling for completed tasks. 3. Click-to-edit functionality for tasks. 4. "Clear Completed" and "Clear All" buttons. **AI-Powered Features (Google Gemini API - gemini-2.5-flash-preview-05-20):** 1. **Suggest Tasks:** A section to input a project title, which calls the API to generate a list of tasks. The API must return `{ "tasks": [...] }`. 2. **Break Down Task:** A "✨" icon on each task that calls the API to generate sub-tasks, using the same JSON format. 3. **API Key Handling:** Prompt for and store the user's Gemini API key in session storage if it's not already present. **Dark Mode Feature:** 1. Add a theme toggle switch (e.g., with a sun/moon icon) to the UI. 2. Toggling the switch should add or remove a `.dark` class on the main body element. 3. Use CSS variables to define colors for both light and dark themes, ensuring all elements (background, text, inputs, buttons) are styled correctly in both modes. 4. **Persistence:** Save the user's theme preference (e.g., 'light' or 'dark') to the browser's local storage. 5. On page load, check local storage for a saved theme and apply it automatically.

The Final Result

The final prompt generates this complete application, which includes all requested features. Try it out below.

Publishing & Best Practices

Be Explicit and Complete: Each prompt should be a self-contained set of instructions, as if you're starting a new conversation.
Specify Formats: Clearly define data structures like JSON schemas. This is crucial for reliable API interactions.
You are the Developer: Always review, understand, and test the code Gemini generates. You are ultimately responsible for the final product.
Secure Your Keys: Never expose API keys in frontend code in a production app. Use a backend proxy or serverless function to protect them.

Thank You

Q & A