But while effective communication is important, it’s not a skill everyone possesses. It’s something you build through consistent practice.

Therein lies the challenge: when practicing on our own, it’s easy to overlook composure, posture, and delivery, which are just as important as the speech itself.

That’s where we need a coach. They’re a second pair of eyes and ears that takes note of crucial details and relays them to you while you present. Thanks to recent advancements in visual AI, you can now receive continuous and objective feedback at any time. Frameworks like Vision Agents allow you to connect powerful visual models seamlessly and build your desired AI-powered applications.

In this article, we’ll build a real-time public speaking and presentation coach powered by Vision Agents, which you can run on your PC or Mac to practice and improve your delivery.

Table of Contents

• ​What We’ll Be Building

• Technical Prerequisites

• Key Technologies

• Project Setup

• Set Up YOLO

• Coaching Instructions

• The Presentation Agent

• Conclusion

​What We’ll Be Building

In this guide, we’ll be walking through how to build a coaching agent that acts as your personal practice companion. This agent will provide real-time feedback, highlighting areas for improvement and offering helpful tips via audio and text.

They’ll track several aspects of your presentation, looking out for:

• Filler words: to help you reduce the use of words such as “um”, “uh”, “like” and “you know”.

• Speaking pace: to identify whether you’re talking too fast or too slow.

• Vocal variety: to point out if you’re sounding monotonous.

• Clarity: to listen to whether your words are clear enough.

• Posture: to check if you’re maintaining good or bad body posture. Look out for your shoulders, back and chin.

• Hand gestures: to monitor the use of your hands.

• Eye contact: to track whether your eyes are directly looking at your audience.

You now have a mental picture of what we’re setting out to build.

Better still, here’s a visual look at how this coach looks and works.

You can find all the code in this tutorial in this repo.

Technical Prerequisites

Before we begin, ensure you have:

• A free Stream account.

• Python installed on your PC.

• An OpenAI API Key.

• Basic knowledge of Python.

Key Technologies

First, let's introduce the major players in our presentation coach implementation and their respective roles.

Stream Video

Stream Video is a complete video infrastructure built on WebRTC, enabling browsers and apps to send live audio and video. It comes supercharged with a global edge network that routes your video to the closest server in under 30 milliseconds. This means that for our presentation coach, the AI can join your practice session like a real participant, seeing and hearing you in real-time with no lag while also providing feedback.

​Vision Agents

Vision Agents is an open-source framework from Stream that allows you to connect video streams, AI models, and chat interfaces. It ships with Stream Video as its default transport layer.

This framework simplifies the development of multimodal AI agentic applications by providing a unified Agent class that orchestrates everything. With Vision Agents, you can connect models and also get them to work together seamlessly as one coordinated system.

OpenAI RealTime API

OpenAI RealTime API allows you to stream live, low-latency interactions with OpenAI models. Its strength lies in its ability to handle speech-to-speech in one go. Your words go in, the AI thinks about them, and you get audio and text feedback almost instantaneously. Your app and model can communicate instantly, just like a live conversation. This will be the presentation coach’s actual brainbox.

YOLO11

YOLO11 is a modern and powerful computer vision model developed by Ultralytics. It supports a wide range of tasks, including object detection, instance segmentation, image classification, pose estimation/keypoint detection, and oriented bounding box detection.

It tracks 17 different points on your body, such as your shoulders, head, and hand positions, and also attempts to determine your posture at specific times. Our presentation coach will focus on the aspects of pose estimation and keypoint detection.

Project Setup

Now, let's get straight into building this presentation coach with all the technologies we’ve highlighted.

We’ll start bu installing uv, which is the recommended installer for Vision Agents. Create a project folder and run this command in the terminal if you’re using pip installer:

pip install uv

For Linux/MacOS, run:

curl -LsSf https://astral.sh/uv/install.sh | sh.

For Windows, run:

powershell -ExecutionPolicy ByPass -c \"irm https://astral.sh/uv/install.ps1 | iex\"

Next, initialize uv in your project:

uv init

Then create a virtual environment:

uv venv

And activate the virtual environment:

.venv\Scripts\activate

Now install Vision Agents with the required plugins and dependencies:

uv add vision-agents[getstream,openai,ultralytics] python-dotenv

In the root directory, create an .env file and provide the necessary credentials:

STREAM_API_KEY=your-stream-api-key

STREAM_API_SECRET=your-stream-secret

OPENAI_API_KEY=your-openai-api-key

CALL_ID="practice-room" //feel free to call it any name

In the root directory, create an 'instructions' folder and a Markdown file called 'coach.md' inside it.

In the root directory, create a file and name it download_yolo_pose.py.

Your current project folder structure should look like this:

└── 📁Presentation Coach

    └── 📁.venv

    └── 📁instructions

        ├──coach.md

    └── .env

    └── .gitignore

    └── download_yolo_pose.py

    └── main.py

    └── pyproject.toml

    └── README.md

    └── uv.lock

Set Up YOLO

The Ultralytics YOLO11 framework uses the yolo11n-pose.pt model file to watch your posture throughout your presentation. This pre-trained deep learning model file performs pose estimation by detecting keypoints. In your download_yolo_pose.py file, insert this:

//download_yolo_pose.py

from ultralytics import YOLO

import shutil

from pathlib import Path

model = YOLO("yolo11n-pose.pt")  

project_root = Path(__file__).parent

target = project_root / "yolo11n-pose.pt"

if not target.exists():

    print("Copying model to project root...")

    shutil.copy2(model.model.path, target)

else:

    print("Model already in project root.")

print(f"Ready: {target.resolve()}")

This automatically downloads the yolo11n-pose.pt file, if absent in your project, and copies it to the project root.

Coaching Instructions

AI plays the role of the coach in this implementation. The coach.md file gives it its entire personality, expertise, and coaching philosophy. You specify the tone, output rate, length of response, speaking pace, timing of feedback, and other metrics you want your AI to follow. Without these instructions, you’ll receive generic responses, vague tips, lengthy responses, and interruptions.

Paste this in your coach.md file to get the best results:

//instructions/coach.md

These instructions describe how the coaching system should behave when someone is practicing a presentation. Ensure to give quick, specific tips and try not to interrupt their flow. Only provide feedback after detecting at least 3-5 seconds of silence.

On format, feedback should appear like short texts on screen and keep them within 1 or 2 sentences maximum.

You want people to be relaxed during the presentation, so, ensure you start with something positive and always add one actionable tip.

You’ll have access to video feeds, transcripts and pose data. That’s enough to get a good idea of pace, body language and how engaged they look.

A big part of your evaluation is to understand their speech. You should look out for:

Pace: Shouldn’t be too fast or too slow. Send a message to address it when noticed.

Filler words: Listen for “um”,”uh”,”emm”,”you know”. If they keep popping up, send a reminder to pause.

Tone and variety: Watch out for their pitch and suggest accordingly

Clarity: Make sure that their words are clear enough

Also, keep an eye on the body posture. Encourage confident presentation involving use of hands, straight shoulders and steady eye contact.

The Presentation Agent

Now that we have all our pieces in place, it’s time to look at the Central Processing Unit of our presentation coach. Inside the main.py file is where the magic of Vision Agents happens, tying live video streaming, OpenAI Realtime functions, YOLO pose detection, and your coaching instructions into one multimodal agent.

Here’s how our main.py looks:

// main.py

import logging

from dotenv import load_dotenv

from vision_agents.core import Agent, User, cli

from vision_agents.core.agents import AgentLauncher

from vision_agents.plugins import getstream, openai, ultralytics

load_dotenv()

async def create_agent(**kwargs) -> Agent:

    agent_user = User(

        name="Public Speaking & Presentation Coach",

        id="coach_agent",

        image="https://api.dicebear.com/7.x/bottts/svg?seed=coach"

    )

    return Agent(

        edge=getstream.Edge(),

        agent_user=agent_user,

        instructions="@instructions/coach.md",

        llm=openai.Realtime(

            fps=6,                          

            voice="alloy",

        ),

        processors=[

            ultralytics.YOLOPoseProcessor(model_path="yolo11n-pose.pt")

        ],

    )

async def join_call(agent: Agent, call_type: str, call_id: str, **kwargs) -> None:

    print(f"Presentation Coach Agent starting...")

    print(f"Joining call: {call_type}:{call_id}")

    call = await agent.create_call(call_type, call_id)

    session = await agent.join(call)

    print("Agent connected and ready!")

    print("Real-time coaching enabled")

    try:

        await agent.llm.simple_response(

            text="Greet the user warmly and say you're ready to help them practice. "

                 "Watch their body language and speech — give encouraging, real-time feedback."

        )

        await agent.finish()

    finally:

        await session.close()

if name == "__main__":

    cli(AgentLauncher(create_agent=create_agent, join_call=join_call))

Let’s walk through what’s happening in this code:

• Your keys are loaded from the .env file by the load_dotenv function.

• The create_agent function then creates the coach’s identity using the User object, assigning it a name, ID, and avatar.

• The instantiated Agent object takes several arguments, which configure how the agent behaves and interacts with video, models, and the user. Our Agent object has the following arguments: edge, agent_user, instructions, LLMS, and processors.

• edge=getstream.Edge() connects everything to Stream’s global, low-latency video infrastructure.

• agent_user defines the coach’s identity created earlier.

• Instructions load your coaching philosophy located in the coach.md directly into the agent’s brain.

• llm specifies the AI language model and parameters. For this agent, it is OpenAI.Realtime, which opens a WebSocket to OpenAI’s Realtime API. With a frame rate of 6, the agent receives six video frames per second. The voice parameter set to “alloy” allows for real-time speech generation.

• processors perform specific types of AI/ML computation on incoming streams. In this case, video frames were analysed by YOLO11.

• With the join_call function, the agent joins the call with a short, welcoming greeting that appears instantly in the chat. The await agent.finish function hands control over to the real-time loop of the agent, which continuously listens, watches, thinks, and responds automatically. No need for manual prompts.

To run the agent, enter this on your terminal:

python main.py

Conclusion

We have successfully developed a public speaking and presentation AI agent that provides timely feedback with valuable tips to help you improve your presentation in real-time.

This was made possible by the trio of Vision Agents, YOLO11, and OpenAI Realtime API. In under 50 lines of code, we were able to build an agent that costs nearly nothing (just a few tokens) compared to paying $99 for a SaaS platform or hiring a physical coach. Pretty cool.

With Vision Agents, you have a developer-friendly framework that opens up numerous opportunities for builders to create engaging AI apps efficiently.

Happy building!

In this tutorial, I’ll guide you through the process of creating a conversational AI application that integrates real-time chat functionality with voice recognition. By leveraging Stream Chat for robust messaging and the Web Speech API for speech to text conversion, you’ll build a multi-faceted chat application that supports both voice and text interaction.

Table of Contents

• Prerequisites

• Sneak Peek

• Core Technologies

• Backend Implementation Guide

  • Project Setup

• Frontend Implementation Guide

  • Project Setup

  • Understanding the App Component

  • Adding AI to the Channel

  • Configuring the ChannelHeader

  • Adding an AI State Indicator

  • Building the Speech to Text Functionality

• Complete Process Flow

• Conclusion

Prerequisites

Before we begin, ensure you have the following:

• A Stream account with an API key and secret (Read on how to get them here)

• Access to an LLM API (like OpenAI, Anthropic).

• Node.js and npm/yarn installed.

• Basic knowledge of React and TypeScript.

• Modern browser with WebSpeech API support (like Chrome, Edge)

Sneak Peek

Let’s take a quick look at the app we’ll be building in this tutorial. This way, you get a feel for what it does before we jump into the details.

If you’re now excited, let’s get straight into it!

Core Technologies

This application is powered by three main players: Stream Chat, the Web Speech API, and a Node.js + Express backend.

Stream Chat is a platform that helps you easily build and integrate rich, real-time chat and messaging experiences into your applications. It offers a variety of SDKs (Software Development Kits) for different platforms (like Android, iOS, React) and pre-built UI components to streamline development. Its robustness and engaging chat functionality make it a great choice for this app – we don’t need to build anything from scratch.

Web Speech API is a browser standard that allows you to integrate voice input and output into your apps, enabling features like speech recognition (converting spoken speech to text) and speech synthesis (converting text to speech). We’ll use the speech recognition feature in this project.

The Node.js + Express backend manages correct agent instantiation and processes the conversational responses generated by our LLM API.

Backend Implementation Guide

Let’s begin with our backend, the engine room – where user input is routed to the appropriate AI model, and a processed response is returned. Our backend supports multiple AI models, specifically OpenAI and Anthropic.

Project Setup

1. Create a folder, call it ‘My-Chat-Application’.

2. Clone this Github repository

3. After cloning, rename the folder to ‘backend’

4. Open the .env.example file and provide the necessary keys (you’ll need to provide either the OpenAI or Anthropic key – the Open Weather key is optional).

5. Rename the env.examplefile to .env

6. Install dependencies by running this command:

    npm install
   

7. Run the project by entering this command:

    npm start
   

   Your backend should be running smoothly on localhost:3000.

Frontend Implementation Guide

This section explores two broad, interrelated components: the chat structure and speech recognition.

Project Setup

We will be creating and setting up our React project with the Stream Chat React SDK. We'll use Vite with the TypeScript template. To do that, navigate to your My-Chat-Application folder, open your terminal and enter this command:

npm create vite frontend -- --template react-ts
cd chat-example
npm i stream-chat stream-chat-react

With our frontend project set up, we can now run the app:

npm run dev

Understanding the App Component

The main focus here is to initialize a chat client, connect a user, create a channel, and render the chat interface. We’ll go through all these processes step by step to help you understand them better:

Define Constants

First, we need to provide some important credentials that we need for user creation and chat client setup. You can find these credentials on your Stream dashboard.

const apiKey = "xxxxxxxxxxxxx";
const userId = "111111111";
const userName = "John Doe";
const userToken = "xxxxxxxxxx.xxxxxxxxxxxx.xx_xxxxxxx-xxxxx_xxxxxxxx"; //your stream secret key

Note: These are dummy credentials. Make sure to use your own credentials.

Create a User

Next, we need to create a user object. We’ll create it using an ID, name and a generated avatar URL:

const user: User = {
  id: userId,
  name: userName,
  image: `https://getstream.io/random_png/?name=${userName}`,
};

Setup a Client

We need to track the state of the active chat channel using the useState hook to ensure seamless real-time messaging in this Stream Chat application. A custom hook called useCreateChatClient initializes the chat client with an API key, user token, and user data:

  const [channel, setChannel] = useState<StreamChannel>();
  const client = useCreateChatClient({
    apiKey,
    tokenOrProvider: userToken,
    userData: user,
  });

Initialize Channel

Now, we initialize a messaging channel to enable real-time communication in the Stream Chat application. When the chat client is ready, the useEffect hook triggers the creation of a messaging channel named my_channel, adding the user as a member. This channel is then stored in the channel state, ensuring that the app is primed for dynamic conversation rendering.

  useEffect(() => {
    if (!client) return;
    const channel = client.channel("messaging", "my_channel", {
      members: [userId],
    });

    setChannel(channel);
  }, [client]);

Render Chat Interface

With all the integral parts of our chat application all set up, we’ll return a JSX to define the chat interface's structure and components:

 if (!client) return <div>Setting up client & connection...</div>;

  return (
    <Chat client={client}>
      <Channel channel={channel}>
        <Window>
          <MessageList />
          <MessageInput />
        </Window>
        <Thread />
      </Channel>
    </Chat>
  );

In this JSX structure:

• If the client is not ready, it displays a "Setting up client & connection..." message.

• Once the client is ready, it renders the chat interface using:

  • <Chat>: Wraps the Stream Chat context with the initialized client.

  • <Channel>: Sets the active channel.

  • <Window>: Contains the main chat UI components:

    • <MessageList>: Displays the list of messages.

    • <MessageInput>: Uses a custom CustomMessageInput for sending messages.

  • <Thread>: Renders threaded replies.

With this, we've set up our chat interface and channel, and we have a client ready. Here's what our interface looks like so far:

Adding AI to the Channel

Remember, this chat application is designed to interact with an AI, so we need to be able to both add and remove the AI from the channel. On the UI, we’ll add a button in the channel header to enable users add and remove AI. But we still need to determine whether or not we already have it in the channel to know which option to display.

For that we’ll create a custom hook called useWatchers. It monitors the presence of the AI using a concept called watchers:

import { useCallback, useEffect, useState } from 'react';
import { Channel } from 'stream-chat';

