My Blog

Hi, I'm Jaeden and welcome to my Blog and Portfolio 👋.

I am a senior computer science student, software developer, and technical writer. I explore the latest web development, focusing on React, a framework transforming modern web applications. My content goes beyond step-by-step guides to share practical insights and real-world lessons.

By emphasizing clean code, robust architecture, and maintainable design patterns, I aim to help developers build scalable and efficient applications. 


Embracing Modern Web Development

React site for SuitedRanges.com You can check out Suited Ranges here: https://suitedranges.com/

An AI emergency assistant that analyzes text and image descriptions  developed at ConUHacks IX

## Inspiration

The inspiration behind **ResQLens** came from the need to improve emergency response times, especially in high-stress situations where users might struggle to call for help manually. By leveraging AI and hands-free technology, we sought to create a faster and more reliable way to communicate emergencies.

## What it does

**ResQLens** enables users to contact emergency services quickly through Metaglass. Users can send distress signals using voice commands or by taking pictures, which are then processed by AI to generate a clear and concise emergency report. This report is sent via WhatsApp to a backend server, which then relays the message to emergency responders.

## How we built it

*   **PHP** was used to develop the backend server that handles WhatsApp messages.

*   **WhatsApp API** was integrated to facilitate message relays.

*   **ChatGPT** was used for AI-powered summarization of emergency messages.

*   **Metaglass** served as the primary input device for capturing user commands and images.

*   The system was designed to work around Meta's private SDK by leveraging WhatsApp as a communication bridge.

## Challenges we ran into

*   **Lack of an official SDK for Metaglass**, which forced us to find a creative workaround using WhatsApp.

*   **Ensuring message delivery speed** and reliability to make the emergency system effective.

*   **Accurate AI summarization**, ensuring the messages sent to emergency responders were clear and useful.

*   **Integrating AI and WhatsApp** in a seamless and efficient way.

## Accomplishments that we're proud of

*   Successfully built a working prototype despite **Metaglass SDK limitations**.

*   Leveraged **AI to summarize emergencies**, reducing human error and improving response clarity.

*   Found a **practical way to use WhatsApp as a bridge** for emergency communication.

*   Developed a **scalable and adaptable** emergency response solution.

## What we learned

*   **Creative problem-solving** is key when working with hardware that lacks an official SDK.

*   **WhatsApp Business API** can be effectively used for emergency communication.

*   **AI can play a crucial role in emergency response**, making messages clearer and more actionable.

*   **Working as a team** helped us overcome multiple challenges and push forward to completion.

## What's next for ResQLens

*   **Expanding platform compatibility** beyond Metaglass.

*   **Direct integration with emergency services** for faster response times.

*   **Improving AI summarization** for more accurate and useful emergency reports.

*   **Developing an alternative SDK-independent solution** for better Metaglass integration.

*   **Exploring other AI-driven enhancements**, such as predictive emergency assistance.

## Built With

*   chatgpt

*   metaglass

*   openai

