DEV Community: Angel Serrano

Managing Software Complexity: Why It Matters More Than You Think

Angel Serrano — Tue, 15 Jul 2025 02:02:14 +0000

One of the key concepts we need to pay close attention to is complexity.

Have you ever worked on a codebase so complex that the entire team feared touching it?

For some authors, software development is an exercise in experimentation and discovery, always aimed at receiving feedback from clients and users.

Learning constantly and learning from feedback is the heart of software development; therefore, it is key for developers to adapt to new technologies and maintain their value over time in the market.

So, as software engineers, our objective is to become experts in managing complexity by applying concepts like

Modularity
Separations of concerns
Abstractions
Loose coupling

Out of control of complexity

When we lose sight of key principles like modularity or abstraction, complexity spirals out of control. This leads to:

Out of control tech debt
Bugs on development and production
The organization fears making changes to the project

The scariest consequence, in my experience, is when the team becomes afraid to change anything. That’s when progress dies, because it is the combination of the other two concepts plus other specific details like poor leadership, organization, and lack of quality values from the team, which, of course, always depend on the situation.

I’ve seen this firsthand.

At one company, I worked on an Angular 8 project that had slowly grown into a tangled mess. Bugs were everywhere. Refactoring took weeks. Eventually, leadership decided to throw it all away and migrate to React, claiming Angular was “too complex.”

But was the framework really the issue? Or was the real problem the lack of solid architectural foundations from the beginning?

Tight deadlines and poor architecture can silently harm software projects. This results in weak abstractions and neglected principles.

Conclusion

The key to managing software complexity is having a well-planned architecture from the start. Without it, bugs multiply, teams stall, and companies may end up rewriting entire systems from scratch.

Have you faced a similar situation? Share your story in the comments what went wrong, and what did you learn?

In the next post, I’ll break down key principles like modularity and separation of concerns, and how applying them saved me in real-world projects.

Thanks for reading!

Build a local chatbot with React, openAI, and indexed DB (using Dexie.js)

Angel Serrano — Mon, 23 Jun 2025 22:45:37 +0000

Everybody wants to use AI, and I'm sure many clients will ask you to integrate a chat or agent into their products.

Quick overview

With the rise of large language models (LLMs) like OpenAI, Gemini, and DeepSeek, many companies are looking to integrate chatbots into their apps not just as support tools, but as intelligent advisors or agents.

These chatbots can offer personalized, value-added services by giving the LLM context from the app itself, making conversations more relevant and useful to the user.

In this post, we will create a chatbot using React and IndexedDB. We will use a wrapper called Dexie.js to help us implement our local database for storing information persistently..

However, before we proceed, we need to understand what IndexedDB is.

IndexedDB db is basically a low-level database api client to store large volumes of data on the browser, including files and blogs (images)

One of the main benefits is that it has non-blocking operation, all transactions are async compared with localStorage

Here is a comparison table between using localStorage and IndexedDB.

Feature	LocalStorage	IndexedDB
Data Type	Strings	Objects (JSON, files, blobs)
Capacity	~5MB	Hundreds of MB or more, potentially up to 50% of disk space
API Complexity	Simple (synchronous, few methods)	Complex (asynchronous, transactions, multiple objects)

Dexie.js

It is a JavaScript library which, at the same time, is a wrapper around IndexedDB the main benefit of using it is that it provides a practical and more intuitive api, and it abstracts a lot of the complexity of the native IndexedDB API, making async operations and error handling easier

Stack overview of the project

React
open Ai library
dexie.js
Vite + tailwind

This is the app we will build on this post

As we can see, all the questions and answers are stored in the browser using IndexedDB.

We will also need to create a .env file in our app to set our OpenAPI key.

VITE_OPENAI_API_KEY='your open api key'

Remember to add this file to your .gitignore file in order not to push this code to the repo

Never expose your OpenAI key in production builds. Utilize environment variables.

Setting up our local database

// db.ts
import Dexie, { type EntityTable } from 'dexie';

export interface ChatMessage {
  id?: number;
  question: string;
  answer: string;
  createdAt?: Date;
}

