Forem: Andres Z

Turned my Next.js blog SEO process into a simple publish checklist

Andres Z — Thu, 12 Feb 2026 04:06:48 +0000

I don't know much about SEO practices, just the basics. That said, I’ve been cleaning up the SEO on my personal blog (Next.js App Router + markdown) and realized I was doing the same mental checklist every time I hit “publish”… so I wrote it down.

It’s very practical stuff, like:

title + description quality
canonical URL checks
internal links
running validations (yarn validate:content, yarn validate:seo, yarn build)
indexing and measuring results

Here’s the checklist if it helps anyone:
https://blog.andreszenteno.com/docs/seo-publishing-checklist

I'm curious if I'm missing something and what you guys use as their release/publish checklist—always looking to steal good ideas. 🙃

React: Design Patterns | Controlled & Uncontrolled Components

Andres Z — Wed, 05 Jun 2024 04:00:00 +0000

React is a powerful library for building user interfaces, and one of its core strengths lies in its flexibility. Among the many design patterns React offers, controlled and uncontrolled components are fundamental. Understanding these patterns can significantly impact how you manage state and handle user input in your applications.

Uncontrolled Components

Uncontrolled components are those where the component itself maintains its own internal state. The only time you interact with this state is when an event occurs, such as a form submission. For instance, consider a form where you only access the input values when the user hits the submit button. Until that event, the form's state is entirely managed by the DOM elements themselves.

Here's a simple example of an uncontrolled form:

import React, { createRef } from 'react';

export const UncontrolledForm = () => {
  const nameInput = createRef();
  const ageInput = createRef();
  const hairColorInput = createRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(nameInput.current.value);
    console.log(ageInput.current.value);
    console.log(hairColorInput.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" type="text" placeholder="Name" ref={nameInput} />
      <input name="age" type="number" placeholder="Age" ref={ageInput} />
      <input name="hairColor" type="text" placeholder="Hair Color" ref={hairColorInput} />
      <input type="submit" value="Submit" />
    </form>
  );
};

In this example, the form's state is only accessed when the form is submitted. The createRef function is used to create references to the input elements, which are then accessed in the handleSubmit function.

Controlled Components

Controlled components, on the other hand, rely on their parent component to manage their state. The state is passed down as props, and any changes to the state are handled by callback functions provided by the parent.

Here's how you might implement a controlled form

import React, { useState } from 'react';

