DEV Community: Greg Haris

I learnt it the hard way

Greg Haris — Tue, 02 Sep 2025 17:53:43 +0000

I have always heard the cliché,

“If you have an idea, build fast, ship an MVP, go live, and then make it better.”

It made sense to me theoretically, but I never understood the true meaning until I experienced it myself.

In January of this year, I had an idea to build a project to practice my new skills and create a portfolio. I decided to build Vitiket.com — a Nigerian tech event ticketing platform.

After doing some research and watching YouTube videos on how to build it, I started building.

When I started building it, it was the most important thing to me. I worked on it all my waking hours, as I had no other commitments and was trying to land my first tech gig. My goal was to go live with the first MVP before April 15th, and I was working hard to meet that deadline.

By April 1st, I had purchased the domain (vitiket.com) and built the core functionalities:

Authentication
Event creation and update
DB integration using MongoDB
Ticket generation with QR Code
Ticket verification

All that was left was to fine-tune the UI—the landing page, social functionalities (like, share, and save events), a user dashboard, and an event search and filter on the events page. I was on track to achieve my target of going live with the first MVP on April 15th.

Then, on April 9th, I got my first paid gig: working with a team to build a Tax Management System (TMS) for the Akwa Ibom State Internal Revenue Service. The gig quickly grew into a full-time role. Suddenly, Vitiket was no longer my priority. I told myself, “I’ll come back to it once things settle down,” as we were given a very short deadline to deliver.

Honestly, for the first few weeks of the project, I had no time to work on Vitiket. We were working on the TMS project day and night, even sleeping at the office for weeks without going home.

By early June, I was done with my core task on the project (frontend), and I had some breathing space. But by then, I had lost the drive and motivation to build Vitiket. Weeks passed, then months. My friends kept asking me:

“How far with Vitiket?”

I always had an excuse: “Work is hectic.” “I’ll pick it up this weekend.” “I’m planning on changing the UI theme.” Deep down, I was dragging my feet.

The Wake-Up Call
Then one day, a friend sent me a link: vtickets.site. He told me with excitement,

“Is this your platform. Nice. Congrats! I just registered for an event using your platform.”

I froze. Because it wasn’t mine. It was someone else’s. A real, working platform with the same idea I’d been sitting on. Even worse, they had:

Almost the same name (vitiket vs vtickets)
Almost the same UI and features
And most importantly: they were already live.

When my friend realized it wasn’t mine, he was so disappointed in me. In that moment, I learned a crucial lesson:

You are not the only one with that idea. Somehow, the universe shares ideas with other people, and it’s up to whoever ships first. I had been beaten to the market by my own procrastination.

Lesson 1: Ideas Don’t Wait

I learned the hard way that ideas are cheap—execution is what matters. While I was dragging my feet and procrastinating, someone else was building. The internet doesn’t pause for anyone. If you delay too long, someone else will launch, get users, and take the lead.

Lesson 2: Pivoting is Not Failure

At first, I was crushed. I even thought about dropping Vitiket completely. But after the frustration cooled, I realized this wasn’t the end. I decided to pivot. Last week, I started rebranding vitiket to Dachaven—a tech event and community platform. Viket.com? It's now a brand-new idea that I am so excited to start building.

Lesson 3: Action Beats Perfection

The truth is, I was waiting for the perfect UI design and kept changing and tweaking the UI. But that "perfect" design never came.

What This Means for Me Now

Momentum matters. Start small, but start now.
The market rewards speed. Shipping beats "thinking about shipping." Ship fast, ship now, and improve later.
Every experience is a lesson. I learned my lesson and will keep moving forward.
A pivot is not a loss. Sometimes, it’s the beginning of something stronger.

I’ve also realized that part of learning in public—through this blog—is about owning the failures and the pivots, not just the wins. So here I am, documenting the messy side of my journey.

Now What?

I’m now all in: Dachaven will launch as my event + community management platform. Procrastination cost me the first version of Vitiket, but it also gave me something more important: clarity and urgency.

This post was originally published on blog.gregharis.io on September 2, 2025.

Building a Professional AI Chatbot with React, TypeScript, and Groq AI API

Greg Haris — Tue, 07 Jan 2025 11:45:27 +0000

On October 28, 2024, I wrote this very comprehensive article on building Your first AI chatbot using React, TypeScript and llamma3 via Groq AI API, so I decided to make the chatbot more advanced and professional.

Here’s what’s new in this version:

Next.js: Replaced Vite with Next.js for better performance and server-side rendering.
Tailwind CSS and Radix UI: Used Tailwind CSS for styling and Radix UI for accessible, customizable components instead of just Vanilla CSS
Authentication: Integrated Auth0 for secure user authentication.
Database Management: Used Prisma as the ORM to manage interactions with a PostgreSQL database.
Syntax Highlighting: Added support for code snippets with react-syntax-highlighter.
Analytics: Integrated Vercel Analytics and Speed Insights for performance monitoring.

Prerequisites

Before you begin, ensure you have met the following requirements:

Node.js: Version 23.x or later.
pnpm: Version 9.x or later.
PostgreSQL: Ensure you have a PostgreSQL database running.

Installation

To install Greg's Chatbot, follow these steps:

1- Clone the repository:

   git clone https://github.com/yourusername/gregs-chatbot.git

2- Navigate to the project directory:

   cd gregs-chatbot

3- Install dependencies:

   pnpm install

4- Generate your free Groq API key and Auth0 credentials, then add them to your .env.local file.

Add them like so:

GROQ_API_KEY=your_groq_api_key
AUTH0_CLIENT_ID=your_auth0_client_id
AUTH0_CLIENT_SECRET=your_auth0_client_secret
AUTH0_ISSUER_BASE_URL=your_auth0_issuer_base_url
DATABASE_URL=your_postgresql_connection_string

5- Install and set up your Postgresql database.

6- Follow this Vercel guide to set up the Prisma ORM and connect it with your Postgres database

Usage

1- To start the development server, run:

   pnpm run dev

2- To build the project for production, run:

   pnpm run build

3- To start the production server, run:

   pnpm start

Scripts

dev: Starts the development server with Turbopack.
build: Builds the project for production.
start: Starts the production server.
lint: Runs ESLint to check for code quality issues.
prepare: Sets up Husky for Git hooks.
lint-staged: Runs linting on staged files.
postinstall: Generates Prisma client after installation.

Dependencies

@ai-sdk/openai: ^1.0.7
@ai-sdk/ui-utils: ^1.0.4
@auth0/nextjs-auth0: ^3.5.0
@prisma/client: ^6.0.1
next: ^15.0.4
react: ^19.0.0
react-dom: ^19.0.0
tailwindcss: ^3.4.16
prisma: ^6.0.1
eslint: ^9.16.0
prettier: ^3.4.2

Contributing

If you want to contribute to Greg's Chatbot, please open a pull request on GitHub.

Try it out

You can check out the live demo of Greg's Chatbot deployed on Vercel:

👉 Live Demo

Feel free to visit the link, authenticate using your credentials, and start interacting with the chatbot!

Source Code.

Embed Short Videos in your Dev Posts (Simple Guide)

Greg Haris — Sat, 26 Oct 2024 08:03:44 +0000

Have you ever tried to embed a video from your computer or cloud storage into a Dev post and hit a roadblock?

After spending hours experimenting with different methods while writing this post, I finally found a simple hack that works and I decided to share it with you all.

Here's a simple, five-step process to embed short videos in your Dev post:

Trim the video to 30 Seconds or Less.
Convert the video to GIF
Upload the GIF to Giphy.com
Click on share, and copy the link
Embed the GIF in your post using the <img> tag.

Allow me to walk you through the process. This will work for any video format on your local computer or cloud storage.

Let's say you have a video illustrating the project you are writing about, for example this:

Step 1: Trim the Video to 30 Seconds or Less

Videos must be 30 seconds or less. Use a video editing tool to trim or speed up your video if needed.

Step 2: Convert the Video to GIF

Use a free online converter like FreeConvert or CloudConvert to convert your video to GIF format. Download the GIF.

Step 3: Upload the GIF to Giphy

