DEV Community

Cover image for How I Used Gemini CLI to Scrape Data and Build a Startup Directory Website
Timmy Dahunsi
Timmy Dahunsi

Posted on

How I Used Gemini CLI to Scrape Data and Build a Startup Directory Website

#webdev #programming #gemini #ai

In this guide, I’ll walk you through how I used the Gemini CLI Google’s command-line tool for interacting with their Gemini AI models to build a startup archive web app. Whether you’re curious about AI-assisted development or want to speed up your prototyping process, this hands-on guide is for you.

1. What is Gemini CLI?

Gemini CLI is a command-line interface for accessing Google’s Gemini models like Gemini 2.5 Flash and Pro. With it, you can:

  • Generate frontend and backend code
  • Build UI components from scratch
  • Create structured data (like JSON or Markdown)
  • Generate and edit images
  • Use it like an AI pair programmer

Gemini Cli

2. Installation

To install Gemini CLI globally:

npm install -g @google/gemini-cli
Enter fullscreen mode Exit fullscreen mode

Here’s a clearer and more polished version of that section:

Verifying Installation & Authentication

After installing the Gemini CLI, you’ll want to verify it’s working:

gemini version
Enter fullscreen mode Exit fullscreen mode

Next, authenticate your Google account:

gemini auth
Enter fullscreen mode Exit fullscreen mode

Gemini CLI supports three authentication methods:

  • Google Account (OAuth) — easiest for most users (used in this tutorial)
  • Gemini API Key
  • Vertex AI API Key

For this guide, I used Google OAuth. When you run gemini auth, it opens a browser window to complete the sign-in. If it fails in an integrated terminal, try using an external terminal.

Once authenticated, navigate to the folder where your project will live:

cd path/to/your/project-folder
Enter fullscreen mode Exit fullscreen mode

You’re now ready to start prompting Gemini!

3. How I Started: Planning & Prompting for Data

Before writing any code, I began by prompting Gemini to help generate:

  • A JSON dataset of fictional African startups
  • Descriptions, categories, and founders
  • Suggestions for logos and branding directions

🔹 Prompt Example:

“Generate a dataset of 20 African startups across Fintech, HealthTech, and EdTech. Include name, founder, category, description, and year founded. Return as a JSON array.”

It returned structured, usable content for startups.json.

startup result

4. Scaffolding the App with Gemini

To get started with the frontend setup, I asked Gemini to scaffold the base structure using this prompt:

🔹 Prompt:

“Scaffold a Next.js app using TypeScript and Tailwind CSS. Set up folders for components, pages, styles, and a data folder for the startups JSON.”

Gemini CLI did run the setup using npx create-next-app, but it was noticeably slower than doing it manually via the terminal. It also prompted me with a series of questions (e.g., for TurboPack, aliasing, and directory structure), which I had to answer interactively.

What actually happened:

  • Gemini triggered the npx create-next-app process under the hood.
  • I had to wait for a bit; the process was slower than expected.

  • It asked typical setup questions like:

    • Use src/ directory? (I chose No)
    • Enable experimental TurboPack? (I chose No)
    • Use custom import aliases? (I chose No)

My recommendation:

While it’s impressive that Gemini CLI can initiate project scaffolding, for a faster and more stable experience, I recommend running the setup manually in your terminal:

npx create-next-app@latest african-startups --ts --tailwind --eslint --app
Enter fullscreen mode Exit fullscreen mode

This gives you more control, especially if you already know your preferred configurations.

Once the setup is complete, Gemini can take over by generating the folder structure, components, and styling based on your prompts.

5. Generating the Homepage and Cards

Once the structure was ready, I used Gemini to generate components:

🔹 Prompt: 

Create a stunning, modern homepage using Next.js with the following requirements:

1. **Data Source**: Read startup data from `startups.json` located in the root folder of the project
2. **Card Design**: Display each startup as a visually appealing, responsive card featuring:
   - Company name (prominent typography)
   - Logo image (properly configured and optimized)
   - Category badge/tag
   - Description text

3. **Image Configuration**:
   - Configure Next.js Image component with proper domains in next.config.js
   - Support external logo URLs (from CDNs like unsplash.com, logo.dev, or placeholder services)
   - Add fallback images for missing logos
   - Implement proper image optimization and lazy loading
   - Set appropriate image sizes and aspect ratios for logos

4. **Design Standards**: 
   - Modern, clean aesthetic with beautiful typography
   - Responsive grid layout that works on all devices
   - Contemporary color scheme and spacing
   - Smooth hover effects and micro-interactions
   - Professional card shadows and borders

5. **Technical Requirements**:
   - Use Next.js App Router (App directory structure)
   - Implement proper responsive design (mobile-first)
   - Include TypeScript for type safety
   - Use Tailwind CSS for styling
   - Add loading states and error handling
   - Configure next.config.js for image domains

6. **File Structure Requirements**:
   - Place startups.json in the project root folder
   - Create proper component structure
   - Include all necessary configuration files

7. **User Experience**:
   - Fast loading with proper performance optimization
   - Accessible design following WCAG guidelines
   - Intuitive navigation and visual hierarchy
   - Search/filter functionality (bonus)

Please generate complete, production-ready code including:
- Complete file structure
- next.config.js with proper image domain configuration
- A sample startups.json file in the root folder with realistic startup data including logo URLs
- All component files with proper TypeScript interfaces
- Responsive styling with Tailwind CSS
Enter fullscreen mode Exit fullscreen mode

Gemini generated a grid-based layout using Tailwind CSS and React props. I tweaked the styling afterward.

6. Enhancing UI with Features

To polish the interface, I refined my prompt:

🔹 Prompt:

“Add a hero section with a call-to-action, a category filter dropdown, and a responsive search bar. Make the UI look clean and modern like Vercel or Product Hunt.”

Issue Faced: Initial design was too generic. Once I mentioned “Product Hunt,” the design suggestions improved.

Here’s the final result. I was hoping for a more polished design, but I suppose this reflects the current limit of its capabilities.

7. Limitations I Noticed

Here are a few rough edges I noticed while working with Gemini CLI:

Limitation Note
Not interactive Unlike create-next-app, it doesn’t let you choose options in CLI
UI quality Basic unless you provide design inspiration
Speed Gemini Flash is fast, but large prompts take time
Memory Gemini doesn’t “remember” previous outputs like ChatGPT thread history, so include context in every prompt

8. Prompting Best Practices

To get the most out of Gemini:

  • Be very specific: Mention frameworks, structure, and design inspiration
  • Include file/folder names in prompts
  • Ask for component-based generation (Header.tsx, Card.tsx)
  • Always review and refactor the output manually

9. Final Thoughts

Gemini CLI is a great companion for rapidly building MVPs and frontend heavy applications. It won’t replace a dev’s expertise, but it can give you a solid 60–70% head start especially when you’re experimenting or under tight deadlines.

Top comments (0)