*   [php](https://devpost.com/software/built-with/php)

## Try it out

*   [ GitHub Repo](https://github.com/JaedenRotondo/ConUHacksIX)



ResQLens

Suited Web

Built a chatbot trained to explain what AI is to university-educated students.

ChatBot

Projects

**2025 marks a pivotal year for artificial intelligence.** With advancements accelerating at an unprecedented pace, we stand on the brink of an AI revolution that promises to reshape industries, redefine human-machine interaction, and push the boundaries of what technology can achieve. To truly understand where AI is right now, it's important to look into the past. Especially if we are to make conclusions about the future of AI, its important to look at the trials and tribulations the field has dealt with through history. 

AI researchers have made numerous achievements in the past couple of decades. In 1972, "MYCIN", an expert engine was developed to identify bacteria causing blood infections and to recommend antibiotic treatments. In 1997, IBM’s well-known "Deep Blue" beat Gary Kasparov and became the first computer to beat a chess champion in a match under tournament conditions. At the same time, various speech recognition models such as HEARSAY were being
developed. What all these artificial intelligence systems have in common, however, is that they are rarely considered intelligent. Deep Blue was critiqued as beating Kasparov merely because it could brute force a solution. “Autocorrect is not considered \* intelligent\* because it merely scans a dictionary and matches to the closest known word.” 

In the case of the diagnostic model MYCIN, the same
applies:

MYCIN was described as an Artificial Intelligence (Proc Annu Symp Comput Appl Med Care. 1977 Oct 5:66–69.). As an LISP program, it was designed to be a medical consultant, to tend to the fact that the medical industry is in dire need of computational aid. Doctors often play the role of sole decision-makers and face immense time constraints in their work. As a medical consultant, it was able to diagnose issues in blood samples with a certainty factor to help aid medical professionals. Take a look at an example rule, one of the 600 this program contains:

```
(defrule 52
if (site culture is blood)
(gram organism is neg)
(morphology organism is rod)
(burn patient is serious)
then .4
(identity organism is pseudomonas))
Rule 52:
If
```

```
THE SITE OF THE CULTURE IS BLOOD
```

```
THE GRAM OF THE ORGANISM IS NEG
```

```
THE MORPHOLOGY OF THE ORGANISM IS ROD
```

```
THE BURN OF THE PATIENT IS SERIOUS
Then there is weakly suggestive evidence (0.4) that
```

```
THE IDENTITY OF THE ORGANISM IS PSEUDOMONAS
```

Rule 52 is simple and makes it clear what MYCIN is doing when it identifies an organism such as pseudomonas.

The AI Effect states that when a model's inner workings are understood when it becomes successful in its goals, it no longer is AI. Rather, it is merely a computer program. In the case of MYCIN, knowing the exact rules the computer used to come to its conclusion makes it seem like a computer program and not AI anymore.

## Fast Forward to Gemini

A black box AI is an AI model where the inner workings of its computational processes are unknown. You feed the program some information, and it will give you an output. How it came to that output is out of the reach of even those who made it. Most of today’s popular AI falls under this category and it’s not without its failings. From an ethical perspective, not knowing how the model reached its conclusion makes it difficult for the public to accept it – especially in cases as important as patient care.

Fast forward to 2024, new and improved diagnostics models such as Med Gemini 2.0 Flash exist. Take a look at its ability to read a CT Abdomen scan and diagnose pancreatitis:

<https://x.com/i/status/1867329568404652253>

At this point, Gemini is considered an AI. Its ability to read the scan and diagnose is magnificent, but in my opinion, what truly makes it part of the AI category is that it is not truly understood yet. Since it uses machine learning, specifically a neural network, it is impossible to figure out why it works the way it does.

## Complications

The AI Effect changes public opinion to see the previous revolutionary advances of AI as "just software" while continually overhyping and inflating what will come of the current breakthroughs. Public opinion of AI continues to be inflated with overpromises and will only remain focused on what has yet to be solved. With time, AI research will underdeliver and fall out of the public's high reputation. The cycle of hype within AI history is well documented. For the past 60 years, the periods of booms and winters follow like a recipe. The hype cannot be sustained forever, then comes the disappointment, media coverage falls, businesses cut funding, and research dies.

Jaeden Rotondo


What makes AI, "Intelligent"?

# Beginner's Guide to IndexedDB in React

IndexedDB is a low-level API for storing significant amounts of structured data in the browser. It's particularly useful for web applications that need to work offline or cache data locally. In this guide, we'll explore how to use IndexedDB in a React application with an example.

## What is IndexedDB?

IndexedDB is a client-side storage solution that allows developers to store data as key-value pairs. It supports advanced features such as:

*   Transactions.

*   Queries using indexes.

*   Large data storage.

*   Offline data persistence.

However, IndexedDB's API can be a bit verbose and asynchronous, so using a wrapper library like [idb](https://www.npmjs.com/package/idb) can simplify working with it.

## Why Use IndexedDB?

*   **Offline Support**: Store data locally for offline access.

*   **High Capacity**: Handle large datasets compared to localStorage.

*   **Structured Data**: Store and query structured data efficiently.

## Setting Up IndexedDB in a React App

### Step 1: Install the `idb` Library

To simplify the use of IndexedDB, we'll use the `idb` library. Install it with:

```lang-bash
npm install idb

```

### Step 2: Create a Utility for IndexedDB

Let's create a helper file to manage our IndexedDB interactions.

#### `indexedDBUtils.js`

```
import { openDB } from 'idb';

const DATABASE_NAME = 'my-react-db';
const STORE_NAME = 'my-store';

// Initialize the database
export async function initializeDB() {
  return openDB(DATABASE_NAME, 1, {
    upgrade(db) {
      if (!db.objectStoreNames.contains(STORE_NAME)) {
        db.createObjectStore(STORE_NAME, { keyPath: 'id', autoIncrement: true });
      }
    },
  });
}

// Add data to the store
export async function addData(db, value) {
  const tx = db.transaction(STORE_NAME, 'readwrite');
  const store = tx.objectStore(STORE_NAME);
  await store.add(value);
  await tx.done;
}

// Get all data from the store
export async function getAllData(db) {
  const tx = db.transaction(STORE_NAME, 'readonly');
  const store = tx.objectStore(STORE_NAME);
  return store.getAll();
}

// Delete data by ID
export async function deleteData(db, id) {
  const tx = db.transaction(STORE_NAME, 'readwrite');
  const store = tx.objectStore(STORE_NAME);
  await store.delete(id);
  await tx.done;
}

```

### Step 3: Use IndexedDB in React

Now, we'll create a React component to interact with our IndexedDB.

#### `App.js`

```
import React, { useEffect, useState } from 'react';
import { initializeDB, addData, getAllData, deleteData } from './indexedDBUtils';

const App = () => {
  const [db, setDb] = useState(null);
  const [items, setItems] = useState([]);
  const [newItem, setNewItem] = useState('');

  useEffect(() => {
    // Initialize the database
    const setupDB = async () => {
      const dbInstance = await initializeDB();
      setDb(dbInstance);
      const storedItems = await getAllData(dbInstance);
      setItems(storedItems);
    };
    setupDB();
  }, []);

  const handleAddItem = async () => {
    if (!db || !newItem) return;
    await addData(db, { value: newItem });
    const updatedItems = await getAllData(db);
    setItems(updatedItems);
    setNewItem('');
  };

  const handleDeleteItem = async (id) => {
    if (!db) return;
    await deleteData(db, id);
    const updatedItems = await getAllData(db);
    setItems(updatedItems);
  };

  return (
    <div style={{ padding: '20px' }}>
      <h1>React + IndexedDB Example</h1>
      <input
        type="text"
        value={newItem}
        onChange={(e) => setNewItem(e.target.value)}
        placeholder="Enter item"
      />
      <button onClick={handleAddItem}>Add Item</button>
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            {item.value}
            <button onClick={() => handleDeleteItem(item.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default App;

```

### Step 4: Run the Application

Start your React app:

```
npm start

```

Now, you can:

*   Add new items to IndexedDB.

*   View all stored items.

*   Delete items by their ID.

## Key Takeaways

*   **Async Nature**: IndexedDB operations are asynchronous.

*   **Persistence**: Data stored in IndexedDB remains even after the browser is closed.

*   **Structured Storage**: Use object stores for organizing data.

By using IndexedDB and the `idb` library, you can efficiently manage offline data storage in your React applications. Experiment with this example and expand it to fit your needs!


Introduction to IndexDB

Stay up-to-date with my words ✍️

\# Mastering TanStack Query for API Requests in TypeScript

TanStack Query (formerly React Query) is a powerful library that simplifies data fetching, caching, synchronization, and state management in React applications. Its seamless integration with TypeScript makes it an essential tool for building robust and type-safe applications.

In this article, we'll explore how to use TanStack Query to fetch data from an API in TypeScript, ensuring type safety and optimal performance.

\## Why Use TanStack Query?

Traditional data fetching in React often involves manually managing \`useState\`, \`useEffect\`, and loading states. TanStack Query abstracts these complexities, providing:

\- \*\*Automatic Caching\*\*: Minimize redundant API calls.
\- \*\*Background Updates\*\*: Keep data fresh without reloading.
\- \*\*Error Handling\*\*: Centralized and consistent error management.
\- \*\*TypeScript Support\*\*: Ensure type safety throughout the data lifecycle.

\## Installation

To get started, install the required dependencies:

\`\`\`bash
npm install @tanstack/react-query
npm install @tanstack/react-query-devtools


## Setting Up TanStack Query

First, wrap your application in the `QueryClientProvider` to provide a `QueryClient` instance:

```
import React from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

const App = () => (
  <QueryClientProvider client={queryClient}>
    {/* Your App Components */}
  </QueryClientProvider>
);

export default App;

```

You can also include the React Query Devtools for debugging:

```
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

<QueryClientProvider client={queryClient}>
  {/* Your App Components */}
  <ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>;

```

## Fetching Data with TypeScript

### Step 1: Define the API Response Type

Assume you're fetching data from a user API. Define the expected response type:

```
interface User {
  id: number;
  name: string;
  email: string;
}

```

### Step 2: Create a Fetch Function

Write a function to fetch data from the API:

```
const fetchUsers = async (): Promise<User[]> => {
  const response = await fetch("https://api.example.com/users");
  if (!response.ok) {
    throw new Error("Failed to fetch users");
  }
  return response.json();
};

```

### Step 3: Use `useQuery` to Fetch Data

Now, use the `useQuery` hook to fetch and cache the data:

```
import { useQuery } from "@tanstack/react-query";

const UsersList = () => {
  const { data, isLoading, error } = useQuery<User[]>({
    queryKey: ["users"],
    queryFn: fetchUsers,
  });

  if (isLoading) return <p>Loading...</p>;
  if (error instanceof Error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data?.map((user) => (
        <li key={user.id}>
          {user.name} ({user.email})
        </li>
      ))}
    </ul>
  );
};

export default UsersList;

```

### Explanation

1.  **`queryKey`**: Uniquely identifies the query. Use it to cache and retrieve data.

2.  **`queryFn`**: The function that fetches data.

3.  **`isLoading`**: Indicates the loading state.

4.  **`error`**: Handles errors gracefully.

## Mutations with TanStack Query

For operations like creating or updating data, use `useMutation`. Here's an example of creating a new user:

```
import { useMutation, useQueryClient } from "@tanstack/react-query";

const createUser = async (newUser: Omit<User, "id">): Promise<User> => {
  const response = await fetch("https://api.example.com/users", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(newUser),
  });
  if (!response.ok) {
    throw new Error("Failed to create user");
  }
  return response.json();
};

const AddUser = () => {
  const queryClient = useQueryClient();
  const mutation = useMutation(createUser, {
    onSuccess: () => {
      queryClient.invalidateQueries(["users"]); // Refresh user list
    },
  });

  const handleAddUser = () => {
    mutation.mutate({ name: "John Doe", email: "john@example.com" });
  };

  return (
    <button onClick={handleAddUser} disabled={mutation.isLoading}>
      Add User
    </button>
  );
};

```

## Conclusion

TanStack Query simplifies API data management in TypeScript with robust features like caching, error handling, and background updates. Its strong TypeScript support ensures type safety, making your applications more maintainable.

Integrating TanStack Query into your project will streamline your workflow, reduce boilerplate code, and enhance the user experience. Start using it today and take your React projects to the next level!



Embracing Modern Web Development

Suited Web

ResQLens

ChatBot

What makes AI, "Intelligent"?

Introduction to IndexDB

Introduction to Tanstack Query

Got feedback? Tell me more...💬

Home

Embracing Modern Web Development

Suited Web

ResQLens

ChatBot

What makes AI, "Intelligent"?

Introduction to IndexDB

Introduction to Tanstack Query

Got feedback? Tell me more...💬