Forem: Timmy Dahunsi

Build an AI Summarizer Agent in TypeScript Using Mastra (Part 2): Connect to Frontend

Timmy Dahunsi — Wed, 12 Nov 2025 09:13:54 +0000

Series Navigation: Part 1: Building the Agent | Part 2: Connect to Frontend (You are here)

In Part 1, we built a fully functional AI summarizer agent that can fetch content from URLs and generate intelligent summaries.
In this follow-up, you’ll learn how to connect that agent to a Next.js frontend using the Mastra Client, bringing your summarizer to life with a simple web interface.
Here’s what the final result looks like Ai-summarizer-agent.com:

Prerequisites

Completed Part 1 of this series
Basic knowledge of React and Next.js
The AI Summarizer Agent from Part 1 (code available on GitHub)

Setting Up Next.js with Mastra

Let's start by setting up a Next.js project that integrates with our Mastra agent.

Step 1: Create a Next.js Project

If you're starting fresh, create a new Next.js app:

npx create-next-app@latest ai-summarizer-app
cd ai-summarizer-app

When prompted, select:

TypeScript: Yes
ESLint: Yes
Tailwind CSS: Yes
src/ directory: Yes
App Router: Yes
Import alias: No (or default)

Step 2: Install Mastra Client

The Mastra Client allows your frontend to communicate with your agents:

npm install @mastra/core

Step 3: Copy Your Agent Code

Copy your agent code from Part 1:

Copy the entire src/mastra folder from Part 1
Place it in your new Next.js project at src/mastra
Copy your .env file with the Gemini API key

Your project structure should now look like:

ai-summarizer-app/
├── src/
│   ├── app/
│   │   ├── api/
│   │   │   └── summarize/
│   │   │       └── route.ts
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components/
│   │   └── SummarizerUI.tsx
│   ├── mastra/
│   │   ├── agents/
│   │   │   └── summarizer.ts
│   │   ├── tools/
│   │   │   └── web-scraper.ts
│   │   └── index.ts
├── .env
├── package.json
└── tsconfig.json

Creating the API Route

Next.js API routes will act as the bridge between your frontend and the Mastra agent.

Step 1: Create the Summarize API Route

Create a new file at src/app/api/summarize/route.ts:

import { summarizerAgent } from '@/src/mastra/agents/summarizer';
import { NextRequest, NextResponse } from 'next/server';

export async function POST(request: NextRequest) {
  try {
    const { input } = await request.json();

    if (!input || typeof input !== 'string') {
      return NextResponse.json(
        { error: 'Input is required', success: false },
        { status: 400 }
      );
    }

    const result = await summarizerAgent.generate(input, {
      maxSteps: 5,
    });

    return NextResponse.json({
      text: result.text,
      success: true,
    });
  } catch (error) {
    return NextResponse.json(
      {
        error: error instanceof Error ? error.message : 'Failed',
        success: false,
      },
      { status: 500 }
    );
  }
}

What's happening here:

We accept a POST request with an input field
We validate that input exists and is a string.
We call the summarizerAgent with the input and an optional parameter called maxSteps (maxSteps defines how many “reasoning steps” the agent can take while generating the summary)
We return the summarized text as a JSON response for real-time updates.
We handle errors gracefully

Part 3: Building the Frontend UI

Now let's create an interactive UI for our summarizer.

Step 1: Create the Summarizer Component

Create a new file at src/components/SummarizerUI.tsx:

'use client';

import { useState } from 'react';

type InputMode = 'url' | 'text';

export default function SummarizerUI() {
  const [input, setInput] = useState('');
  const [summary, setSummary] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [mode, setMode] = useState<InputMode>('url');

  const handleSummarize = async () => {
    if (!input.trim()) {
      setError('Please enter a URL or text to summarize');
      return;
    }

    setLoading(true);
    setError('');
    setSummary('');

    try {
      const response = await fetch('/api/summarize', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ input }),
      });

      if (!response.ok) {
        throw new Error('Failed to generate summary');
      }

      const data = await response.json();

      if (data.success) {
        setSummary(data.text);
      } else {
        setError(data.error || 'Failed to generate summary');
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Something went wrong');
    } finally {
      setLoading(false);
    }
  };

  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey && mode === 'url') {
      e.preventDefault();
      handleSummarize();
    }
  };

  return (
    <div className="max-w-4xl mx-auto p-6 space-y-6">
      {/* Header */}
      <div className="text-center space-y-2">
        <h1 className="text-4xl font-bold text-gray-900">AI Summarizer Agent</h1>
      </div>

      {/* Mode Selector */}
      <div className="flex gap-2 justify-center">
        <button
          onClick={() => setMode('url')}
          className={`px-4 py-2 rounded-lg font-medium transition-colors ${
            mode === 'url'
              ? 'bg-blue-600 text-white'
              : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
          }`}
        >
          URL
        </button>
        <button
          onClick={() => setMode('text')}
          className={`px-4 py-2 rounded-lg font-medium transition-colors ${
            mode === 'text'
              ? 'bg-blue-600 text-white'
              : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
          }`}
        >
          Text
        </button>
      </div>

      {/* Input Area */}
      <div className="space-y-2">
        <label className="block text-sm font-medium text-gray-700">
          {mode === 'url' ? 'Enter URL' : 'Enter Text'}
        </label>
        {mode === 'url' ? (
          <input
            type="text"
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyPress={handleKeyPress}
            placeholder="https://example.com/article"
            className="w-full px-4 py-3 border text-black border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            disabled={loading}
          />
        ) : (
          <textarea
            value={input}
            onChange={(e) => setInput(e.target.value)}
            placeholder="Paste your text here..."
            rows={6}
            className="w-full px-4 py-3 border text-black border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
            disabled={loading}
          />
        )}
      </div>

      {/* Submit Button */}
      <button
        onClick={handleSummarize}
        disabled={loading || !input.trim()}
        className="w-full bg-blue-600 text-white py-3 px-6 rounded-lg font-medium hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
      >
        {loading ? (
          <span className="flex items-center justify-center gap-2">
            <svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
              <circle
                className="opacity-25"
                cx="12"
                cy="12"
                r="10"
                stroke="currentColor"
                strokeWidth="4"
                fill="none"
              />
              <path
                className="opacity-75"
                fill="currentColor"
                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
              />
            </svg>
            Generating Summary...
          </span>
        ) : (
          'Summarize'
        )}
      </button>

      {/* Error Message */}
      {error && (
        <div className="p-4 bg-red-50 border border-red-200 rounded-lg">
          <p className="text-red-800 text-sm">
            <span className="font-medium">Error:</span> {error}
          </p>
        </div>
      )}

      {/* Summary Output */}
      {summary && (
        <div className="space-y-3">
          <h2 className="text-xl font-semibold text-gray-900">Summary</h2>
          <div className="p-6 bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-200 rounded-lg">
            <div
              className="prose prose-sm max-w-none text-gray-800"
              dangerouslySetInnerHTML={{
                __html: summary.replace(
                  /\*\*(.*?)\*\*/g,
                  '<strong>$1</strong>'
                ),
              }}
            />
          </div>
        </div>
      )}

      {summary && (
        <button
          onClick={() => {
            setSummary('');
            setInput('');
            setError('');
          }}
          className="text-sm text-gray-600 hover:text-gray-900 underline"
        >
          Clear and start over
        </button>
      )}

    </div>
  );
}

What's happening here:

We create a React component with state management for input, summary, loading, error, and mode (which toggles between 'url' and 'text' input types)
We build a handleSummarize function that sends a POST request to /api/summarize with the user's input and updates the UI based on the response
We render a clean interface with mode selector buttons, dynamic input fields (text input for URLs, textarea for text), and a submit button with loading states
We display the generated summary in a styled container with basic Markdown formatting (converting bold syntax to HTML)
We handle errors gracefully by showing error messages in a red alert box and include a "Clear and start over" button to reset the interface

Step 2: Update the Home Page

Update src/app/page.tsx to use our new component:

import SummarizerUI from '@/components/SummarizerUI';

export default function Home() {
  return (
    <main className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 py-12">
      <SummarizerUI />
    </main>
  );
}

Step 3: Update the Layout (Optional)

Update src/app/layout.tsx to add metadata:

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: 'AI Summarizer | Powered by Mastra',
  description: 'Intelligent content summarization using AI agents',
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {children}
      </body>
    </html>
  );
}

Testing Your Application

Let's test everything works correctly.

Run the Development Server

npm run dev

Open http://localhost:3000 in your browser.

Test URL Summarization

Click the "URL" button
Enter: https://blog.google/technology/ai/google-gemini-ai/
Click "Summarize"
Watch the agent fetch and summarize the content

Test Text Summarization