export const useWatchers = ({ channel }: { channel: Channel }) => {
  const [watchers, setWatchers] = useState<string[]>([]);
  const [error, setError] = useState<Error | null>(null);

  const queryWatchers = useCallback(async () => {
    setError(null);

    try {
      const result = await channel.query({ watchers: { limit: 5, offset: 0 } });
      setWatchers(result?.watchers?.map((watcher) => watcher.id).filter((id): id is string => id !== undefined) || [])
      return;
    } catch (err) {
      setError(err as Error);
    }
  }, [channel]);

  useEffect(() => {
    queryWatchers();
  }, [queryWatchers]);

  useEffect(() => {
    const watchingStartListener = channel.on('user.watching.start', (event) => {
      const userId = event?.user?.id;
      if (userId && userId.startsWith('ai-bot')) {
        setWatchers((prevWatchers) => [
          userId,
          ...(prevWatchers || []).filter((watcherId) => watcherId !== userId),
        ]);
      }
    });

    const watchingStopListener = channel.on('user.watching.stop', (event) => {
      const userId = event?.user?.id;
      if (userId && userId.startsWith('ai-bot')) {
        setWatchers((prevWatchers) =>
          (prevWatchers || []).filter((watcherId) => watcherId !== userId)
        );
      }
    });

    return () => {
      watchingStartListener.unsubscribe();
      watchingStopListener.unsubscribe();
    };
  }, [channel]);

  return { watchers, error };
};

Configuring the ChannelHeader

We can now build a new channel header component by utilizing the useChannelStateContext hook to access the channel and initialize the custom useWatchers hook. Using the watchers' data, we define an aiInChannel variable to display relevant text. Based on this variable, we invoke either the start-ai-agent or stop-ai-agent endpoint on the Node.js backend.

import { useChannelStateContext } from 'stream-chat-react';
import { useWatchers } from './useWatchers';

export default function ChannelHeader() {
  const { channel } = useChannelStateContext();
  const { watchers } = useWatchers({ channel });

  const aiInChannel =
    (watchers ?? []).filter((watcher) => watcher.includes('ai-bot')).length > 0;
  return (
    <div className='my-channel-header'>
      <h2>{(channel?.data as { name?: string })?.name ?? 'Voice-and-Text AI Chat'}</h2>
      <button onClick={addOrRemoveAgent}>
        {aiInChannel ? 'Remove AI' : 'Add AI'}
      </button>
    </div>
  );

  async function addOrRemoveAgent() {
    if (!channel) return;
    const endpoint = aiInChannel ? 'stop-ai-agent' : 'start-ai-agent';
    await fetch(`http://127.0.0.1:3000/${endpoint}`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ channel_id: channel.id, platform: 'openai' }),
    });
  }
}

Adding an AI State Indicator

AIs take a bit of time to process information, so while the AI is processing, we add an indicator to reflect its status. We create a AIStateIndicator that does that for us:

import { AIState } from 'stream-chat';
import { useAIState, useChannelStateContext } from 'stream-chat-react';

export default function MyAIStateIndicator() {
  const { channel } = useChannelStateContext();
  const { aiState } = useAIState(channel);
  const text = textForState(aiState);
  return text && <p className='my-ai-state-indicator'>{text}</p>;

  function textForState(aiState: AIState): string {
    switch (aiState) {
      case 'AI_STATE_ERROR':
        return 'Something went wrong...';
      case 'AI_STATE_CHECKING_SOURCES':
        return 'Checking external resources...';
      case 'AI_STATE_THINKING':
        return "I'm currently thinking...";
      case 'AI_STATE_GENERATING':
        return 'Generating an answer for you...';
      default:
        return '';
    }
  }
}

Building the Speech to Text Functionality

Up to this point, we have a functional chat application that sends messages and receives feedback from an AI. Now, we want to enable voice interaction, allowing users to speak to the AI instead of typing manually.

To achieve this, we’ll set up speech-to-text functionality within a CustomMessageInput component. Let’s walk through the entire process, step by step, to understand how to achieve it.

Initial States Configuration

When the CustomMessageInput component first mounts, it begins by establishing its foundational state structure:

  const [isRecording, setIsRecording] = useState<boolean>(false);
  const [isRecognitionReady, setIsRecognitionReady] = useState<boolean>(false);
  const recognitionRef = useRef<any>(null);
  const isManualStopRef = useRef<boolean>(false);
  const currentTranscriptRef = useRef<string>("");

This initialization step is crucial because it establishes the component's ability to track multiple concurrent states: whether recording is active, whether the speech API is ready, and various persistence mechanisms for managing the speech recognition lifecycle.

Context Integration

In Stream Chat, the MessageInputContext is established within the MessageInput component. It provides data to the Input UI component and its children. Since we want to use the values stored within the MessageInputContext to build our own custom input UI component, we’ll be calling the useMessageInputContext custom hook:

  // Access the MessageInput context
  const { handleSubmit, textareaRef } = useMessageInputContext();

This step ensures that the voice input feature integrates seamlessly with the existing chat infrastructure, sharing the same textarea reference and submission mechanisms that other input methods use.

Web Speech API Detection and Initialization

The Web Speech API is not supported by some browsers, which is why we need to check if the browser running this application is compatible. The component's first major process involves detecting and initializing the Web Speech API:

 const SpeechRecognition = (window as any).SpeechRecognition||(window as any).webkitSpeechRecognition;

Once the API is detected, the component configures the speech recognition service with optimal settings.

Event Handler Configuration

We’ll have two event handlers: the result processing handler and the lifecycle event handler.

The result processing handler processes speech recognition output. It demonstrates a two-phase processing approach where interim results provide immediate feedback while final results are accumulated for accuracy.

      recognition.onresult = (event: any) => {
        let finalTranscript = "";
        let interimTranscript = "";

        // Process all results from the last processed index
        for (let i = event.resultIndex; i < event.results.length; i++) {
          const transcriptSegment = event.results[i][0].transcript;
          if (event.results[i].isFinal) {
            finalTranscript += transcriptSegment + " ";
          } else {
            interimTranscript += transcriptSegment;
          }
        }

        // Update the current transcript
        if (finalTranscript) {
          currentTranscriptRef.current += finalTranscript;
        }

        // Combine stored final transcript with current interim results
        const combinedTranscript = (currentTranscriptRef.current + interimTranscript).trim();

        // Update the textarea
        if (combinedTranscript) {
          updateTextareaValue(combinedTranscript);
        }
      };

The lifecycle event handler ensures that the component responds appropriately to each phase of the speech recognition lifecycle events (onstart, onend and onerror):

      recognition.onstart = () => {
        console.log("Speech recognition started");
        setIsRecording(true);
        currentTranscriptRef.current = ""; // Reset transcript on start
      };

      recognition.onend = () => {
        console.log("Speech recognition ended");
        setIsRecording(false);

        // If it wasn't manually stopped and we're still supposed to be recording, restart
        if (!isManualStopRef.current && isRecording) {
          try {
            recognition.start();
          } catch (error) {
            console.error("Error restarting recognition:", error);
          }
        }

        isManualStopRef.current = false;
      };

      recognition.onerror = (event: any) => {
        console.error("Speech recognition error:", event.error);
        setIsRecording(false);
        isManualStopRef.current = false;

        switch (event.error) {
          case "no-speech":
            console.warn("No speech detected");
            // Don't show alert for no-speech, just log it
            break;
          case "not-allowed":
            alert(
              "Microphone access denied. Please allow microphone permissions.",
            );
            break;
          case "network":
            alert("Network error occurred. Please check your connection.");
            break;
          case "aborted":
            console.log("Speech recognition aborted");
            break;
          default:
            console.error("Speech recognition error:", event.error);
        }
      };

      recognitionRef.current = recognition;
      setIsRecognitionReady(true);
      } else {
      console.warn("Web Speech API not supported in this browser.");
      setIsRecognitionReady(false);
      }

Starting Voice Input

When a user clicks the microphone button, the component initiates a multi-step process that involves requesting microphone permissions and providing clear error handling if users deny access.

 const toggleRecording = async (): Promise<void> => {
    if (!recognitionRef.current) {
      alert("Speech recognition not available");
      return;
    }

    if (isRecording) {
      // Stop recording
      isManualStopRef.current = true;
      recognitionRef.current.stop();
    } else {
      try {
        // Request microphone permission
        await navigator.mediaDevices.getUserMedia({ audio: true });

        // Clear current text and reset transcript before starting
        currentTranscriptRef.current = "";
        updateTextareaValue("");

        // Start recognition
        recognitionRef.current.start();
      } catch (error) {
        console.error("Microphone access error:", error);
        alert(
          "Unable to access microphone. Please check permissions and try again.",
        );
      }
    }
  };

Resetting State and Start Recognition

Before beginning speech recognition, the component resets its internal state. This reset ensures that each new voice input session starts with a clean slate, preventing interference from previous sessions.

currentTranscriptRef.current = "";
updateTextareaValue("");
recognitionRef.current.start();

Real-Time Speech Processing

Two things happen simultaneously during this process:

1. Continuous Result Processing : As the user speaks, the component continuously processes incoming speech data through a sophisticated pipeline:

   • Each speech segment is classified as either interim (temporary) or final (confirmed).

   • Final results are accumulated in the persistent transcript reference.

   • Interim results are combined with accumulated finals for immediate display.

2. Dynamic Textarea Updates: The component updates the textarea in real-time using a custom DOM manipulation approach:

    const updateTextareaValue = (value: string) => {
      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
        window.HTMLTextAreaElement.prototype,
        'value'
      )?.set;
   
      if (nativeInputValueSetter) {
        nativeInputValueSetter.call(textareaRef.current, value);
        const inputEvent = new Event('input', { bubbles: true });
        textareaRef.current.dispatchEvent(inputEvent);
      }
    };
   

   This step involves bypassing React's conventional controlled component behavior to provide immediate feedback, while still maintaining compatibility with React's event system.

User Interface Feedback

To make voice interactions feel smoother for users, we’ll add some visual feedback features. These include:

1. Toggling between mic and stop icons

   We show a microphone icon when idle and a stop icon when recording is active. This provides a clear indication of the recording state.

    <button
      className={`voice-input-button ${isRecording ? 'recording' : 'idle'}`}
      title={isRecording ? "Stop recording" : "Start voice input"}
    >
      {isRecording ? (
        <Square size={20} className="voice-icon recording-icon" />
      ) : (
        <Mic size={20} className="voice-icon idle-icon" />
      )}
    </button>
   

2. Recording notification banner

   A notification banner appears at the top of the screen to indicate that voice recording is in progress. This notification ensures users are aware when the microphone is active, addressing privacy and usability concerns.

    {isRecording && (
      <div className="recording-notification show">
        <span className="recording-icon">🎤</span>
        Recording... Click stop when finished
      </div>
    )}
   

Message Integration and Submission

The transcribed text integrates seamlessly with the existing chat system through the shared textarea reference and context-provided submission handler:

<SendButton sendMessage={handleSubmit} />

This integration means that voice-generated messages follow the same submission pathway as typed messages, maintaining consistency with the chat system's behavior. After message submission, the component ensures proper cleanup of its internal state, preparing for the next voice input session.

Passing the CustomMessageInput component

Having built our custom messaging input component, we’ll now pass it to the Input prop of the MessageInput component in our App.tsx:

<MessageInput Input={CustomMessageInput} />

Complete Process Flow

Here’s how the application works:

1. After the component mounts, you add the AI to the chat by clicking the Add AI button.

2. Click the mic icon to start recording.

3. Your browser will ask for permission to use the microphone.

4. If you deny permission, recording won't begin.

5. If you allow permission, recording and transcription start simultaneously.

6. Click the stop (square) icon to end the recording.

7. Click the send button to submit your message.

8. The AI processes your input and generates a response.

Conclusion

In this tutorial, you’ve learned how to build a powerful conversational chatbot using Stream Chat and React. The application supports both text and voice inputs.

If you want to create your own engaging chat experiences, you can explore Stream Chat and Video features to take your projects to the next level.

Get the full source code for this project here. If you enjoyed reading this article, connect with me on LinkedIn or follow me on X for more programming-related posts and articles.

See you on the next one!

But what if you’re alone and need to make that choice quickly? Imagine having an app where you can drag and drop different clothing colors on your screen, instantly visualizing your outfit. If it looks good, that’s all the validation you need – no more second-guessing your look.

In this tutorial, we’ll build a dynamic wardrobe app using React. You’ll learn to structure components, handle drag-and-drop interactions, and craft a smooth user experience. Let’s get straight into it!

Here’s what we’ll cover:

• Prerequisites

• Steps to Create a Dynamic Wardrobe using React

  • Step 1: Setting Up Your Project

  • Step 2: Setting Up States

  • Step 3: Defining Color Options

  • Step 4: Implementing Drag and Drop Functionality

  • Step 5: Building the User Interface

  • Step 6: Putting It All Together

• Conclusion

Prerequisites

Before we start coding, make sure you have:

• Basic knowledge of React.

• A code editor of your choice.

Steps to Create a Dynamic Wardrobe using React

We're going to go through how to build this project step by step, so it's easy to follow along. By the end, you'll understand exactly how drag and drop functionality in React works.

Step 1: Setting Up Your Project

First and foremost, you need to set up React and Tailwind CSS using Vite in a project. If you don't know how to do that, check out this article and follow the steps. When you’re done, come back here, and let’s continue building.

If you already have a React project with Tailwind CSS you want to use, that’s great too.

Step 2: Setting Up States

We'll start by setting up our states. If you have no idea what states are you can read my article on states here. In this simple project, we’ll have only two states: one for the selected top color (selectedTop) and the other for the selected bottom color (selectedBottom). We’ll be setting the initial value of both states to white (with hex code of #ffffff), as shown below:

const [selectedTop, setSelectedTop] = useState("#ffffff");

const [selectedBottom, setSelectedBottom] = useState("#ffffff");

Step 3: Defining Color Options

Next, we define an array of color options for the outfits:

const colorOptions = [

"#ff0000", // Red

"#0000ff", // Blue

"#ffff00", // Yellow

"#00ff00", // Green

"#ff00ff", // Pink

"#808080", // Gray

"#000000", // Black

"#ffffff", // White

];

The colorOptions array provides a vibrant palette of colors that users can drag onto clothing items.

Step 4: Implementing Drag and Drop Functionality

Now, let's create the drag and drop functionality, which is the core aspect of this project. We’ll need event handler functions to handle certain events when they are triggered by specific user interaction or browser events – in this case, dragging and dropping.

Here are the event handlers we need to implement the drag and drop functionality:

1. handleDragStart

This function is triggered when the user starts dragging a color block from the color palette (typically triggered via onDragStart in JSX).

const handleDragStart = (e, color) => {

e.dataTransfer.setData("color", color);

};

Breaking it down:

• const handleDragStart = (e, color) => { ... }: This function accepts two parameters – the drag event object (e) and color, a custom value representing the color associated with the color block being dragged.

• e.dataTransfer.setData("color", color):

  • dataTransfer is a property of the drag event that holds data being dragged.

  • .setData("color", color) stores the value of color under the key "color".

2. handleDropOnTop

This function is triggered when the color block is dropped onto the "top" section of your outfit interface.

const handleDropOnTop = (e) => {

e.preventDefault();

const color = e.dataTransfer.getData("color");

setSelectedTop(color);

};

Breaking it down:

• const handleDropOnTop = (e) => { … }: This function takes a single argument e, which is the event object representing the drop action.

• e.preventDefault(): By default, the browser won’t allow dropping an item unless you explicitly prevent the default behavior. This ensures the drop target can accept the dragged item.

• const color = e.daaTransfer.getData(“color”): retrieves the data previously set during the drag operation using setData(“color”, color) in handleDragStart .

• setSelectedTop(color): The color data will be used to update the selectedTop state that tracks the currently selected top clothing color. This will typically cause the UI to re-render, showing the dropped color on the “top” section of the outfit.

3. handleDropOnBottom

This function is triggered when the color block is dropped onto the "bottom" section of your outfit interface.

const handleDropOnBottom = (e) => {

e.preventDefault();

const color = e.dataTransfer.getData("color");

setSelectedBottom(color);

};

Breaking it down:

• const handleDropOnBottom = (e) => { ... }: This function takes a single argument e, which is the event object representing the drop action.

• e.preventDefault(): By default, the browser won’t allow dropping an item unless you explicitly prevent the default behavior. This ensures the drop target can accept the dragged item.

• const color = e.dataTransfer.getData("color"): Retrieves the data previously set during the drag operation using setData("color", color) in handleDragStart.

