DEV Community: Matteo Santoro

How an AI Built a Web App on Its Own: The TransLLAMA Journey

Matteo Santoro — Thu, 06 Feb 2025 11:36:50 +0000

How an AI Built a Web App on Its Own: The TransLLAMA Journey

TransLLAMA is not just another translation app—it's a groundbreaking research project developed entirely by an advanced AI model. In this project, the ChatGPT o3-mini-high model generated all of the application code autonomously, while expert humans provided only the prompt definitions. No manual code tweaking was involved!

What is TransLLAMA?

TransLLAMA is a multi-language translator web application that leverages local large language models via the Ollama API, built on a modern tech stack featuring Next.js and Tailwind CSS. The app delivers precise, context-aware translations formatted exclusively within <translation>...</translation> tags. Additionally, any AI-generated reasoning is neatly separated and displayed in an accordion component.

The Core of Our Research

The primary focus of our study was to explore the potential of building a complete web application using solely the power of a state-of-the-art large language model. By carefully designing accurate prompts, the ChatGPT o3-mini-high model was able to generate the entire codebase automatically. This experiment underscores the tremendous capabilities of modern AI in automating complex software development tasks.

Key Highlights

Automated Code Generation: The entire project was generated by the ChatGPT o3-mini-high model. Human intervention was limited to defining the prompts.
Robust and Intuitive UI/UX: Using Next.js, Tailwind CSS, and lucide-react icons, TransLLAMA offers a seamless user experience.
Seamless Internationalization: The app supports multiple languages through a backend-managed internationalization system.
Open Source Commitment: PRISMA S.R.L. has released TransLLAMA under the MIT License. You can find the entire project on GitHub: TransLLAMA Repository.

Why It Matters

This project demonstrates that with the right prompt engineering, AI can autonomously build robust, full-fledged web applications. TransLLAMA is a testament to the future of software development—where AI-driven automation could dramatically reduce the need for manual coding while maintaining high quality and accuracy.

Final Thoughts

I find it almost amusing to share this: even this article was written by me, ChatGPT o3-mini-high, the very model that built TransLLAMA! With a touch of irony and a whole lot of innovation, we are witnessing the dawn of a new era in development.

Feel free to check out the TransLLAMA Repository and explore the code under the MIT License. Happy coding!

How I Discovered to Not Put EventListeners in On Mount in Vue SPAs

Matteo Santoro — Tue, 30 Apr 2024 10:19:05 +0000

Introduction

During a project for a client, I was tasked with integrating an event listener within a Vue-based Single Page Application (SPA), specifically for a component named "HomeView" that contained an iframe. The event, dubbed "triggerEvent," was initially set up during the 'onMount' lifecycle hook of HomeView. This setup led to unexpected behavior where navigating away and then returning to HomeView caused the "triggerEvent" to fire multiple times, indicating a stacking of event listeners.

Investigating the Issue

To understand the issue better, I experimented with location.replace() instead of router.push() for navigation. The former seemed to resolve the issue, suggesting that the method of navigation affected how event listeners behaved. Further tests with router.push() confirmed that each navigation added a new listener without removing the previous one, thereby multiplying the triggers.

The Root Cause

This behavior is rooted in how SPA frameworks like Vue manage event listeners. In Vue, components mounted with onMount do not automatically clean up their event listeners upon unmounting unless explicitly coded to do so. This leads to duplicated listeners if a component mounts multiple times, as is common in SPAs where router.push() is used for navigation without full page reloads.

Solutions

Cleanup on Component Unmount

To prevent this issue, one effective strategy is to remove event listeners when the component unmounts:

import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const handleEvent = () => console.log('Event triggered');
    onMounted(() => window.addEventListener('triggerEvent', handleEvent));
    onUnmounted(() => window.removeEventListener('triggerEvent', handleEvent));
  }
};

Conditional Event Listener Attachment

Alternatively, checking if an event listener is already in place before adding a new one can prevent duplicates:

import { onMounted, ref } from 'vue';

const eventBound = ref(false);

export default {
  setup() {
    const handleEvent = () => console.log('Event triggered');
    onMounted(() => {
      if (!eventBound.value) {
        window.addEventListener('triggerEvent', handleEvent);
        eventBound.value = true;
      }
    });
  }
};

Global Event Listener in App.vue

Another approach is to place the event listener in App.vue, which is only mounted once, thereby avoiding any reattachment issues:

import { onMounted } from 'vue';

export default {
  setup() {
    const handleEvent = () => console.log('Global event triggered');
    onMounted(() => window.addEventListener('triggerEvent', handleEvent));
  }
};

Parcel, React & Tailwind to the moon 🚀

Matteo Santoro — Thu, 16 Feb 2023 20:44:38 +0000

Parcel, React & Tailwind to the moon

In recent years, thanks to modern technologies, developing web applications is easier than ever. In this article I will show you how to make it even easier by using Parcel, Tailwind, and React.
Parcel is a lightweight and fast bundler for web applications that allows you to manage your project easily and efficiently. Tailwind is a CSS framework used to create clean, modern interfaces, while React, well, it's React and needs no introduction.
Without further ado, let's start creating our webapp!

mkdir my-webapp
npm init -y
npm i -D parcel
npm i react react-dom
mkdir src
touch src/index.html
npm i -D tailwindcss postcss
npx tailwindcss init

Before we dig into the code, we need to edit our package.json as follows, removing the main property

{
  "name": "my-webapp",
  "version": "1.0.0",
  "description": "",
  "scripts": {},
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel": "^2.8.3",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.2.6"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

Inside the root folder create a postcss.config.js file and configure it as follows

module.exports = {
    plugins: [
      require('tailwindcss'),
      require('autoprefixer'),
    ],
};

Create a file called .postcssrc at the same path and paste:

{
  "plugins": {
    "tailwindcss": {}
  }
}

Delete the code inside tailwind.config.js and add

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

In ./src create a file called index.css and fill it up:

@tailwind base;
@tailwind components;
@tailwind utilities;

and fill up ./src/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./index.css" rel="stylesheet">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="./index.js"></script>
</body>
</html>

now create the index.js file where you will start to code using react.

import { createRoot } from 'react-dom/client';
createRoot(app).render(
<div>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</div>
);

To run it locally just run

npx parcel ./src/index.html

To build the project

npx parcel build ./src/index.html

⚠️ If you are facing an error regarding relative paths once you build and deploy your code on a webserver, you might need to build as it follows:

npx parcel build --public-url ./ ./src/index.html

Concluding reflections

Using Parcel, React and Tailwind, it is easy to create a webapp quite efficiently. Using Parcel, you are able to manage your project effectively and quickly, integrating with React and Tailwind to create a worthy webapp.
Don't forget to explore their advanced features to customize your development experience.