Head over to Giphy.com, create an account (if you don't have one), and log in. Click 'Upload' at the top right to upload your GIF.

Step 4: Share and Copy the Link

Once your GIF is uploaded, click 'Share' and copy the link provided.

Step 5: Embed the GIF in Your Post

Insert the GIF by pasting the copied link into your Dev post using the <img> tag: <img width="100%" style="width:100% src="your_gif_link"> (Replace "your_gif_link" with your actual link). For example:

<img width="100%" style="width:100%" src="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExOW9lZDc4ZGhkdnA1eW50cTU5NzQwcDk0OGN1ZjA4NnVlbmdjNWRyeCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/W3wi8d9p5TqP8GHELC/giphy.gif">

And there you have it! You've successfully embedded a short video in your Dev post.

Do you have any simpler methods? I'd love to hear about them. Please share in the comments.

From Grëg Häris with ❤️.

Happy coding!! ❤️

Build Your First AI Chatbot: A React and TypeScript Project with Groq Cloud API

Greg Haris — Fri, 25 Oct 2024 20:09:17 +0000

TL;DR

In this project, we will build an AI Chatbot application using React, TypeScript, and the Groq Cloud AI API.

This project is designed for beginners who want to learn React and TypeScript while building a practical application. By the end of this tutorial, you'll have a fully functional chatbot that can interact with users and save chat history using local storage.

I got stuck learning Vanilla JavaScript for weeks so I decided to jump head first into React. Then I said to myself, "Why not use TypeScript instead of Vanilla JavaScript?"

I used to see TypeScript as a big deal. I thought I would need to learn new syntax and everything. But trust me, if you have a good knowledge of JavaScript, or at least if you have taken a JavaScript course beyond the foundations, you can understand and start using TypeScript in less than two hours.

To get myself up and running in React and TypeScript, I took this one-hour course on YouTube on basic React and TypeScript. After taking the course, I decided to build a project using everything I learned.

That's how this project was born.

Enough Talking. Now let's dive right in.

Here is the finished version of the project we will be building:

Prerequisite Knowledge

Before diving into this tutorial, you should have an understanding of the following technologies:

HTML & CSS: Intermediate understanding of web development.
JavaScript: Intermediate knowledge, including ES6+ features (e.g., classes, modules, arrow functions), DOM manipulation, and asynchronous programming.
React: Basic understanding of React components, props, and state.
TypeScript: Basic understanding of TypeScript, including type annotations and interfaces.
Node.js & npm: Basic knowledge of setting up a Node.js project and using npm.

This Youtube course here is all you need to get started if you already know beyond foundations of HTML, CSS, and JavaScript. So, if you are like me and just know intermediate HTML, CSS, and JavaScript and No knowledge of React and TypeScript, and how to set up a React App with Typescript and you want to build along with me, I recommend taking the course and then comeback.

Tools & Set up

We'll be using Visual Studio Code as our code editor. Visual Studio Code is recommended for its powerful extensions, integrated terminal, and excellent support for TypeScript and React.

To create the React app, we'll use Vite, which offers faster build times and modern tooling compared to Create React App

Creating a React App

To create the react app, run npm create vite@latest on your terminal window.
On the prompt to rename it choose the name you want
When asked to choose a framework, choose React.
Finally, when asked to choose a variant, choose TypeScript.

Now run:

cd your-project-name to switch to the project, then
npm install to install all packages and dependencies, and finally
npm run dev to run your web server.

If you have gotten to this point, congratulations, you have created your React web app

Next step- Building the components:

Inside your src folder, create a components folder using mkdir components
We'll create five components to build the UI:

AppName.tsx: Displays the app name.
Headings.tsx: Displays the welcome message.
SearchBar.tsx: Contains the input field for user messages and the send button to send the button to the API.
Button.tsx: Renders buttons for sending messages and clearing chat.
Chat.tsx: Displays the chat messages.

So, inside your components folder, create these four components using:

touch AppName.tsx Headings.tsx SearchBar.tsx Button.tsx Chat.tsx

Now open these components in your text editor.

Let's start building

AppName.tsx

import { ReactNode } from 'react';

interface Props {
  children: ReactNode;
}

const AppName = ({ children }: Props) => {
  return <div className="app-name">{children}</div>;
};

export default AppName;

Headers.tsx

import { ReactNode } from 'react';

interface Props {
  children: ReactNode;
}

const Headings = ({ children }: Props) => {
  return <div>{children}</div>;
};

export default Headings;

searchBar.tsx

import { ReactNode } from 'react';

interface Props {
  children: ReactNode;
}

const SearchBar = ({ children }: Props) => {
  return <div className="searchBar">{children}</div>;
};

export default SearchBar;

Button.tsx

interface Props {
  textContent: string;
  handleClick: () => void;
  // optional logic to disable the button
  disabled?: boolean;
}

const Button = ({ textContent, handleClick, disabled }: Props) => {
  return (
    <button type="submit" onClick={handleClick} disabled={disabled}>
      {textContent}
    </button>
  );
};

export default Button;

Chat.tsx

import { ReactNode } from 'react';

interface Props {
  children: ReactNode;
}

const Chat = ({ children }: Props) => {
  return <div className="chat">{children}</div>;
};

export default Chat;

Now let's add these components to our App

App.tsx

// App.tsx
import AppName from './components/AppName';
import Chat from './components/Chat';
import Headings from './components/Headings';
import SearchBar from './components/SearchBar';
import Button from './components/Button';

const App = () => {
  const handleSearch = () => {
    alert('Search button clicked!');
  };

  return (
    <>
      <AppName>
        <div>
          <span>Grëg's </span>ChatBot
        </div>
      </AppName>
      <div>
        <Headings>
          <div>
            <h1>Hi, Welcome.</h1>
          </div>
          <div>
            <h3>How can I help you today?</h3>
          </div>
        </Headings>
      </div>
      <div className="chat-container">
       <Chat>
         <div> </div>
        </Chat>
      </div>
      <div className="searchBar-container">
        <SearchBar>
          <textarea
            className="search-input"
            placeholder="Enter your text"
          />
          <Button
            textContent="Send"
            handleClick={handleSearch}
          />
        </SearchBar>
      </div>
    </>
  );
};

export default App;

This is the result you will get:

Next step, we set the 'send' button to print the input Value in the Chat component:

// App.tsx
import AppName from './components/AppName';
import Button from './components/Button';
import Chat from './components/Chat';
import Headings from './components/Headings';
import SearchBar from './components/SearchBar';
import { useState } from 'react';

const App = () => {
  // State to manage the input value
  const [inputValue, setInputValue] = useState('');
  // State to manage chat messages
  const [chatMessages, setChatMessages] = useState<string[]>([]);

  // Function to handle input change
  const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    setInputValue(event.target.value);
  };

  // Function to handle button click
  const handleSend = () => {
    if (inputValue.trim() === '') return;
    // Add the input value to the chat messages
    setChatMessages([...chatMessages, inputValue]);
    // Clear the input field
    setInputValue('');
  };

  return (
    <>
      <AppName>
        <div>
          <span>Grëg's </span>ChatBot
        </div>
      </AppName>
      <div>
        <Headings>
          <div>
            <h1>Hi, Welcome.</h1>
          </div>
          <div>
            <h3>How can I help you today?</h3>
          </div>
        </Headings>
      </div>
      <div className="chat-container">
       <Chat>
        {/* Render chat messages */}
        {chatMessages.map((message, index) => (
          <div key={index} className="chat-message">
            {message}
          </div>
        ))}
        </Chat>
      </div>
      <div className="searchBar-container">
        <SearchBar>
          <textarea
            className="search-input"
            placeholder="Enter your text"
            value={inputValue}
            onChange={handleInputChange}
          />
          <Button textContent="Send" handleClick={handleSend} />
        </SearchBar>
      </div>
    </>
  );
};

export default App;

Result:

Break down of what we did:

1- State Management:

We used the useState hook to manage the state of our application. This hook allows us to create and update state variables in functional components.
inputValue: Stores the current value of the textarea.
chatMessages: Stores an array of chat messages.

2- Input Change Handler:

handleInputChange: Updates the 'inputValue' state whenever the textarea value changes.

3- Button Click Handler:

handleSend: Adds the current 'inputValue' to the 'chatMessages' array and clears the textarea.

4- Render Logic:

The chat messages are rendered by mapping over the 'chatMessages' array and displaying each message in a div.

You Catch? Any Questions? Please drop it in the comments.

Moving on!!!

Now we get to the most exciting part of the project. Can you guess the next step?

Yes!! You are correct guys. Next step is to grap our 'Groq Cloud' API Key and then connect the API to our app.

Are you Ready Guys?

What is Groq Cloud?

Groq Cloud API is a cloud-based service that provides access to Groq's powerful AI hardware and software. This allows developers to offload complex AI computations to Groq's infrastructure, which is optimized for high-performance AI workloads. By integrating Groq Cloud API into their applications, developers can perform tasks such as:

Model inference: Running AI models for tasks like image recognition and natural language processing.
Data processing: Performing complex data transformations and analysis.
Real-time predictions: Generating real-time predictions based on input data.

Groq Cloud API is designed to be scalable and secure, ensuring that developers can handle varying workloads and protect their data. The API is also user-friendly, with comprehensive documentation and SDKs available for popular programming languages.

To learn more, check out their website and Groq Cloud API documentation.

Why Use Groq API For This Project?

When I wanted to build this, I planned on using OpenAI's GPT4 API but it wasn't free. So I needed a free option. And I got Groq API.

Before this, I have neither heard of 'Groq cloud' nor 'Groq API' until I researched on free LLM API's to build with.

Therefore, I used it because IT'S FREE... And, it's ease of use.

Let's get back to business.

Next, let's grab your Groq API key.

Head over to the Groq Console: https://console.groq.com/ , sign up, read the docs (if you wish), and create your API Key.

If you have done that, now let's integrate that into our APP

Step 1: Install the Groq SDK

First, you need to install the Groq SDK if you haven't already. You can do this using npm or yarn:

npm install --save groq-sdk

Step 2: Step 2: Set Up Environment Variables

Since we initiated our project using Vite, create a .env file in the root folder of your project. Then Add your Api key in the file like so:

VITE_REACT_APP_GROQ_API_KEY=<your-api-key-here>

Easy pizzy... Yes?

Step 3: Initialize the Groq Client

Initialize the Groq client with your API key in your App.tsx file:

import Groq from 'groq-sdk';

const groq = new Groq({
  apiKey: import.meta.env.VITE_REACT_APP_GROQ_API_KEY,
  dangerouslyAllowBrowser: true,
});