• setSelectedBottom(color): The color data will be used to update the selectedBottom state that tracks the currently selected top clothing color. This will typically cause the UI to re-render, showing the dropped color on the “bottom” section of the outfit.

4. allowDrop

This event handler function enables a drop target by preventing the browser's default behavior, which otherwise disallows dropping elements.

const allowDrop = (e) => {

e.preventDefault();

};

Step 5: Building the User Interface

Having finished the functional part of our wardrobe project, we want to build out the visual part that users can see and interact with.

The UI will consist of two parts: a color palette on the left and an outfit preview on the right. The color palette section will include 30 color blocks while the outfit preview section will include a top and bottom, onto which selected colors can be dragged and applied to see how they look together.

This is a visual representation of the UI we’re building out:

Creating the Color Palette Section

To display all the colors provided in our colorOptions array, we need to first map through the array consisting of color values and render a <div> for each color.

Each <div>:

• Acts as a draggable color block with fixed width and height.

• Has a semi-circular appearance using Tailwind CSS classes and inline styling to apply the specific background color.

• Triggers the handleDragStart function when dragging begins, passing the event and the selected color.

• Has a unique key for React's rendering optimization.

• If the color is white (#ffffff), it conditionally displays the text "White" in light gray for visibility.

This setup allows users to visually identify and drag different color options to the top or bottom of an outfit on the UI.

return (
  <div className="flex flex-col items-center p-6 bg-gray-100 rounded-lg min-h-screen">
    <h1 className="text-3xl font-extrabold mb-8 text-indigo-700">
      Dynamic Wardrobe
    </h1>

    <div className="flex flex-col md:flex-row w-full gap-8">
      {/* Color palette section */}
      <div className="w-full md:w-1/3 bg-white p-6 rounded-lg shadow-md">
        <h2 className="text-xl font-semibold mb-4 text-center">
          Color Palette
        </h2>
        <p className="mb-4 text-sm text-gray-600">
          Drag colors to the outfit pieces
        </p>
        <div className="grid grid-cols-5 gap-2">
          {colorOptions.map((color) => (
            <div
              key={color}
              className="w-12 h-12 rounded-md shadow-sm cursor-move flex items-center justify-center"
              style={{ backgroundColor: color, border: "1px solid #ddd" }}
              draggable="true"
              onDragStart={(e) => handleDragStart(e, color)}
            >
              {color === "#ffffff" && (
                <span className="text-xs text-gray-400">White</span>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  </div>
);

Creating the Outfit Preview

Finally, let's implement the outfit preview section, which is the fun part. There are two parts to the outfit display: the top and the bottom section. Let’s look at them one after the other:

Top Section

This section acts as a drop target for the top clothing color. It consists of a div with an SVG that allows for color filling.

<div
  className="w-full flex items-center justify-center"
  onDrop={handleDropOnTop}
  onDragOver={allowDrop}
>
  {/* T-shirt */}
  <svg viewBox="0 0 24 24" width="180" height="140">
    <path
      d="M16 2H8L6 6v3h2v13h8V9h2V6l-2-4z"
      fill={selectedTop}
      stroke="#333"
      strokeWidth="0.2"
    />
  </svg>
</div>;

In this section:

• onDrop={handleDropOnTop}: Sets the top outfit color, when a color is dropped at the top div.

• allowDrop is called via onDragOver to enable dropping.

• The T-shirt SVG is drawn and its fill color is controlled by selectedTop, which updates when a new color is dropped.

Bottom Section

This section acts as a drop target for the bottom clothing color. It consists of a div with an SVG that allows for color filling.

<div
  className="w-full flex items-center justify-center -mt-8"
  onDrop={handleDropOnBottom}
  onDragOver={allowDrop}
>
  <svg viewBox="0 0 200 200" width="120" height="140">
    {/* Pants */}
    <path
      d="M60,20 L140,20 L150,180 L110,180 L100,100 L90,180 L50,180 L60,20 Z"
      fill={selectedBottom}
      stroke="#333"
      strokeWidth="2"
    />
    {/* Waistband */}
    <rect x="60" y="18" width="80" height="5" fill="#444" />
    {/* Center seam */}
    <path d="M100,20 L100,100" stroke="#000" strokeWidth="1" />
  </svg>
</div>;

In this section:

• onDrop={handleDropOnBottom}: Sets the bottom outfit color, when a color is dropped at the bottom div.

• allowDrop is called via onDragOver to enable dropping.

• The pant SVG is drawn and its fill color is controlled by selectedBottom, which updates when a new color is dropped.

• Extra details like a waistband (rect) and a seam (path) add realism.

That completes the UI section of our project.

Step 6: Putting It All Together

Now that you’ve learned about the integral aspects, here is the full code that will give you the entire look and functionality:

import { useState } from "react";

export default function App() {
  // State for selected colors
  const [selectedTop, setSelectedTop] = useState("#ffffff");
  const [selectedBottom, setSelectedBottom] = useState("#ffffff");

  // Color options for clothing
  const colorOptions = [
    "#ff0000", // Red
    "#0000ff", // Blue
    "#ffff00", // Yellow
    "#00ff00", // Green
    "#ff00ff", // Pink
    "#808080", // Gray
    "#000000", // Black
    "#ffffff", // White
    "#ffa500", // Orange
    "#800080", // Purple
    "#8B0000", // Dark Red
    "#006400", // Dark Green
    "#00008B", // Dark Blue
    "#4B0082", // Indigo
    "#228B22", // Forest Green
    "#20B2AA", // Light Sea Green
    "#87CEEB", // Sky Blue
    "#4682B4", // Steel Blue
    "#9932CC", // Dark Orchid
    "#FF1493", // Deep Pink
    "#FF4500", // Orange Red
    "#FFD700", // Gold
    "#F0E68C", // Khaki
    "#F5DEB3", // Wheat
    "#D2B48C", // Tan
    "#A0522D", // Sienna
    "#8B4513", // Saddle Brown
    "#BC8F8F", // Rosy Brown
    "#708090", // Slate Gray
    "#2F4F4F", // Dark Slate Gray
  ];

  // Drag and drop handlers
  const handleDragStart = (e, color) => {
    e.dataTransfer.setData("color", color);
  };

  const handleDropOnTop = (e) => {
    e.preventDefault();
    const color = e.dataTransfer.getData("color");
    setSelectedTop(color);
  };

  const handleDropOnBottom = (e) => {
    e.preventDefault();
    const color = e.dataTransfer.getData("color");
    setSelectedBottom(color);
  };

  const allowDrop = (e) => {
    e.preventDefault();
  };

  return (
    <div className="flex flex-col items-center p-6 bg-gray-100 rounded-lg min-h-screen">
      <h1 className="text-3xl font-extrabold mb-8 text-indigo-700">
        Dynamic Wardrobe
      </h1>

      <div className="flex flex-col md:flex-row w-full gap-8">
        {/* Color palette section */}
        <div className="w-full md:w-1/3 bg-white p-6 rounded-lg shadow-md">
          <h2 className="text-xl font-semibold mb-4 text-center">
            Color Palette
          </h2>
          <p className="mb-4 text-sm text-gray-600">
            Drag colors to the outfit pieces
          </p>
          <div className="grid grid-cols-5 gap-2">
            {colorOptions.map((color) => (
              <div
                key={color}
                className="w-12 h-12 rounded-md shadow-sm cursor-move flex items-center justify-center"
                style={{ backgroundColor: color, border: "1px solid #ddd" }}
                draggable="true"
                onDragStart={(e) => handleDragStart(e, color)}
              >
                {color === "#ffffff" && (
                  <span className="text-xs text-gray-400">White</span>
                )}
              </div>
            ))}
          </div>
        </div>

        {/* Outfit visualization section */}
        <div className="w-full md:w-2/3 bg-white p-6 rounded-lg shadow-md">
          <h2 className="text-xl font-semibold mb-4 text-center">
            Outfit Preview
          </h2>
          <div className="flex flex-col items-center">
            <div className="relative w-64 h-64">
              {/* Outfit container - better positioning */}
              <div className="relative w-full h-full flex flex-col items-center justify-center">
                {/* Top Section - accepts drag and drop */}
                <div
                  className="w-full flex items-center justify-center"
                  onDrop={handleDropOnTop}
                  onDragOver={allowDrop}
                >
                  {/* T-shirt */}
                  <svg viewBox="0 0 24 24" width="180" height="140">
                    <path
                      d="M16 2H8L6 6v3h2v13h8V9h2V6l-2-4z"
                      fill={selectedTop}
                      stroke="#333"
                      strokeWidth="0.2"
                    />
                  </svg>
                </div>
                <div
                  className="w-full flex items-center justify-center -mt-8"
                  onDrop={handleDropOnBottom}
                  onDragOver={allowDrop}
                >
                  <svg viewBox="0 0 200 200" width="120" height="140">
                    {/* Pants */}
                    <path
                      d="M60,20 L140,20 L150,180 L110,180 L100,100 L90,180 L50,180 L60,20 Z"
                      fill={selectedBottom}
                      stroke="#333"
                      strokeWidth="2"
                    />
                    {/* Waistband */}
                    <rect x="60" y="18" width="80" height="5" fill="#444" />
                    {/* Center seam */}
                    <path d="M100,20 L100,100" stroke="#000" strokeWidth="1" />
                  </svg>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Here’s our dynamic wardrobe in full flow:

Conclusion

This dynamic wardrobe project demonstrates the power of React's drag and drop API combined with state management. Not only is it a fun project to build, but it also taught you important concepts like managing state in React components, implementing drag and drop functionality, creating responsive layouts with Tailwind CSS and using SVG for interactive visuals.

If you enjoyed reading this tutorial, you could Buy Me a Coffee. You can also connect with me on LinkedIn for more programming-related posts and articles.

See you on the next one!

Whether it's selecting a country to reveal corresponding states or choosing a product category to display specific items, these dropdowns simplify complex choices for everyone. For developers, implementing dependent dropdowns is a practical challenge that combines logic, usability, and dynamic data handling.

In this tutorial, you’ll learn how to implement this type of dropdown in your React application.

Table of Contents

• What is a Dependent Dropdown?

• How Does a Dependent Dropdown Work?

• Steps to Create Dependent Dropdowns in React

  • Step 1: Set up Your React Project

  • Step 2: Structure the Component

  • Step 3: Use the Component

• Handling Dynamic Data (API Requests)

• Conclusion

What is a Dependent Dropdown?

A dependent dropdown is a UI element in which the available options in one dropdown are determined by the selection made in another dropdown. For example, consider a scenario where you have two dropdowns:

1. Country Dropdown: The user selects a country.

2. City Dropdown: Based on the selected country, the list of available cities in the second dropdown will be filtered accordingly.

This kind of interaction is crucial for forms that require complex, context-sensitive data inputs.

How Does a Dependent Dropdown Work?

Dependent dropdowns work by having the second dropdown’s options dynamically updated based on the value selected in the first dropdown. This dynamic change is typically achieved by:

1. Listening to user input: When the user selects an option in the first dropdown, an event (usually onChange) triggers a function to update the state.

2. Fetching new data: This updated state can be used to either filter the existing data or make an API call to fetch the new list of options.

3. Rendering new data: The second dropdown is then updated with the new options, providing the user with relevant choices.

Steps to Create Dependent Dropdowns in React

Step 1: Set up Your React Project

If you’re new to React and wish to follow along, check out the Vite docs and follow the steps to create your React project. When you’re done, come back here and let’s continue building.

If you already have a React project you want to use, that’s great too.

Step 2: Structure the Component

For simplicity, let’s assume we are building a two-level dependent dropdown where the first dropdown lets you choose a country, and the second dropdown displays cities based on the selected country.

Also, in the country dropdown, we’ll have another option for entering a country name that is not included in the countries options. The user can then proceed to enter their country in a text input.

First, create a new file named DependentDropdown.js or DependentDropdown.jsx. Inside this file, define a functional component called DependentDropdown.

Now we’ll be going through the following steps to build our dependent dropdown:

Declare Variables for Storing Data

We need to create static data for the values of our countries and cities:

  // Static country data
  const countries = [
    { id: 1, name: 'USA' },
    { id: 2, name: 'Canada' },
    { id: 3, name: 'Other' },
  ];

  // Static city data corresponding to countries
  const cities = {
    USA: ['New York', 'Los Angeles', 'Chicago'],
    Canada: ['Toronto', 'Vancouver', 'Montreal'],
  };

• countries is an array of objects. Each object having properties of id and name.

• cities is an object with country names as keys and the values as array of cities.

Declare State Variables

For each selection of either country or cities, we want to be able to keep track of the values selected. We also want to be able to populate the cities option after a country selection has been made. To do that, we need to declare some states.

If the concept of state is new to you, you can read my article on state here.

  const [selectedCountry, setSelectedCountry] = useState('');
  const [availableCities, setAvailableCities] = useState([]);
  const [selectedCity, setSelectedCity] = useState('');
  const [otherCountry, setOtherCountry] = useState('');

• The selectedCountry state is declared and its initial value is set to an empty string.

• The availableCities state is declared and its initial value is set to an empty array.

• The selectedCity state is declared and its initial value is set to an empty string.

• The otherCountry state is declared and its initial value is set to an empty string.

Handling Events

In the process of making a selection in the dropdown, we want some actions to be performed. Event handlers enable us to do that in the case of an event, which in this case is the onChange event.

  const handleCountryChange = (e) => {
    const country = e.target.value;
    setSelectedCountry(country);
    setAvailableCities(cities[country] || []);
    setSelectedCity(''); 
     if (country !== 'Other') {
      setOtherCountry('');
    }
  };

Here’s what’s going on in the handleCountryChange function:

• Grabs the value of the selected option in the dropdown (the country that was selected).

• The setSelectedCountry updates the state variable (selectedCountry) with the newly selected country.

• cities[country] looks up the list of cities for the selected country from the cities object.

  • If cities[country] is found, it sets that list of cities as the available cities.

  • If no cities are found for the selected country (cities[country] is undefined), the || [] ensures that an empty array ([]) is used as a fallback, preventing errors when trying to display the cities.

• When the user changes the country selection, the setSelectedCity function resets the selectedCity to an empty string.

• If the country selected is not ‘Other’, the otherCountry state is reset to an empty string. This ensures that if the user had previously typed something into the "Other" input, that text is cleared once they select a different country (for example, "USA" or "Canada").

For the ‘Other’ country selection, we just need to keep track of the value entered into the input. The setOtherCountry function updates the value entered. And this is how it is done:

  const handleOtherCountryChange = (e) => {
    setOtherCountry(e.target.value);
  };

For the cities change, we don’t need to do much because the selected country determines which cities are displayed. All we need to do is to update the selectedCity to the value of the selected option in the dropdown, which is the city that is selected.

In React, the updater function does the updating of state variables, so the setSelectedCity handles this in this case.

The handleCityChange function will be:

  const handleCityChange = (e) => {
    setSelectedCity(e.target.value);
  };

Returning JSX

The DependentDropdown component renders three main elements: the Country dropdown, the City dropdown, and the Country text input.

A dropdown in HTML is a combination of the <select> and <option> elements. To keep track of the value of elements, we’ll attach state variables to them so we can control them. Doing this is called 'Controlling Elements', while the elements themselves are referred to as 'Controlled Elements' in React.

To control the country <select> element, we’ll give it a value attribute of selectedCountry and also attach the handleCountryChange function to it.

     <label htmlFor="country" className='font-bold'>Select Country: </label>
      <select id="country" value={selectedCountry} onChange={handleCountryChange}>
        <option value="">Select a country</option>
        {countries.map((country) => (
          <option key={country.id} value={country.name}>
            {country.name}
          </option>
        ))}
      </select>

Also,

• Inside the <option>, we map over the countries array and dynamically create an <option> for each country object in the array.

• Each country’s name is displayed as the option’s text.

• Each option’s key is set to the country’s id and value is set to the country’s name.

• The key helps React manage the list efficiently when re-rendering.

The Cities dropdown is conditionally rendered based on the selected country. If the 'Other' country option is chosen, a text input field is displayed for the user to specify the country. Otherwise, if a valid country is selected, a Cities dropdown with relevant options is shown.

{selectedCountry === 'Other' ? (
        <>
          <label htmlFor="other-country" className='font-bold'>Please specify the country: </label>
          <input
            id="other-country"
            type="text"
            value={otherCountry}
            onChange={handleOtherCountryChange}
            placeholder="Enter country name"
          />
        </>
      ) : (
        selectedCountry && (
          <>
            <label htmlFor="city" className='font-bold'>Select City: </label>
            <select id="city" value={selectedCity} onChange={handleCityChange}>
              <option value="">Select a city</option>
              {availableCities.map((city, index) => (
                <option key={index} value={city}>
                  {city}
                </option>
              ))}
            </select>
          </>
        )
      )
}

Additionally:

• We check if selectedCountry is the ‘Other’ option and display a text input.

• The text input has a otherCountry state and the handleOtherCountryChange handler function attached to it.

• We control the city <select> element using the value attribute, setting it to the state variable of selectedCity. The event handler, handleCityChange, is also attached to handle onChange events.

• We map over the availableCities array and dynamically create an <option> for each city in the array.

• Each option’s key is set to an index and value is set to the city.

• Each city is displayed as the option’s text.

That’s all we have to do to have a functional dependent dropdown using our static data.

Here is all the code put together:

import React, { useState } from 'react';

const DependentDropdown = () => {
  // Static country data
  const countries = [
    { id: 1, name: 'USA' },
    { id: 2, name: 'Canada' },
    { id: 3, name: 'Other' },
  ];

  // Static city data corresponding to countries
  const cities = {
    USA: ['New York', 'Los Angeles', 'Chicago'],
    Canada: ['Toronto', 'Vancouver', 'Montreal'],
  };

  // State to hold the selected country, city, and other country text
  const [selectedCountry, setSelectedCountry] = useState('');
  const [availableCities, setAvailableCities] = useState([]);
  const [selectedCity, setSelectedCity] = useState('');
  const [otherCountry, setOtherCountry] = useState(''); 

  // Handle country change
  const handleCountryChange = (e) => {
    const country = e.target.value;
    setSelectedCountry(country);
    setAvailableCities(cities[country] || []);
    setSelectedCity(''); 
    if (country !== 'Other') {
      setOtherCountry('');
    }
  };

  // Handle city change
  const handleCityChange = (e) => {
    setSelectedCity(e.target.value);
  };

  // Handle other country input change
  const handleOtherCountryChange = (e) => {
    setOtherCountry(e.target.value);
  };

  return (
    <div className='text-center text-3xl'>
      <h1 className='font-extrabold text-5xl p-10'>Dependent Dropdown Example</h1>

      {/* Country Dropdown */}
      <label htmlFor="country" className='font-bold'>Select Country: </label>
      <select id="country" value={selectedCountry} onChange={handleCountryChange}>
        <option value="">Select a country</option>
        {countries.map((country) => (
          <option key={country.id} value={country.name}>
            {country.name}
          </option>
        ))}
      </select>

      {/* City or Other Country Input */}
      {selectedCountry === 'Other' ? (
        <>
          <label htmlFor="other-country" className='font-bold'>Please specify the country: </label>
          <input
            id="other-country"
            type="text"
            value={otherCountry}
            onChange={handleOtherCountryChange}
            placeholder="Enter country name"
          />
        </>
      ) : (
        selectedCountry && (
          <>
            <label htmlFor="city" className='font-bold'>Select City: </label>
            <select id="city" value={selectedCity} onChange={handleCityChange}>
              <option value="">Select a city</option>
              {availableCities.map((city, index) => (
                <option key={index} value={city}>
                  {city}
                </option>
              ))}
            </select>
          </>
        )
      )}
    </div>
  );
};

export default DependentDropdown;

Step 3: Use the Component

To get your final results, you need to import the DependentDropdown component into your App.js or App.jsx and place it inside the return section of the App component.

import DependentDropdown from './DependentDropdown'

function App() {

  return (
    <DependentDropdown/>
  )
}

export default App

Don’t forget to run the application by entering either of these commands:

npm start //for create react app
npm run dev //for react vite app

Finally, this is what should render on your browser:

Handling Dynamic Data (API Requests)

In real-world applications, the lists for the dropdowns might not be static. Instead, they might be fetched from an API or a JSON file acting as an API.

In this example, we’ll be reading data from a JSON file to populate our dependent dropdown. This practice has some benefits which are:

• Reduced database load: By using a static JSON file (or a pre-loaded file), you're reducing the number of database queries that would otherwise be needed to populate dropdowns. This is especially useful if the dropdown options are fairly static and don’t change often.

• Faster UI rendering: Since the data is already on the client side, there’s no need for a round-trip request to the server every time the user interacts with the dropdown. This can make the interface feel more responsive.

Our JSON file contains states and LGAs (Local Government Areas), which are the equivalents of Countries and Cities.

The data in the JSON file is represented as an array of objects, with each object having keys for state, alias, and lgas. The 'lgas' key contains an array.

Here’s how it’s represented:

[
  {
    "state": "Adamawa",
    "alias": "adamawa",
    "lgas": [
      "Demsa",
      "Fufure",
      "Toungo",
      "Yola North",
      "Yola South"
    ]
  },
  {
    "state": "Akwa Ibom",
    "alias": "akwa_ibom",
    "lgas": [
      "Abak",
      "Uruan",
      "Urue-Offong/Oruko",
      "Uyo"
    ]
  },
//the rest of the objects
]

This method of creating a dynamic dependent dropdown from an API isn’t too different from the previous example, except for some minor modifications.

Here ‘s how we fetched and used data from a JSON file:

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

function DependentDropdown() {
//declaring global state variables
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

//fetching data using the useEffect hook
  useEffect(() => {
    fetch("nigeria-state-and-lgas.json") //JSON file set as URL
      .then((res) => res.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      })
      .catch((error) => {
        console.error("Error fetching data:", error);
        setLoading(false);
      });
  }, []);
  return loading ? <div>Loading...</div> : <Form data={data} />;

}
//form recieving data as props
function Form({ data }) {

//declaring local state variables
  const [selectedState, setSelectedState] = useState("");
  const [selectedLga, setSelectedLga] = useState("");
  const [showList, setShowList] = useState(false);
  let sortedData = data.slice().sort((a, b) => a.state.localeCompare(b.state));
  const selectedData = sortedData.find((item) => item.state === selectedState);

//handler function for state
  function handleClickState(e) {
    setSelectedState(e.target.value);
    setShowList(true);
  }
//handler function for Lga
  function handleClickLga(e) {
    setSelectedLga(e.target.value);
  }

  return (
    <div>
  <form onSubmit={handleFormSubmit}>
    <div>
      {/* First Name */}
      <div>
        <label htmlFor="firstName">First Name</label>
        <input type="text"
          id="firstName"
          name="firstName"
          placeholder="Enter your first name"/>
      </div>

      {/* Last Name */}
      <div>
        <label htmlFor="lastName">
          Last Name
        </label>
        <input
          type="text"
          id="lastName"
          name="lastName"
          placeholder="Enter your last name"/>
      </div>
    </div>

    <div>
      <div>
        <select value={selectedState} onChange={handleClickState} name="state">
          <option value="" disabled>Choose your state</option>
          {sortedData.map((data) => (
            <option key={data.alias} value={data.state}>
              {data.state}
            </option>
          ))}
        </select>
      </div>
      {selectedData && showList && (
        <select value={selectedLga} onChange={handleClickLga} name="lga">
          <option value="" disabled>{`Choose your LGA in ${selectedState}`}</option>
          {selectedData.lgas.map((lgass) => (
            <option key={lgass} value={lgass}>
              {lgass}
            </option>
          ))}
        </select>
      )}

    </div>
    <div>
        <button type="submit">
          Submit
        </button>
      </div>
  </form>
</div>
  );
}

export default DependentDropdown;

The key modification here is data fetching using the useEffect hook, which fetches the states and LGA data only on the initial render

Here is how this renders on the browser:

Conclusion

In this tutorial, you have learnt how to create dependent dropdowns in React using both static and dynamic data. You can now use this type of dropdown in your React applications.

If you found this article helpful, you can connect with me on LinkedIn for more programming related articles and posts.

See you on the next one!

At the heart of Django’s architecture is the Model-View-Template (MVT) pattern. Having a good understanding of how Models, Views, and Templates interact is crucial if you’re looking to harness the full power of Django.

Whether you are completely new to Django or a beginner, this article will serve as a comprehensive guide showing you how these components work and interact with each other to create dynamic web applications.

To make it even more understandable, we’ll build a simple application to help you better understand the interconnectivity of these components.

If you’re excited already, let’s get straight into it!

Here’s what we’ll cover:

• Prerequisites

• What is the MVT Architecture?

• The Model Component

• The View Component

• The Template Component

• Diagram Showing the MVT WorkFlow

• Real-World Analogy of MVT

• Putting it All Together into a Project

• Conclusion

Prerequisites

To follow along, you need:

• Basic understanding of how web applications works, including client-server architecture.

• Basic knowledge of Python.

What is the MVT Architecture?

The MVT pattern is Django’s approach to organizing the codebase and workflow of a web application. The components that make up this architecture are the Model, View, and Template. Each component performs specific functions and then passes the process to the other components to do theirs.

Let’s take a quick look at the components with the specific functions they perform:

• Model: Also known as the data layer, it manages data and interacts with the database.

• View: Also known as the logic layer, it acts as the intermediary, handles logic, and manages data flow.

• Template: Also known as the presentation layer, it renders HTML content on the user interface.

Now that you have an idea about the components and their roles in a Django application, we’ll look extensively into each component and how they interact in the architecture.

The Model Component

Models manage the structure and interaction of data within a Django application, making them the foundation of Django apps due to the critical role data plays.

Django models utilize a powerful feature called Object-Relational Mapping (ORM), which bridges the gap between a relational database and Python code. It converts the Python objects (classes) into database tables, their attributes into columns, and instances into rows within those tables.

One huge advantage of the ORM is that it allows you to interact with the database using Python objects instead of writing SQL queries. Think of it as a translator that converts one language into another for an audience to understand. In this case, the ORM translates Python code into SQL commands that the database can execute, and vice versa.

Django models encapsulate all database-related logic and define the structure of your database, acting as a blueprint for the data you want to store.

General format of a Django Model

In Django, every model follows a particular way of declaration. Here is the basic structure of a model declaration:

class <model_name>(models.Model):
    <field_name> = models.<field_type>(<optional_field_characteristics>)

Let’s break it down:

• class: the keyword used to define a model in Django.

• model_name: the name of the model.

• models.Model: the base class from which the model class inherits.

• field_name: the name of the database column.

• field_type: refers to the type of data the field holds like charField, BooleanField and so on.

• optional_field_characteristics: used to further define how the field behaves, like max_length, default, and so on.

Model Example

Having known everything about models up to this point, we’ll construct one for a Task list. It typically contains the task title, description, and an indicator as to whether the tasks were completed or not.

class Task(models.Model):
    title = models.CharField(max_length=100)
    description = models.TextField()
    completed = models.BooleanField(default=False)

In this model:

• Task is the name of the model.

• The Task model has three fields:

  • title: A CharField that holds text, with a maximum length of 100 characters.

  • description: A TextField for longer text.

  • completed: A BooleanField that stores a True or False value, with a default of False.

The View Component

Django views are responsible for processing user requests and returning responses. They act as the bridge between the Model and the Template by collecting data from Model objects, performing logical operations on them (such as queries based on certain criteria), and then passing the data to the template for display.

Views can be written as functions or class-based, depending on the complexity and requirements of your application.

General Format of a Django View

Here is the basic structure of a View:

def <view_name>(request):
    # View Logic goes in here....
    return render(request, <template>, <context>)

Let’s break it down:

• view_name: the name of the view function.

• request: the HTTP request sent by the client to the Django server, could be triggered from form submissions or clicking a button.

• return render: used to generate the HTML response. It takes:

  • request: the request object, which contains information about the incoming request.

  • template: the template file to render.

  • context: contains variables to be made available in the template, it usually comes in the form of a dictionary.

View Example

Continuing with our Task List, this is what our view would look like:

def task_list(request):
    # Logic goes in here...
    return render(request, <template>, {'tasks': tasks})

The Template Component

Django templates are responsible for rendering the final HTML output on the browser. They define how data should be presented, by using a combination of HTML and Django’s templating language.

Django templating language involves using template tags {% %} and template variables {{ }} that allow you to enter Django mode in your HTML template. In this mode, you can access variables defined in your Views and use control structures within your template.

Templates can also be styled using CSS or any of your favorite CSS frameworks to make your user interface more presentable.

Template Example

Our template is a normal HTML file with Django’s templating language. Here is how our Task List template would look like:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task List</title>
</head>
<body>
    <h1>Task List</h1>
    <ul>
        {% for task in tasks %}
            <li>{{ task.title }} - {{ task.completed|yesno:"Done,Not Done" }}</li>
        {% empty %}
            <p>No tasks available.</p>
        {% endfor %}
    </ul>
</body>
</html>

In this template:

• The for loop iterates through each task in the tasks list (remember it was passed as context in our views).

• For each task, it outputs the task's title and its completed status (as either "Done" or "Not Done").

• If the tasks list is empty, the {% empty %} block displays a fallback message saying "No tasks available."

Diagram Showing the MVT WorkFlow

This diagram depicts how data flows within Django’s MVT architecture:

Real-World Analogy of MVT

Imagine you go to a restaurant and place an order for your favorite meal. Behind the scenes, the restaurant has a recipe book that outlines how each dish should be prepared. The chef uses the recipes to prepare your meal exactly the way you ordered it. Once it's ready, the server delivers the meal to you in a presentable way.

Just as a chef follows the recipe to create the dish, the View uses the Model to gather and process data. Finally, like the server delivering the dish, the Template ensures the final output is presented in a clear and engaging format to the user.

Putting it All Together into a Project

This section will walk you through, from start to finish, how to set up the Task List we used as an example in the article. At the end, you should have a functional application with the MVT architecture in full flow.

Install Python

First, ensure you have Python installed. You can visit Python’s Official Website to download the latest Python version.

Set Up the Django Project and App

Next, install Django. You can install it using pip:

pip install django

Create a folder and open it in your favorite code editor.

Create a new Django project and app by running the following commands in your terminal, one after the other:

django-admin startproject myproject 
cd myproject
django-admin startapp myapp

Define the Model

In your myapp/models.py:

from django.db import models

class Task(models.Model):
    title = models.CharField(max_length=100)
    description = models.TextField()
    completed = models.BooleanField(default=False)

Create a Form

We need a Django form based on the Task model, so we’ll create one using the Django ModelForm.

In your myapp, create a file, name it forms.py, and insert this code:

from django import forms
from .models import Task

class TaskForm(forms.ModelForm):
    class Meta:
        model = Task
        fields = ['title', 'description', 'completed']

In this code:

• Task is imported from .models.

• class TaskForm(forms.ModelForm): This creates a new class called TaskForm, which is a subclass of forms.ModelForm.

• class Meta:: is a special class used by Django’s ModelForm to provide configuration for the form. The Meta class tells Django how to create the form by specifying the associated model and the fields to include in the form.

• model = Task: specifies the model that the form is based on. In this case, the form is based on the Task model.

• fields = ['title', 'description', 'completed']: specifies which fields from the Task model should be included in the form. This allows you to control which model fields appear in the form, and it can be customized to include only certain fields, rather than all fields in the model.

Create the View

In your myapp/views.py, insert this code:

from django.shortcuts import render,redirect
from .models import Task
from .forms import TaskForm

def task_list(request):
    tasks = Task.objects.all()    # Retrieve all tasks

    if request.method == 'POST':    # Handle form submissions
        form = TaskForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('task_list')  # Redirect to avoid duplicate submissions
    else:
        form = TaskForm()

    # Pass tasks and the form to the template
    return render(request, 'task_list.html', {'tasks': tasks, 'form': form})

In this view,

• TaskForm is imported from forms.

• The code checks if the request method is POST, indicating that the user has submitted a form.

• If the method is POST, it creates an instance of TaskForm using the submitted data (request.POST).

• The form is then validated using form.is_valid(), and if valid, the form is saved to the database.

• After saving, the user is redirected to the task list page to prevent duplicate submissions.

Define the Template

In your myapp directory, create a templates folder. Inside the templates folder, create a file and name it task_list.html. We need to add a form element that collects the user inputs and displays them in a list on the UI.

In the task_list HTML file, we have:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task List</title>
</head>
<body>
    <h1>Task List</h1>
    <ul>
        {% for task in tasks %}
            <li>{{ task.title }} - {{ task.completed|yesno:"Done,Not Done" }}</li>
        {% empty %}
            <p>No tasks available.</p>
        {% endfor %}
    </ul>

    <h2>Add a New Task</h2>
    <form method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">Add Task</button>
    </form>
</body>
</html>

In the added form code:

• We created an HTML form with the POST method for submitting data. It includes a {% csrf_token %} to protect against CSRF attacks.

• The form fields are rendered using {{ form.as_p }}, which displays each field within a <p> tag.

• Finally, a submit button labeled "Add Task" is provided, allowing the user to submit the form data.

Folder Structure

Having reached this point, it’s important to cross-check if you are configuring your app the right way. Here is how your folder/file structure should look like:

└── 📁myproject
    └── 📁myapp
        └── 📁__pycache__
        └── 📁migrations
        └── 📁templates
            └── task_list.html
        └── __init__.py
        └── admin.py
        └── apps.py
        └── forms.py
        └── models.py
        └── tests.py
        └── urls.py
        └── views.py
    └── 📁myproject
        └── 📁__pycache__
        └── __init__.py
        └── asgi.py
        └── settings.py
        └── urls.py
        └── wsgi.py
    └── db.sqlite3
    └── manage.py

Configure the Project’s URL

In your myproject/urls.py, include the URL in your myapp:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('myapp.urls')),
]

Add the App to Project Settings

Add your myapp to the list of Installed apps in your myproject/settings.py:

INSTALLED_APPS = [
    'myapp',      # added our myapp app
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

Run the Server

Apply migration and run the server by entering these commands:

python manage.py migrate

python manage.py runserver

Visit http://127.0.0.1:8000/ in your browser to test out your app.

Final Look

Here’s how our task list app looks like on the browser after adding some tasks using the form. You can make further improvements in styling the template as you wish.

Conclusion

In this article, you learned about the components in the Django’s MVT architecture, how they interact with each other, and how they make web experiences seamless. We also built a simple project to see how it works practically, and I hope you understand it better now.

If you enjoyed reading this article, you can follow me on X or connect with me on LinkedIn for more programming articles and posts.

See you on the next one!

Memes are fun and we all love them. What if I told you that you can create yours from scratch? Well, that is what I’ll be showing you in this article using HTML Canvas. No need for fancy software - just a little code and some creativity to make your own custom memes.

If you are excited about this, let’s jump straight into it!

What You’ll Need

To follow along with this tutorial, you will need:

• Basic knowledge of HTML, CSS and JavaScript.

• A text Editor (like Visual Studio Code or Sublime Text).

• A modern web browser.

Step One: Set Up your Project

Create a folder and create these three files in the folder:

• Index.html

• Style.css

• Script.js

Step Two: HTML Structure

First, let’s create the basic structure of the HTML file. Our structure would include a file upload button for images, a text input for adding captions (both at the top and bottom), buttons to generate and download the meme and a canvas for displaying the image and caption(s).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Meme Generator</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Meme Generator</h1>
  <input type="file" id="imageInput" accept="image/*">
  <div class="controls">
    <input type="text" id="topText" placeholder="Enter Top Text">
    <input type="text" id="bottomText" placeholder="Enter Bottom Text">
    <button id="generate" onclick="generateMeme()">Generate Meme</button>
    <button id="download" onclick="downloadMeme()">Download Meme</button>
  </div>
  <canvas id="memeCanvas" width="580" height="450"></canvas>

  <script src="script.js"></script>
</body>
</html>

Step Three: Styling with CSS

Next, we apply styling to the HTML elements we just created to make it more appealing and user-friendly. Here, we just apply basic CSS to center the content and add colors to both the background and buttons.

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Arial, sans-serif;
    background-color: rgb(121, 121, 170);
    color: white;
}
canvas {
    border: 2px solid #333;
    margin-top: 10px;
}
.controls {
    margin-top: 10px;
}
.controls input, .controls button {
    margin: 5px;
}
#generate{
    background-color: green;
    color: white;
    font-weight: bold;
    padding: 6px;
    border-radius: 3px;
    border: none;
    cursor: pointer;
}
#download{
    background-color: blue;
    color: white;
    font-weight: bold;
    padding: 6px;
    border-radius: 3px;
    border: none;
    cursor: pointer;
}

Here's how our webpage looks in the browser after applying the styling:

Step Four: Add JavaScript to Handle Logic

Now, let’s code the functionalities of our app using JavaScript.

Initialization

First, we need to initialize some important elements that would enable us render our image on the canvas.

const canvas = document.getElementById('memeCanvas');
const ctx = canvas.getContext('2d');
const imageInput = document.getElementById('imageInput');
let uploadedImage = null;

In this code:

• canvas: Refers to the HTML <canvas> element with the ID of memeCanvas. This is where the meme image and text will be drawn.

• ctx: While using canvas, there are methods that can be applied that enables for drawing shapes, images and texts on the canvas. We specified a Context-Type of 2d, making the canvas render in 2D context.

• imageInput: Refers to an <input> element of type file (with the ID of imageInput) that allows you upload an image.

• uploadedImage: A variable to store the uploaded images so it can be drawn on the canvas.

How to Upload Images

Next, we want to be able to choose a particular file, read it and draw the selected image file on the canvas.

Our meme generator will accept only files with a type of image.

imageInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onload = (e) => {
    const img = new Image();
    img.src = e.target.result;
    img.onload = () => {
      uploadedImage = img;
      drawImage();
    };
  };

  reader.readAsDataURL(file);
});

In this code:

• imageInput.addEventListener('change'): Adds and listens for a change event to the file input field that triggers when the user selects a file.

• event.target.files[0]: Accesses the first file the user selects.

• FileReader: Reads file data and allows it to be accessed as a URL.

• reader.onload: This function is triggered after the file is read. It does the following:

  • Creates a new Image object.

  • Sets the image’s src property to the file's data URL.

  • Waits for the image to load and then:

    • Stores the image in the uploadedImage variable.

    • Calls drawImage() to draw the image on the canvas.

How to Draw the Image and Text Caption

Here, we’ll be drawing the image, fixing the captions inputted by the user on top of the image (overlay), and styling and positioning the text captions.

function drawImage() {
  if (uploadedImage) {
    // Clear canvas and set canvas dimensions to fit the image
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(uploadedImage, 0, 0, canvas.width, canvas.height);

    // Get text values
    const topText = document.getElementById('topText').value;
    const bottomText = document.getElementById('bottomText').value;

    // Set text styles
    ctx.font = '30px Impact';
    ctx.fillStyle = 'white';
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    ctx.textAlign = 'center';

    // Draw top text
    ctx.fillText(topText, canvas.width / 2, 50);
    ctx.strokeText(topText, canvas.width / 2, 50);

    // Draw bottom text
    ctx.fillText(bottomText, canvas.width / 2, canvas.height - 20);
    ctx.strokeText(bottomText, canvas.width / 2, canvas.height - 20);
  }
}

In this code:

• ctx.clearRect(0, 0, canvas.width, canvas.height): Clears the canvas so it can be redrawn.

• ctx.drawImage(): Draws the uploaded image on the canvas and stretches it to fit the set dimensions.

• topText and bottomText: Captures the user’s input from two text fields – <input id="topText"> and <input id="bottomText">.

Text styling:

• ctx.font: Sets the font style.

• ctx.fillStyle: Sets the fill color for the text.

• ctx.strokeStyle: Sets the outline color for the text.

• ctx.lineWidth: Sets the thickness of the outline.

• ctx.textAlign: Ensures text is centered relative to the X-coordinate.

• ctx.fillText() and ctx.strokeText():

  • Draws the text at specified positions.

  • canvas.width / 2 ensures text is horizontally centered.

  • 50 and canvas.height - 20 define vertical positions for the top and bottom text.

You can customize the text styling to your liking.

How to Generate the Meme

Next, we’ll trigger the function that generates the meme by drawing user-provided text on the image.

function generateMeme() {
  drawImage();
}

The code above calls the drawImage function to ensure that the canvas is updated with the image and user-entered text.

How to Download the Meme

Finally, we want to be able to download our meme as an image into our device. Here is how we can achieve that:

function downloadMeme() {
  const link = document.createElement('a');
  link.download = 'meme.png';
  link.href = canvas.toDataURL();
  link.click();
}

In this code:

• document.createElement('a'): Creates a temporary <a> element.

• link.download = 'meme.png': Sets the file name for the downloaded meme (every meme you download will carry the name of meme.png – you can change it if you wish to).

• link.href = canvas.toDataURL(): Converts the canvas content into a Data URL.

• link.click(): Simulates a click on the link, triggering the download.

With this, we now have a fully functional meme generator.

Full JavaScript Code

const canvas = document.getElementById('memeCanvas');
const ctx = canvas.getContext('2d');
const imageInput = document.getElementById('imageInput');
let uploadedImage = null;

// Load the image onto the canvas
imageInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onload = (e) => {
    const img = new Image();
    img.src = e.target.result;
    img.onload = () => {
      uploadedImage = img;
      drawImage();
    };
  };

  reader.readAsDataURL(file);
});