export const ControlledForm = () => {
  const [name, setName] = useState('');
  const [age, setAge] = useState('');
  const [hairColor, setHairColor] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(name, age, hairColor);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        name="name"
        type="text"
        placeholder="Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <input
        name="age"
        type="number"
        placeholder="Age"
        value={age}
        onChange={(e) => setAge(Number(e.target.value))}
      />
      <input
        name="hairColor"
        type="text"
        placeholder="Hair Color"
        value={hairColor}
        onChange={(e) => setHairColor(e.target.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

In this controlled form, the state of each input is managed by React's useState hook. The value prop of each input is tied to its corresponding state variable, and the onChange handler updates the state whenever the user types into the input.

Why Prefer Controlled Components?

Controlled components are generally preferred for several reasons:

Reusability: Controlled components are more reusable because their behavior is determined by their props rather than their internal state.
Testability: They are easier to test since you can set up a component with a specific state and verify its behavior without needing to simulate user interactions.
Predictability: With controlled components, you have a single source of truth for your state, making your application more predictable and easier to debug.

Practical Examples

Uncontrolled Forms

Uncontrolled forms defer most of their logic to the DOM elements. Here's an example:

import React, { createRef } from 'react';

export const UncontrolledForm = () => {
  const nameInput = createRef();
  const ageInput = createRef();
  const hairColorInput = createRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(nameInput.current.value);
    console.log(ageInput.current.value);
    console.log(hairColorInput.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" type="text" placeholder="Name" ref={nameInput} />
      <input name="age" type="number" placeholder="Age" ref={ageInput} />
      <input name="hairColor" type="text" placeholder="Hair Color" ref={hairColorInput} />
      <input type="submit" value="Submit" />
    </form>
  );
};

Controlled Forms

Controlled forms manage their state through React's useState hook:

import React, { useState } from 'react';

export const ControlledForm = () => {
  const [name, setName] = useState('');
  const [age, setAge] = useState('');
  const [hairColor, setHairColor] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(name, age, hairColor);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        name="name"
        type="text"
        placeholder="Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <input
        name="age"
        type="number"
        placeholder="Age"
        value={age}
        onChange={(e) => setAge(Number(e.target.value))}
      />
      <input
        name="hairColor"
        type="text"
        placeholder="Hair Color"
        value={hairColor}
        onChange={(e) => setHairColor(e.target.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

Controlled Modals

Modals can also be controlled or uncontrolled. An uncontrolled modal manages its own visibility state:

import React, { useState } from 'react';

export const UncontrolledModal = () => {
  const [shouldShow, setShouldShow] = useState(false);

  return (
    <>
      <button onClick={() => setShouldShow(true)}>Show Modal</button>
      {shouldShow && (
        <div className="modal">
          <p>Modal Content</p>
          <button onClick={() => setShouldShow(false)}>Close</button>
        </div>
      )}
    </>
  );
};

A controlled modal relies on its parent component to manage its visibility:

import React from 'react';

export const ControlledModal = ({ shouldShow, onRequestClose }) => {
  if (!shouldShow) return null;

  return (
    <div className="modal">
      <p>Modal Content</p>
      <button onClick={onRequestClose}>Close</button>
    </div>
  );
};

In the parent component:

import React, { useState } from 'react';
import { ControlledModal } from './ControlledModal';

const App = () => {
  const [shouldShowModal, setShouldShowModal] = useState(false);

  return (
    <>
      <button onClick={() => setShouldShowModal(!shouldShowModal)}>
        {shouldShowModal ? 'Hide Modal' : 'Show Modal'}
      </button>
      <ControlledModal shouldShow={shouldShowModal} onRequestClose={() => setShouldShowModal(false)} />
    </>
  );
};

export default App;

Conclusion

Controlled and uncontrolled components each have their place in React development. While uncontrolled components can be simpler and quicker to implement for basic use cases, controlled components offer greater flexibility, reusability, and testability. Understanding when and how to use each pattern will make you a more effective React developer.

React: Design Patterns | Container Components

Andres Z — Tue, 04 Jun 2024 23:13:04 +0000

In the world of React, there's a design pattern called Container Components. If you're a beginner or intermediate React developer, you might be used to having each child component load its own data. Typically, you'd use hooks like useState and useEffect along with libraries like Axios or Fetch to get data from a server. This works, but it can get messy when multiple child components need to share the same logic. That's where container components come in.

Container components handle all the data loading and management for their child components. They abstract away the data-fetching logic, allowing child components to focus solely on rendering. This separation of concerns makes your code cleaner and more maintainable.

The Main Idea

The main idea behind container components is similar to layout components. Just as layout components ensure that child components don't need to know or care about their layout, container components ensure that child components don't need to know where their data is coming from or how to manage it. They just take some props and display whatever they need to display.

A Simple Example: CurrentUserLoader

Let's start with a simple example. Suppose we have a CurrentUserLoader component that loads the current user's data and passes it to a UserInfo component.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

export const CurrentUserLoader = ({ children }) => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const response = await axios.get('/current-user');
      setUser(response.data);
    };
    fetchData();
  }, []);

  return (
    <>
      {React.Children.map(children, child => {
        if (React.isValidElement(child)) {
          return React.cloneElement(child, { user });
        }
        return child;
      })}
    </>
  );
};

In this example, CurrentUserLoader fetches the current user's data and passes it down to its children as a user prop. The UserInfo component can then use this prop to display the user's information.

Making It More Flexible: UserLoader

The CurrentUserLoader is useful but limited. It only loads the current user's data. What if we want to load any user's data by their ID? We can create a more flexible UserLoader component.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

export const UserLoader = ({ userId, children }) => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const response = await axios.get(`/users/${userId}`);
      setUser(response.data);
    };
    fetchData();
  }, [userId]);

  return (
    <>
      {React.Children.map(children, child => {
        if (React.isValidElement(child)) {
          return React.cloneElement(child, { user });
        }
        return child;
      })}
    </>
  );
};