DANGER! DANGER! DANGER!!!!:
From the Groq API official documentation, the recommended way to initialize the client is:

const groq = new Groq({ apiKey: process.env.GROQ_API_KEY });

However, since we are using Vite and not a backend server, this will return a process undefined error.

Using the following code:

const groq = new Groq({
  apiKey: import.meta.env.VITE_REACT_APP_GROQ_API_KEY,
  dangerouslyAllowBrowser: true,
});

This allows us to make the API call from the client side.

Security Implications:
The downside of using the above code snippet is that Groq API blocks client-side API calls for obvious security reasons (exposing your API key). By setting dangerouslyAllowBrowser: true, you are explicitly allowing the API key to be used in the browser, which can expose it to potential security risks.

Risk Mitigation:

Environment Variables: If you will upload this to GitHub, always ensure that your .env file is included in your .gitignore file to prevent it from being committed to version control.

Server-Side Requests: Whenever possible, make API calls from a backend server to keep your API keys secure.
Secure Sharing: If you need to share your project, make sure to remove or obfuscate the .env file that contains your API key.

Step 4: Define the State

Define the state to manage the input value and chat messages. The chatMessages state will hold an array of objects, each containing a prompt and a response.

To do this we will use the built-in React useState Hook.

import { useState } from 'react';

interface ChatMessage {
  prompt: string;
  response: string;
}

const App = () => {
  const [inputValue, setInputValue] = useState('');
  const [chatMessages, setChatMessages] = useState<ChatMessage[]>([]);
};

Step 5: Handle Input Change

Create a function to handle changes in the input field.

const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
  setInputValue(event.target.value);
};

Step 6: Integrate the API Request and Response to the `Send` Button

const handleSend = async () => {
  if (inputValue.trim() === '') return;

  const chatPrompt = `You: ${inputValue}`;

  try {
    const chatCompletion = await groq.chat.completions.create({
      messages: [
        {
          role: 'user',
          content: inputValue,
        },
      ],
      model: 'llama3-8b-8192',
    });

    const responseContent =
      chatCompletion.choices[0]?.message?.content || 'No response';

    const newChatMessage: ChatMessage = {
      prompt: chatPrompt,
      response: responseContent,
    };

    setChatMessages([...chatMessages, newChatMessage]);
  } catch (error) {
    console.error('Error fetching chat completion:', error);
    const errorMessage = 'Error fetching chat completion';
    const newChatMessage: ChatMessage = {
      prompt: chatPrompt,
      response: errorMessage,
    };
    setChatMessages([...chatMessages, newChatMessage]);
  } finally {
    setInputValue('');
  }
 };

Also create a function to call handleSend that will be attached to the search-input

 const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
   if (event.key === 'Enter' && !event.shiftKey) {
     event.preventDefault(); // Prevent the default action (newline)
     handleSend();
   }

Step 7: Render the UI

return (
  <>
    <AppName>
      <div>
        <span>Grëg's </span>ChatBot
      </div>
    </AppName>
    <div>
      <Headings>
        <div>
          <h1>Hi, Welcome.</h1>
        </div>
        <div>
          <h3>How can I help you today?</h3>
        </div>
      </Headings>
    </div>
      <div className="chat-container">
        <Chat>
        {/* Render chat messages */}
        {chatMessages.map((message, index) => (
          <div key={index} className="chat-message">
            <div className="chat-prompt">{message.prompt}</div>
            <div className="chat-response">{message.response}</div>
          </div>
        ))}
        </Chat>
    </div>
    <div className="searchBar-container">
      <SearchBar>
        <textarea
          className="search-input"
          placeholder="Enter your text"
          value={inputValue}
          onChange={handleInputChange}
          onKeyDown={handleKeyDown}
        />
        <Button textContent="Send" handleClick={handleSend} />
      </SearchBar>
    </div>
  </>
);

Explanation
1- Chat component:

chatMessages.map: Iterates over the chatMessages array to render each message. So it dynamically renders the chat messages, ensuring that the UI updates as new messages are added.
div key={index} className="chat-message": A container for each individual chat message.
div className="chat-prompt": Displays the user's prompt.
div className="chat-response": Displays the API's response.

2- Search Bar Component:

<div className="searchBar-container">
  <SearchBar>
    <textarea
      className="search-input"
      placeholder="Enter your text"
      value={inputValue}
      onChange={handleInputChange}
      onKeyDown={handleKeyDown}
    />
    <Button textContent="Send" handleClick={handleSend} />
  </SearchBar>
</div>

onChange={handleInputChange}: Handles changes in the input field.
onKeyDown={handleKeyDown}: Handles the Enter key press to send the message if it's pressed without the shift key.

Here's is our updated `App.tsx` with the Groq API integration:

// App.tsx
import AppName from './components/AppName';
import Chat from './components/Chat';
import Headings from './components/Headings';
import SearchBar from './components/SearchBar';
import Button from './components/Button';
import { useState } from 'react';
import Groq from 'groq-sdk';

const groq = new Groq({
  apiKey: import.meta.env.VITE_REACT_APP_GROQ_API_KEY,
  dangerouslyAllowBrowser: true,
});

interface ChatMessage {
  prompt: string;
  response: string;
}

const App = () => {
  // State to manage the input value
  const [inputValue, setInputValue] = useState('');
  // State to manage chat messages
  const [chatMessages, setChatMessages] = useState<ChatMessage[]>([]);

  // Function to handle input change
  const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    setInputValue(event.target.value);
  };

  // Function to handle button click
  const handleSend = async () => {
    if (inputValue.trim() === '') return;

    const chatPrompt = `You: ${inputValue}`;

    try {
      const chatCompletion = await groq.chat.completions.create({
        messages: [
          {
            role: 'user',
            content: inputValue,
          },
        ],
        model: 'llama3-8b-8192',
      });

      const responseContent =
        chatCompletion.choices[0]?.message?.content || 'No response';

      const newChatMessage: ChatMessage = {
        prompt: chatPrompt,
        response: responseContent,
      };

      // Add the new chat message to the chat messages
      setChatMessages([...chatMessages, newChatMessage]);
    } catch (error) {
      console.error('Error fetching chat completion:', error);
      const errorMessage = 'Error fetching chat completion';
      const newChatMessage: ChatMessage = {
        prompt: chatPrompt,
        response: errorMessage,
      };
      // Add the error message to the chat messages
      setChatMessages([...chatMessages, newChatMessage]);
    } finally {
      // Clear the input field
      setInputValue('');
    }
  };
  const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (event.key === 'Enter' && !event.shiftKey) {
      event.preventDefault(); // Prevent the default action (newline)
      handleSend();
    }
  }

  return (
    <>
      <AppName>
        <div>
          <span>Grëg's </span>ChatBot
        </div>
      </AppName>
      <div>
        <Headings>
          <div>
            <h1>Hi, Welcome.</h1>
          </div>
          <div>
            <h3>How can I help you today?</h3>
          </div>
        </Headings>
      </div>
      <div className="chat-container">
        <Chat>
        {/* Render chat messages */}
        {chatMessages.map((message, index) => (
          <div key={index} className="chat-message">
            <div className="chat-prompt">{message.prompt}</div>
            <div className="chat-response">{message.response}</div>
          </div>
        ))}
        </Chat>
      </div>
      <div className="searchBar-container">
        <SearchBar>
          <textarea
            className="search-input"
            placeholder="Enter your text"
            value={inputValue}
            onChange={handleInputChange}
            onKeyDown={handleKeyDown}
          />
          <Button textContent="Send" handleClick={handleSend} />
        </SearchBar>
      </div>
    </>
)};

export default App;

Here is the result:

Congratulations. You have successfully built an AI ChatBot.

Don't run away yet. Don't over celebrate. There's more!

We need to make our app look cool, more professional and we don't want our browser to clear our chat history when we refresh the page. Yes? Great!!

If you are OK with this Ugly state, then, run ahead. Else let's go ahead.

Next Phase

In this phase of the project, we will need to

Save our chat state using LocalStorage and React's built-in useEffect Hook.
Enhance the app's user interface with visually appealing styles and additional features.

Guys, are you excited like me here? No time to waste let's dive in.

Save App State:

We'll use the useEffect hook to save the state to local storage whenever it changes. This ensures that the chat history is preserved even after the page is refreshed.

Step 1: Define the State Structure

First, define the state structure that includes the input value and chat messages.

interface ChatMessage {
  prompt: string;
  response: string;
}

interface AppState {
  inputValue: string;
  chatMessages: ChatMessage[];
}

Step 2: Initialize State with Local Storage

Initialize the state using the 'useState' hook. If there is a saved state in local storage, use it; otherwise, use the default values.

const [state, setState] = useState<AppState>(() => {
  const localValue = localStorage.getItem('appState');
  if (localValue === null) {
    return {
      inputValue: '',
      chatMessages: [],
    };
  }
  return JSON.parse(localValue);
});

Step 3: Use the useEffect hook to save the state to local storage whenever it changes.

useEffect(() => {
  localStorage.setItem('appState', JSON.stringify(state));
}, [state]);

Step 4: Handle Input Change

Create a function to handle changes in the input field.

const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
  setState((prevState) => ({
    ...prevState,
    inputValue: event.target.value,
  }));
};

Step 5: Update the `handleSend` function