const db = new Dexie('chatDatabase') as Dexie & {
  chatMessages: EntityTable<ChatMessage, 'id'>; // type and primary key
};

db.version(1).stores({
  // ++ means autoincrement primary key
  chatMessages: '++id, question, answer, createdAt',
});

export { db };

Now we will proceed with the app code.

We will need some variables to save messages that come from our db, the questions, search and isLoading state.


  const [messages, setMessages] = useState<ChatMessage[]>([]);
  const [question, setQuestion] = useState('');
  const [search, setSearch] = useState('');
  const [isLoading, setIsLoading] = useState(false);

We define a function called getMessages to fetch all saved chat messages from the local IndexedDB using Dexie. Then, we call this function inside a useEffect to load the messages once the component mounts

  const getMessages = async () => {
      const messages = await db.chatMessages.toArray(); // fetch all messages from the "chatMessages" table
    setMessages(messages); // store them in local state to render
  };


  useEffect(() => {
    getMessages(); // runs once when the component is mounted
  }, []);

This is the code to render the app

  return (
    <div className="container mx-auto">
      <h1 className="text-3xl font-bold text-center mt-5">Open AI chat</h1>
      <div className="flex flex-col items-center justify-center h-screen">
        <div className="w-full max-w-md">
          <input
            type="text"
            placeholder="find a question"
            className="w-full p-2 border border-gray-300 rounded-md mt-2"
            onChange={(e) => setSearch(e.target.value)}
          />
          <div className="flex flex-col h-[60vh] overflow-y-auto bg-gray-100 p-2 mt-2 rounded-md">
            {renderMessages()}
          </div>
          <div className="mb-4">
            <input
              type="text"
              placeholder="Enter your message"
              className="w-full p-2 border border-gray-300 rounded-md mt-2"
              onChange={(e) => setQuestion(e.target.value)}
            />
            <button
              disabled={isLoading || !question}
              onClick={handleSend}
              className="w-full bg-blue-500 text-white p-2 rounded-md mt-2"
            >
              {isLoading ? 'Loading...' : 'Send'}
            </button>
          </div>
        </div>
      </div>
    </div>
  );

Inside this code we have a function called renderMessages

The renderMessage function displays messages when we type a term in the search input or when messages come from the getMessages function, as shown in the following code block.

 const renderMessages = () => {
    const messagesToShow = search ? filteredMessages : messages;

    if (messagesToShow.length === 0) {
      return (
        <div className="text-center text-gray-500 mt-4">
          {search
            ? 'No messages found matching your search.'
            : 'No messages yet. Start a conversation!'}
        </div>
      );
    }

    return messagesToShow.map((message) => (
      <MessageItem
        key={message.id}
        message={message}
        showDelete={!search} // Only show delete button for regular view, not search results
      />
    ));
  };

This is the code for MessageItem component

  const MessageItem = ({
    message,
    showDelete = true,
  }: {
    message: ChatMessage;
    showDelete?: boolean;
  }) => (
    <div className="mt-2 flex flex-col p-2 bg-gray-200 rounded-md">
      <div className="flex justify-between items-center">
        <p className="text-left font-bold">{message.question}</p>
        {showDelete && (
          <FaTrash
            className="text-red-500 cursor-pointer"
            onClick={() => handleDelete(message.id)}
          />
        )}
      </div>
      <p className="text-left">{message.answer}</p>
    </div>
  );

This is the handleSend function. It retrieves the question response from the OpenAI API. For more details, check the OpenAI documentation.

We use the safeAwait function for error handling. If you want to learn more, read my other post where I explain how it works:

https://dev.to/angeldavid218/stop-repeating-trycatch-this-typescript-wrapper-makes-error-handling-easy-3eep

  const handleSend = async () => {
    setIsLoading(true);
    const [response, err] = await safeAwait(
      fetch('https://api.openai.com/v1/chat/completions', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${import.meta.env.VITE_OPENAI_API_KEY}`,
        },
        body: JSON.stringify({
          model: 'o4-mini',
          messages: [{ role: 'user', content: question }],
        }),
      })
    );
    if (err || !response?.ok) {
      console.error(err);
      return;
    }
    const data = await response?.json();
    // once get the response it gets saved to our local db 
    await addMessage(question, data.choices[0].message.content || '');
    setIsLoading(false);
    setQuestion('');
  };

This is the addMessage function

  const addMessage = async (question: string, answer: string) => {
    const [, err] = await safeAwait(
      db.chatMessages.add({
        question,
        answer,
        createdAt: new Date(),
      })
    );
    if (err) {
      console.error(err);
      return;
    }
    getMessages();
  };

Function to delete a question

  const handleDelete = async (id: number | undefined) => {
    if (id === undefined) {
      console.error('Cannot delete message: ID is undefined');
      return;
    }

    const [, err] = await safeAwait(db.chatMessages.delete(id));
    if (err) {
      console.error('Failed to delete message:', err);
      // You could add user feedback here, like a toast notification
      return;
    }

    // Refresh the messages list after successful deletion
    await getMessages();
  };

And when the user is searching for a specific question

  const filteredMessages = messages.filter((message) =>
    message.question.toLowerCase().includes(search.toLowerCase())
  );

This is the complete app code

import { useEffect, useState } from 'react';
import { db, type ChatMessage } from './db';
import { safeAwait } from './utils/safeAwait';
import { FaTrash } from 'react-icons/fa';

function App() {
  const [messages, setMessages] = useState<ChatMessage[]>([]);
  const [question, setQuestion] = useState('');
  const [search, setSearch] = useState('');
  const [isLoading, setIsLoading] = useState(false);

  const getMessages = async () => {
    const messages = await db.chatMessages.toArray();
    setMessages(messages);
  };

  const addMessage = async (question: string, answer: string) => {
    const [, err] = await safeAwait(
      db.chatMessages.add({
        question,
        answer,
        createdAt: new Date(),
      })
    );
    if (err) {
      console.error(err);
      return;
    }
    getMessages();
  };

  const handleSend = async () => {
    setIsLoading(true);
    const [response, err] = await safeAwait(
      fetch('https://api.openai.com/v1/chat/completions', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${import.meta.env.VITE_OPENAI_API_KEY}`,
        },
        body: JSON.stringify({
          model: 'o4-mini',
          messages: [{ role: 'user', content: question }],
        }),
      })
    );
    if (err || !response?.ok) {
      console.error(err);
      return;
    }
    const data = await response?.json();
    await addMessage(question, data.choices[0].message.content || '');
    setIsLoading(false);
    setQuestion('');
  };

  const handleDelete = async (id: number | undefined) => {
    if (id === undefined) {
      console.error('Cannot delete message: ID is undefined');
      return;
    }

    const [, err] = await safeAwait(db.chatMessages.delete(id));
    if (err) {
      console.error('Failed to delete message:', err);
      // You could add user feedback here, like a toast notification
      return;
    }

    // Refresh the messages list after successful deletion
    await getMessages();
  };

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

  const filteredMessages = messages.filter((message) =>
    message.question.toLowerCase().includes(search.toLowerCase())
  );

  const MessageItem = ({
    message,
    showDelete = true,
  }: {
    message: ChatMessage;
    showDelete?: boolean;
  }) => (
    <div className="mt-2 flex flex-col p-2 bg-gray-200 rounded-md">
      <div className="flex justify-between items-center">
        <p className="text-left font-bold">{message.question}</p>
        {showDelete && (
          <FaTrash
            className="text-red-500 cursor-pointer"
            onClick={() => handleDelete(message.id)}
          />
        )}
      </div>
      <p className="text-left">{message.answer}</p>
    </div>
  );

  const renderMessages = () => {
    const messagesToShow = search ? filteredMessages : messages;

    if (messagesToShow.length === 0) {
      return (
        <div className="text-center text-gray-500 mt-4">
          {search
            ? 'No messages found matching your search.'
            : 'No messages yet. Start a conversation!'}
        </div>
      );
    }

    return messagesToShow.map((message) => (
      <MessageItem
        key={message.id}
        message={message}
        showDelete={!search} // Only show delete button for regular view, not search results
      />
    ));
  };

  return (
    <div className="container mx-auto">
      <h1 className="text-3xl font-bold text-center mt-5">Open AI chat</h1>
      <div className="flex flex-col items-center justify-center h-screen">
        <div className="w-full max-w-md">
          <input
            type="text"
            placeholder="find a question"
            className="w-full p-2 border border-gray-300 rounded-md mt-2"
            onChange={(e) => setSearch(e.target.value)}
          />
          <div className="flex flex-col h-[60vh] overflow-y-auto bg-gray-100 p-2 mt-2 rounded-md">
            {renderMessages()}
          </div>
          <div className="mb-4">
            <input
              type="text"
              placeholder="Enter your message"
              className="w-full p-2 border border-gray-300 rounded-md mt-2"
              onChange={(e) => setQuestion(e.target.value)}
            />
            <button
              disabled={isLoading || !question}
              onClick={handleSend}
              className="w-full bg-blue-500 text-white p-2 rounded-md mt-2"
            >
              {isLoading ? 'Loading...' : 'Send'}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

Conclusion

With this setup, you have a solid starting point to create your chatbot. You now have a React app that:

Connects to the OpenAI API
Stores chat history locally using IndexedDB (via Dexie.js)
Supports search and deletion for better UX
Uses clean async error handling with a reusable wrapper

Want to extend it? try:

Adding chat roles (system/user/assistant)
Exporting chat history

Check out the full code on GitHub

https://github.com/angeldavid218/ai-chat

Thanks for reading, and see you in the next one!

Stop Repeating Try/Catch: This TypeScript Wrapper Makes Error Handling Easy

Angel Serrano — Mon, 16 Jun 2025 21:28:20 +0000

I bet you have this code in your project code base

async function getUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();
    console.log("User data:", data);
    return data;

  } catch (error) {
    console.error("Failed to fetch user data:", error);
    // Handle or rethrow
  }
}