Now, UserLoader can load any user's data by their ID and pass it down to its children.

Going Generic: ResourceLoader

We can take this concept even further by creating a generic ResourceLoader component that can load any type of resource from the server.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

export const ResourceLoader = ({ resourceUrl, resourceName, children }) => {
  const [state, setState] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const response = await axios.get(resourceUrl);
      setState(response.data);
    };
    fetchData();
  }, [resourceUrl]);

  return (
    <>
      {React.Children.map(children, child => {
        if (React.isValidElement(child)) {
          return React.cloneElement(child, { [resourceName]: state });
        }
        return child;
      })}
    </>
  );
};

With ResourceLoader, you can load any resource by specifying its URL and name. This makes the component highly reusable.

The Ultimate Flexibility: DataSource

Finally, let's create a DataSource component that doesn't even know where its data is coming from. Instead of hardcoding the data-fetching logic, we'll pass a function that returns the data.

import React, { useState, useEffect } from 'react';

export const DataSource = ({ getDataFunction, resourceName, children }) => {
  const [state, setState] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const data = await getDataFunction();
      setState(data);
    };
    fetchData();
  }, [getDataFunction]);

  return (
    <>
      {React.Children.map(children, child => {
        if (React.isValidElement(child)) {
          return React.cloneElement(child, { [resourceName]: state });
        }
        return child;
      })}
    </>
  );
};

With DataSource, you can load data from any source—whether it's an API, local storage, or something else—by passing a function that returns the data.

Conclusion

Container components are a powerful pattern in React that help you manage data loading and sharing logic across multiple components. By abstracting away the data-fetching logic into container components like CurrentUserLoader, UserLoader, ResourceLoader, and DataSource, you can make your code cleaner and more maintainable. This separation of concerns allows your child components to focus solely on rendering, making your application easier to understand and extend.

React: Design Patterns is a course by Shaun Wassell that you can follow on LinkedIn Learning.

React: Design Patterns | Understanding Layout Components

Andres Z — Tue, 04 Jun 2024 23:04:03 +0000

Layout components in React are specialized components designed to arrange other components on a page. Their primary role is to manage the layout, allowing the main content components to remain agnostic about their placement. This separation of concerns enhances flexibility and reusability. Examples include split screens, lists, and modals.

Split-Screen Components

A split-screen component divides the screen into two sections, each displaying a different component. Here's how you can create one:

Define the Component: Create a new file, SplitScreen.js, and define the component with left and right props.
Structure the Layout: Use a container div to hold two child divs for the left and right components.
Style the Layout: Use styled-components to apply flexbox styles, ensuring both sides take up equal space.

import styled from 'styled-components';

export const SplitScreen = ({ left: Left, right: Right }) => {
  return (
    <Container>
      <Pane><Left /></Pane>
      <Pane><Right /></Pane>
    </Container>
  );
};

const Container = styled.div`
  display: flex;
`;

const Pane = styled.div`
  flex: 1;
`;

Enhancing Split-Screen Components

To make the split-screen component more flexible, you can add weight props to control the space each side occupies:

Add Weight Props: Introduce leftWeight and rightWeight props with default values.
Apply Weights: Pass these weights to the styled components and adjust the flex property accordingly.

export const SplitScreen = ({ left: Left, right: Right, leftWeight = 1, rightWeight = 1 }) => {
  return (
    <Container>
      <Pane weight={leftWeight}><Left /></Pane>
      <Pane weight={rightWeight}><Right /></Pane>
    </Container>
  );
};

const Pane = styled.div`
  flex: ${props => props.weight};
`;

Lists and List Items

Lists are another common layout pattern. You can create reusable list components that display different types of items:

Define List Items: Create small and large list item components for different data types (e.g., people, products).
Create a Regular List: A generic list component that takes items, a resource name, and an item component as props.

export const RegularList = ({ items, resourceName, itemComponent: ItemComponent }) => {
  return (
    <>
      {items.map((item, i) => (
        <ItemComponent key={i} {...{ [resourceName]: item }} />
      ))}
    </>
  );
};

Numbered Lists