Click the " Text" button
Paste a long article or text
Click " Summarize"
See the immediate summary generation

Test Error Handling

Try an invalid URL
Try empty input
Verify error messages display correctly

Conclusion

You've successfully connected your Mastra AI agent to a beautiful Next.js frontend. You now have a production-ready application that:

What You've Learned

Mastra Client Integration: How to connect frontend to an agents
Next.js API Routes: Building backend endpoints for AI agents
Modern UI/UX: Creating intuitive interfaces for AI applications

Complete Code Repository

The full working code for both Part 1 and Part 2 is available on GitHub:

Repository: github.com/yourusername/ai-summarizer-mastra

Additional Resources

Documentation

Happy building!

If you found this tutorial helpful, consider sharing it with other developers learning AI agent development!

JavaScript devs, you don’t need to learn Python before building AI agents anymore I just wrote an article on building an AI Summarizer Agent that can summarize long texts and URLs using TypeScript.

Timmy Dahunsi — Tue, 04 Nov 2025 10:22:51 +0000

Timmy Dahunsi

Nov 4 '25

Build an AI Summarizer Agent in TypeScript Using Mastra (Part 1)

#webdev #ai #mastra #javascript

Comments

7 min read

JavaScript devs, you don’t need Python anymore to build AI agents I just wrote an article on building an AI summarizer agent using Mastra, an AI framework for JavaScript. It summarizes long text and even web pages!

Timmy Dahunsi — Tue, 04 Nov 2025 10:19:18 +0000

Timmy Dahunsi

Nov 4 '25

Build an AI Summarizer Agent in TypeScript Using Mastra (Part 1)

#webdev #ai #mastra #javascript

Comments

7 min read

Build an AI Summarizer Agent in TypeScript Using Mastra (Part 1)

Timmy Dahunsi — Tue, 04 Nov 2025 10:11:33 +0000

AI development is evolving rapidly. While many developers have experimented with making simple API calls to language models, the real leverage lies in building AI agents, autonomous systems that can reason, use tools, and iterate on tasks without constant handholding.

In this tutorial, you'll learn how to build an AI summarizer agent using Mastra, a TypeScript-first framework designed specifically for agent development. By the end, you'll have a working agent that can automatically fetch content from URLs and generate intelligent, structured summaries.

Prerequisites

Basic TypeScript and Node.js knowledge
Node.js v18 or higher installed
A free Google AI API key (get one here)

Understanding Mastra: Agents, Tools, and Workflows

Before we start building, let's quickly talk about what Mastra actually is and how its main parts (agents, tools, and workflows) all fit together.

Mastra is an open-source AI engineering framework that helps developers build AI agents, basically smart systems that can think, plan, and act using tools and workflows you define. It's built for developers, especially those familiar with JavaScript or TypeScript, who want to create AI-powered apps without tons of setup.

Here's how it works under the hood:

Tools

Tools are like small helpers that your agent can use to do things such as call an API or run a function. Think of them as utilities with clear inputs and outputs.

For example:

A tool that fetches random advice from an API.
A tool that summarizes text or checks a website for data.

They're built using createTool() and use Zod for input/output validation so your agent always knows what kind of data to expect.

Agents

Agents are the brains of your app. They use a language model(like Gemini 2.5, GPT-4, or Claude) to reason about tasks and decide which tools to call and when.

If tools are the hands, agents are the mind, they figure out what to do, then take action.

Workflows

Workflows are where you define a sequence of actions or logic flow that the agent follows. They connect multiple tools together to automate a process.

For example:

"When a user asks for advice, fetch a random quote from the Advice API and send it back in a friendly format."

Agents, tools, and workflows make Mastra a powerful system for building smart AI applications.

Setting Up Your Project

Let's get your development environment ready. Mastra makes this incredibly easy with its CLI.

Quick Start

Open your terminal and run:

# Create a new Mastra project
npm create mastra@latest ai-summarizer

The CLI will ask you a few setup questions.

Here's what the full CLI flow looks like when you run the command:

┌   Mastra Create
│
◇  Where should we create the Mastra files? (default: src/)
│  src/
│
◇  Select a default provider:
│  Google
│
◇  Enter your Google API key?
│  
│
◆  Make your IDE into a Mastra expert? (Installs Mastra's MCP server)
│  ○ Skip for now
│  ○ Cursor (project only)
│  ○ Cursor (global, all projects)
│  ○ Windsurf
│  ● VSCode
└

Once setup completes, Mastra will scaffold your project inside the src/ directory, including everything you need to start building your first AI agent.

Finally, navigate into your project folder:

# Navigate to your project
cd ai-summarizer

Your environment is now ready. Let's start building the AI Summarizer Agent!

Project Structure

When you create a new Mastra project, it comes with a sample weather agent to help you explore the basics.

For this tutorial, we won't be using that example, so go ahead and delete the weather-related files inside the src/mastra/agents and src/mastra/tools folders.

After cleaning up, we'll add two new files:

summarizer.ts in src/mastra/agents/ - our AI Summarizer Agent
web-scraper.ts in src/mastra/tools/ - a tool that fetches webpage content

Here's how your project structure should look once we're done:

ai-summarizer/
├── src/
│   ├── mastra/
│       ├── agents/
│       │   └── summarizer.ts
│       ├── tools/
│       │   └── web-scraper.ts
│       └── index.ts   
├── .env
├── package.json
└── tsconfig.json

Environment Configuration

Create a .env file in your project root:

GOOGLE_GENERATIVE_AI_API_KEY=your_api_key_here

Get your free API key from Google AI Studio. The free tier is generous and perfect for development and small projects.

Click “Create API key.” A modal will pop up, select “Create project,” give your key a name, and click “Create key.”
You’ll receive your Gemini API key, which we’ll add to the .env file.

Install Additional Dependencies

We'll need a couple more packages for web scraping:

npm install cheerio axios

Now you're ready to start building!

Building Your AI Agent

Let's build our agent step by step, starting with the tools it needs.

Step 1: Create the Web Scraper Tool

Tools are functions your agent can call to run logic, fetch data, or communicate with external APIs. Let's create a tool that fetches and extracts content from web pages.

In src/mastra/tools/web-scraper.ts paste this code:

import { createTool } from '@mastra/core';
import { z } from 'zod';
import axios from 'axios';
import * as cheerio from 'cheerio';

export const fetchWebContent = createTool({
  id: 'fetch-web-content',
  description: 'Fetches and extracts the main content from a web page URL. Use this when you need to get the text content of an article or web page.',
  inputSchema: z.object({
    url: z.string().url().describe('The URL of the web page to fetch'),
  }),
  outputSchema: z.object({
    content: z.string().describe('The extracted text content'),
    title: z.string().describe('The page title'),
    success: z.boolean().describe('Whether the fetch was successful'),
    error: z.string().optional().describe('Error message if fetch failed'),
  }),
  execute: async ({ context }) => {
    try {
      const { url } = context;

      // Fetch the HTML
      const response = await axios.get(url, {
        timeout: 10000,
        headers: {
          'User-Agent': 'Mozilla/5.0 (compatible; SummarizerBot/1.0)',
        },
      });

      // Parse HTML with Cheerio
      const $ = cheerio.load(response.data);

      // Remove unwanted elements
      $('script, style, nav, footer, iframe, aside').remove();

      // Extract title
      const title = $('title').text().trim() || 
                   $('h1').first().text().trim() || 
                   'Untitled';

      // Extract main content
      // Try to find main content area first
      let content = $('article').text() || 
                    $('main').text() || 
                    $('.content').text() || 
                    $('body').text();

      // Clean up the content
      content = content
        .replace(/\s+/g, ' ')  // Replace multiple spaces with single space
        .replace(/\n+/g, '\n') // Replace multiple newlines with single newline
        .trim();

      // Limit content length to avoid token limits
      const maxLength = 10000;
      if (content.length > maxLength) {
        content = content.substring(0, maxLength) + '...';
      }

      return {
        content,
        title,
        success: true,
      };
    } catch (error) {
      return {
        content: '',
        title: '',
        success: false,
        error: error instanceof Error ? error.message : 'Unknown error occurred',
      };
    }
  },
});

Key Points:

Input Schema: Zod is used here to define and validate inputs. The agent is able to knows what parameters the tool needs.
Output Schema: It defines what the tool returns, helping the agent understand the results.
Description: This tells the agent when and how to use the tool.
Error Handling: Always return structured errors so the agent can decide what to do next.
Content Cleaning: Removes scripts, styles, and navigation elements to get clean text.

Step 2: Initialize Mastra Core

Now, let's set up the Mastra core configuration. This is where we register our agents so Mastra knows how to use them.

In src/mastra/index.ts, paste this code:

import { Mastra } from "@mastra/core";
import { summarizerAgent } from "./agents/summarizer";

export const mastra = new Mastra({
  agents: { summarizerAgent },
});

This initializes Mastra and makes your summarizerAgent accessible throughout the app.

Step 3: Create the Summarizer Agent

Now for the exciting part, bringing everything together into an agent!

In src/mastra/agents/summarizer.ts, paste this code:

import { Agent } from '@mastra/core';
import { fetchWebContent } from '../tools/web-scraper';

export const summarizerAgent = new Agent({
  name: 'summarizer',
  instructions: `You are an expert content summarizer. Your job is to create clear, concise, and informative summaries.

When given a URL:
1. Use the fetch-web-content tool to retrieve the page content
2. If the fetch fails, inform the user politely

When summarizing content (from URL or direct text):
1. Create a structured summary with:
   - **Main Topic**: One sentence describing what the content is about
   - **Key Points**: 3-5 bullet points highlighting the most important information
   - **Key Takeaway**: One sentence capturing the essential message

Guidelines:
- Be concise but informative
- Focus on facts and main ideas, not minor details
- Use clear, professional language
- If the content is too short to summarize meaningfully, say so
- If the content is unclear or low-quality, mention that in your response`,

  model: 'google/gemini-2.5-pro',
  tools: { fetchWebContent },
});

The Instructions:

The instructions field is where you guide your agent's behavior. This is like hiring an employee and giving them their job description. Good instructions:

Define the role: "You are an expert content summarizer"
Specify the workflow: When to use tools and in what order
Set expectations: What the output should look like
Handle edge cases: What to do when things go wrong

Tool Registration:

The tools object contains all available tools the agent can use.

Testing Your Agent in the Playground

Mastra has a built-in playground where you can test your agent, tools, and workflows.

Run the development server:

npm run dev

You will see http://localhost:4111/ in your CLI. Open that URL in your browser and you'll see the Mastra playground.

Testing the Agent

You can test your agent by:

Testing with a URL:
- Paste a URL like https://blog.google/technology/ai/google-gemini-ai/
- Click "Run"
- Watch the agent fetch the content and generate a summary

Testing with direct text:
- Paste or type a long text
- Click "Run"
- See the agent summarize it immediately

What Just Happened?

You passed input to the agent
The agent read its instructions
For the URL example:
- Agent reasoned: "This is a URL, I need to fetch it"
- Agent called the fetch-web-content tool
- Agent received the content
- Agent generated a structured summary
For the text example:
- Agent reasoned: "This is direct text, I can summarize immediately"
- Agent generated the summary
Agent returned the final result

This is the power of agents - they autonomously decide what steps to take!

Conclusion

You've built a production-ready AI agent that can autonomously fetch content and generate intelligent summaries. More importantly, you now understand the fundamental concepts of AI agent development:

What's Next?

In Part 2 of this series, we'll take your agent to the next level by:

Building a beautiful frontend interface
Connecting your agent to a web application
Adding real-time streaming responses

Stay tuned!

Complete Code Repository

The full working code for this tutorial is available on GitHub:

Repository: https://github.com/Timmydee/ai-summarizer

Happy coding!

Teach Your Free AI Chatbot with Reports & Web Data (RAG Basics)

Timmy Dahunsi — Fri, 22 Aug 2025 16:48:55 +0000

Welcome back to our climate chatbot series! In Lesson 1, we built a basic chatbot with Gemini AI. In this tutorial, we're improving it with real knowledge base by imitating a technique called Retrieval-Augmented Generation (RAG). Your chatbot will now learn from actual climate reports, sustainability articles, and climate research papers!

By the end of this tutorial, your chatbot won't just rely on Gemini's training data, it will have its own knowledge base that you control.

What We're Building Today

New Features:

PDF Document Loading: Upload and process climate PDFs (IPCC reports, research papers)

Web Article Integration: Automatically fetch content from climate websites

Smart Document Chunking: Break large documents into manageable pieces

Source Citation: Bot cites specific documents when answering

Knowledge Base Display: Show loaded documents in sidebar

Getting Started

Prerequisites

Completed Day 1 tutorial (basic chatbot working)
Same setup: Python, Streamlit, Gemini API key
45-60 minutes to implement

Installing Our New Dependencies

Before we begin coding, let's understand what each new library does and why we need it:

# Install additional packages for document processing
pip install pypdf langchain-text-splitters requests beautifulsoup4

** Library Breakdown:**

pypdf - It extracts text content from PDF files.
langchain-text-splitters - It breaks large documents into smaller, manageable pieces.
requests - It downloads web pages and handles HTTP requests.
beautifulsoup4 - It parses HTML and extracts clean text from web pages.

Setting Up Your Project:

# Create the lesson folder
mkdir lesson2-knowledge-base
cd lesson2-knowledge-base

Setting Up Your Project Files

Open your project folder in VS Code (or your preferred code editor) and create these files:

app.py
knowledge_base.py
requirements.txt

Your folder structure should look like this:

climate-chatbot-series/
├── lesson1-basic-chatbot/
│   ├── app.py
│   ├── requirements.txt
├── lesson2-knowledge-base/          # ← This lesson
│   ├── app.py                       # Main application
│   ├── knowledge_base.py            # Document processing system
│   ├── requirements.txt             # Updated dependencies                         
└

Step 1: Document Processing

Before we can build a chatbot that understands research papers or articles, we need a way to process documents into smaller, searchable pieces.
We will build this logic inside our knowledge_base.py file, it will handle loading PDFs, fetching online articles, splitting text into chunks, and keeping track of all sources.

Here’s the complete code you can copy into knowledge_base.py:

# knowledge_base.py
import os
import requests
from pypdf import PdfReader
from bs4 import BeautifulSoup
from langchain_text_splitters import RecursiveCharacterTextSplitter
import streamlit as st
from typing import List, Dict
import hashlib

class ClimateKnowledgeBase:
    def __init__(self):
        self.documents = []
        self.text_splitter = RecursiveCharacterTextSplitter(
            chunk_size=1000,
            chunk_overlap=200,
            length_function=len,
        )

    def load_pdf(self, file_path: str, source_name: str = None) -> List[Dict]:
        """Load and process a PDF file"""
        try:
            if source_name is None:
                source_name = os.path.basename(file_path)

            # Read PDF
            reader = PdfReader(file_path)
            full_text = ""

            for page in reader.pages:
                full_text += page.extract_text() + "\n"

            # Split into chunks
            chunks = self.text_splitter.split_text(full_text)

            # Create document objects
            documents = []
            for i, chunk in enumerate(chunks):
                doc = {
                    "content": chunk,
                    "source": source_name,
                    "source_type": "PDF",
                    "chunk_id": f"{source_name}_chunk_{i}",
                    "page_count": len(reader.pages)
                }
                documents.append(doc)

            self.documents.extend(documents)
            return documents

        except Exception as e:
            st.error(f"Error loading PDF {file_path}: {e}")
            return []

    def load_web_article(self, url: str, source_name: str = None) -> List[Dict]:
        """Load and process a web article"""
        try:
            if source_name is None:
                source_name = url.split("//")[1].split("/")[0]  # Extract domain

            # Fetch webpage
            headers = {
                'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36'
            }
            response = requests.get(url, headers=headers, timeout=10)
            response.raise_for_status()

            # Parse HTML
            soup = BeautifulSoup(response.content, 'html.parser')

            # Remove unwanted elements
            for element in soup(['script', 'style', 'nav', 'header', 'footer', 'aside']):
                element.decompose()

            # Extract text content
            text = soup.get_text()

            # Clean up text
            lines = [line.strip() for line in text.splitlines()]
            text = ' '.join([line for line in lines if line])

            # Split into chunks
            chunks = self.text_splitter.split_text(text)

            # Create document objects
            documents = []
            for i, chunk in enumerate(chunks):
                doc = {
                    "content": chunk,
                    "source": source_name,
                    "source_type": "Web Article",
                    "url": url,
                    "chunk_id": f"{source_name}_chunk_{i}"
                }
                documents.append(doc)

            self.documents.extend(documents)
            return documents

        except Exception as e:
            st.error(f"Error loading web article {url}: {e}")
            return []

    def search_documents(self, query: str, max_results: int = 3) -> List[Dict]:
        """Simple keyword search through documents"""
        query_lower = query.lower()
        scored_docs = []

        for doc in self.documents:
            content_lower = doc["content"].lower()

            # Simple scoring based on keyword matches
            score = 0
            query_words = query_lower.split()

            for word in query_words:
                if len(word) > 3:  # Only count longer words
                    score += content_lower.count(word)

            if score > 0:
                doc_copy = doc.copy()
                doc_copy["relevance_score"] = score
                scored_docs.append(doc_copy)

        # Sort by relevance and return top results
        scored_docs.sort(key=lambda x: x["relevance_score"], reverse=True)
        return scored_docs[:max_results]

    def get_document_stats(self) -> Dict:
        """Get statistics about loaded documents"""
        if not self.documents:
            return {"total_chunks": 0, "sources": 0, "types": []}

        sources = set(doc["source"] for doc in self.documents)
        types = set(doc["source_type"] for doc in self.documents)

        return {
            "total_chunks": len(self.documents),
            "sources": len(sources),
            "source_list": list(sources),
            "types": list(types)
        }

# Predefined climate knowledge sources
CLIMATE_SOURCES = {
    "IPCC AR6 Summary": "https://www.ipcc.ch/report/ar6/wg1/downloads/report/IPCC_AR6_WGI_SPM.pdf",
    "NASA Climate Change": "https://climate.nasa.gov/what-is-climate-change/",
    "EPA Climate Indicators": "https://www.epa.gov/climate-indicators",
    "NOAA Climate Science": "https://www.climate.gov/news-features/understanding-climate/climate-change-snow-and-ice",
    "IEA Energy Transition": "https://www.iea.org/topics/energy-transitions"
}

Step 2: Build the Main Application

Now that we have our knowledge_base.py for processing and storing documents, the next step is to create the main application file app.py.

This file will act as the entry point of our chatbot. It will import the knowledge base we built earlier, provide a simple Streamlit interface so users can upload PDFs or paste article links, display stats about the loaded knowledge base, allow basic keyword search over documents

Here’s the complete code for app.py:

# app.py - Enhanced with Document Loading
import os
from dotenv import load_dotenv
load_dotenv()

import streamlit as st
import google.generativeai as genai
from knowledge_base import ClimateKnowledgeBase, CLIMATE_SOURCES

# Configure the Gemini API
API_KEY = os.getenv("GEMINI_API_KEY")
genai.configure(api_key=API_KEY)

# Configure Streamlit page
st.set_page_config(
    page_title="Climate Helper v3 - Knowledge Enhanced", 
    layout="wide"
)

# Initialize knowledge base in session state
if "knowledge_base" not in st.session_state:
    st.session_state.knowledge_base = ClimateKnowledgeBase()

if "messages" not in st.session_state:
    st.session_state.messages = [
        {
            "role": "assistant", 
            "content": "Hi! I'm your enhanced climate helper with access to real climate documents and research! Upload PDFs or let me fetch climate articles to give you more accurate, source-backed answers. What would you like to learn about?"
        }
    ]

def create_knowledge_enhanced_prompt(user_question: str, relevant_docs: list) -> str:
    """Create a prompt that includes relevant document context"""

    context = ""
    sources_used = []

    if relevant_docs:
        context = "\n\nRELEVANT CLIMATE KNOWLEDGE:\n"
        for i, doc in enumerate(relevant_docs, 1):
            context += f"\nSource {i} ({doc['source']}):\n{doc['content']}\n"
            sources_used.append(doc['source'])

    prompt = f"""You are a helpful climate and sustainability expert. Answer the user's question using your knowledge and the provided climate documents.

USER QUESTION: {user_question}
{context}

Please provide a helpful, accurate response that:
1. Answers the user's question thoroughly
2. References the provided sources when relevant
3. Cites specific source names when using information from documents
4. Is educational and encouraging
5. Suggests related topics they might want to explore

If using information from the provided sources, please mention them like: "According to [Source Name]..." or "The [Document Name] indicates..."
"""

    return prompt, sources_used

def display_knowledge_base_sidebar():
    """Display knowledge base management in sidebar"""
    with st.sidebar:
        st.markdown("## 📚 Knowledge Base")

        # Show current stats
        stats = st.session_state.knowledge_base.get_document_stats()

        if stats["total_chunks"] > 0:
            st.success(f"📊 Loaded: {stats['total_chunks']} chunks from {stats['sources']} sources")

            with st.expander("📋 Loaded Sources"):
                for source in stats["source_list"]:
                    st.write(f"• {source}")
        else:
            st.info("No documents loaded yet. Add some below!")

        st.markdown("### 📄 Upload PDF Documents")
        uploaded_file = st.file_uploader(
            "Upload climate reports, research papers, etc.",
            type=['pdf'],
            help="Upload IPCC reports, climate research papers, or sustainability documents"
        )

        if uploaded_file is not None:
            # Save uploaded file
            os.makedirs("documents", exist_ok=True)
            file_path = os.path.join("documents", uploaded_file.name)

            with open(file_path, "wb") as f:
                f.write(uploaded_file.getvalue())

            # Process the PDF
            with st.spinner(f"Processing {uploaded_file.name}..."):
                documents = st.session_state.knowledge_base.load_pdf(file_path, uploaded_file.name)
                if documents:
                    st.success(f"✅ Loaded {len(documents)} chunks from {uploaded_file.name}")
                    st.rerun()

        st.markdown("### 🌐 Load Web Articles")

        # Predefined sources
        st.markdown("#### Quick Add Climate Sources:")
        selected_source = st.selectbox(
            "Choose a climate source",
            [""] + list(CLIMATE_SOURCES.keys())
        )

        if st.button("📥 Load Selected Source") and selected_source:
            with st.spinner(f"Loading {selected_source}..."):
                url = CLIMATE_SOURCES[selected_source]
                documents = st.session_state.knowledge_base.load_web_article(url, selected_source)
                if documents:
                    st.success(f"✅ Loaded {len(documents)} chunks from {selected_source}")
                    st.rerun()

        # Custom URL input
        st.markdown("#### Add Custom Article:")
        custom_url = st.text_input("Enter article URL")
        custom_name = st.text_input("Source name (optional)")

        if st.button("📥 Load Custom Article") and custom_url:
            with st.spinner("Loading article..."):
                documents = st.session_state.knowledge_base.load_web_article(
                    custom_url, 
                    custom_name if custom_name else None
                )
                if documents:
                    st.success(f"✅ Loaded {len(documents)} chunks")
                    st.rerun()

        # Clear knowledge base
        if st.button("🗑️ Clear Knowledge Base"):
            st.session_state.knowledge_base = ClimateKnowledgeBase()
            st.success("Knowledge base cleared!")
            st.rerun()

def friendly_wrap_with_sources(raw_text: str, sources_used: list) -> str:
    """Enhanced friendly wrapper that includes source information"""

    sources_section = ""
    if sources_used:
        unique_sources = list(set(sources_used))
        sources_section = f"\n\n📚 **Sources used in this response:**\n"
        for source in unique_sources:
            sources_section += f"• {source}\n"

    return f"Great question! 🌱\n\n{raw_text.strip()}{sources_section}\n\nWould you like me to elaborate on any part of this, or do you have other climate questions?"

def display_messages():
    """Display all messages in the chat"""
    for msg in st.session_state.messages:
        author = "user" if msg["role"] == "user" else "assistant"
        with st.chat_message(author):
            st.write(msg["content"])

# Create main layout
col1, col2 = st.columns([2, 1])

with col1:
    st.title("🌱 Climate Helper v3.0")
    st.subheader("Enhanced with Real Climate Knowledge!")

    # Display messages
    display_messages()

    # Handle new user input
    prompt = st.chat_input("Ask me about climate topics (I can now reference documents!)...")

    if prompt:
        # Add user message to history
        st.session_state.messages.append({"role": "user", "content": prompt})

        # Show user message
        with st.chat_message("user"):
            st.write(prompt)

        # Show thinking indicator
        with st.chat_message("assistant"):
            placeholder = st.empty()

            # Search for relevant documents
            with st.spinner("Searching knowledge base..."):
                relevant_docs = st.session_state.knowledge_base.search_documents(prompt, max_results=3)

            if relevant_docs:
                placeholder.write("🔍 Found relevant documents, generating response...")
            else:
                placeholder.write("🤔 Thinking... (no specific documents found, using general knowledge)")

            try:
                # Create enhanced prompt with document context
                enhanced_prompt, sources_used = create_knowledge_enhanced_prompt(prompt, relevant_docs)

                # Generate response with Gemini
                model = genai.GenerativeModel('gemini-1.5-flash')
                response = model.generate_content(enhanced_prompt)

                answer = response.text
                friendly_answer = friendly_wrap_with_sources(answer, sources_used)

            except Exception as e:
                friendly_answer = f"I'm sorry, I encountered an error: {e}. Please try asking your question again."

            # Replace placeholder with actual response
            placeholder.write(friendly_answer)

            # Add assistant response to history
            st.session_state.messages.append({"role": "assistant", "content": friendly_answer})

            # Show relevant document chunks if found
            if relevant_docs:
                with st.expander(f"📄 View {len(relevant_docs)} relevant document excerpts"):
                    for i, doc in enumerate(relevant_docs, 1):
                        st.markdown(f"**Source {i}: {doc['source']}** (Score: {doc['relevance_score']})")
                        st.markdown(f"```
{% endraw %}
\n{doc['content'][:300]}...\n
{% raw %}
```")
                        st.markdown("---")

with col2:
    display_knowledge_base_sidebar()

# Footer
st.markdown("---")
stats = st.session_state.knowledge_base.get_document_stats()
st.markdown(f"💡 **Knowledge Enhanced**: {stats['total_chunks']} document chunks loaded from {stats['sources']} sources")

Step 3: Updated Requirements

Update your requirements.txt for this lesson:

# Core Streamlit and AI
streamlit==1.28.0
python-dotenv==1.0.0
google-generativeai==0.3.0

# Document Processing Dependencies
pypdf==3.17.0              # PDF text extraction
langchain-text-splitters==0.2.0  # Intelligent text chunking
requests==2.31.0           # Web content fetching
beautifulsoup4==4.12.0     # HTML parsing and cleaning

Step 4: Testing Your Enhanced Chatbot

Installation and Setup:

# Navigate to lesson folder
cd lesson2-knowledge-base

# Install dependencies
pip install -r requirements.txt

# Run the enhanced chatbot
streamlit run app.py

Testing Workflow:

Start with Web Sources: Click "Load Selected Source" → Choose "NASA Climate Change"
Upload a PDF: Find any climate PDF online and upload it
Ask Specific Questions:
- "What does NASA say about greenhouse gases?"
- "According to the uploaded report, what are the main climate impacts?"
Check Citations: Verify responses include source names
View Document Excerpts: Expand the document sections to see original text

Expected Behavior:

Responses include phrases like "According to NASA Climate Change..."
Sidebar shows loaded document statistics
Document excerpts appear below responses
Knowledge persists during the chat session

Understanding the Architecture

The RAG Pipeline:

User Question → Document Search → Relevant Chunks → Enhanced Prompt → AI Response with Citations

Key Components:

Document Ingestion: PDF + Web → Clean Text
Text Chunking: Large Text → Manageable Pieces
Storage: In-Memory Document Store
Retrieval: Keyword-Based Search
Generation: AI with Context + Sources

Why This Approach Works:

Scalable: Add unlimited documents
Transparent: Users see which sources inform responses
Accurate: AI has access to latest information
Educational: Promotes learning from authoritative sources

Troubleshooting

Common Issues and Solutions:

PDF not loading?

Ensure PDF contains text (not scanned images)
Try smaller files first (< 10MB)
Check that pypdf installed correctly: pip show pypdf

Web articles not loading?

Some sites block automated requests
Try different URLs (government sites usually work well)
Check internet connection

"No relevant documents found"

Use specific keywords from your uploaded documents
Verify documents actually loaded (check sidebar stats)
Try broader search terms

Slow performance?

Large documents take time to process
Consider reducing chunk size in knowledge_base.py
Limit simultaneous document loading

What's Next?

We've successfully built a knowledge-enhanced chatbot that can learn from real climate documents and cite its sources! This is the foundation of professional RAG systems.

Future Enhancement Ideas:

Document Categories: Organize by topic (mitigation, adaptation, science)
Automatic Updates: Scheduled fetching of new reports
Quality Scoring: Rate source reliability
Multi-language Support: Process documents in different languages

Get the Complete Code

GitHub Repository: https://github.com/your-username/climate-chatbot-series

Includes sample climate documents for testing

Questions? Connect with me on LinkedIn - I'd love to see what climate knowledge you add to your bot!

Conclusion

You've transformed your basic chatbot into a specialized climate knowledge system that can:

Process PDF reports and web articles
Search through loaded content
Provide source-backed responses
Show transparent document usage

This is the basics of RAG (Retrieval Augmented Generation) in action! Your chatbot now learns from authoritative climate sources and can provide more accurate, up-to-date information than general AI models alone.

In the next lesson where we'll add semantic search and advanced retrieval techniques. For now, try adding your own climate documents to the knowledge base and see how the chatbot responds!

Let's build a Free Chatbot with Streamlit and Gemini AI (Step-by-Step for Beginners)

Timmy Dahunsi — Tue, 19 Aug 2025 17:36:53 +0000

This tutorial will walk you through creating a minimal, working chatbot from scratch in just a few steps. By the end, you'll have a functional web application that users can interact with to learn about climate topics.

What We're Building

We'll create a chat interface where users can type questions about climate and sustainability topics and receive intelligent responses powered by Google's Gemini AI. This first version focuses on getting the core functionality working. We'll keep it simple with no memory between conversations and no complex features, just a clean foundation we can build upon.

Prerequisites

Before we start, make sure you have:

Python 3.7 or higher installed
A Google AI API key for Gemini (get one from Google AI Studio)
Basic familiarity with terminal/command line
A code editor like VS Code (recommended for beginners)

Good News About Costs: Gemini offers a generous free tier that includes up to 15 requests per minute and 1,500 requests per day, which is perfect for learning and building personal projects like this chatbot!

Step 1: Setting Up Your Development Environment

First, let's create a dedicated project folder and set up a clean Python environment:

# Create and navigate to project folder
mkdir climate-chatbot
cd climate-chatbot

# Create virtual environment
python -m venv .venv

# Activate virtual environment
# On Mac/Linux:
source .venv/bin/activate

# On Windows (PowerShell):
# .venv\Scripts\Activate.ps1

# On Windows (Command Prompt):
# .venv\Scripts\activate

Now install the required dependencies:

# Upgrade pip and install libraries
pip install --upgrade pip
pip install streamlit python-dotenv google-generativeai

Setting Up Your Project Files

Open your project folder in VS Code (or your preferred code editor) and create these files:

app.py (our main application)
requirements.txt (for easy dependency management)
.env (for storing your API key securely)
.gitignore (to prevent sensitive files from being uploaded to version control)

Your folder structure should look like this:

climate-chatbot/
├── .venv/           (virtual environment folder)
├── app.py           (main application file)
├── requirements.txt (dependencies list)
├── .env            (API key storage)
└── .gitignore      (files to ignore in git)

Getting Your Gemini API Key

Gemini offers excellent free models that are perfect for our chatbot:

Navigate to Google AI Studio: Go to https://aistudio.google.com/apikey
Sign up or log in with your Google account
Create API Key: Click the "Create API Key" button
Copy your key: Save this key securely - you'll need it in the next step

Free Tier Benefits:

15 requests per minute
1,500 requests per day
Access to powerful models like gemini-1.5-flash
No credit card required to start

This free allowance is more than enough for learning, development, and even small production applications!

Step 2: Configuring Your API Key

In your .env file, add your API key:

GEMINI_API_KEY=your_actual_api_key_here

Security Note: Never commit your .env file to version control.

Create a .gitignore File

In your .gitignore file, add these lines to keep sensitive files safe:

.env
.venv/
__pycache__/
*.pyc

This ensures your API keys and virtual environment won't accidentally be shared if you upload your project to GitHub.

Step 3: Building the Chat Application

Now for the main event—creating our chatbot application. Open your app.py file and add the following code:

# app.py
import os
from dotenv import load_dotenv
load_dotenv()

import streamlit as st
import google.generativeai as genai

# Configure the Gemini API
API_KEY = os.getenv("GEMINI_API_KEY")
genai.configure(api_key=API_KEY)

# Configure Streamlit page
st.set_page_config(page_title="Climate Helper Chatbot", layout="centered")
st.title("🌱 Climate Helper Chatbot")
st.subheader("Your AI assistant for climate, solar, and sustainability questions")

# Initialize chat history
if "messages" not in st.session_state:
    st.session_state.messages = [
        {
            "role": "assistant", 
            "content": "Hi! I'm your climate helper. Ask me anything about solar energy, sustainability, or climate science. How can I help you today?"
        }
    ]

def display_messages():
    """Display all messages in the chat history"""
    for msg in st.session_state.messages:
        author = "user" if msg["role"] == "user" else "assistant"
        with st.chat_message(author):
            st.write(msg["content"])

def friendly_wrap(raw_text):
    """Add a friendly tone to AI responses"""
    return (
        "Great question! 🌱\n\n"
        f"{raw_text.strip()}\n\n"
        "Would you like me to elaborate on any part of this, or do you have other climate questions?"
    )

# Display existing messages
display_messages()

# Handle new user input
prompt = st.chat_input("Ask me about climate, solar installations, sustainability...")

if prompt:
    # Add user message to history
    st.session_state.messages.append({"role": "user", "content": prompt})

    # Show user message
    with st.chat_message("user"):
        st.write(prompt)

    # Show thinking indicator while processing
    with st.chat_message("assistant"):
        placeholder = st.empty()
        placeholder.write("🤔 Thinking...")

        # Call Gemini API
        try:
            model = genai.GenerativeModel('gemini-1.5-flash')
            response = model.generate_content(
                f"You are a helpful climate and sustainability expert. Please provide accurate, encouraging information about: {prompt}"
            )

            # Extract response text
            answer = response.text
            friendly_answer = friendly_wrap(answer)

        except Exception as e:
            friendly_answer = f"I'm sorry, I encountered an error: {e}. Please try asking your question again."

        # Replace thinking indicator with actual response
        placeholder.write(friendly_answer)

        # Add assistant response to history
        st.session_state.messages.append({"role": "assistant", "content": friendly_answer})

    # Refresh the page to show updated chat
    st.rerun()

Step 4: Running Your Chatbot

Important: Save all your files before running the application!

With your code in place, it's time to see your chatbot in action:

streamlit run app.py

Streamlit will start a local server and provide a URL (typically http://localhost:8501). Open this URL in your browser, and you'll see your climate chatbot ready to answer questions!

Optional: Create a Requirements File

For easy project sharing and deployment, create a requirements.txt file with:

streamlit==1.28.0
python-dotenv==1.0.0
google-generativeai==0.3.0

This allows others to install all dependencies with pip install -r requirements.txt.

Understanding the Code

Let's break down what our application does:

Environment Setup: We use python-dotenv to securely load our API key from the .env file.

Streamlit Interface: The st.chat_input() and st.chat_message() functions create a modern chat interface that feels familiar to users.

Session State: Streamlit's session state keeps track of the conversation history, so users can see their previous questions and the bot's responses.

Gemini Integration: We configure the Google Generative AI library with our API key, then create a GenerativeModel instance using the free gemini-1.5-flash model to generate responses to user questions.

Friendly Responses: The friendly_wrap() function adds encouraging language to make the bot feel more helpful and engaging.

Troubleshooting Common Issues

Authentication Errors: Double-check that your GEMINI_API_KEY is correctly set in your .env file and that the key is valid.

Import Errors: If you encounter issues with the Google client import, try updating the package: pip install --upgrade google-generativeai

Model Availability Issues: If you get a "model not found" error, try these free alternatives:

gemini-1.5-flash (fastest, recommended for development)
gemini-1.5-pro (more capable but slower, still free within limits)

You can also list available models by adding this code temporarily:

for model in genai.list_models():
    if 'generateContent' in model.supported_generation_methods:
        print(model.name)

Free Tier Limits: If you hit rate limits, the free tier allows:

15 requests per minute
1,500 requests per day
Simply wait a moment and try again if you exceed these limits

Testing Your Chatbot

Try asking your chatbot questions like:

"What are the benefits of solar panels for homes?"
"How can I reduce my carbon footprint?"
"What's the difference between renewable and clean energy?"

You should see informative, friendly responses that encourage further learning.

What's Next?

Congratulations! You've built a working climate chatbot. This foundation opens up many possibilities for enhancement:

Memory: Add conversation memory so the bot remembers context from earlier in the chat
RAG (Retrieval Augmented Generation): Connect to climate databases for more specific, up-to-date information
UI Improvements: Add custom styling, charts, or interactive elements
Specialized Knowledge: Fine-tune responses for specific topics like solar installation or carbon accounting.

You can find the full source code, including additional features and improvements, in the GitHub repository. Feel free to fork it,or use it as a starting point for your own projects!

Connect with me on LinkedIn - I'm always excited to chat about AI, Software Development, sustainability, and how technology can help solve our climate challenges.

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

Timmy Dahunsi — Fri, 01 Aug 2025 10:57:20 +0000

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

2. Installation

To install Gemini CLI globally:

npm install -g @google/gemini-cli

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

Next, authenticate your Google account:

gemini auth

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

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.

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

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

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.

Understanding Browser Networking: CORS, Connections, and Security

Timmy Dahunsi — Sat, 26 Jul 2025 11:29:53 +0000

Browser networking refers to how web browsers handle communication between web applications and external resources over the internet. This includes making HTTP requests to servers, loading resources like images and stylesheets, connecting to APIs, and managing WebSocket connections. Browser networking covers the protocols, security policies, and optimization strategies that govern how data flows between your web application and the rest of the internet.

When you build web applications, your frontend code doesn't exist in isolation. It needs to communicate with servers, APIs, and other resources across the internet. However, browsers implement strict security policies to protect users from malicious websites. Understanding these policies and how to work with them is crucial for any web developer.

Think of browser networking security like airport security checkpoints. Just as airports have different security levels for domestic vs international flights, browsers have different rules for requests within the same website vs requests to external servers.

Core Learning Objectives

By the end of this chapter, you will:

Understand same-origin policy and its implications
Master CORS configuration and troubleshooting
Learn browser connection management and optimization
Understand security boundaries in frontend networking

Same-Origin Policy: The Foundation of Web Security

What is the Same-Origin Policy?

The Same-Origin Policy (SOP) is the browser's fundamental security mechanism that restricts how documents or scripts from one origin can interact with resources from another origin. An "origin" consists of three components:

Protocol (http, https)
Domain (example.com, api.example.com)
Port (80, 443, 8080)

Understanding Origins

https://example.com:443/page
└─┬─┘   └────┬────┘└┬┘
  │          │      │
Protocol   Domain  Port

Same Origin Examples:

https://example.com/page1 and https://example.com/page2 ✅
https://example.com:443/api and https://example.com/data ✅

Different Origin Examples:

https://example.com and http://example.com ❌ (different protocol)
https://example.com and https://api.example.com ❌ (different subdomain)
https://example.com and https://example.com:8080 ❌ (different port)

Why Same-Origin Policy Matters

Without SOP, malicious websites could:

Read your emails from Gmail while you're logged in
Access your bank account information
Steal data from any website you have open

What SOP Restricts

JavaScript Access: Scripts cannot read responses from cross-origin requests
DOM Access: Cannot access DOM elements from different origins
Cookie Access: Cannot read cookies from different origins
Local Storage: Cannot access localStorage from different origins

SOP Flowchart

CORS: Cross-Origin Resource Sharing

What is CORS?

CORS is a browser security feature that lets a server say:

“Yes, it’s okay for this other website to access my data.”

By default, browsers block frontend apps from making requests to APIs on a different domain (because of the Same-Origin Policy).
CORS is how servers override that rule safely using HTTP headers.

Think of CORS as a guest list at a private party. The server (host) decides which origins (guests) are allowed to access its resources.

CORS Request Types

a) Simple Requests

A request is considered "simple" if it meets ALL these criteria:

Allowed Methods:

GET
HEAD
POST

Allowed Headers:

Accept
Accept-Language
Content-Language
Content-Type (with restrictions)

Allowed Content-Type values:

application/x-www-form-urlencoded
multipart/form-data
text/plain

Simple Request Example:

// This is a simple request
fetch('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'Accept': 'application/json'
  }
});

b) Preflight Requests

Any request that doesn't meet the simple request criteria triggers a preflight request. A preflight request is a special type of automatic request your browser sends before making a real API call, but only when your request is considered potentially unsafe or non-standard.

Preflight Request Example:

// This triggers a preflight request
fetch('https://api.example.com/data', {
  method: 'DELETE',  // Not a simple method
  headers: {
    'Authorization': 'Bearer token123',  // Custom header
    'Content-Type': 'application/json'
  }
});

Common CORS Error Messages

"Access to fetch has been blocked by CORS policy"
Cause: Server doesn't include Access-Control-Allow-Origin header
Solution: Configure server to include proper CORS headers

"Request header Authorization is not allowed"
Cause: Server doesn't include Authorization in Access-Control-Allow-Headers
Solution: Add Access-Control-Allow-Headers: Authorization

"Method DELETE is not allowed"
Cause: Server doesn't include DELETE in Access-Control-Allow-Methods
Solution: Add Access-Control-Allow-Methods: DELETE

"Credentials flag is true, but Access-Control-Allow-Origin is "
Cause: Using wildcards with credentials
Solution: Specify exact origin instead of *

Browser Connection Management

Connection Limits

Browsers limit simultaneous connections to prevent server overload and improve performance.

Typical Connection Limits:

Per Domain: 6-8 connections
Total: 255-300 connections

Connection Pooling

Browsers reuse connections when possible to improve performance:

// These requests can share the same connection
fetch('https://api.example.com/users');
fetch('https://api.example.com/posts');
fetch('https://api.example.com/comments');

HTTP/2 and Connection Multiplexing

HTTP/2 allows multiple requests over a single connection:

Optimization Strategies

1. Domain Sharding (HTTP/1.1)

// Spread requests across subdomains to increase connection limit
fetch('https://api1.example.com/data');
fetch('https://api2.example.com/data');
fetch('https://api3.example.com/data');

2. Request Batching

// Instead of multiple requests
fetch('/api/user/1');
fetch('/api/user/2');
fetch('/api/user/3');

// Use batch requests
fetch('/api/users?ids=1,2,3');

3. Connection Preloading

<!-- Preconnect to external domains -->
<link rel="preconnect" href="https://api.example.com">
<link rel="dns-prefetch" href="https://cdn.example.com">

HTTPS Requirements and Mixed Content

What is HTTPS

HTTPS (HTTP Secure) is the secure version of HTTP that uses encryption to protect data in transit. It provides:

Encryption: Data is encrypted during transmission
Authentication: Verifies the server identity
Integrity: Ensure data hasn't been tampered with

Mixed Content Issues

Mixed content occurs when an HTTPS webpage loads resources over HTTP. This creates a security vulnerability because while the main page is encrypted, some resources are transmitted in plain text, potentially exposing sensitive data to attackers.

Why is Mixed Content an Issue?

Security Risk: HTTP resources can be intercepted and modified by attackers
Data Exposure: Sensitive information might be transmitted unencrypted
Trust Issues: Users see security warnings, reducing confidence in your site
Functionality Issues: Some mixed content is blocked entirely by browsers

Types of Mixed Content

Active Mixed Content (Blocked by browsers):
These resources can execute code or modify the page, so browsers block them entirely.

<!-- HTTPS page loading HTTP resources -->
<script src="http://example.com/script.js"></script>  <!-- Blocked -->
<link href="http://example.com/style.css">            <!-- Blocked -->
<iframe src="http://example.com/frame.html"></iframe> <!-- Blocked -->

Passive Mixed Content (Allowed with warnings):
These resources can't modify the page but still create security warnings.

<img src="http://example.com/image.jpg">              <!-- Warning -->
<video src="http://example.com/video.mp4">            <!-- Warning -->
<audio src="http://example.com/audio.mp3">            <!-- Warning -->

Best Practices for Avoiding Mixed Content

Always use HTTPS in production: Ensure your main site is served over HTTPS
Audit third-party resources: Verify all external resources support HTTPS
Use CSP headers: Implement upgrade-insecure-requests as a safety net
Regular testing: Set up automated tests to catch mixed content issues
Update dependencies: Keep libraries and CDN links up to date with HTTPS versions

// Example: Safe resource loading function
function loadResourceSafely(url) {
    // Ensure HTTPS for external resources
    if (url.startsWith('http://') && window.location.protocol === 'https:') {
        console.warn('Attempting to upgrade HTTP resource to HTTPS');
        url = url.replace('http://', 'https://');
    }

    return fetch(url)
        .catch(error => {
            console.error('Failed to load resource:', error);
            throw new Error('Resource loading failed - possible mixed content issue');
        });
}

Content Security Policy (CSP) Basics

What is CSP?

Content Security Policy (CSP) is a security standard that helps prevent Cross-Site Scripting (XSS) attacks by controlling which resources can be loaded and executed.

CSP Directives

Basic CSP Header:

<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; 
               script-src 'self' https://trusted-cdn.com; 
               style-src 'self' 'unsafe-inline'; 
               img-src 'self' data: https:;">

Common Directives:

default-src: Fallback for other directives
script-src: Controls JavaScript sources
style-src: Controls CSS sources
img-src: Controls image sources
connect-src: Controls AJAX, WebSocket, EventSource

CSP and CORS Interaction

CSP runs before CORS in the browser's security pipeline:

CSP check: "Is this resource allowed by our content policy?"
Origin check: "Is this a same-origin request?"
CORS check: "If cross-origin, does the server allow it?"

Security Best Practices

1. CORS Configuration

Never use Access-Control-Allow-Origin: * with credentials
Be specific with allowed origins
Use HTTPS for all production origins
Regularly audit and update CORS policies

2. Connection Security

Always use HTTPS in production
Implement proper certificate validation
Use HTTP/2 for better performance
Monitor for mixed content issues

3. CSP Implementation

Start with a restrictive policy
Use nonce or hash for inline scripts
Regularly review and update CSP rules
Monitor CSP violation reports

4. Error Handling

Don't expose sensitive information in error messages
Log security-related errors for monitoring
Provide user-friendly error messages
Implement proper retry mechanisms

Troubleshooting Common Issues

Issue 1: CORS Preflight Failures

Symptoms: OPTIONS requests failing
Solutions:

Ensure server handles OPTIONS requests
Include all required CORS headers
Check request method and headers

Issue 2: Cookie/Session Issues

Symptoms: Authentication not working cross-origin
Solutions:

Set credentials: 'include' in fetch
Configure server with Access-Control-Allow-Credentials: true
Use specific origins, not wildcards

Issue 3: CSP Violations

Symptoms: Resources blocked by CSP
Solutions:

Review CSP policy
Add necessary sources to directives
Use CSP reporting to identify issues

Summary

Browser networking security is built on several key concepts:

Same-Origin Policy provides the foundation by restricting cross-origin access
CORS allows controlled relaxation of SOP for legitimate cross-origin requests
Connection management optimizes performance while maintaining security
HTTPS ensures encrypted communication
CSP provides additional protection against XSS attacks

Understanding these concepts and their interactions is crucial for building secure, performant web applications. Always start with security in mind and gradually open up permissions as needed, following the principle of least privilege.

HTTP Fundamentals for Frontend Developers

Timmy Dahunsi — Thu, 10 Jul 2025 11:15:36 +0000

1. Why HTTP Matters to Frontend Developers

As a frontend developer, you might not write backend code, but you interact with backend systems constantly through HTTP. Every time your application fetches user data, submits a form, loads an image, or pings an API, it's speaking HTTP.

HTTP stands for Hypertext Transfer Protocol, and it's the foundation of communication between web clients (like browsers) and servers. It defines how requests are sent and how responses are received. It may sound like a backend thing, but for frontend developers, it's core knowledge.

When users say "the app feels slow," or when an API call silently fails, or when data isn’t updating as expected, it’s often an HTTP issue: a wrong method, a missing header, or a misunderstood status code.

Understanding HTTP isn't just about calling fetch() and hoping it works. It's about building responsive, resilient React or Next.js applications that handle real-world networking reliably.

In this chapter, we'll simplify HTTP from the frontend perspective. You'll learn how to:

Make requests the right way
Understand what your server is really saying back
Debug broken network flows like a pro
Effectively handle errors so users aren’t left guessing

By the end, you won’t just know how to make requests. You’ll know how to make them well, in a way that makes your apps feel fast, smooth, and professional.

2. The HTTP Request-Response Cycle

Let’s break down what it really means to communicate over HTTP. This communication always involves two core actions:

Sending a request from the browser to a server
Receiving a response back from the server

This simple two-step cycle powers nearly every interaction in a modern web app. If you call fetch('/api/data'), you're sending an HTTP request. When the server replies with 200 OK, you're reading the response. Everything else builds on top of this core exchange.

So what does a request actually look like?

The HTTP Request

Here’s an example of what gets sent when the browser calls:

fetch('/api/documents');

The raw HTTP request looks like this:

GET /api/documents HTTP/1.1
Host: api.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
Accept: application/json
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Each line matters:

Request Line: Contains the method, path, and HTTP version
Host: Tells the server which domain the request is for
User-Agent: Identifies the browser or frontend app
Accept: Declares what format the response should be (e.g. JSON)
Authorization: Sends credentials if needed for protected endpoints

The HTTP Response

Once the server processes the request, it responds with:

HTTP/1.1 200 OK
Content-Type: application/json
Cache-Control: max-age=3600
Content-Length: 1234

{
  "documents": [
    {
      "id": 1,
      "title": "Project Proposal",
      "status": "draft"
    }
  ]
}

Here’s what that means:

Status Line: The result of the request (200 OK, 404 Not Found, etc.)
Headers: Instructions for the browser, such as how to cache the response or what format the data is in
Body: Usually JSON or HTML content your app uses to update the UI

This back-and-forth—request and response—is the backbone of how frontend and backend systems talk.

3. HTTP Methods: Choosing the Right Action

HTTP methods (also called verbs) tell the server what kind of operation you want to perform on a resource. This is how you define intent in your network requests. Are you trying to fetch something? Create something? Delete it?

Let’s see the most important methods you'll use as a frontend developer:

GET: Retrieving Data

GET is used to fetch data from the server. It should have no side effects and be idempotent (it has the same result every time you call it).

Use GET when:

Displaying a list of items
Loading a single record by ID
Performing searches or filters

fetch('/api/documents');

POST: Creating New Resources

POST is used to create new data. It is not idempotent, calling it multiple times creates multiple records.

Use POST when:

Submitting a form
Creating a new user or document
Uploading a file

fetch('/api/documents', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ title: 'New Document' })
});

PUT vs PATCH: Updating Resources

Both are used to update data, but they behave differently:

PUT replaces the entire resource
PATCH modifies only specific fields

Use PUT when:

Replacing all fields in a resource

Use PATCH when:

Updating just part of an object (e.g., just the title)

fetch('/api/documents/123', {
  method: 'PATCH',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ title: 'Updated Title' })
});

DELETE: Removing Data

DELETE removes a resource by ID. It should also be idempotent—deleting it twice should have the same effect as once.

Use DELETE when:

Removing an item from a list
Deleting user-generated content

fetch('/api/documents/123', {
  method: 'DELETE'
});

Using the correct method improves communication with the server, ensures clarity in your code, and helps backend systems respond correctly.

fetch('/api/documents/123', {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ title: 'Updated Title' })
});

Use the right method for clarity, correctness, and proper server behavior.

4. Status Codes: Decoding the Server's Reply

When your browser gets a response from a server, the first thing it checks is the status code. This three-digit number tells you how things went.

Understanding status codes helps you debug, build better user feedback, and prevent edge-case bugs from going unnoticed.

Success Codes (2xx)

These mean the request worked as expected:

200 OK: Request was successful and data is returned.
201 Created: Something new was successfully created.
204 No Content: Request succeeded, but there's no content to return (common for DELETE).

Redirection Codes (3xx)

These indicate the resource moved somewhere else:

301 Moved Permanently: The resource has moved; update your URLs.
302 Found: Temporary redirect; often used for login flows.

Client Errors (4xx)

These mean you (the client) did something wrong:

400 Bad Request: Malformed or invalid request.
401 Unauthorized: You're not logged in or the token is missing.
403 Forbidden: You're logged in but not allowed to access this.
404 Not Found: The URL doesn't match any resource.

Server Errors (5xx)

These mean the problem is on the server:

500 Internal Server Error: Generic failure on the server side.
503 Service Unavailable: Server is down or overloaded.

How to Use These in Your App

Show an error message when you get a 4xx or 5xx
Retry or fall back gracefully on 500s
Redirect the user if you get a 401 or 403

Status codes aren't just technical trivia—they're the key to building apps that feel reliable and smart.

5. Headers: The Metadata That Drives Everything

Headers are tiny fields in an HTTP request or response, but they carry huge meaning. They tell the server or browser how to handle the request, what format to expect, and even how to keep things secure or fast.

Let’s break them down into two sides: what your browser sends, and what the server replies with.

Request Headers (From Browser to Server)

Content-Type: What type of data you're sending (application/json for JSON, multipart/form-data for files)
Authorization: Carries tokens or API keys for authenticated routes
Accept: Tells the server what kind of responses you can handle (application/json, text/html, etc.)

fetch('/api/user', {
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token123',
    'Accept': 'application/json'
  }
});

Response Headers (From Server to Browser)

Content-Type: Tells the browser how to parse the response (e.g. JSON or HTML)
Set-Cookie: Sends a cookie to be stored in the browser
Cache-Control: Defines how long the response should be cached

These affect how your app runs:

Want your app to cache images longer? Use Cache-Control
Need to store login state? Use Set-Cookie
Expecting a JSON response? Ensure Content-Type: application/json

Headers may be invisible to the user, but they are essential for making your app secure, fast, and functional.

6. Query Parameters & Request Bodies

When you're sending data to a server or filtering what comes back, you need to know the difference between query parameters and the request body. They serve different purposes and work with different HTTP methods.

Query Parameters: For Filtering and Searching

Query parameters are used in the URL itself, typically with GET requests. They let you send small pieces of information to the server—often for filtering, searching, or pagination.

fetch('/api/documents?search=project&page=2');

This URL includes two query parameters:

search=project
page=2

The server reads these and returns filtered results accordingly. Query parameters are visible in the browser's address bar and should not be used for sensitive information like passwords or tokens.

Request Body: For Sending Data

The request body is where you send structured data with POST, PUT, or PATCH requests. This is typically used when creating or updating a resource.

fetch('/api/documents', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    title: 'New Document',
    content: 'Hello world!'
  })
});

In this case:

Content-Type: application/json tells the server you're sending JSON
body includes the actual document data

Key differences:

Use query parameters with GET to request filtered data
Use request bodies with POST, PUT, PATCH to send or update data

Understanding where your data goes is critical to making correct, secure, and effective API requests.

7. Debugging with DevTools: Network Tab Mastery

Even if your code looks perfect, things can break when it hits the server. That’s where browser DevTools come in. The Network tab shows you every HTTP request your app makes—and exactly what comes back.

Step-by-Step Guide

Here’s how to inspect a request using Chrome:

Open your app in Chrome.
Right-click the page and select Inspect.
Go to the Network tab.
Reload the page or trigger a request (like clicking a "Load" button).
Click on a request to see the details.

You’ll be able to view:

URL: What was requested
Method: GET, POST, etc.
Status: The response code (200, 404, etc.)
Request Headers: What you sent
Response Headers: What the server sent back
Payload: The request body (for POST, PUT, PATCH)
Response: The body/data returned

What to Look For

Red status codes: 4xx and 5xx mean something went wrong
Missing auth tokens: Check Authorization headers
Wrong Content-Type: May cause the server to reject your request
Slow responses: See the Timing tab to debug performance

DevTools is like an X-ray for your network layer. Once you master it, diagnosing issues becomes faster and less frustrating.

Conclusion

HTTP isn’t just a technical detail, it’s the language your frontend speaks to every server it interacts with.

By learning how HTTP works:

You debug faster because you understand what’s going wrong
You handle failures gracefully instead of breaking the UI
You build apps that feel fast, smart, and professional

In this article, you learned how to:

Understand and use the core HTTP methods
Read status codes and act on them
Work with headers and request bodies
Use DevTools like a pro

You now have the foundation to build better frontend apps that communicate effectively with APIs.

Tell me what you liked about this article in the comments.

Happy coding and have fun!

I'd love to connect with you via Twitter | LinkedIn | GitHub |

THE REAL DOM AND VIRTUAL DOM

Timmy Dahunsi — Wed, 24 Aug 2022 23:00:19 +0000

The DOM
DOM (Document Object Model) represents the UI present in your application.
It is a structured representation of the Html element present in a Web-app, for every change in the state of the application, the Dom gets updated to reflect the change in the UI.
The downside is every time the DOM gets updated, the updated elements and children have to be rendered again in other to update the UI of our page.
Updating the Dom involves recalculating the CSS and changing the layout requires complex algorithms that affect the performance.
React makes use of Virtual DOM to make changes, which makes React faster.
Virtual DOM
React uses the virtual DOM to propagate changes to the UI, We can compare the virtual DOM to a building blueprint, after changes have been made on the blueprint, it's then propagated to the real building.
For every object in the original DOM, there is a virtual version of that object in the React Virtual object.

Scenario

Imagine you just added a To-do to your to-do list.
A new virtual DOM is created.
The new virtual DOM is then compared with the previous Virtual DOM before it got updated.
React figures out what object has changed.
The changed object then gets updated on the real DOM.
Changes on the Real Dom cause the screen to change.

Resources:
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction…

https://reactjs.org/docs/faq-internals.html

Reference: https://geeksforgeeks.org/reactjs-virtual-dom/

Building Web3 Dapps with no code tool :(Bunzz)

Timmy Dahunsi — Fri, 22 Jul 2022 09:47:45 +0000

As a newbie or developer in the web2 space interested in developing blockchain applications , building DApp can get overwhelming because you need to learn a lot of new concepts before you can start building your DApp, in order to make the transition easy there are no code-tool that can assist you in building DApp. without prior knowledge of writing smart contracts. I will take you through bunzz a no code tool for creating DApp.

What is Bunzz

Bunzz is a development platform that makes it easy to use smart contracts that build DApp as modules. Its security is audited, so developers can launch a DApp quickly and easily with confidence.

You can compare bunzz to firebase in web2 ,since Developers can get to create DApp without writing smart contract from scratch instead by selecting or editing pre-written smart contracts Modules and integrating them to a Frontend .

For newbies the Frontend can be developed via bubble using bubble plug-in, while web2 developers can create the frontend using html, css, JavaScript, React or Vue.

Bunzz use cases

NFTs market place can be built by combining a module that generates NFTs(ERC 721) with a module that trades NFTs.
Lending DeFi service can be built using a module that generates ERC20 tokens and a lending module.

Extra:

A walk through video of bunzz dashboard and the creation of a cryptocurrency to see how the platform works https://youtu.be/1WwPJmwtZCY

A guide to building DApp with bubble and bunzz https://asteroid.ac/articles/pp5bnhM43