const handleSend = async () => {
  if (state.inputValue.trim() === '') return;

  const chatPrompt = `You: ${state.inputValue}`;

  try {
    const chatCompletion = await groq.chat.completions.create({
      messages: [
        {
          role: 'user',
          content: state.inputValue,
        },
      ],
      model: 'llama3-8b-8192',
    });

    const responseContent =
      chatCompletion.choices[0]?.message?.content || 'No response';

    const newChatMessage: ChatMessage = {
      prompt: chatPrompt,
      response: responseContent,
    };

    setState((prevState) => ({
      ...prevState,
      chatMessages: [...prevState.chatMessages, newChatMessage],
      inputValue: '',
    }));
  } catch (error) {
    console.error('Error fetching chat completion:', error);
    const errorMessage = 'Error fetching chat completion';
    const newChatMessage: ChatMessage = {
      prompt: chatPrompt,
      response: errorMessage,
    };
    setState((prevState) => ({
      ...prevState,
      chatMessages: [...prevState.chatMessages, newChatMessage],
      inputValue: '',
    }));
  }
};

Explanation of useEffect Hook
The useEffect hook is used to perform side effects in functional components. In this case, it is used to save the state to local storage whenever the state changes.

useEffect(() => {
  localStorage.setItem('appState', JSON.stringify(state));
}, [state]);

BreakDown:
1- The function inside useEffect is the effect that will be executed. Here, it saves the state to local storage.

localStorage.setItem('appState', JSON.stringify(state));

2- The second argument to useEffect is the dependency array. It specifies when the effect should run. In this case, the effect runs whenever the state changes.

[state]

Got it? Any questions? Drop 'em in the comments.

Now we have made our code persistent. How can we clear the local Storage? Any idea?

Correct!!! We add a clear button to clear the chat and state.

Add a clear button to clear the chat and the state

Step 1: `handleClearChat` function:

Create a function to handle the "Clear Chat" button click, which will clear the chat history and remove the state from local storage.

const handleClearChat = () => {
  setState((prevState) => ({
    ...prevState,
    chatMessages: [],
    inputValue: '',
  }));

  // Remove chat history from localStorage
  localStorage.removeItem('appState');
};

Step 2: Render the UI:

Add the clear chat button using the Botton component.

    <div className="chat-container">
        <Chat>
          {/* Map over the chat messages to render each one */}
          {state.chatMessages.map((message, index) => (
            <div key={index} className="chatConversations">
              <div className="chat-prompt">{message.prompt}</div>
              <div className="chat-response">{message.response}</div>
            </div>
          ))}
          <Button textContent="Clear Chat" handleClick={handleClearChat} />
        </Chat>
      </div>

Putting it all together:

Here the complete implementation of the App component with the local storage save state functionality and the "Clear Chat" button:

// App.tsx
import AppName from './components/AppName';
import Button from './components/Button';
import Chat from './components/Chat';
import Groq from 'groq-sdk';
import Headings from './components/Headings';
import SearchBar from './components/SearchBar';
import { useState, useEffect } from 'react';

const groq = new Groq({
  apiKey: import.meta.env.VITE_REACT_APP_GROQ_API_KEY,
  dangerouslyAllowBrowser: true,
});

interface ChatMessage {
  prompt: string;
  response: string;
}

interface AppState {
  inputValue: string;
  chatMessages: ChatMessage[];
}

const App = () => {
  // Initialize state with an empty string
  const [state, setState] = useState<AppState>(() => {
    const localValue = localStorage.getItem('appState');
    if (localValue === null) {
      return {
        inputValue: '',
        chatMessages: [],
      };
    }
    return JSON.parse(localValue);
  });

  // Save state to localStorage whenever it changes
  useEffect(() => {
    localStorage.setItem('appState', JSON.stringify(state));
  }, [state]);

  const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    // Update state with the new input value
    setState((prevState) => ({
      ...prevState,
      inputValue: event.target.value,
    }));
  };

  // Send the prompt to the API
  const handleSend = async () => {
    if (state.inputValue.trim() === '') return;

    const chatPrompt = `You: ${state.inputValue}`;

    try {
      const chatCompletion = await groq.chat.completions.create({
        messages: [
          {
            role: 'user',
            content: state.inputValue,
          },
        ],
        model: 'llama3-8b-8192',
      });

      const responseContent =
        chatCompletion.choices[0]?.message?.content || 'No response';

      const newChatMessage: ChatMessage = {
        prompt: chatPrompt,
        response: responseContent,
      };

      // Append the new chat message to the array
      setState((prevState) => ({
        ...prevState,
        chatMessages: [...prevState.chatMessages, newChatMessage],
        inputValue: '',
      }));
    } catch (error) {
      console.error('Error fetching chat completion:', error);
      const errorMessage = 'Error fetching chat completion';
      const newChatMessage: ChatMessage = {
        prompt: chatPrompt,
        response: errorMessage,
      };
      // Append the error message to the array
      setState((prevState) => ({
        ...prevState,
        chatMessages: [...prevState.chatMessages, newChatMessage],
        inputValue: '',
      }));
    }
  };

  const handleClearChat = () => {
    // Clear the chat messages state
    setState((prevState) => ({
      ...prevState,
      chatMessages: [],
      inputValue: '',
    }));

    // Remove chat history from localStorage
    localStorage.removeItem('appState');
  };

 const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
   if (event.key === 'Enter' && !event.shiftKey) {
     event.preventDefault(); // Prevent the default action (newline)
     handleSend();
   }
 };

  return (
    <>
      <AppName>
        <div>
          <span>Grëg's </span>ChatBot
        </div>
      </AppName>
      <div>
        <Headings>
          <div>
            <h1>Hi, Welcome.</h1>
          </div>
          <div>
            <h3>How can I help you today?</h3>
          </div>
        </Headings>
      </div>
      <div className="chat-container">
        <Chat>
          {/* Map over the chat messages to render each one */}
          {state.chatMessages.map((message, index) => (
            <div key={index} className="chatConversations">
              <div className="chat-prompt">{message.prompt}</div>
              <div className="chat-response">{message.response}</div>
            </div>
          ))}
          <Button textContent="Clear Chat" handleClick={handleClearChat} />
        </Chat>
      </div>
      <div className="searchBar-container">
        <SearchBar>
          <textarea
            className="search-input"
            placeholder="Enter your text"
            value={state.inputValue}
            // Use the handleInputChange function
            onChange={handleInputChange}
            // Use the handleKeyDown function
            onKeyDown={handleKeyDown}
          />
          <Button
            textContent="Send"
            handleClick={handleSend}
          />
        </SearchBar>
      </div>
    </>
  );
};

export default App;

Oboy!!!! This is awesome.

We are approaching the end of our amazing project.

Final Features.

Now we make our app look more professional. Yes?

What do I mean?

We'll add CSS styles to enhance the user interface. The styles will make our chatbot look more professional and user-friendly.

Styling.

Create an App.css file in your src folder if you don't have one. Then add this Css styles to it.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 14;
  font-family: 'Montserrat', sans-serif, system-ui;
}

#root {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 2rem;
  align-items: center;
  line-height: 2;
}

.app-name {
  font-weight: 600;
  display: flex;
}

.app-name div {
  background: rgba(0, 0, 0, 0.1);
  padding: 0 1rem;
  border-radius: 1rem;
}

.app-name span {
  font-family: cursive;
  font-style: italic;
  font-size: 1.5rem;
}

h1 {
  font-size: 5rem;
}

h3 {
  font-size: 2rem;
  text-align: center;
}

button {
  border-radius: 30%;
  border: none;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}

button:hover {
  opacity: 0.9;
}

.search-input {
  resize: none;
  flex: 1;
  background: transparent;
  outline: none;
  height: 20rem;
  padding: 0.5rem 0.5rem 0.5rem 2rem;
  font-size: inherit;
}

.searchBar-container {
  align-self: flex-end;
  width: 90%;
}

.searchBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: 1rem;
}

.searchBar button {
  background-color: rgb(63, 128, 226);
  color: white;
  flex: 0;
  height: 2.5em;
  padding: 0 2em;
}

.searchBar button:disabled {
  background-color: rgb(162, 192, 238);
}

.chat-container {
  width: 50%;
  margin-top: 3em;
}

.chatConversations {
  display: flex;
  flex-direction: column;
}

.chat-prompt {
  align-self: flex-end;
  margin: 1rem 0;
  font-weight: 600;
  background-color: rgba(0, 0, 0, 0.1);
  padding: 0.5rem;
}

.chat-container button {
  background-color: rgb(205, 56, 56);
  color: white;
  padding: 0.5em 1.5em;
  margin: 2rem 0;
}

To ensure that the css style is implemented, check your main.tsx file to ensure that the css file is imported.

Result

Good job Guys..

Finally Guys

Let's disable the send button if there is no inputValue to prevent us sending empty prompts.

Then we hide the Headings component when there is a chat conversation and also we hide the Chat component when there is no chat.

Here's what I mean. When there is no chat, we have our AppName, Headings, SearchBar components with their elements. But when there is a chat, the Headings are hidden automatically and we have our AppName, Chat component with all our chats, and SearchBar components with all their elements.

Whenever we clear the chat, then the Chat component gets hidden again and our Headings component gets displayed.

You get the gist. Yes?

Alright. So much explanation, let's get back to work.

Step 1: Update `AppState` interface