To create a numbered list, extend the regular list component to include item numbers:

export const NumberedList = ({ items, resourceName, itemComponent: ItemComponent }) => {
  return (
    <>
      {items.map((item, i) => (
        <React.Fragment key={i}>
          <h3>{i + 1}</h3>
          <ItemComponent {...{ [resourceName]: item }} />
        </React.Fragment>
      ))}
    </>
  );
};

Modal Components

Modals are used to display content over the main page. Here's how to create a simple modal component:

Define the Modal: Create a new file, Modal.js, and define the modal component with state management for visibility.
Structure the Modal: Use styled-components for the modal background and body.
Toggle Visibility: Add buttons to show and hide the modal.

import React, { useState } from 'react';
import styled from 'styled-components';

export const Modal = ({ children }) => {
  const [shouldShow, setShouldShow] = useState(false);

  return (
    <>
      <button onClick={() => setShouldShow(true)}>Show Modal</button>
      {shouldShow && (
        <ModalBackground onClick={() => setShouldShow(false)}>
          <ModalBody onClick={e => e.stopPropagation()}>
            {children}
            <button onClick={() => setShouldShow(false)}>Hide Modal</button>
          </ModalBody>
        </ModalBackground>
      )}
    </>
  );
};

const ModalBackground = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
`;

const ModalBody = styled.div`
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
`;

Conclusion

Layout components in React help manage the arrangement of other components on a page. By separating layout concerns from content concerns, you gain flexibility and reusability in your codebase. Whether you're creating split screens, lists, or modals, understanding and utilizing layout components can significantly enhance your development workflow.

React: Design Patterns is a course by Shaun Wassell that you can follow on LinkedIn Learning.

Creating content with ChatGPT: Building a Dog Breed Information App

Andres Z — Mon, 27 Mar 2023 02:40:19 +0000

In this article, I explore the idea of leveraging ChatGPT to generate engaging content for a website featuring various dog breeds. The concept is simple: present users with a list of dog breeds sourced from an API, and upon selecting a breed, display three images accompanied by informative content about the chosen breed. Gathering information on all dog breeds across the globe can be a daunting task, but with the power of ChatGPT, this process can be significantly simplified.

To maintain security and avoid exposing our OpenAI API key, I’ll create an Express server that serves as an intermediary between our React application and both the Dog API and OpenAI API. So join us as we embark on this exciting journey to harness the capabilities of ChatGPT for dynamic content generation on a dog breed-focused website.

Building a Dog Breed Information App with React + Typescript, Express, and OpenAI’s ChatGPT

In today’s fast-paced world, having instant access to information is crucial. Dog enthusiasts are no exception — whether you’re a potential dog owner, a seasoned dog trainer, or simply a curious individual, having quick access to reliable information about dog breeds can be immensely valuable. With this in mind, I’ve developed a cutting-edge Dog Breed Information App leveraging React, Express, and OpenAI’s ChatGPT to provide users with a seamless, interactive experience.
First, let’s delve into the backend aspect of our project: the Express server. In this endeavor, I’ll be utilizing two APIs:

Dog API: https://dog.ceo/dog-api/
OpenAI API: https://platform.openai.com/docs/api-reference/introduction

You might wonder why I’ve chosen Express for this task. Initially, Firebase seemed like a suitable intermediary; however, deploying Firebase Functions required an upgrade from the Spark plan (free) to the Blaze plan (pay-as-you-go). Therefore, I opted for Vercel as a more suitable alternative for our project to keep our costs minimal.

On a local folder you will need to install Express and Axios.

npm install express axios

ChatGPT provided us with valuable guidance that assisted in resolving issues within our code and during deployment on Vercel. Here’s the finalized version of our server.js file. If you only intend to run this locally, setting up CORS might not be necessary.

// Import required packages
const express = require('express');
const cors = require('cors');
const axios = require('axios');

// Initialize the Express app
const app = express();
const port = process.env.PORT || 3001;

// Set up CORS options
const corsOptions = {
  origin: ['*', 'http://localhost:5173'],
  optionsSuccessStatus: 200,
};
app.use(cors(corsOptions));

// Enable JSON support
app.use(express.json());

// Global error handler
app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).send('An error occurred');
});

// Start the server
const server = app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

// Set the server timeout to 30 seconds
server.timeout = 30000; // Set the timeout to 30 seconds (10000 ms)

// Set the Dog API endpoint
const dogApi = 'https://dog.ceo/api';

// Route to fetch all dog breeds
app.get('/dog-breeds/list/all', async (req, res) => {
  try {
    const response = await axios.get(`${dogApi}/breeds/list/all`);
    res.json(response.data);
  } catch (error) {
    console.error('Error fetching dog breeds list:', error);
    res
      .status(500)
      .json({ error: 'An error occurred while fetching the dog breeds list' });
  }
});

// Route to fetch images for a specific dog breed
app.get('/breed/:breed/images', async (req, res) => {
  try {
    const breed = req.params.breed;
    const response = await axios.get(`${dogApi}/breed/${breed}/images`);
    res.json(response.data);
  } catch (error) {
    console.error('Error fetching breed images:', error);
    res
      .status(500)
      .json({ error: 'An error occurred while fetching the breed images' });
  }
});

// OpenAI API key
const openApiKey = 'YOUR-OPENAI-API-KEY';

// Route to handle OpenAI chat requests
app.post('/openai-chat', async (req, res) => {
  console.log('Received request at /openai-chat');
  const { chatGptMessages } = req.body;

  try {
    const openaiResponse = await axios.post(
      'https://api.openai.com/v1/chat/completions',
      {
        model: 'gpt-3.5-turbo',
        messages: chatGptMessages,
        max_tokens: 2048,
        temperature: 0.8,
      },
      {
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${openApiKey}`,
        },
        timeout: 30000, // Set a custom timeout, e.g., 30 seconds
      },
    );
    res.json(openaiResponse.data);
  } catch (error) {
    console.error('OpenAI API Error:', error.message, error.stack);

    let errorMessage = error.message;
    if (error.response && error.response.data) {
      errorMessage = JSON.stringify(error.response.data);
    }

    res.status(500).json({
      error: 'An error occurred while communicating with the OpenAI API',
      details: errorMessage,
    });
  }
});