Or cases like this one

import { MongoClient } from "mongodb";

async function connectToDb() {
  const uri = "mongodb://localhost:27017";
  const client = new MongoClient(uri);

  try {
    await client.connect();
    console.log("Connected to MongoDB!");
    const db = client.db("myApp");
    return db;
  } catch (error) {
    console.error("MongoDB connection failed:", error);
  }
}

What similarities do these two pieces of code share?

Both use promises
Both use error handling using try/catch

What is the problem here?
The problem with this code is that it is very repetitive and verbose. It adds more lines of code to our codebase, and we are essentially repeating the same process over and over again.

Therefore, one solution for this case is to create a wrapper function for the try/catch code.

For the new ones

A wrapper function basically is a function that calls another function. It can be used to add more functionality to the existing function without modifying it, for example, to handle errors or logging purposes.

Solution

The wrapper function will be like this

export const safeAwait = async <T>(
  promise: Promise<T>
): Promise<[T | null, Error | null]> => {
  try {
    const data = await promise;
    return [data, null];
  } catch (error) {
    return [null, error instanceof Error ? error : new Error(String(error))];
  }
};

Let’s break down this code and describe its typing

export const safeAwait = async <T>( promise: Promise<T> ): Promise<[T | null, Error | null]>

This is a function that accepts a promise of whatever type and returns a tuple of [whatever type or null, Error type or null]

Then inside we have the try/catch block where we await the promise execution, and if everything goes well, we return a tuple with the [data, null]

In case an error occurs, we return the same tuple now with an error instance [null, error]

try { 
  const data = await promise; 
  return [data, null]; 
} catch (error) { 
  return [null, error instanceof Error ? error : new Error(String(error))]; 
}

Here we have an implementation of our function wrapper

import { safeAwait } from './safeAwait';

interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

const fetchPosts = async (): Promise<Post[]> => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  return response.json();
};

const fetchData = async () => {
  const [data, error] = await safeAwait(fetchPosts());
 // check if error is not null
  if (error) {
    console.error('Error fetching data', error);
    return;
  }

  return data;
};

fetchData();

Benefits

The main benefits of having this wrapper function are:

Less boilerplate
Explicit error path
Easier to compose and test
Code is more readable

This pattern helped me write cleaner and more maintainable async code, and I hope it helps you too.

Check out the full code on github
https://github.com/angeldavid218/trycatch-wrapper

See you in the next one!