We add the visibility flags for the Headings and Chat components to our AppState interface.

interface AppState {
  inputValue: string;
  chatMessages: ChatMessage[];
  isChatVisible: boolean;
  isHeadersVisible: boolean;
}

Step 2: Update our state initialization

We set the initial visibility of our Headings and Chat components.

const [state, setState] = useState<AppState>(() => {
  const localValue = localStorage.getItem('appState');
  if (localValue === null) {
    return {
      inputValue: '',
      chatMessages: [],
      isChatVisible: false,
      isHeadersVisible: true,
    };
  }
  return JSON.parse(localValue);
});

Step 3: Check Input Value

Create a function to check if the input value is empty or contains only whitespace.

const noChatPrompt = state.inputValue.trim() === '';

step 4: Update `handleSend` function

We update the handleSend function check the inputValue before sending. If empty, it wont send. It will also hide the Headings component and display the Chat component, when we send a chat conversation:

const handleSend = async () => {
  if (noChatPrompt) return;

  const chatPrompt = `You: ${state.inputValue}`;

  try {
    const chatCompletion = await groq.chat.completions.create({
      messages: [
        {
          role: 'user',
          content: state.inputValue,
        },
      ],
      model: 'llama3-8b-8192',
    });

    const responseContent =
      chatCompletion.choices[0]?.message?.content || 'No response';

    const newChatMessage: ChatMessage = {
      prompt: chatPrompt,
      response: responseContent,
    };

    setState((prevState) => ({
      ...prevState,
      chatMessages: [...prevState.chatMessages, newChatMessage],
      isChatVisible: true,
      isHeadersVisible: false,
      inputValue: '',
    }));
  } catch (error) {
    console.error('Error fetching chat completion:', error);
    const errorMessage = 'Error fetching chat completion';
    const newChatMessage: ChatMessage = {
      prompt: chatPrompt,
      response: errorMessage,
    };
    setState((prevState) => ({
      ...prevState,
      chatMessages: [...prevState.chatMessages, newChatMessage],

      // set Headings and Chat component visibilities
      isChatVisible: true,
      isHeadersVisible: false,
      inputValue: '',
    }));
  }
};

Step 5: Update the `Clear chat` button function.

When clicked, the Clear chat button will also reset the visibility flags.

const handleClearChat = () => {
  setState((prevState) => ({
    ...prevState,
    chatMessages: [],
    isChatVisible: false,
    isHeadersVisible: true,
    inputValue: '',
  }));

  // Remove chat history from localStorage
  localStorage.removeItem('appState');
};

Step 6: Render the UI

Render the UI components, including the headings and chat components, conditionally based on the visibility flags. Disable the "Send" button if there is no input value.

return (
  <>
    <AppName>
      <div>
        <span>Grëg's </span>ChatBot
      </div>
    </AppName>
    {state.isHeadersVisible && (
      <div>
        <Headings>
          <div>
            <h1>Hi, Welcome.</h1>
          </div>
          <div>
            <h3>How can I help you today?</h3>
          </div>
        </Headings>
      </div>
    )}
    {state.isChatVisible && (
      <div className="chat-container">
        <Chat>
          {/* Map over the chat messages to render each one */}
          {state.chatMessages.map((message, index) => (
            <div key={index} className="chatConversations">
              <div className="chat-prompt">{message.prompt}</div>
              <div className="chat-response">{message.response}</div>
            </div>
          ))}
          <Button textContent="Clear Chat" handleClick={handleClearChat} />
        </Chat>
      </div>
    )}
    <div className="searchBar-container">
      <SearchBar>
        <textarea
          className="search-input"
          placeholder="Enter your text"
          value={state.inputValue}
          onChange={handleInputChange}
          onKeyDown={handleKeyDown}
        />
        <Button
          textContent="Send"
          handleClick={handleSend}
          disabled={noChatPrompt}
        />
      </SearchBar>
    </div>
  </>
);

Now Let's bring it all together:

Here is the complete implementation of the App component with the display and hiding of the Headings and Chat components, along with disabling the "Send" button if there is no input value:

// App.tsx
import AppName from './components/AppName';
import Button from './components/Button';
import Chat from './components/Chat';
import Groq from 'groq-sdk';
import Headings from './components/Headings';
import SearchBar from './components/SearchBar';
import { useState, useEffect } from 'react';

const groq = new Groq({
  apiKey: import.meta.env.VITE_REACT_APP_GROQ_API_KEY,
  dangerouslyAllowBrowser: true,
});

interface ChatMessage {
  prompt: string;
  response: string;
}

interface AppState {
  inputValue: string;
  chatMessages: ChatMessage[];
  isChatVisible: boolean;
  isHeadersVisible: boolean;
}

const App = () => {
  // Initialize state with an empty string
  const [state, setState] = useState<AppState>(() => {
    const localValue = localStorage.getItem('appState');
    if (localValue === null) {
      return {
        inputValue: '',
        chatMessages: [],
        isChatVisible: false,
        isHeadersVisible: true,
      };
    }
    return JSON.parse(localValue);
  });

  // Save state to localStorage whenever it changes
  useEffect(() => {
    localStorage.setItem('appState', JSON.stringify(state));
  }, [state]);

  const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    // Update state with the new input value
    setState((prevState) => ({
      ...prevState,
      inputValue: event.target.value,
    }));
  };

  // Check if the input value is empty or contains only whitespace
  const noChatPrompt = state.inputValue.trim() === '';

  // Send the prompt to the API
  const handleSend = async () => {
    if (noChatPrompt) return;

    const chatPrompt = `You: ${state.inputValue}`;

    try {
      const chatCompletion = await groq.chat.completions.create({
        messages: [
          {
            role: 'user',
            content: state.inputValue,
          },
        ],
        model: 'llama3-8b-8192',
      });

      const responseContent =
        chatCompletion.choices[0]?.message?.content || 'No response';

      const newChatMessage: ChatMessage = {
        prompt: chatPrompt,
        response: responseContent,
      };

      // Append the new chat message to the array
      setState((prevState) => ({
        ...prevState,
        chatMessages: [...prevState.chatMessages, newChatMessage],
        isChatVisible: true,
        isHeadersVisible: false,
        inputValue: '',
      }));
    } catch (error) {
      console.error('Error fetching chat completion:', error);
      const errorMessage = 'Error fetching chat completion';
      const newChatMessage: ChatMessage = {
        prompt: chatPrompt,
        response: errorMessage,
      };
      // Append the error message to the array
      setState((prevState) => ({
        ...prevState,
        chatMessages: [...prevState.chatMessages, newChatMessage],
        isChatVisible: true,
        isHeadersVisible: false,
        inputValue: '',
      }));
    }
  };

  const handleClearChat = () => {
    // Clear the chat messages state
    setState((prevState) => ({
      ...prevState,
      chatMessages: [],
      isChatVisible: false,
      isHeadersVisible: true,
      inputValue: '',
    }));

    // Remove chat history from localStorage
    localStorage.removeItem('appState');
  };

  const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (event.key === 'Enter' && !event.shiftKey) {
      event.preventDefault(); // Prevent the default action (newline)
      handleSend();
    }
  };

  return (
    <>
      <AppName>
        <div>
          <span>Grëg's </span>ChatBot
        </div>
      </AppName>
      {state.isHeadersVisible && (
        <div>
          <Headings>
            <div>
              <h1>Hi, Welcome.</h1>
            </div>
            <div>
              <h3>How can I help you today?</h3>
            </div>
          </Headings>
        </div>
      )}
      {state.isChatVisible && (
        <div className="chat-container">
          <Chat>
            {/* Map over the chat messages to render each one */}
            {state.chatMessages.map((message, index) => (
              <div key={index} className="chatConversations">
                <div className="chat-prompt">{message.prompt}</div>
                <div className="chat-response">{message.response}</div>
              </div>
            ))}
            <Button textContent="Clear Chat" handleClick={handleClearChat} />
          </Chat>
        </div>
      )}
      <div className="searchBar-container">
        <SearchBar>
          <textarea
            className="search-input"
            placeholder="Enter your text"
            value={state.inputValue}
            onChange={handleInputChange}
            onKeyDown={handleKeyDown}
          />
          <Button
            textContent="Send"
            handleClick={handleSend}
            disabled={noChatPrompt}
          />
        </SearchBar>
      </div>
    </>
  );
};

export default App;

Final Result

And so Ladies, Gentlemen and all, we have come to the end of our project.

Congratulations

Assignment

So guys, as an assignment, I want you to set the API response to be displayed as Markdown, not as pure text as it's currently returning.

With Markdown, the response will be formatted better thus improve the readability of the responses.

Let me know in the comments if you attempted it or how you solved it.

Conclusion

Congratulations! we've successfully built an AI Chatbot application using React, TypeScript, and the Groq Cloud AI API. Feel free to experiment with the code, add more features, and customize the chatbot to your liking.

Thanks for joining me today to build this amazing project. I can't wait to meet you on our next project. Goodbye for now and see you soon on our next project.

Until then guys, let's keep learning and experimenting.

From Grëg Häris with ❤️

Happy coding ❤️!

Challenges and Commitment: My 127-Day Journey to Becoming a Developer

Greg Haris — Sat, 05 Oct 2024 07:45:32 +0000