My package.json file is simple, to start the project I only need to do: npm start.

{
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "axios": "^1.3.4",
    "cors": "^2.8.5",
    "express": "^4.18.2",
    "openai": "^3.2.1"
  }
}

And this is the vercel.json file I need to deploy my Express project in Vercel:

{
 "version": 2,
 "builds": [{ "src": "server.js", "use": "@vercel/node" }],
 "routes": [{ "src": "/(.*)", "dest": "server.js" }]
}

React + Typescript
The second part of this project was developed with React+Typescript. Like in a previous post in Medium I used Vite to create the project.

React + TypeScript + ChatGPT. There are many articles around telling… | by Andres Zenteno | Mar, 2023 | Medium

Andres Zenteno ・ Mar 12, 2023 ・
Medium

Now, I have three components that I'm using in the App.tsx: Dogs, DogImage and ChatGpt.

Dogs

It will get a list of dog breeds

import React from 'react';
import './App.css';
import { API_URL } from './configuration';

interface ComponentProps {
    onBreedClick: (breed: string) => void;
    onSubBreedClick?: (breed: string, sub: string) => void;
}

interface DogBreedsResponse {
    message: {
        [breed: string]: string[];
    };
    status: string;
}

export const Dogs: React.FC<ComponentProps> = ({
    onBreedClick,
    onSubBreedClick,
}) => {
    const [dogData, setDogData] = React.useState<
        DogBreedsResponse['message'] | undefined
    >(undefined);
    const getDogsList = async () => {
        const response = await fetch(`${API_URL}/dog-breeds/list/all`);
        const data = await response.json();
        setDogData(data.message);
    };
    const handleBreedClick = (breed: string) => {
        onBreedClick(breed);
    };
    const handleSubBreedClick = (breed: string, sub: string) => {
        onSubBreedClick?.(breed, sub);
    };
    React.useEffect(() => {
        getDogsList();
    }, []);
    return (
        <>
            <ul>
                {!!dogData &&
                    Object.entries(dogData).map(
                        ([breed, subBreeds]: [string, string[]]) => {
                            return subBreeds.length === 0 ? (
                                <li className="list-elem" key={breed}>
                                    <span
                                        onClick={() => handleBreedClick(breed)}
                                    >
                                        {breed}
                                    </span>
                                </li>
                            ) : (
                                <li className="list-elem" key={breed}>
                                    <span
                                        onClick={() => handleBreedClick(breed)}
                                    >
                                        {breed}
                                    </span>
                                    <ul>
                                        {subBreeds.map((sub) => {
                                            return (
                                                <li
                                                    className="list-elem"
                                                    key={sub}
                                                    onClick={() =>
                                                        handleSubBreedClick(
                                                            breed,
                                                            sub,
                                                        )
                                                    }
                                                >
                                                    <span>
                                                        {sub} {breed}
                                                    </span>
                                                </li>
                                            );
                                        })}
                                    </ul>
                                </li>
                            );
                        },
                    )}
            </ul>
        </>
    );
};