// Draw image and text on canvas
function drawImage() {
  if (uploadedImage) {
    // Clear canvas and set canvas dimensions to fit the image
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(uploadedImage, 0, 0, canvas.width, canvas.height);

    // Get text values
    const topText = document.getElementById('topText').value;
    const bottomText = document.getElementById('bottomText').value;

    // Set text styles
    ctx.font = '30px Impact';
    ctx.fillStyle = 'white';
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    ctx.textAlign = 'center';

    // Draw top text
    ctx.fillText(topText, canvas.width / 2, 50);
    ctx.strokeText(topText, canvas.width / 2, 50);

    // Draw bottom text
    ctx.fillText(bottomText, canvas.width / 2, canvas.height - 20);
    ctx.strokeText(bottomText, canvas.width / 2, canvas.height - 20);
  }
}

// Generate meme by drawing text on the uploaded image
function generateMeme() {
  drawImage();
}

// Download the meme as an image
function downloadMeme() {
  const link = document.createElement('a');
  link.download = 'meme.png';
  link.href = canvas.toDataURL();
  link.click();
}

Steps on Creating your Meme on Meme Generator

• Click on the Browse button and select a particular image.

• Enter text into either of the two input types – labelled Top and Bottom Text.

• Click on Generate Meme button to create your meme.

