Module 4: Lab - Building a Startup Name Generator

In this lab, you will build a "Startup Name Generator." Users will type an industry into a text box, click a button, and see a list of 10 creative company names generated by AI.

We will walk through how to build this using the different tools we covered in Module 2. By the end, you will have a live, working app on the internet.

Before touching any tool, write your PRD. Here's an example:

Problem: Founders waste hours brainstorming company names. They need quick inspiration.

User: Early-stage startup founders and indie hackers.

Core Features: (1) Text input for industry/description, (2) Generate button that produces 10 creative names, (3) Copy-to-clipboard button for each name.

Anti-Features: No user accounts, no save history, no social sharing. Keep it simple.

Design: Dark theme, modern, clean. Single-page app. Mobile-responsive.

Copy this PRD and paste it as your very first prompt in whichever tool you choose below.

Firebase Studio handles the frontend, backend, and deployment in one place.

1. Setup: Go to Firebase Studio and create a new project.
2. The Initial Prompt: Paste your PRD into the main chat box. "Create a startup name generator. It needs a text input field for 'industry' and a 'Generate' button. When the button is clicked, generate a list of 10 creative names and display them below. Use a dark theme with neon green accents. Add a copy-to-clipboard icon next to each name."
3. Review the Blueprint: Firebase Studio will stop and show you a "Blueprint" of its plan. Review it carefully. If you want changes (like adding a loading animation), tell the AI to add it now, before it writes code.
4. Generate: Approve the blueprint. The AI will write the code and show you a live preview.
5. Iterate: Test the preview. If the names are generic, refine: "Update the AI prompt that generates names. Tell it to act like a branding agency. Names should be one word, memorable, and have an available .com domain extension."
6. Publish: Click the "Deploy" button. Your app is now live on the internet.

Lovable is highly visual and excellent for front-end design. It produces beautiful UIs quickly.

1. Setup: Go to Lovable.dev and start a new project.
2. Design the UI First: Ask the AI to build the visual interface before adding logic. This is the key principle with visual builders — design before logic. "Build a dark-themed page. Center a title that says 'Name Generator'. Below it, add a wide text input field with placeholder text 'Enter your industry (e.g., fintech, health, gaming)' and a purple gradient button that says 'Generate'. Below that, create a 2-column grid layout to hold 10 cards. Each card should have the name in bold and a small copy icon in the corner."
3. Add the Logic: Once the design looks good, add the AI functionality. "When I click the Generate button, take the text from the input field, use an AI API to generate 10 startup names based on that text, and display one name inside each card in the grid below. Show a loading spinner while generating."
4. Iterate on Quality: If the names look boring, refine the prompt: "Tell the AI generating the names to act like a high-end branding agency. Names should be catchy, unique, and between 1-2 words."
5. Add Polish: "Add a subtle animation where each name card fades in one by one with a 100ms delay. Add a toast notification that says 'Copied!' when the copy button is clicked."
6. Publish: Use Lovable's built-in deploy feature to put the site online.

For developers who want full control over the codebase and the ability to use any framework.

1. Setup: Open Cursor or your terminal with Antigravity. Create a new Next.js project: npx create-next-app@latest name-generator
2. The Initial Prompt: Ask the AI to generate the core files. "Create a Next.js application for a startup name generator. I need: (1) A frontend page with a text input, a submit button, and a grid to display results. (2) A backend API route at /api/generate that takes the industry text, calls the OpenAI API to generate 10 creative startup names, and returns them as a JSON array. Use the App Router and TypeScript."
3. Configure the API Key: The AI will likely hardcode your API key. Fix this immediately: "Move the OpenAI API key to an environment variable called OPENAI_API_KEY. Read it from process.env in the API route. Add a .env.local file to .gitignore."
4. Debug: If the code fails to run, you will see a red error message in the console. Copy the entire error message, paste it into the chat, and say: "I received this error when clicking the Generate button. Here is the full stack trace. Fix it."
5. Publish: Deploy to Vercel: npx vercel. Follow the prompts. Your app is live.

Replit gives you a full cloud development environment with built-in hosting.

1. Setup: Go to Replit and create a new "Next.js" template project.
2. The Initial Prompt: Ask the Replit AI to generate the core files. "Create a Next.js application for a name generator. I need a frontend page with a text input and a submit button. I also need a backend API route that takes the industry text, calls an LLM to generate 10 names, and returns them as a JSON list."
3. Debug: If the code fails to run, you will see a red error message in the console. Copy the entire error message, paste it into the chat, and say: "I received this error. Fix it."
4. Publish: Click the "Deploy" button in the top right corner of the Replit interface.