Today marks day 127 since May 31st, 2024, when I made the difficult decision to quit my job as a Property Manager and AirBnB host to focus on upskilling myself and embarking on a total life transformation.

When I made the decision, I was eager to focus on my personal development. To learn Web Development. I was incredibly excited to embark on this journey and see where it would lead. So, I created a straightforward plan and started with full enthusiasm.

Before making the decision, as I mentioned here, I had raised enough savings and planned that no matter what, I had enough to last me for more than the next six months.

I invested a significant portion of my savings in personal development and relocation.

Then I budgeted that my remaining savings would last me until I start earning again.

Well, life has a funny way of testing your commitments.

The journey started smoothly, but then family issues arose here and there, and I had to step up as my siblings look up to me.

Now, I am at risk of exhausting my savings before I start earning again.

But guess what? The most amazing thing is that I see that as another challenge, another mountain to climb, and an extra motivation to do more, put in more effort, and to analyze and adjust my strategies.

I made the decision to leave my comfort zone and embrace discomfort. Therefore, I will embrace whatever discomfort comes my way, make no excuses, focus solely on my efforts, and reaffirm my commitment to do all I can each day.

You see, when we make the hard choices to move forward, life has a way to test us. Before now, I trembled when these challenges came, but now, I see them as extra motivation to go ten times harder.

Now each day, I wake up with new determination and laser focus. The things that once easily distracted me, I no longer notice or pay attention to.

Initially, I planned to follow a structured path, learning full-stack development by completing The Odin Project's JavaScript Full Stack Curriculum before seeking job opportunities. However, I've come to realize that this journey is a never-ending journey of continuous learning, growth, and personal development. So, I have changed my strategy.

When you make that difficult decision to focus on your goal, life tests your commitment to see if you are really serious. To see if you are willing to go all the way. To see if you are flexible. To see if you are strong enough. It is up to you to rise up to the challenge. It's up to you to look life in the eyes and show how determined, willing, and hungry you are to achieve that dream.

Many of us here have made crazy sacrifices to get to where we are today. Ask the successful developers here, they will tell you their own story of determination and willingness to keep moving forward no matter the circumstances. Therefore, I encourage you not to give up. Yes, it's hard. Yes, I cannot imagine what you are going through, but don't quit. Keep pushing.

Even if you are yet to achieve that dream, know that for the fact that you wake up each day to work on the dream, you are already living the dream. So don't quit.

One of the reasons why I can never quit today is the fact that everything I have now and doing now was once upon a time a wild dream. I remember praying and dreaming of a day when I would own everything I possess today and have the resources to dedicate myself to my goals 24/7. If someone had told me on January 1st, 2023, that I would be where I am today – with all my accomplishments in the past twenty-two months – I would've listened but struggled to believe wholeheartedly. It would have sounded like an optimistic prophecy. But here I am.

It took hard work, focus, and determination to get here, so I am committed to putting in more effort. And I know that each passing day is taking me closer to achieving my dreams.

Don't give up. If you've come this far, you can still take more steps ahead. Don't give up. You are closer to achieving that dream than you think.

I believe in myself. I believe in my abilities. And I know I can achieve that impossible dream. And so can you.

Let's go all in. The stakes are too high. So, let's keep pushing, giving our all, and never giving up.

Come on, DEVs 🦾. Keep pushing on!

From Grëg Haris with ❤️.

Happy coding! ❤️.

October: The Final Sprint - A Call to Maximize the Last 92 Days of 2024

Greg Haris — Tue, 01 Oct 2024 09:45:10 +0000

We're in the final quarter of 2024. It's astonishing how quickly time has flown. Just 92 days remain until we ring in the new year and shout "HAPPY NEW YEAR!" again.

As I sit down here writing this, I can still vividly recall the first of January 2024 as if it was yesterday. I remember sitting at my desk, writing goals, outlining my plans, and reaffirming my commitments and new year resolutions.

I can remember the goals and plans I made for 2024.

Looking back, I see my wins, loses and failures. I see the happy and sad moments too.

At the beginning of 2024, we had 366 long days but now in a flash, 274 days are gone. Counting today, we have just 92 days to go.

This is our final sprint, DEVs. Have you been sleeping? Wake up! Have you been living below par? Double up! Have you been making excuses? Stop. Let's seize these remaining days with renewed energy and determination. Don't let excuses hold you back. It's time to double down on our efforts.

Don't count off 2024 yet as over. No! Don't. We have just gotten to the most exciting period of the year DEVs.

This is it:
We have 92 amazing days, so 92 opportunities to put more efforts, embrace challenges and learn from them, experience more and then fill up our bags with accomplishments.

If you're reading this, you've come a long way. Remember those who started this journey but aren't here to finish it. Let's honor their memory by making the most of our own time.

DEVs, let's revaluate our plans and strategies. Let's make a commitment and promise to ourselves that for the 31 days of October and the remaining 92 days of this year, we will live each day to the fullest. We will make the most of every moment of each day.

It's time to double up. Take action. Start or complete that course or project you have been procrastinating on. Get that coaching or mentorship support you need. Plan your days and follow through. Submit that project idea you have been sleeping on. Don't let your ideas gather dust. Whatever you are yet to do or doing, double up.

As we embark on this last quarter of 2024, as we build on our dreams and goals, let's live each day as if it's our last.

October is a new chapter. What will you write?

Believe that these 31days of October can change and transform your life and career and then live accordingly.

Let's give our best effort, make every moment count, and remember the importance of health and relationships. As Ali Abdaal said, "On your road to success and greatness, don't forget to take care of your health and relationships." So give room for love and time for those you care about and those who care about you.

DEVs, for these 31 days of October, and for these 92 days of this final quarter of 2024, let's do our best. Let's win, fail, learn, love, laugh, and cry. Most importantly, let's be legendary.

Be Legendary DEVs.

Happy New Month of October and a greater final quarter of 2024.

From Grëg Häris with ❤️.

Happy coding ❤️!

Photo Credit: Cover photo by Talent Academy

Monday Motivation: Turning the Page

Greg Haris — Mon, 30 Sep 2024 07:54:50 +0000

Are you feeling discouraged after a tough week?

Did you miss that job or business opportunity?

How about the failed interview?

Did you miss that project deadline?

Were you laid off?

Have you been struggling to live up to your standards?

Well, here is the GOOD NEWS:

It's a New Week! The best part? Today is the last day of September and the beginning of the first week of October.

Welcome to this new week DEVs.

Whatever challenges you faced, it's time to turn the page and embrace a new beginning. Put your troubles aside. Let go of the failures, sorrows and all the disappointments of last week.

Embrace this new week with hope. Embrace this new week with excitement. Embrace this new week with every optimism. See this new week as the best opportunity and gift life has offered you.

Last week was filled with its share of challenges, triumphs, setbacks, and mixed emotions. However, that week is now behind us. Whatever happened, good or bad, has become part of our past.

So, challenge yourself to put in your best work this week. Don't just live up to your standards but strive to surpass them and set new heights for yourself. Make no excuses.

Seize every moment - each second, minute, hour and make the most of each day of this week.

Commit to your goals. Promise yourself that you will stay focused, persevere through challenges, and learn from your experiences. Even in the face of setbacks, find opportunities for growth and triumph.

Therefore, let's commit and promise ourselves today that, no matter what happens, we will do our best this week. No matter the situation and experience, we will stay focused, stick to our goals and commitments, keep moving forward, and make this the best week of our lives.

And most importantly, let's promise ourselves that, no matter what happens, even in the face of setbacks, we will learn the lessons, find opportunities for growth, be triumphant, and enjoy each day of this week.

I leave you with these amazing quotes:

"In the middle of difficulty lies opportunity.”
Albert Einstein

“If opportunity doesn't knock, build a door.”
Milton Berle

“Victory comes from finding opportunities in problems.”
Sun Tzu

“Expect change. Analyze the landscape. Take the opportunities. Stop being the chess piece; become the player. It’s your move.”
Tony Robbins

“There are secret opportunities hidden inside every failure.”
Anonymous

“Your big opportunity may be right where you are now.”
Napoleon Hill

Come on DEVs, let's go 🦾.

Happy Monday DEV Community.

From Grëg Häris with ❤️.

Happy coding ❤️.

Photo credit: cover photo by Stackfield

Navigating Non-Technical Writing on Dev: My Journey of Authenticity and Recognition

Greg Haris — Wed, 25 Sep 2024 11:51:20 +0000

Starting out here on Dev, I wondered if my content – focused on personal development for aspiring developers – would resonate with the community given Dev's technical writing focus. Yet I wrote my first post and continued sharing as I believe my experiences could offer value.

Every day before clicking the "Create Post" button I keep asking myself "are you doing the right thing?"

So before I write, I remind myself that this is a community of developers and developers are humans. And as humans we have struggles and we sometimes need motivation and inspiration from other people's stories.

I have considered quitting writing here several times but I keep reminding myself that even if I am writing non technical stuff, I am adding value to the platform.

This is the challenge I struggle with: despite Dev's technical writing focus, I haven't felt compelled to write technical posts yet. My passion lies in helping aspiring developers, like myself, navigate the ups and downs of our learning journeys.

This resonates with my amazing friend, inspiration, and motivator, Ekemini Samuel. He echoes this sentiment, reminding me to stay true to myself and my voice whenever I think about stopping until I have technical content.

Take a look at some of my recent posts exploring this:

I share my experiences with:

Mistakes and lessons learned
Strategies to overcome challenges
Building a healthy developer body and mindset
Productivity

Then, yesterday, after 23 posts, accumulating 909 total post views, and being a consistent member of this great community for 24 days, I received this email from Dev:

In all honesty I never expected this. I was shocked. I quickly screenshotted it and shared with Ekemini Samuel.

When I started writing here, just 24 days ago, my goal was to consistently share my experiences, insights, and personal journey. I wasn't seeking or expecting recognition; I simply wanted to be authentic and contribute to the community. Above all, I aimed to learn and become a better communicator and writer.

The likes, reads, and now this recognition? These are all the proof I needed to know that I am doing something right. They are external motivators and reminders that I am adding value.

Here are some key takeaways from my experience:

Don't be afraid to stand out:

Most times when we are working on something, because its not the popular thing, we feel that we are not doing the right thing. We have the temptation to want to shift towards doing what everyone else is doing.
Often, the most innovative and rewarding paths are less traveled. Stay true to your passions and unique perspective. Remember, the popular thing isn't always the right thing for you.
So long as what you are doing is right and adding value, you will be recognised.

Share your unique story:

Everyone here has a story to tell. Your unique story is powerful. Your experiences, both successes and failures, can inspire and help others. It might be the spark that ignites someone else's programming journey or pick someone up who is about giving up. So long as you are in line with the Code of Conduct of Dev, please consider sharing your journey, lessons learned, or advice on overcoming challenges.

Consistency is key:

If I hadn't been consistent, and I won't have gotten here. In whatever you do, be consistent.

Focus on knowledge and value:

Prioritize offering value and supporting others over chasing views or likes. You must not share technical knowledge. Just ensure your post will add value to someone else.

This post by Ekemini Samuel where he shared his experience with Job rejections:
Dealing with Rejection After Applying to Hundreds of Jobs which is totally non technical article and was the only non technical write up featured on the Top 7 favorite posts on DEV from last week list sums it all.

THANK YOU DEV COMMUNITY!

Starting writing here on Dev just 24 days ago, my goal was to consistently show up, share authentically, and help others. This recognition is a fantastic motivator, confirming I'm on the right track.

Thank you, DEV Community, for this opportunity to serve and do more! I'll keep contributing my best to support the growth and success of this amazing community.

From Grëg Häris with ❤️.

Happy Coding! ❤️

Overcoming the Multitasking Myth: A Developer's Story

Greg Haris — Tue, 24 Sep 2024 09:19:03 +0000

Why do we always complicate our lives, making things harder for ourselves?

Do you know that only 2.5% of the whole human population are great at multitasking and even they lose efficiency when switching between tasks? Source

I know that I am terrible at multitasking, yet two weeks ago I decided that I will challenge this fact and prove myself wrong.

Here is my story

I have a goal to learn Front-End Web Development and monetize my skills before December 31st, 2024. That was my primary objective after quitting my job. I also wanted to start a YouTube channel and learn about social media, as I had no previous experience in these areas and Zero social media presence.

At the beginning, I had the laser focus on my primary project of learning web development, and gave no attention to any other thing. Then two weeks ago, after analyzing my performance thus far, I decided to start working on the learning YouTube and Social Media (IG content creation) project.

Instead of still focusing primarily on my main project (Web Development) and working on YouTube and social media (content creation) as supplementary projects with scheduled days and time, I decided to tackle everything with the same energy and focus. This approach disregarded the important principle of goal achievement: "Focus on one thing at a time and avoid prioritizing multiple tasks simultaneously."

Additionally, I began writing here on Dev this month and committed to writing for one hour each morning as this provided an opportunity to develop my writing skills and express my thoughts and ideas.