• Click on Download Meme to download your generated meme.

This is the meme generator in full action with the steps demonstrated:

Final Results

Here are two memes created by our meme generator.

Pretty cool right?

Now, you can try it out and create your own viral meme!

For more programming articles and posts, you can follow me on X or connect with me on LinkedIn.

See you in the next one!

And sometimes, we need to make users think that something is happening when they’re waiting for a page to load so they don’t give up and leave the site.

Fast webpage loading speed is important these days because humans’ attention spans are shrinking. According to statistics on the average human attention span, the average page visit lasts less than a minute, with users often leaving web pages in just 10-20 seconds.

This means that we as developers have had to come up with strategies to keep users engaged while waiting for their requested web page content to load. And this led to the concept of the Skeleton Screen.

In this article, we’ll be looking at what skeleton screens are, how effective they are at enhancing the user experience and build a skeleton screen of our own !.

What is a Skeleton Screen?

A skeleton screen is like a sketch of a webpage that displays before the final page fully loads. It gives you a glimpse of the form and positioning of elements on your screen (like text, images, and buttons) which are represented by a placeholder.

Here is what a YouTube skeleton screen looks like:

When you visit a website that uses skeleton screens, the skeleton screen appears first while the content is being fetched. When the content finally gets fetched, it gradually replaces the skeleton screen until the screen is fully populated.

That is what brought about the name Skeleton Screen – because the bare bones akin to a skeleton appear first before being fleshed out by real content.

Skeleton screens take the appearance or form of elements they are meant to “stand in place of” – meaning oval-shaped placeholders are replaced by oval-shaped elements on full loading, and so on.

The ultimate goal of the skeletal screen is to make the waiting game less painful by giving users something to focus on. It has nothing to do with actual load time but all to do with providing a distraction so the waiting time feels shorter. It can also reassure users that content is indeed coming. Clever right?

The Psychology Behind Skeleton Screens

Here is where things get interesting. You might already be wondering what the reasoning behind such an invention was.

Based on what we’ve already discussed, you probably agree that they are all about “Perceived Performance”. It’s less about how long users have to wait and more about how long it feels like they’re waiting.

If you’ve ever been stuck in traffic, you’d know there is a difference in feeling when you’re moving forward versus sitting still. Moving traffic, even if it’s slow, is better than being stuck in a total gridlock.

The same applies to a user who’s visiting a webpage. A visible and engaging placeholder is better than being greeted with a blank screen while waiting for the final content to show.

With skeleton screens, it's like “Hey, here is the form of the page content you’re looking for, but please, exercise some patience while we get you the real thing!”

This fits perfectly into the Zeigarnik Effect, a psychological principle suggesting that we remember incomplete tasks better than completed ones. Think of it like leaving a jigsaw puzzle half-finished on your table – your brain stays engaged, eager to see the final picture.

Similarly, when users see a skeleton screen, they remain mentally hooked, anticipating the moment when the content will fully load.

Skeleton Screens vs Spinners and Progress Bars

Spinners and progress bars might seem like a viable alternative to skeleton screens, but do they have the same effect on users? The answer is – not quite.

With spinners and progress bars, the load time is somewhat undecided, and it’s a bit like watching a clock tick – the time seems to move slower, as focusing on the hands of the clock makes the duration seem longer and more frustrating.

Skeleton screens, on the other hand, add an interesting extra layer of providing a visual cue of expected content rather than just displaying an indicator (which is what spinners and progress bars do).

Interfaces that use skeleton screens make the user scan the screen thinking things like, “That rectangle must be an image or video, and these blocks look like they are for text”. They don’t leave users idle but keep their brains and eyes engaged.

Is a Skeleton Screen Just a Visual Illusion?

Yes, skeleton screens are a bit of an illusion. They don’t speed up load times – rather, they just make it feel faster.

But here’s the thing: if not done well, this trick can backfire. Users expect that once they see the skeleton screen, the real content should follow quickly. If not frustration creeps in.

Also, adding motion to skeleton screens makes the illusion effect more effective by decreasing the perceived duration time. It is not uncommon to see sliding effects (left to right) and pulse effects (fading opacity – in and out) used in skeleton screens.

Finally, for best results, skeleton screens should be neutral in color. This is important as it helps to create a smooth and subtle loading experience without distracting or overwhelming users.

How to Build a Skeleton Screen with React

Now that you know what a skeleton screen is all about, let’s build our own using React.

Step 1: Set up Your React Project

If you’re new to React and wish to follow along, click this link and follow the steps to create your React project. When you’re done, come back here and let’s continue building.

If you already have a React project you want to use, that’s great, too.

Step 2: Install react-loading-skeleton Package

Next, we’ll install a package called react-loading-skeleton that helps in creating beautiful and animated skeletons. To install this package:

• Navigate to your project on your terminal.

• If you’re using yarn, type this command yarn add react-loading-skeleton or npm install react-loading-skeleton for npm users.

Step 3: How to Handle States and Skeleton Imports

There are variables that will be changing frequently in our project, and they need to be declared. You can read my article on state management if you are not familiar with the concept.

  import { useState } from 'react';
  import Skeleton from 'react-loading-skeleton';
  import 'react-loading-skeleton/dist/skeleton.css';

  const SkeletonScreenComponent = () => {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
  }
  export default SkeletonScreenComponent;

In this code, we declared three states in our SkeletonScreenComponent which are:

• data: responsible for storing the data fetched from a fake REST API with its initial value set to an empty array.

• loading: to keep track of data loading with its initial value set to a Boolean value of true.

• error: to store any error message with initial value set to null.

We also imported the useState hook for the states together with the Skeleton component and its CSS from the react-loading-skeleton library.

Step 4: Fetch Data from the Fake API

Our little project will be fetching data from https://jsonplaceholder.typicode.com/posts, which is a free online fake REST API.

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const result = await response.json();
        setData(result);
        setLoading(false);
    } catch (err) {
      setError('Error fetching data'+ err.message);
      setLoading(false);
    } 
  };

In the code block above:

• The useEffect hook is responsible for handling side effects. It’s perfect for data fetching purposes, and has its dependency array set to empty (makes it render on mount).

• fetchData is an asynchronous function that fetches data from the URL, updates the data state, sets loading state to false when done, catches any errors, and updates the error state.

Step 5: Conditional Rendering

The whole idea of this project revolves around the loading state. The component renders different content based on the loading state.

If loading is true:

• An Array is created where each element is a Skeleton component.

• The Skeleton count is set to 2, for the post title and body. You can set the count according to the number of placeholders you want to display.