DogImage

It will get an array of image URLs and randomly select 3.

import React from 'react';
import './App.css';
import { API_URL } from './configuration';

interface ComponentProps {
    dogBreed: string;
    dogSubBreed?: string;
}

interface DogApiImageResponse {
    message: string[];
    status: 'success' | 'error';
}

export const DogImage: React.FC<ComponentProps> = ({
    dogBreed,
    dogSubBreed,
}) => {
    const [dogImgs, setDogImgs] = React.useState<string[]>([]);
    const getDogImages = async () => {
        try {
            const response = await fetch(`${API_URL}/breed/${dogBreed}/images`);
            if (!response.ok) {
                throw new Error(
                    `Failed to fetch image. Status: ${response.status}`,
                );
            }
            const data: DogApiImageResponse = await response.json();
            let message: string[] = [];
            if (!dogSubBreed) {
                message = data.message;
            } else {
                message = data.message.filter((item) =>
                    item.includes(`${dogBreed}-${dogSubBreed}`),
                );
            }
            let images: string[] = [];
            if (message.length <= 3) {
                for (let i = 0; i < 3; i++) {
                    images.push(message[i]);
                }
            } else {
                for (let i = 0; i < 3; i++) {
                    images.push(
                        message[Math.floor(Math.random() * message.length)],
                    );
                }
            }

            setDogImgs(images);
        } catch (error) {
            console.error('Error fetching dog image:', error);
        }
    };

    React.useEffect(() => {
        if (dogBreed) getDogImages();
    }, [dogBreed]);
    return !dogImgs ? null : (
        <div>
            {dogImgs.map((dogImg) => {
                return (
                    <img
                        key={dogImg}
                        className="topImage"
                        src={dogImg}
                        alt={dogBreed}
                    />
                );
            })}
        </div>
    );
};

ChatGPT

I’ll be posing three questions to ChatGPT about each dog breed:

“What can you tell me about ?”
“Does a live longer?”
“Is a an aggressive dog breed?” These queries can be expanded or made more specific, and if needed, we can even ask ChatGPT to supply us with more insightful questions. To conclude, we will utilize React Markdown to format the response.

import React from 'react';
import { ChatCompletionRequestMessageRoleEnum } from 'openai';
import ReactMarkdown from 'react-markdown';
import { API_URL } from './configuration';

export interface ComponentProps {
    dogBreed: string;
    dogSubBreed: string | undefined;
}