Juggling Web Development, YouTube (where I've been spending countless hours - almost all my waking hours each day learning editing, crafting catchy thumbnails, and writing compelling descriptions), IG content creation, and my newfound love for writing, all at the same priority level for the past two weeks, has been about as productive as trying to herd cats while juggling chainsaws. By the end of each day, my to-do list is longer than my shadow, and my stress levels are about as high as a rocket ship. It's like trying to drink from a firehose while running a marathon in high heels, all at once!

When I journal at the end of the day, it's like watching a slow-motion car crash. I see my productivity dwindle, and it's so painful to witness.

This made me ineffective and inefficient. Yet I kept telling myself that I can do it. I tell myself that it's possible.

Well this weekend, burnout hit me like a ton of bricks. On Saturday and Sunday, I was completely drained. I couldn't pickup myself to write a single line of code on Vs Code or write a word here on Dev.

Then I realized it was time to hit the reset button. So Yesterday, I gave myself the task to do nothing at all until I diagnose my stupidity and figure out a prescription.

I spent most of the day digging through my commitments, goals and schedules, and then with the help of my thinking hat and journal I developed a new strategy that would allow me to work on all of my goals without compromising my primary objective and ending the year feeling accomplished.

Here is a short breakdown of the plan

Monday to Friday:

Mornings (4:00 AM - 8:00 AM): Prayers, journaling, Workout, and blogging.
Web Development (9:30 AM - 5:30 PM): Web Development - with two hours spaced breaks of 5mins and 30mins in-between.
Hobbies (7:00 PM - 8:30 PM): Learning Content Creation.
Evening (8:30 PM - 10:00 PM): Journaling, planning, and Prepare for workout for the next day and reading.
10 PM: End of Day.

Weekends

Saturdays:

Mornings (4:00 AM - 6:40 AM): Prayers, journaling, and work on blog draft.
7 AM to 10 AM: Workout.
11 AM to 12 PM: Clean up and recover.
1 PM to 6 PM: If Arsenal are not playing in the premier league, code all through, else, schedule my break around their game time for watching and relaxing (on which relaxation is not often the case)🤣.
Hobbies (7:00 PM - 8:30 PM): Learning Content Creation.
Evening (8:30 PM - 10:00 PM): Journaling (Reflect on and Analyze my week - my efforts and results.), planning, and reading.
10 PM: End of Day.

Sundays:

No initial plan. Wake up at 8am. Would mostly plan for the week, less hours of coding, more time for relaxation, watching football matches, reading, post scheduled YouTube content and then working on content creation plan for the week.

Content Creation

YouTube: Post weekly on Sundays and Wednesdays.
Instagram: Post twice weekly on Mondays and Fridays.

This Schedule is flexible, hence, adjustable as I am no robot.

After implementing my new strategy, I noticed a significant improvement. Even though I couldn't write here on Dev yesterday, I was able to regain focus on my primary goal and still had time for other tasks. I went to bed on time and woke up feeling refreshed, ready to tackle the day ahead and now sharing my story with you.

Take Away

As ambitious individuals, we often have a mountain of goals and dreams to chase. However, trying to tackle everything at once often leads to loss of productivity and burnout. The magic happens when we prioritize and focus on one significant task at a time.

As Josh Billings said,

"Be like a postage stamp, stick to one thing until you get there."

This quote perfectly encapsulates the importance of laser focus.

Our brains aren't wired for effective multitasking. Remember that only 2.5% of people can multitask well, and even they lose efficiency when switching between tasks. I am not in that 2.5% and it's most likely that you are not.

Let's ditch the multitasking myth today! Set clear priorities, dedicate your energy, time and resources to your primary goal, and tackle other tasks one by one as you make progress.

This is from Grëg Häris with ❤️🖤.

Happy coding! ❤️🖤.

Mastering Your Life's Narrative: The 4 Pillars of Personal Growth

Greg Haris — Sat, 21 Sep 2024 05:43:32 +0000

Yesterday I learned a powerful insight from Davie Fogarty that there are 4 kinds of stories in our lives:

The Stories of our birth
The Stories other people tells us
The Stories we tell ourselves
Reality - The truth.

1. The stories of our birth

This is the family and community we were born into. We cannot change this story.

2. The stories other people tells us

People's opinions about ourselves and our place in the world. They might be from family members, friends, colleagues, and bosses at work.
We should take these stories with a grain of salt as they are mostly wrong and limiting. But sometimes they might be right. So analyze them and either use them to make strategic and drastic changes in your life and work or disregard them totally.

3. The Stories we tell ourselves

These are the thoughts in our heads and our self-talk. These stories shape our reality. We cannot achieve greatness if we don't tell ourselves empowering stories.

These are our thoughts— questions we ask ourselves and the answers we give to those questions. These stories could be a product of our memories, evaluation of our lives and events, and then shaped by other people's opinions.

Jim Kwik, in his book "Limitless," said our lives and results are the product of our "Dominant Questions"- Thoughts.

We should always analyze these stories as they are most times false and disempowering. And replace them with empowering stories.

4. Reality - The truth

This is just the truth. You accept that and either work towards changing it or make it even better.

You see our lives are shaped by these stories. While we cannot control the first two stories, we have complete power over the third. Our thoughts and beliefs are the driving force behind our actions and, ultimately, our reality.

To improve your life:

Acknowledge the story of your birth and understand its influence.
Listen to others' opinions but don't let them define you. Use them as data points to inform your decisions.
Pay attention to your internal dialogue. Are your thoughts empowering or limiting? Analyze them and use them to make constructive and data driven decisions to shape your reality. Replace negative self-talk with positive affirmations.
Accept reality and take proactive steps to change it if necessary.

Take conscious efforts to pay attention to these stories, and analyze them. Use them as tools to measure and evaluate the direction of your life and then make decisions. These stories when analyzed, provides us with huge amount of data and insights that we can use to drive change and progress in our lives and works as developers and create a more fulfilling and purposeful life.

Have an amazing weekend DEVs.

Happy Coding! 🖤❤️

Cover Photo Credit: By Houcine Ncib on Unsplash

The Ugly Truth: Overcoming the Developer's Dilemma

Greg Haris — Fri, 20 Sep 2024 06:14:07 +0000

I constantly struggle with staying focused and disciplined enough to see my ideas and projects through to completion. This unfulfilled potential has taken a toll on my confidence. Every time I start a new project, a nagging fear whispers that it'll end up unfinished, another casualty in the graveyard of good intentions. This cycle has to stop.

I have so many dreams and goals. I have great aspirations. I have many projects I want to build. But the issue is that I'm easily distracted by new ideas. When a project starts to get tough, I'm tempted to abandon it and chase the next shiny object. I often struggle to stay focused on one and see it through when it gets challenging.

As developers, we have the unique opportunity and skills to turn our thoughts and ideas into reality. This often leads to having numerous projects we want to pursue. We believe that completing and sharing these projects with the world could significantly change our lives, yet many of us abandon them.

The challenge most of us have is that we:

nurse the plan in our head and then do nothing about it. It's just an idea. Then we forget about it. Or
write it down and then that's the end. Or
write it down, make a plan, create a private repo on GitHub for it and then, that's the end. Or
write it down, make a plan, create a repo on GitHub for it, work on it for a couple of days but then abandon it for the next idea.

Here are some of the reasons we abandon projects:

we lose interest in it;
We think its too difficult for us;
We believe we don't have the resources or skill to build it;
We tell ourselves that we are too busy to build it.

All the tools and resources we use today as developers are the products and creations of people who were courageous and disciplined to stick to their ideas even when it got difficult until completion. They persevered despite the fact that they don't have the skills or resources, and they figured out ways to still do it. They took continuous action, and figured out ways commit to it each day even when they were so busy and worked long hours on their day jobs.

Every great software started from an idea, a plan, then little actions taken a day at a time.

This is me talking more to myself than to anyone here.

Imagine if the developers of this incredible Dev.to community had slept on and abandoned their idea for this community, we wouldn't have this amazing platform where we learn and share ideas and resources.

Imagine the positive impact your idea, software, or tool could have if you see it through. Consider how it could transform your life and career.

We developers are creators, so let's create. Let's turn our ideas to reality.

We developers are builders, so let's build. Let's build the life and dreams we hope for.

We developers have the power to shape the world. Let's use it.

I believe so much in the words of Steve Jobs:

The people who are crazy enough to think they can change the world are the ones who do.

If you choose not to prioritize your dreams and fail to be disciplined and focused,

you will spend your life, time, energy, skills, and resources working for those who do;
you will work on projects that have no meaning to you;
you will work with people you have no desire to work with;
when you are no longer needed and deemed irrelevant or when they are tired of having you around, you will get laid off and replaced with either someone else or AI;
then you will start the job hunting process anew;
and then you will die with your dreams.

Therefore, I encourage you to revisit that idea, develop a concrete plan, and commit to working on it. Persist through challenges and find ways to overcome obstacles. Build the life you envision. Don't settle for working on someone else's dreams.

Build your own dreams or work on someone else's. The choice is yours.

I faith in your ideas and believe you can figure out a way to accomplish it. So do it.

Happy Coding DEVs ❤️🖤!

Navigating the Development Landscape: Why KPIs Are Your North Star

Greg Haris — Thu, 19 Sep 2024 05:20:00 +0000

In our previous post on strategic planning, we mentioned the importance of setting KPIs (Key Performance Indicators). These measurable goals are crucial for tracking progress and ensuring project success.

KPIs are quantifiable metrics that help us gauge the pace of our progress. They act as road signs, guiding us towards our project destination. By setting and monitoring KPIs, we can evaluate performance, identify areas for improvement, and ultimately deliver high-quality softwares.

Why are KPIs important for aspiring developers?

Alignment with goals: They provide quantifiable data to track, measure, and analyze our daily performance.
Performance measurement: How fast or slow are you going? By tracking KPIs, we can identify areas where we can improve our strategies and processes.
Continuous improvement: By tracking KPIs, we can identify areas where they can improve our strategies and processes.
Motivation: Setting achievable KPIs can motivate you to strive for excellence.

Setting Effective KPIs

When setting KPIs, consider the following questions:

Are they Relevant? Ensure that the KPIs are directly related to your project's goals and objectives.
Are they Measurable? It should be quantifiable and easy to track.
Are these goals challenging but achievable within a reasonable timeframe? Set realistic goals that are challenging but achievable. It would be counterproductive to set unrealistic goals.
Are they Time-bound? Have you established specific deadlines or milestones for achieving these KPIs? Establish a timeframe for achieving them.

Examples of KPIs:

Here are some examples of KPIs that can be used to measure performance:

Code quality metrics: Code coverage, cyclomatic complexity, and bug rate.
Productivity metrics: Lines of code written, number of completed tasks, and velocity.
Time management: Adherence to deadlines, time spent on tasks, and efficiency.
Collaboration: Number of code reviews, participation in team meetings, and contributions to knowledge sharing.
Customer satisfaction: User feedback, support ticket resolution time, and customer satisfaction ratings.

Using KPIs to Drive Improvement

In this post here, I shared how setting and tracking KPIs enabled me to quit my job and focus on self-improvement. Learning to set, track, measure, and analyze your efforts using KPIs is a powerful way to achieve your desired goals.

Why?

Identifying bottlenecks: Analyze KPIs to identify areas where productivity is hindered.
Providing feedback: Use KPIs to provide constructive feedback to developers.
Recognizing achievements: Reward yourself when you consistently meet or exceed your KPIs.
Making data-driven decisions: Use KPI data to inform project decisions and resource allocation.

Planning and starting a project without KPIs is like embarking on a road trip without a map or knowing your destination. In the dynamic world of software development, KPIs are more than just metrics; they're your guiding stars. By setting, tracking, and analyzing them, you're not only measuring progress but also shaping your future.

Any strategic plan will be ineffective if you don't implement these KPIs.

Are you ready to elevate your development journey? Start setting KPIs today and experience the transformative power of data-driven decision-making.

Don't forget to share your thoughts and experiences in the comments.

Happy coding ❤️!

Photo credit: Cover photo by Lohman Company

DEV Community: Greg Haris

I learnt it the hard way

Lesson 1: Ideas Don’t Wait

Lesson 2: Pivoting is Not Failure

Lesson 3: Action Beats Perfection

What This Means for Me Now

Now What?

Building a Professional AI Chatbot with React, TypeScript, and Groq AI API

Prerequisites

Installation

Usage

Scripts

Dependencies

Contributing

Try it out

Embed Short Videos in your Dev Posts (Simple Guide)

Here's a simple, five-step process to embed short videos in your Dev post:

Step 1: Trim the Video to 30 Seconds or Less

Step 2: Convert the Video to GIF

Step 3: Upload the GIF to Giphy

Step 4: Share and Copy the Link

Step 5: Embed the GIF in Your Post

Build Your First AI Chatbot: A React and TypeScript Project with Groq Cloud API

TL;DR

Prerequisite Knowledge

Tools & Set up

Creating a React App

Now run:

Next step- Building the components:

Let's start building

AppName.tsx

Headers.tsx

searchBar.tsx

Button.tsx

Chat.tsx

Now let's add these components to our App

App.tsx

Next step, we set the 'send' button to print the input Value in the Chat component:

Result:

Break down of what we did:

Moving on!!!

Now we get to the most exciting part of the project. Can you guess the next step?

Yes!! You are correct guys. Next step is to grap our 'Groq Cloud' API Key and then connect the API to our app.

Are you Ready Guys?

What is Groq Cloud?

Why Use Groq API For This Project?

Let's get back to business.

Next, let's grab your Groq API key.

If you have done that, now let's integrate that into our APP

Step 1: Install the Groq SDK

Step 2: Step 2: Set Up Environment Variables

Step 3: Initialize the Groq Client

Step 4: Define the State

Step 5: Handle Input Change

Step 6: Integrate the API Request and Response to the Send Button

Step 7: Render the UI

Here's is our updated App.tsx with the Groq API integration:

Next Phase

Save App State:

Step 1: Define the State Structure

Step 2: Initialize State with Local Storage

Step 3: Use the useEffect hook to save the state to local storage whenever it changes.

Step 4: Handle Input Change

Step 5: Update the handleSend function

Add a clear button to clear the chat and the state

Step 1: handleClearChat function:

Step 2: Render the UI:

Final Features.

Styling.

Finally Guys

Step 1: Update AppState interface

Step 2: Update our state initialization

Step 3: Check Input Value

step 4: Update handleSend function

Step 5: Update the Clear chat button function.

Step 6: Render the UI

Now Let's bring it all together:

Congratulations

Assignment

Conclusion

Step 6: Integrate the API Request and Response to the `Send` Button

Here's is our updated `App.tsx` with the Groq API integration:

Step 5: Update the `handleSend` function

Step 1: `handleClearChat` function:

Step 1: Update `AppState` interface

step 4: Update `handleSend` function

Step 5: Update the `Clear chat` button function.