If data loading is successful:

• It maps through the data array.

• It renders each post’s title and body.

If there is an error, an error message is displayed.

   if (loading) {
    return (
      <div>
        {Array.from({ length: 15 },(_, index) => (
          <div key={index} style={{  marginTop: '30px'  }}>
            <Skeleton count={2} style={{marginBottom:"5px"}} />
          </div>
        ))}
      </div>
    );
  }

  if (error) {
    return <div>{error}</div>;
  }
  return (
    <div>
      {data.map(({id, title, body}) => (
        <div key={id} style={{ marginBottom: '20px' }}>
          <h3>{title}</h3>
          <p>{body}</p>
        </div>
      ))}
    </div>
  );

Final Result

This is what our Skeleton screen looks like:

Conclusion

Skeleton screens are great at creating the illusion of progress and making users feel like the site is loading faster. But they don’t fix slow-loading pages on their own. The trick is combining skeleton screens with performance-enhancing techniques such as lazy loading, image compression, and server-side rendering.

Balancing the actual speed and the user’s perception of it is vital in web performance. Skeleton screens are just one tool in your UX toolbox – but when used correctly, they can help create a web experience that feels fast, reliable, and most importantly engaging. And in the world of web development, where perception is reality, that’s half the battle won.

For more front-end related posts and articles, you can follow me on LinkedIn and X.

See you on the next one!

In recent times, there has been a steady rise in styling tools that you can use to elevate the visual appeal of your websites. Such tools include CSS frameworks, animation libraries, icon libraries, and typography libraries. These tools offer customization flexibility, responsiveness, and consistency.

One awesome thing about these styling tools is that they bundle stylistic effects in a file which you can access via a Content Delivery Network (CDN).

In this article, we’ll be looking extensively at CDNs, how they work, their different hosting methods, the differences between them, their pros and cons, and the best use-cases of the methods for your project.

Let's dive straight into it!

What we’ll cover:

1. What is a CDN?

   • How does a CDN work?

   • Real-world analogy to explain CDNs

2. Why are CDNs Important?

3. Different Ways to Use a CDN

   • Remote Hosted CDN

   • Locally Hosted CDN

   • Hybrid Hosted CDN

4. Conclusion

What is a CDN?

A CDN, or Content Delivery Network, is a system of distributed servers that delivers web content (like images, stylesheets, scripts and other resources) to users, reliably and efficiently.

How does a CDN work?

A CDN’s primary function is to cache and serve both static and dynamic web content to users. It achieves this by using the following:

• Origin Server: This is the main server where all content is originally hosted.

• Edge Servers: These are servers distributed in different geographical locations to serve web content to users closer to them.

• Caching: This is a way of storing content on edge servers to reduce repeated requests to the origin server.

• DNS Routing: This is the mechanism that reroutes users to the nearest edge servers based on their location.

This is what happens when a user clicks on a CDN link:

• If trying to access the resource for the first time, the request hits the origin server.

• The origin server sends the resource to the user as a response and also sends a copy to the edge server located geographically closest to the user.

• The edge server caches the copy.

• When the user wants to access the resources again, the edge server (not the origin server) sends over the cached copy.

Real-World Analogy to Explain CDNs

To further explain how the CDN works, I’ll give an analogy to make it clearer. Imagine having an account with a bank that has its headquarters in New York (origin server).

You don’t expect customers who live far away from New York to be scampering to the headquarters any time they encounter issues. Instead, the bank provides branches (edge servers) in different locations to cater to the needs of their customers. Customers can easily walk into any branch nearest to them and get their issues or transactions sorted.

The branches have every customer's account information and transaction logs (cached data). Every branch of that bank delivers the same services and can satisfy their customers regardless of their distance from the headquarters.

The distribution of branches in different locations helps reduce the traffic that would have caused delays if the bank had just the headquarters as the only option. On contacting the bank's customer service on an issue, you would most likely be redirected to the nearest bank branch to you (DNS Routing)!

Why are CDNs Important?

There are many reasons why CDNs many websites use CDNs these days. Some of the key benefits are:

1. Improved Website Performance: CDNs can compress files and optimize images automatically, which helps speed up load time.

2. Efficient Resource Storage: With CDNs, styling resources are stored and managed properly. Resources are also stored in files matching their content types.

3. Better Search Engine Optimization (SEO): Using CDNs directly speeds up load time which in turn impacts search engine rankings. Google considers site speed a key metric that allows web pages to show up higher in search engines.

4. Better User Experience: Users prefer faster and more responsive websites to slow and unresponsive ones. With a better user experience, a website is sure to receive more engagement and lower bounce rates.

Different Ways to Use a CDN

There are three ways you can access CDN resources in your project:

• Remote Hosting

• Local Hosting

• Hybrid Hosting

Remote Hosted CDN

Remote CDN links allow developers to access styling resources from a third-party server by simply linking to the CDN in their HTML files via the link or script tag.

Bootstrap, for example, has two primary CDN links – one for CSS stylesheet and another for JavaScript (handles dynamic interaction like dropdowns, pop-overs, and so on).

To use a Bootstrap stylesheet in your project, you need to add this single line - https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css

And for the JavaScript: https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js

How to find remote CDN links

The best way to identify thte remote CDN links of your desired styling tool is to visit their official documentation site and look for the direct links there.

Advantages of a remote CDN:

1. Easy to Use: You don’t need to download, manage, or upload files with CDN links. All you need to do is insert a single line of code in your HTML file and you are good to go.

2. Global Caching: whenever you visit a website that uses CDN links, it downloads the resources on loading the page and then saves it in your browser cache. On subsequent visits to the same website or other sites that use the same CDN, it fetches from the cache and displays these resources more quickly. This is one of the biggest advantages of using CDN links, as it improves website load time.

3. Optimized Global Delivery: CDNs are built to deliver content to users around the world by serving files from edge servers closest to users. This helps reduce the time it takes data to transfer across a network, also known as latency, and boosts performance for international users.

4. Reduced Server Load: Due to the CDN fetching data from an external source, the load on your server is reduced, which is helpful for high-traffic websites.

5. Real-Time Updates: Companies that own CDN links carry out periodic bug fixing, security patching, and feature updates, which can be beneficial for your project. These updates are reflected as soon as they are released.

Disadvantages of a remote CDN:

1. Customization Limitations: Styling components in remote CDNs are standard and unmodified. To modify them, you would have to override the specific styles in your local file which can introduce complexities.

2. No Control over Updates: When automatic updates are made, they can cause problems in your web applications. If the changes being introduced include drastic changes, it can affect your website’s layout or behavior in a big way.

3. Dependency on Third-Party Availability: If the CDN service experiences hitches like downtime or slowness, it can lead to broken styles thus, affecting your site’s performance negatively.

4. Privacy and Security Concerns: Links referencing an external source can pose serious security concerns, as they can be used to track users and get vital information. It is important to include only trusted CDN link sources in your web project to avoid breaches.

Locally Hosted CDN

These are CDN resources downloaded from a remote CDN and saved within your project folder or hosted on a local server. This approach allows you to have full control over the resources.

How to host CDN resources locally:

Hosting locally is straightforward and easy. All you have to do is:

• Access the resource by navigating to the CDN link URL (for example, https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css).

• Copy the code found in the URL.

• Create a file with the appropriate file extension (.css, .js) within your project folder.

• Paste and save.

• Reference the file in your HTML document.

If you follow these steps, you should be able to localize the CDN resource and access its styling locally.

Advantages of a locally hosted CDN:

1. Full Control over Files: With resources resident within your project folder/server, you’re in full control of your files as there will be no unexpected outages, changes, or updates that might break your site.

2. Offline Availability: Local hosting ensures that your styling resources are always available, especially for users with little or no network. This is perfect for building Progressive Web Applications (PWAs).

3. Customization: There’s be no need for overrides, as your styling can be modified from within your project files.

4. Security: By localizing CDN resources, you reduce the risk of potential third-party attacks on your project to the barest minimum.

Disadvantages of a locally hosted CDN:

1. No Global Caching: There is no benefit of global caching when resources are hosted locally. This will result in slower load time for first-time visitors.

2. Increased Server Load: With files residing locally, the load on the server increases especially as traffic increases. This approach puts a burden on the server and its capacity has to be considered.

3. Manual Updates: While hosting locally gives you control over updates, you’ll need to manually track and apply updates to your stylesheets when necessary. Also, missing security updates could make your site vulnerable.

4. Regional Performance Impact: If your server is located in a specific region, users from faraway places may encounter slower load times because the content has to travel greater distances.

Hybrid Hosted CDN

This approach involves the combination of using both the remote link and local hosting of CDN resources. A hybrid approach – which involves using remote CDNs for core libraries and local hosting for custom stylesheets – may strike the perfect balance between performance and control.

Best Approach to Use

The decision between remote and local hosting of of your CDN styling resources depends on factors such as project performance needs, user base, and security. Your choice should depend on the suitability of the approach to your project and should elevate the performance levels.

Best use-cases for a remote CDN:

1. Global User Base: If your website is to be accessed by a large, globally distributed audience, using the remote option would work best due to its performance and caching advantage.

2. Fast Integration: In a situation where you want to develop and deploy a project in the shortest period of time, using the remote CDN link is quick and easy.

3. Low-Traffic Website: Small projects such as portfolio sites and blogs are better served using a remote CDN link so as not to put a strain on the server. It also leads to easier implementation.

Best use-cases for a locally hosted CDN:

1. High Security Needs: For applications that require tight security due to the sensitivity of their operations, hosting the CDN resources locally will reduce third-party risks and vulnerabilities.

2. Offline Applications: For web applications that work offline, localizing styling resources would be the best option.

3. Customization Requirements: If you need to create your tailored styling versions, hosting them locally is the best option.

Conclusion

In this guide, you’ve learned what a CDN is, how you can host your CDN, and some of the benefits, drawbacks, and best use-cases for each approach.

Remote CDNs provide speed, convenience and reduced server load, while local hosting offers greater control, security, and customization options.

Ultimately, the best approach depends on your specific use case, audience, and priorities.

You can connect with me on LinkedIn or X for more frontend-related posts and articles.

See you on the next one!

When starting a project, every front-end developer faces the dilemma of whether to design the interface first or implement the logical part of the application first. The design entails the visual elements displayed on the web application, while the logic refers to the underlying functionalities within the application that dictate its behavior and interaction with users.

In this article, we'll examine both approaches (including their merits and demerits), their best use cases, and how combining them can help achieve set project goals.

Design-first Approach

The design-first approach prioritizes the user interface and user experience aspects of the application. Here, the development process begins with crafting the visual parts such as the navigation, fonts, images, icons, text and background colors, buttons, cards, forms, pop-ups, and so on.

The user experience is also paramount in this approach considering the ease-of-use and accessibility of the application. The main concern of the developer using this approach is how the interface looks to the users. It involves an extensive design of how the elements are laid out and positioned, suitable color scheming and adherence to user interface design principles.

Advantages of the Design-first Approach

Adopting the approach of giving utmost attention to the appearance at the early stage of an application’s development can be beneficial in many aspects:

• Clear Visual Reference: Developers can use the initial design as a visual guide for the final product. This ensures there is less ambiguity about how a product looks for team members, especially designers and stakeholders.

• User-Centric Development: It is a fundamental principle in software development to prioritize users' needs. With a design-first approach, the end user’s experience is at the forefront while starting. Employing this method, it is easier for the developer to tailor the product to be more polished and user-friendly.

• Early Feedback: Feedback is necessary while developing software as it gives room for testing and iterative improvements in the design. Allows for adjustments to be done before investing time in complex logic implementation.

Disadvantages of the Design-first approach

There are potential challenges associated with the design-first approach such as:

• Potential Rework: In some scenarios, a significant rework might be needed if the design does not align with technical capabilities. With the logic coming after the design, developers would most likely adjust designs or overhaul an entire section.

• Delayed Functionality: With priorities assigned to design, the core functionalities meant to be integrated into the software may be delayed and lead to a visually pleasing but ‘empty’ application.

• Over-emphasis on Aesthetics: Imagine your dream car with its glamorous bodywork but without an engine to make it function and serve its purpose of being a means of transportation. The same goes for building software with the design-first approach. There is a risk of placing more importance on looks over functionality.

Best Use-Case Scenarios for the Design-first Approach

Having understood what the design-first approach entails, there are scenarios or projects to which this approach is best suited:

• Building Consumer-facing Products: Customer-facing products are software for the general public rather than business. More emphasis is placed on design and ease of use because they are intended for a broad audience. Factors such as aesthetics, user experience and engagement are pivotal in building these types of applications. Failure to deliver a visually appealing and intuitive interface can make or break the product’s success. Examples of customer-facing products are social media platforms, e-commerce apps, data visualization projects, and so on.

• Building Brand-Oriented Projects: A company’s brand identity encapsulates its values, mission, message and visual elements. As a developer building an application for a company, the brand identity should be intertwined with the aesthetics or user experience. The design-first approach is necessary in such cases as it ensures that every aspect of the product is a true reflection of the brand, aligning perfectly with its identity.

• Building content-heavy websites and landing pages: Websites such as news sites or blogs focus on content layout and content readability which makes design-first perfect for such projects. Landing pages and portfolio sites should also employ this approach as visual impact is paramount.

• Prototyping: In the early stages of product development, a design-first approach can be employed to develop a prototype or Minimum Viable Product (MVP). Prototypes and MVPs are used to test key concepts, impress investors/stakeholders and garner useful user feedback.

Logic-first Approach

The logic-first approach focuses on the core functionalities, data structure, data flow and architecture before the design aspects. In this method, developers are concerned about the intricacies that involves organizing, updating, retrieving and storing data as regards front-end. Underlying functionalities are extensively worked on before attaching to user interface elements for user interaction, which gives desired results.

Advantages of the Logic-first Approach

Starting an application’s development by focusing on the logical aspects can yield good results such as:

• Strong Architectural Foundation: By establishing the core logic early, a strong base for the application is formed. This approach aids complex business logic handling and data processing ensuring the application’s base is solid, scalable and maintainable.

• Performance Optimization: The logic-first approach focuses on the systematic fine-tuning of processes such as handling the amount of HTTP requests, API calls, error handling, memory leak prevention, amount of rendering, caching, and so on. With design elements not in the way of the logically-inclined developer, there are no constraints during development.

• Early Problem Detection: By addressing logic first, the identification of technical challenges that may arise later during the application development process is detected earlier. This gives room for necessary adjustments to be done and reduces the risk of a significant rework later.

Disadvantages of the Logic-first Approach

While the approach has its merits, it also comes with certain drawbacks that developers should consider. Below, we explore some of the key disadvantages associated with this method.

• Design Compromise: With logic-first, the design may become a ‘second thought’, leading to an application that is functional but devoid of aesthetic appeal. This might put off users at first interaction because the allure of good user interfaces matters a lot.

• User Experience Neglect: The sole aim of user experience is to satisfy users. An application’s UI might look appealing but fail to create a seamless, efficient and enjoyable impression on the user. Adopting a logic-first approach relegates the user experience to the background and hampers the enjoyability of the app.

Best Use-Case Scenarios for the Logic-first Approach

Projects that suit this approach emphasize performance, data processing and complex logic. This approach works well with:

• Enterprise Applications: These are large software built for the corporate world which makes data integrity, security and performance crucial in its development. Starting with logic ensures the application can meet these requirements before designing.

• API-Centric Platforms: With the rise of Application Programming Interface (API) in the technology landscape, it is common to see applications heavily relying on APIs. By extensively consolidating the data flow and logic involved, developers can ensure smooth interactions between the front-end and back-end in the application development process.

• Performance-Critical Applications: The logic-first approach favors building applications where efficiency and speed are critical. Examples of such applications are real-time data processing tools and financial platforms.

Hybrid Approach

This approach combines the design-first and logic-first approaches used in front-end development. The hybrid approach aims to leverage the strengths of both approaches while lessening their weaknesses.

Key Components of the Hybrid Approach

Certain practices embody the hybrid approach which can be applied in various software development scenarios:

• Parallel Development: It involves the design and logic teams collaborating concurrently instead of following a sequential process. This offers benefits such as improved efficiency, continuous feedback and swift problem-solving.

• Low-Fidelity Prototyping: Involves creating basic, simplified versions of a product that emphasize key design concepts and core functionalities without showing the detailed final product. It helps in early validation, iterative improvement and risk mitigation.

• Component-Based Development: Involves building reusable components that typically consist of both design and logic. The advantages of using components in developing applications are re-usability, consistency and easy maintenance.