export const ChatGpt: React.FC<ComponentProps> = ({
    dogBreed,
    dogSubBreed,
}) => {
    const [response, setResponse] = React.useState<string | undefined>(
        undefined,
    );

    const chatGptMessages = [
        {
            role: ChatCompletionRequestMessageRoleEnum.User,
            content: `Is a ${
                !dogSubBreed ? '' : dogSubBreed
            } ${dogBreed} an aggressive dog breed?`,
        },
        {
            role: ChatCompletionRequestMessageRoleEnum.User,
            content: `Does a ${
                !dogSubBreed ? '' : dogSubBreed
            } ${dogBreed} lives longer?`,
        },
        {
            role: ChatCompletionRequestMessageRoleEnum.User,
            content: `What can you tell me about ${
                !dogSubBreed ? '' : dogSubBreed
            } ${dogBreed}?`,
        },
    ];

    const getOpenAIResponse = async () => {
        try {
            const response = await fetch(`${API_URL}/openai-chat`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ chatGptMessages }),
            });

            const data = await response.json();
            console.log(data.choices[0].message?.content);
            setResponse(data.choices[0].message?.content);
        } catch (error) {
            console.error(error);
        }
    };

    React.useEffect(() => {
        console.log('Effect triggered for dogBreed:', dogBreed);
        setResponse('');
        if (!!dogBreed) getOpenAIResponse();
    }, [dogBreed]);

    return (
        <>
            {!dogBreed ? (
                <div>{'Click on a breed'}</div>
            ) : !response ? (
                <div>{'Loading...'}</div>
            ) : (
                <>
                    <h1 className="title1">
                        {dogBreed} {!dogSubBreed ? '' : dogSubBreed}
                    </h1>
                    <ReactMarkdown children={response} />
                </>
            )}
        </>
    );
};

Then our final App.tsx file will look like:

import React from "react";
import "./App.css";
import { ChatGpt } from "./ChatGpt";
import { DogImage } from "./DogImage";
import { Dogs } from "./Dogs";

const App: React.FC = () => {
  const [dogBreed, setDogBreed] = React.useState<string>('');
  const [dogSubBreed, setDogSubBreed] = React.useState<string | undefined>(undefined);
  const getBreed = (breed: string) => {
    if (breed !== dogBreed) {
      setDogBreed(breed);
      setDogSubBreed(undefined);
    }
  };
  const getBreedSubBreed = (breed: string, sub: string) => {
    if (breed !== dogBreed || sub !== dogSubBreed) {
      setDogBreed(breed);
      setDogSubBreed(sub);
    }
  };

  return (
    <div className="App">
      <div className="row">
        <div className="column">
          <Dogs onBreedClick={getBreed} onSubBreedClick={getBreedSubBreed}/>
        </div>
        <div className="column">
          <DogImage dogBreed={dogBreed} dogSubBreed={dogSubBreed} /> 
          <ChatGpt dogBreed={dogBreed} dogSubBreed={dogSubBreed} />
        </div>
      </div>
    </div>
  );
};

export default App;

Our final result:

In this project, it is essential to account for the potential delay in receiving responses from ChatGPT. To enhance the user experience, I could store the content locally, eliminating the need for subsequent requests to ChatGPT for the same breed.
Additionally, implementing a backend database to store the information and periodically update it ensures that users have access to reliable, up-to-date data while also speeding up the retrieval process.

There is a plethora of APIs available that can be seamlessly integrated with OpenAI to enrich the information you obtain from them.

So, what’s next on your project horizon? The possibilities are endless!

This is the React + Typescript project:
https://github.com/andresz74/dogapi-chatgpt

And for the Express server, I already gave you ingredients :)

Have fun!

Forem: Andres Z

Turned my Next.js blog SEO process into a simple publish checklist

React: Design Patterns | Controlled & Uncontrolled Components

Uncontrolled Components

Controlled Components

Why Prefer Controlled Components?

Practical Examples

Uncontrolled Forms

Controlled Forms

Controlled Modals

Conclusion

React: Design Patterns | Container Components

The Main Idea

A Simple Example: CurrentUserLoader

Making It More Flexible: UserLoader

Going Generic: ResourceLoader

The Ultimate Flexibility: DataSource

Conclusion

React: Design Patterns | Understanding Layout Components

Split-Screen Components

Enhancing Split-Screen Components

Lists and List Items

Numbered Lists

Modal Components

Conclusion

Creating content with ChatGPT: Building a Dog Breed Information App

Building a Dog Breed Information App with React + Typescript, Express, and OpenAI’s ChatGPT

React + TypeScript + ChatGPT. There are many articles around telling… | by Andres Zenteno | Mar, 2023 | Medium

Andres Zenteno ・ Mar 12, 2023 ・ Medium

Dogs

DogImage

ChatGPT

Andres Zenteno ・ Mar 12, 2023 ・
Medium