• Agile Methodologies: Using iterative development cycles to alternate between design and logic-focused approaches. It allows for flexibility, room for continuous improvements and balanced focus.

Advantages of the Hybrid Approach

Sharing the focus between the two approaches comes with benefits such as:

• Concurrent Progress: Working on design and logic together ensures that neither aspect is neglected during the development process. This leads to a product that is both visually appealing and functional.

• Improved Communication: Combining both approaches leads to better collaborations between designers and developers. This ensures designs are feasible and logical aspects seemingly easier to incorporate.

• Flexibility: Rather than waiting for an aspect to be done and reworked later, the hybrid method allows both to develop together and adjustments made in real time.

Conclusion

The choice between design-first and logic-first approaches depends on individual preference, team capacity, project type, target market or technical requirements.

Developers with a good understanding of each approach’s strengths and weaknesses can make informed decisions that align with their project goals and objectives.

The hybrid approach can be employed to balance out the inadequacies of both of the one-sided approaches. The hybrid approach offers the best of both worlds in the process of crafting both a visually appealing and functionally sound product.

Ultimately, it's up to each individual or team to select the approach that will lead to the best possible product outcome.

If you enjoyed reading this article, you could Buy Me a Coffee.

You can also connect with me on LinkedIn for more insightful posts and articles.

See you in the next one!

CSR enables navigation between pages without having to send navigation requests to the server. Instead, it provides instant content updates on navigation. It does this by manipulating the history stack of the browser without making any request for a document to the server.

The benefits of using CSR in building single page applications are:

• It improves user experience as it allows for smoother transitions between pages, resulting in faster interactions.

• It increases an application's performance, because loading resources such as JavaScript, CSS, and images is done only once and is then re-used.

• It reduces multiple page requests handled by the server, resulting in lower bandwidth usage and quicker response time.

React, the most popular library for building dynamic and complex user interfaces, enables CSR through React Router. React Router is a third-party library that manages navigation and routing in React applications. Big companies such as Shopify, Spotify, Mozilla, and Gumroad (to name just a few) use React Router on their websites.

In this article, we will be taking a deep dive into the types of routing employed in React web applications: Relative and Dynamic routing.

By the end of this article, you will have good knowledge of these routing methods, and you'll be able to differentiate between them. You'll also be able to identify their best use cases and even combine them to achieve desired routing results in your React application.

Pre-Requisite

To fully grasp what we'll discuss in this article, you should have a basic knowledge of React Routing.

If you need to review, you can read my article on React Router. If you're ready, then let's jump straight into it!

Relative Routing

Relative routing is a way of defining routes in reference to their parent routes. It enables navigation to different paths or routes within an application based on the current location rather than a specified point which is usually the root of the application.

Relative routing works with relative paths which specify the location of a component in relation to the parent route. We can also say that relative paths are context-sensitive.

Here is a simple example of relative routing using relative paths:

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="about" element={<About />} />
</Routes>;

• The root route path / renders the Home component.

• The <Route path="about" element={<About />} /> is a relative route that defines the relative path of about. It is relative because it considers the root path / as its parent.

In a nested relative route structure, it works in the same way and still appends to its parent route.

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="about" element={<About />} />
  <Route path="dashboard" element={<Dashboard />}>
    <Route path="profile" element={<Profile />} />
  </Route>
</Routes>;

• The Dashboard route defining the path dashboard still remains a relative route.

• The Profile route defining the path profile is nested within the dashboard route which makes it relative to the dashboard path. The full path for Profile will now read /dashboard/profile.

Absolute Routing

Absolute routing is similar to relative routing but with a slight difference. Absolute paths in an application can be distinctly differentiated by the leading slash (/). The leading slash prefixes the path name and indicates that the path is considered from the root level of the application.

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>;

• The about is an absolute route, defining an absolute about path and directly referencing the root of the application.

In an absolute nested route structure, it appears like this:

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/dashboard" element={<Dashboard />}>
    <Route path="/dashboard/profile" element={<Profile />} />
  </Route>
</Routes>;

• The nested profile route defines the path /dashboard/profile as an absolute path and renders the Profile component when the URL matches /dashboard/profile.

Differences between Relative and Absolute Routing

1. Flexibility: Relative routing is more flexible for nested route structures as relative paths adapt to changes to parent routes automatically. For absolute routing, changes made to parent routes will require an update to all child routes.

2. Structure: Relative routes are simpler to manage even in a nested route structure, as child routes append to their parent's route by default. Absolute routing, on the other hand, can become difficult to manage in a complex nested route structure because each path must be explicitly specified.

3. Clarity: In a nested route structure, it can be tricky to understand the hierarchical structure in relative routing. It is much easier in absolute routing, as the paths are clear, concise, and direct for non-nested routes.

Dynamic Routing

Applications typically use data, which could be data for users or products and user input. The data can be unique, and it can also change at any point in time, making it dynamic.

Dynamic routing defines routes that can change based on certain parameters using route parameters or URL segments. The parameters added to the route path allow the application to handle routes dynamically and render different elements based on the URL, as you can see in the example below:

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/dashboard" element={<Dashboard />}>
    <Route path="profile/:id" element={<Profile />} />
  </Route>
</Routes>;

• The Profile route with a dynamic segment :id matching profile/:id. Possible matches for this dynamic path can be profile/123 or profile/abc123.

The example above shows relative routing with dynamic routing. We can also use absolute routing with dynamic routing:

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/dashboard" element={<Dashboard />}>
    <Route path="/dashboard/profile/:id" element={<Profile />} />
  </Route>
</Routes>;

Differences between Static and Dynamic Routing

1. Flexibility: The ability to define a route path according to a parameter makes dynamic routes flexible and responsive to user interaction. Static routes are fixed and do not change.

2. Complexity: Dynamic routes often involve dynamic segments like parameters and conditional logic which can be difficult to understand. Static routes are straightforward and non-complex.

3. Use Case: Dynamic routes are used for pages that depend on user input or data. Static routes are used for pages that do not change.

How to Combine Relative and Dynamic Routing

If you want to create a more complex or robust navigation system that includes hierarchical and nested route structures, it's best to combine both relative and dynamic routing.

The combination of both routing methods looks like this:

<Routes>
  <Route>
    <Route path="/categories" element={<Categories />}>
      <Route path=":categoryId" element={<CategoryDetails />}>
        <Route path="product/:productId" element={<ProductDetails />} />
      </Route>
    </Route>
  </Route>
</Routes>;

• This example shows a deeply nested route structure with both relative and dynamic routes.

• The full matching path will be /categories/:categoryId/product/:productId.

Benefits of Combining Relative and Dynamic Routing

1. Flexibility: A combination of relative and dynamic routing is best in building a robust navigation structure. This is because it has the flexibility and versatility to define certain routes relatively and other dynamically created routes based on data or user inputs.

2. Enhanced User Experience: The combined routing methods will provide users with the best of both methods during interaction leaving them satisfied.

Conclusion

In this article, we discussed routing in React web applications and learned about the routing methods used in React Router: relative and dynamic routing. They both play crucial roles in client side routing within React applications, and offer different advantages depending on use cases.

Understanding and implementing these routing methods can elevate the user experience and make your React application both maintainable and scalable.

If you enjoyed reading this article, you could Buy Me a Coffee.

You can also connect with me on LinkedIn for more insightful posts and articles.

See you on the next one!

Traditional web apps require full-page reloads for almost every click the user makes. SPAs, on the other hand, load a single HTML page and update the page contents dynamically as users interact with the application. This dynamism mimics the feel of desktop applications and results in better responsive interactions.

Before moving any further:

To follow along with what I'll discuss in this article, you should have some basic knowledge of React and how to set up a React project. If you already do, let's crack on.

What are React Router and React Router DOM?

React router is a powerful library that manages navigation and routing in React applications. The React Router DOM is used specifically for web applications and has few DOM-specific APIs.

As we dive into the world of React Router DOM, we'll explore its core concepts while demonstrating their implementation in a React application. Our focus will be on building a simple navigation system with links to different components, illustrating how to configure routes, handle route matching, and implement navigation.

By the end of this article, you'll have a solid understanding of how to use React Router DOM to create dynamic and seamless navigation experiences in your single-page applications.

How to Install React Router

As I explained above, React-router-DOM is used exclusively for integrating routing functionalities into web applications. So, in order to use it in your React app, you need to install the react-router-dom package by running this command in your React app terminal:

npm install react-router-dom

After successfully installing it, you can now start routing in your React project.

Core Concepts in React Router DOM

BrowserRouter

BrowserRouter a parent component that houses all the route components. All routes that you use in an application must be declared within the BrowserRouter. Most importantly, it stores the current location in the browser's address bar using URLs which comes in handy during navigation.

To use the BrowserRouter, you'll need to import it from the react-router-dom in your App.jsx file.

import { BrowserRouter } from "react-router-dom";

function App() {

  return (
    <BrowserRouter>

    </BrowserRouter>
  );
}

export default App;

The BrowserRouter has a basename attribute used to set base URL for all routes in an application. It's important if your app is hosted in a subdirectory on a domain.

<BrowserRouter basename="/shop">

</BrowserRouter>

Adding /shop as a basename will make sure that all route paths are relative to /shop.

Routes

This component is a direct replacement for switch which was used in the former versions of React Router. It also acts like a parent and renders the first matching child route, which ensures that the correct component is displayed based on the current URL.

To declare routes, import routes from react-router-dom and position it within the BrowserRouter component.

import { BrowserRouter, routes } from "react-router-dom";

function App() {

  return (
    <BrowserRouter>
        <Routes>

        </Routes>
    </BrowserRouter>
  );
}

export default App;

Route

Route a child component that consists of two attributes: path and element. A path can be any specified path name while the element attribute is the component that should be rendered. A route renders a specific component when the path specified matches a URL.

An application can have as many routes as it needs, and they must all be declared inside the Routes component. Assuming we have a <Home\> and <Pricing\> component, we will have to import the Route component and position it within the Routes.

import { BrowserRouter, Routes, Route } from "react-router-dom";

//ALL COMPONENTS IMPORTS COMES HERE

function App() {

  return (
    <BrowserRouter>
        <Routes>
            <Route path="/" element={<Home/>}/>
                <Route path="pricing" element={<Pricing/>}/>
        </Routes>
    </BrowserRouter>
  );
}

export default App;

Undeclared Routes

There is a way to handle routes that do not exist in your application, just like an Error 404 page. To do this, create another component bearing a Not Found message and the route added.

Set the path name to * and pass the component as the element.

import { BrowserRouter, Routes, Route } from "react-router-dom";

//ALL COMPONENTS IMPORTS COMES HERE

function App() {

  return (
    <BrowserRouter>
        <Routes>
            <Route path="/" element={<Home/>}/>
                <Route path="pricing" element={<Pricing/>}/>
                <Route path="*" element={<PageNotFound/>}/>
        </Routes>
    </BrowserRouter>
  );
}

export default App;

Nested Routes

In some cases, routes can have children or sub-routes.

import { BrowserRouter, Routes, Route } from "react-router-dom";

//ALL COMPONENTS IMPORTS COMES HERE

function App() {

  return (
    <BrowserRouter>
        <Routes>
            <Route path="/" element={<Home/>}/>
                <Route path="pricing" element={<Pricing/>}/>
                <Route path="categories" element={<Categories/>}>
                    <Route path="male" element={<Male/>}/>
                        <Route path="female" element={<Female/>}/>
                </Route>
                <Route path="*" element={<PageNotFound/>}/>
        </Routes>
    </BrowserRouter>
  );
}

export default App;

On navigating to the nested elements, the URL on the browser will be reading something like /categories/male and /categories/female.

Link

This acts like an anchor href attribute. It has a to attribute which specifies where the Link will take the user after a click. Usually, it is the path to a component's page that is passed to the to attribute.

Links are typically put in a Navbar component, so we will put two Links that point to the components path in our already declared Routes.

import { Link } from "react-router-dom";
export default function PageNav() {
  return (
  <>
        <Link to="/">Home</Link>
        <Link to="pricing">Pricing</Link>
  </>
  );
}

NB: If you are practicing along while reading this article, it is important to note that the PageNav component created here should be situated in your App.jsx and specifically just after the opening BrowserRouter tag before the Routes. This is to ensure the PageNav always stays at the top like a navigation menu despite routing through different components.

import { BrowserRouter, Routes, Route } from "react-router-dom";

//ALL COMPONENTS IMPORTS COMES HERE

function App() {

  return (
    <BrowserRouter>
        <PageNav/>
        <Routes>
            <Route path="/" element={<Home/>}/>
                <Route path="pricing" element={<Pricing/>}/>
                <Route path="categories" element={<Categories/>}>
                    <Route path="male" element={<Male/>}/>
                        <Route path="female" element={<Female/>}/>
                </Route>
                <Route path="*" element={<PageNotFound/>}/>
        </Routes>
    </BrowserRouter>
  );
}

export default App;

NavLink

NavLink performs the same function as Link and has a to attribute as well. But it's different as it has a class attribute. The class attributes are active, isPending, and isTransitioning. This makes it more versatile than Link and you can use it to conditionally add styles during user interactions.

import { NavLink } from "react-router-dom";
export default function PageNav() {
  return (
      <>
        <NavLink to="/">Home</NavLink>
        <NavLink to="pricing">Pricing</NavLink>
    </>
  );
  }

Outlet

Having child elements inside a parent route element means there is a layer of abstraction in rendering the child routes' UI. This is where the Outlet component comes into play. You add it to the parent route – in our example, it would be the Categories component.

import { NavLink, Outlet } from "react-router-dom";
export default function Categories() {
  return (
 <>
          <NavLink to="men">
            Men
          </NavLink>
          <NavLink to="women">
            Women
          </NavLink>
      <Outlet />
</>
  );
}

This allows for the rendering of the child routes UI in the nested route.

Image showing children nested routes in Categories route

useNavigate Hook

This hook returns a function that enables programmatic navigation between routes.

There are several ways to use the navigate function in your application. First, we need to import the useNavigate hook and initialize it as navigate.

import { useNavigate } from "react-router-dom";

export default function Homepage() {
  const navigate = useNavigate();

  return (
    <>
      <h1>This is the Homepage</h1>


    </>
  );
}

We can use navigate in the following ways in our application:

• Attaching it to a button via the onClick prop with the intended path to be navigated to, passed to the navigate function.

 <button onClick={() => navigate("/categories")}>Go to Categories</button>

• Using it with a Link component.

<Link to={navigate("/categories")}>Go to Categories</Link>

• Using a number instead of the component path in the navigate function. The number should specify the number of navigations backward in the history stack where you would like to go.

<Link to={navigate(-1)}>Go one step backwards</Link>

useParams Hook

Returns an object of the dynamic params gotten from the current URL matched by the Route's path. The parent routes pass all params to their child routes.

The example below shows an OrderPage component that will be rendered for every customer with their unique id. When the URL matches /customer/123, :id will be 123.

import { useParams } from "react-router-dom";

function App() {
  const {id} = useParams()
  return (
    <BrowserRouter>
        <Routes>
        <Route path="customer">
            <Route path=":id" element={<OrderPage/>}/>
           </Route>
        </Routes>
    </BrowserRouter>
  );
}

export default App;

Final Result

At this point, we've fully implemented React Router in our small navigation project. This is what it looks like in full flow:

For more detailed information and concepts about React router, you can visit the Official React Router documentation site.

Conclusion

In this article, we've explored the concepts and implementation of Client Side Routing (CSR) in a React web application. React Router, through its web-centric library React-Router-DOM, enables CSR, allowing apps to update the URL with a click of a link without making a server request for a new document.

This functionality enhances the user experience by providing faster navigation and a more seamless interaction within the application. By leveraging CSR, developers can build more efficient and responsive single-page applications (SPAs), ultimately improving performance and user satisfaction.

If you enjoyed reading this article, you could Buy me a Coffee.

Want to see more of these? Connect with me on LinkedIn.

See you on the next one!

Happy Coding!

If you are having a tough time understanding what the useReducer is and how it works, this article is for you. However, a good knowledge of how states works is essential to understand what will be covered in this piece. You can read about React states here: State Management In React. You can then join us on the ride to the useReducer land when you are done. If you are already familiar with states, lets go!

Before we go any further, it is important to note that the useState and useReducer hooks are similar in some ways.

How Does useReducer Compare to the useState Hook?

• They both involve a current state value, and have a function that triggers a state update and an initial state value passed as an argument.
• The useReducer is an alternative to the useState hook for managing state in functional components. The useReducer hook is better suited for managing complex state logic while useState is best for simple state changes.

When the state logic becomes too complicated or when you need to handle state changes in a more predictable and manageable way, the useReducer hook is your best bet.

What is useReducer?

A useReducer is a hook in React that allows you add a reducer to your component. It takes in the reducer function and an initialState as arguments. The useReducer also returns an array of the current state and a dispatch function.

const [state, dispatch] = useReducer(reducer, initialState);

Let's familiarize ourselves with what the parameters mean:

• state: represents the current value and is set to the initialState value during the initial render.
• dispatch: is a function that updates the state value and always triggers a re-render, just like the updater function in useState.
• reducer: is a function that houses all the logic of how the state gets updated. It takes state and action as arguments and returns the next state.
• initialState: houses the initial value and can be of any type.

Deep dive into useReducer

Having seen the parts that makes up a useReducer hook, it is time to take a closer look into how it operates.

To use useReducer in your React app, call it at the top level of your component.

import { useReducer } from "react";

We can now use the useReducer hook in our component.

export default function App() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return(
  )
 }

To see our useReducer hook in action, we will build a very simple counter app that increments by 1 when an increment button is clicked and decrements by 1 when a decrement button is clicked.

Firstly, let us take a closer look at the important reducer function. This function determines how the state gets updated and contains all the logic through which the next state will be calculated.

Basically, reducers house the logic that is usually placed inside of an event handler when using useState. This makes it easier to read and debug when you are not getting desired results. A quick look at the reducer function can save you the stress.

The reducer function is always declared outside of your component and takes in a current state and action as arguments.

function reducer(state, action) {
}

An action is an object that typically has a type property which identifies a specific action. Actions describe what happens and contains information necessary for the reducer to update the state.

Conditional statements are used to check the action types and perform a specified operation that would return a new state value. Conditional statements like if and switch can be used in reducers.

Dispatch Function

This is a function returned by the useReducer hook and is responsible for updating state to a new value. The dispatch function takes the action as its only argument.

We can place the dispatch function inside an event handler function. Remember, actions come with a type property so we have to specify when we call the dispatch function. For our counter app, we have two event handlers that increase and decrease the count.

function handleIncrement() {
    dispatch({ type: "increment" });
  }

  function handleDecrement() {
    dispatch({ type: "decrement" });
  }

Now, we'll go back to our reducer function and use the switch condition to evaluate the action.type expression.

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { ...state, count: state.count + 1 };
    case "decrement":
      return { ...state, count: state.count - 1 };
    default:
      return "Unrecognized command";
  }
}

In the above code,

• The reducer function takes both the state and action as an argument.
• We conditionally check for a specific case of the action.type expression string.
• If true, a shallow copy of the state is taken by the use of the spread operator and the count value in state is evaluated.
• A new state is returned after evaluation has been completed.
• The default serves a fallback when no matching case is found.

The entire logic of our counter app has been done. We can now return our JSX with the state of count to be displayed on the user interface and the handler functions passed to the onClick event handler for the buttons.

return (
    <>
      <h1>Count:{state.count}</h1>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </>
  );

Our counter app is set and the count state will be updated accordingly when the buttons are clicked.

What Happens Behind the Hood?

The action of clicking the button triggers a dispatch function that sends an information of type to the reducer function. The dispatching (clicking of the button) causes a re-render of the component. The reducer function conditionally matches the case with the type from the action object and updates the state accordingly after evaluation has taken place.

NOTE: At dispatch, the reducer function still holds the old value. This means that the dispatch function only updates the state variable for the next render. To check this out, we can log the state and action arguments to the console before the switch statement:

function reducer(state, action) {
  console.log(state, action);

  switch (action.type) {
    case "increment":
      return { ...state, count: state.count + 1 };
    case "decrement":
      return { ...state, count: state.count - 1 };
    default:
      return "Unrecognized command";
  }
  }

After clicking the increment button to increase the count twice, here is what is logged to the console:

state and action type logged to the console

The above image shows that, at the first click, there was an action type of increment made and the initial state value was 0. At the second click, the state value updated to 1, and was displayed as the current count state. I hope you get it now.

Enough of the code gibberish, let's look at a real-world example of the reducer function.

Real-world Reducer Example

Picture a dispatcher that works for an online shopping company going to a warehouse to get the goods/items they would later distribute to the people that ordered them.

The dispatcher identifies themself and performs an action of claiming the goods meant for dispatch to the warehouse manager. The manager goes to a box that contains orders shipped and locates the goods meant to be given to the dispatcher. The manager also logs into the inventory system and does the evaluations before handing over the goods to the dispatcher.

This scenario can also be translated as:

• The dispatcher makes a request for an update or triggers a process like the dispatch function.
• The dispatcher performs an action of 'claiming goods' like the dispatch action with a type property.
• The warehouse manager does the necessary sorting and updating just like the reducer function.
• The box that houses all the goods is updated depending on how many are cleared for dispatch. This acts like the state update.

I hope this real-world scenario makes the entire process clearer to you.

Take a look at the full code once again and digest the process.

import { useReducer } from "react";

function reducer(state, action) {
  console.log(state, action);
  switch (action.type) {
    case "increment":
      return { ...state, count: state.count + 1 };
    case "decrement":
      return { ...state, count: state.count - 1 };
    default:
      return "Unrecognized command";
  }
}
const initialState = { count: 0 };
export default function App() {
  const [state, dispatch] = useReducer(reducer, initialState);

  function handleIncrement() {
    dispatch({ type: "increment" });
  }
  function handleDecrement() {
    dispatch({ type: "decrement" });
  }
  return (
    <>
      <h1>Count:{state.count}</h1>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </>
  );
}

Benefits of Using the useReducer Hook

• Helps centralize state logic.
• Makes state transitions predictable.
• Suitable for complex state management.
• Optimizes performance.

Conclusion

We have covered what the useReducer hook is, how it compares to useState – similarities and differences, the reducer process and the benefits of using useReducer.

If you found this article helpful, you can buy me a coffee.

You can also connect with me on LinkedIn .

See you on the next one!

When faced with the need to store data in your React application, the first question that comes to mind is: "Will the data change at some point during the component's lifecycle?" If it won't, a regular const variable is well-suited.

However, if the data will change, then that is where the useState and useRef hooks comes in.

Understanding the useState and useRef Hooks

useState Hook

The useState hook is designed to manage a component's state, which represents data that can change over time and is important for the component to render. You can add state to your component by importing the useState hook from React.

import { useState } from 'react';

The useState hook is usually initialized with an initial value and returns an array of a declared state variable and its associated setter function. It looks something like this:

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0); //declared useState hook

  return (
    <>
      <h1>State example</h1>
      <div>
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
      </div>
    </>
  );
}
export default App;

In the above code,

1. The useState is initialized with a value of zero and returns a count variable and setCount setter function.
2. The count variable is set dynamically by the setCount setter function that increments the count by 1.
3. For each click of the button, the App component is re-rendered and the updated value is displayed within the button text.

Having a good understanding of React state is important as it is one of the most used concept. You can have a more in-depth read on states here: State Management in React.

useRef Hook

The useRef hook is used to create refs in React components. A ref is an object with a current property that holds a value. It basically references a DOM element or an instance of a component. We can read and update the value by accessing the current property.

const ref = useRef(initialValue)

ref.current = initialValue

Here, is a full code snippet of ref in action:

import { useRef } from "react";

function App() {
  let ref = useRef(0); 

  function handleIncrease() {
    ref.current++;
    alert(`You have clicked it ${ref.current} times`);
  }
  return (
    <>
      <h1>Ref example</h1>
      <div>
        <button onClick={handleIncrease}>Click Me</button>
      </div>
    </>
  );
}

export default App;

Let's break it down:

1. We imported useRef from React.
2. In our App component, we declared a ref object with the initial value set to zero.
3. handleIncrease is our handler function that increments the ref.current value by 1 and then alerts the user of the current value.
4. In our App component's JSX, we have a button with an onClick prop and the handleIncrease handler function passed to it.

Having understood how the two hooks work, we'll go ahead to compare and explore when they would be suitable to use.

React State vs Ref

Render Trigger

In React, states always trigger a re-render due to a mechanism known as reconciliation – which updates the user interface based on changes made to the state or props.

Under the hood, React compares the new state to the previous and computes the minimal changes needed to update the user interface that reflects the new state. This process ensures consistency with the changed state or props.

On the flip side, refs do not trigger a re-render when changes are made to it. Refs are not directly linked to the component's rendering cycle.

Therefore, if you want a consistent user interface that reacts to data changes, it is advisable to use states. Refs are better used for managing mutable values without affecting the user interface.

Mutability

React state cannot be directly changed once it has been set because the setter function updates of the state variable. By using this approach, React maintains the predictability and stability of the data flow. This also helps in making debugging easier.

Conversely, refs are mutable as you can modify the ref current value outside of the rendering process. Values can be changed at any point unlike states – refs do not have an updater function.

Read/Write Operations

The useState hook setter function allows you to update the state value. For instance:

const [state, setState] = useState(false)
function handleOpposite(){
    setState(!state)
 }

In this code, we can see that:

1. The initial value is set to a boolean value of false.
2. The handleOpposite function is negating the boolean value of the state and the setState houses the updated value of true .

In this simple operation,

1. An implicit read operation has been done as the initial value had to be accessed before the negation.
2. A write operation occurred when the negation (!) was used on the initial value, which changed the value to the opposite.

An explicit read operation of state happens when you simply access the state variable directly within a component's JSX. For instance:

<button onClick={() => setCount((count) => count + 1)}>
  count is {count}
 </button>

The {count} is the currently accessed value of the state and would be displayed on the UI accordingly.

On the other hand, accessing or modifying a ref's current value during rendering can interfere with React's reconciliation process, potentially causing inconsistencies between the virtual DOM and the actual DOM.

In order to ensure predictable behavior and optimal performance in components, it's best to adhere to React's guidelines and avoid either accessing or modifying refs during rendering.

Persisting Across Renders

Data persistence across renders in React means that data remains consistent and available between different render cycles of a component. When data is persisted, it remains unchanged and accessible after re-rendering. State and Ref both persist data across renders.

Persistence is crucial for maintaining the integrity of the application's state and ensures that components operate as expected.

Asynchronous Updates

Updates in React state are asynchronous which means that when there is a request for an update, there is a possibility that the updates will not be executed immediately. React might leave some state changes for later while updating other components in one go!

Ref updates are done synchronously where tasks are performed in a sequential manner. Each task waits for the previous one to finish before starting, ensuring that they are executed in a predictable and deterministic manner.

Conclusion

In this article, we looked extensively at the hooks — useState and useRef — that handle dynamic data (data that will change) in React applications.

We compared both hooks and at this point, you should be know their similarities, differences, when and where they are best suited.

Connect with me on LinkedIn for front-end related discussions and posts. See you on the next one!

Due to its importance in handling data, it is essential know how to manage state, when you need it, and where it can be placed in your applications’ components.

This article dives into the world of React state management, providing a comprehensive guide to help you manage state efficiently. This article is for beginners and intermediate-level of React developers that want to understand how states work.

What is State?

State can be defined as an object that houses data that changes over time in an application. In other words, state is a dynamic data storage that provides a mechanism for components to manage, keep track of changing data, and trigger re-rendering when it is updated.

Due to modularization in React, state serves as a container that encapsulates relevant data, logic, and behavior within a component.

Now that you know what state means, you can visualize an application even before building it and have an idea of what data would be stored in different states. This brings us to a point I like to call: ‘Thinking In React’.

This coined terminology can be described as the mental picture a React developer has on how to go about building an application in the ‘React way’. Applying knowledge on keeping components pure, passing props from parent to child components, one-way data flow, lifting states up, and many other integral aspects of React.

When to Use State

When building an application, data plays an integral role in what is been displayed or stored. The same applies to building web applications in React, where components display or operate on data — which can be user input, data fetched from APIs, or any other dynamic content. When there is a need to get data that has to be updated inside of a component, we use state.

To understand this better, let’s look at an example of a simple Todo List app that primarily accepts inputted items that would eventually be added to a displayed list.

The item's names will be defined via a text input before being dynamically added to an array of items.

So, we've identified two aspects involving data that would change when triggered. Any update to the data will cause the component to re-render. Those two aspects need the useState hook to update their data and perform the respective logic attached to them.

const [name, setName] = useState(" ")
const [items, setItems] = useState([]);

Above, is the representation of useState hook functions that allow components to have state variables. As regards to our example of the Todo List app, we initialized our useState function with an empty string (“ ”) for the item names and an empty array ([ ]) for the items.

The useState functions consist of a destructuring assignment that extracts values from an array or properties from an object. In this instance, we are extracting two values returned by the useState functions.

name and items hold the current value of the state variable. While setName and setItems are the functions used to update the value of the state variables.

We can add the Header, Nav, ListArea and Footer components to the App component's JSX. Our root component should look like this:

import { useState } from "react";

export default function App() {
      const [items, setItems] = useState([]);
    const [name, setName] = useState(" ")
  return (
    <div>
      <Header />
      <Nav />
      <ListArea />
      <Footer />
    </div>
  );
}

The individual components with their JSX's should look like this:

function Header() {
  return <h2>ToDo List</h2>;
}

function Nav() {
  return (
    <>
      <input type="text"/>
      <button>Add</button>
    </>
  );
}

function ListArea() {
  return (
    <>
      <ul>
        <li></li>
      </ul>
    </>
  );
}

function Footer() {
  return (
    <>
      <p>You have items in your cart</p>
    </>
  );
}

How our component's JSXs looks in the browser

This is a simple representation of our Todo List. Next, we'll add some logic and make the states come to life. For now, the states reside in the App component.

Where to Use State

When using state, it is important to note that there are two types of states in React development:

Global State

These are states that are accessible to every component in the application. It is always declared and located in the root component of your app before the JSX is returned.

A state can be considered as a global state if it is a piece of data that is accessible among multiple components thereby, aiding communication between components in the application.

Local State

Local states refers to the internal data maintained by a component. Local states are located within the parent components in an application. They are only needed and can be accessed in the component.

Using local state, components can independently change and handle their data which leads to partitioning within the application.

Looking at our declared states in the Todo List app, we can say that name is a local state and items is a global state.

The reasons are:

• Two or more components will need access to the items state.
• The name state is only needed to input item names into the items list.

Here is the structure of our Todo List application with the states positioned according to where they are needed and logic of adding item names to the items list:

import { useState } from "react";

export default function App() {

//Global state
  const [items, setItems] = useState([]);

//handler function that takes item as a parameter
  function handleAddItems(item) {

  //setter function that returns a new array with elements from current state with a new item  
    setItems((items) => [...items, item]);
  }

  return (
    <div>
      <Header />
      <Nav handleAddItems={handleAddItems} /> //passing handleAddItems as props
      <ListArea items={items} /> //passing items as props
      <Footer items={items} />    //passing items as props
    </div>
  );
}
function Header() {
  return <h2>ToDo List</h2>;
}

function Nav({ handleAddItems }) {
  //Local state function
  const [name, setName] = useState("");

  //create a handler function that is triggered by Add button
  const handleAddButtonClick = () => {
    //creating a newItem object with name and id properties
    const newItem = { name, id: Date.now() };

    //passing the newItem object into the handler function as an argument
    handleAddItems(newItem);
    // Reset the input field after adding the item
    setName("");
  };
  return (
    <>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <button onClick={handleAddButtonClick}>Add</button>
    </>
  );
}

//ListArea component recieving items as props from global state

function ListArea({ items }) {
  return (
    <>
      <ul>
      //mapping over items array to get individual item as list items
        {items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </>
  );
}

//Footer component recieving items as props from global state

function Footer({ items }) {
  return (
    <>
      {items.length !== 0 ? (
        <p>You have {items.length} items in your cart</p>
      ) : (
        <p>You can start adding items to your list</p>
      )}
    </>
  );
}

The Footer and ListArea components now have access to the items passed down through props.

The act of positioning a state in the root component so it can be accessed globally in a React application is known as "Lifting State Up"- which was what we did with the items state.

The Todo List after items have been added to the list

Here's a representation of the whole process:

Conclusion

In this article, we explored state management in React, when you need them, and where to place state in our applications’ components.

We also broke down how to ‘think in React’, to make our React components interact with each other and give the required output.

React is an interesting user interface library, but can get confusing sometimes if you don’t know the basics. You can now use the knowledge gained in this article to code your projects.