DEV Community: Alberto Cubeddu

AI Talent Acquisition Software

Alberto Cubeddu — Fri, 07 Feb 2025 23:09:04 +0000

🚀 Struggling to Keep Up with Resumes and Calls? Let's Talk AI Engineering in Hiring

Hiring is broken. Well, not broken—just painfully inefficient.

CVs pile up. Your phone overheats from too many calls. And your 9-to-5? That’s turned into a 24/7 slog of reading resumes, conducting the same first-round questions, and chasing candidates.

That’s why SkillSociety exists—to automate the first stages of hiring using AI.

And because this is dev.to, let’s skip the fluff and get straight into the tech behind it.

💡 How We Built an AI Interviewer

SkillSociety is a fully automated AI-powered interview system. Instead of manually screening dozens or hundreds of candidates, our AI handles:

✅ Pre-qualification – Filter applicants based on topic-related question based on the real job. Here a Skill Society we do believe that CV are a thing of the past!

✅ AI Interviews – Candidates speak with an AI-powered interviewer in real-time.

✅ Intelligent Evaluation – AI scores responses based on role-specific and personalised criteria.

✅ Insights & Transcripts – Structured interview logs for hiring managers to review.

Now, let’s break down the tech stack that powers all this.

🏗 The Tech Stack

We designed SkillSociety to be scalable, real-time, and fully automated using a modern web stack:

🏗 Frontend: NextJS (with Server Components)
☁ Backend & Auth: Supabase (PostgreSQL + RLS)
🧠 AI: A combination of: OpenAI, LLama, Deepseek, Sonnet, Whisper, Deepgram, and who know what will be next (LLMs + TTS + ASR)
🚀 Edge Deployments: Vercel (Serverless Edge Functions)

🧠 AI Architecture: LLM + TTS + ASR + (Tooling to cover in another blog post)

AI interviews aren’t just a simple chat with ChatGPT. We needed to build a system that:

Understands spoken responses.
Evaluates candidates dynamically.
Speaks naturally, with contextual follow-ups.

Here’s how we do it:

📜 Step 1: Large Language Models (LLMs) for Interview Logic

At the heart of our system there are multiple fine-tuned LLM, responsible for:

Parsing job descriptions to auto-generate tailored interview questions.
Evaluating candidate responses using structured scoring models.
Asking follow-ups dynamically based on candidate answers.

LLM Fine-Tuning:

We fine-tune the model on real-world hiring data to improve domain expertise.

Prompt engineering ensures questions flow naturally and are job-relevant.

We generate role-specific prompts, adjusting based on industries (tech, finance, healthcare, etc.).

🔊 Step 2: Text-to-Speech (TTS) for Human-Like AI Interviewers

A text-based chatbot isn't enough. We needed AI to speak, making the interview natural.

Why We Use TTS:

Multi-language support for global hiring (We're in Australia and Italy at the moment!).

Human-like responses for a smooth candidate experience.

Different tones and accents for regional customisation.

🛠 Tech Used:

Microsoft Azure – It's one of the cloud provider we find most attractive from the deployment point of view of new models.

🎙️ Step 3: Automatic Speech Recognition (ASR) for Candidate Responses

Instead of making candidates type answers, we process spoken responses with ASR.

ASR Features:

Real-time speech-to-text transcription (low latency).

Noise filtering (removes background noise).

Handles different accents & speech patterns.

Keyword extraction for automated scoring.

🛠 Tech Used:

Whisper ASR (OpenAI) – Transcribes speech to text.
Deepgram – Backup model for multi-accent detection.

⚡ Real-Time Interview Pipeline

Here’s how the AI Interview works under the hood:

Candidate starts an AI interview.
- 🟢 LLM generates role-specific interview questions.
- 🟢 TTS converts questions into speech.
Candidate answers in real-time.
- 🔵 ASR transcribes spoken response.
- 🔵 LLM analyses the answer & generates follow-ups.
AI dynamically adjusts interview flow.
- 🟡 Scores the candidate based on predefined hiring criteria.
- 🟡 Auto-generates summary reports for recruiters.

🛠️ Engineering Challenges

Building an AI-driven interview platform wasn’t easy. Here are a few challenges we tackled:

⚡ Low-Latency AI Processing

Nobody wants long pauses between AI questions and candidate responses.

We optimised performance by:

Caching LLM calls for common follow-ups.
Running ASR inference on the Edge to cut down response times.
Parallelising API requests between LLM, TTS, and ASR.

🏎️ Result: Sub-2s response times for dynamic interviews.
DrawBack: We had to create a turn-taking mechanism that is different from anything else in the market. Our use case is Q&A, however with a grain of salt, as the candidate can take some seconds to think about the answer, and you don't want the AI always interrupting or speaking on top of them.

🏗️ Scalability & High Concurrency

Hundreds of interviews can happen simultaneously.

To prevent bottlenecks, we:

Deployed ASR on a dedicated GPU cluster.
Rate-limited free-tier users to prevent abuse.

🏗️ Result: No slowdowns, even with high traffic.

🔒 Data Privacy & Compliance

Recruitment data is sensitive. We built SkillSociety with:

Full encryption (PostgreSQL + Row-Level Security).
GDPR & ISO 27001 compliance for enterprise users.

🔐 Result: Secure, enterprise-ready AI hiring.

🔥 AI-Powered Hiring: Built for Devs, by Devs

If you’re a hiring manager, recruiter, or startup founder tired of manual screening, it's time to let AI do the grunt work.

SkillSociety automates first-round interviews with:

✔ Real-time, voice-based AI assessments

✔ Scoring models tailored to each job

✔ Fully customisable hiring workflows

🔗 Check out SkillSociety and see how AI-powered hiring actually works.

🚀 AI isn’t replacing hiring managers—it’s eliminating the boring parts.

AI at Your Fingertips, Anytime, Anywhere.

Alberto Cubeddu — Mon, 05 Aug 2024 03:31:36 +0000

Introduction video for Extension | OS; The first milestone to bring the mission to fruition!

Mission

Imagine a world where everyone can access powerful AI models—LLMs, generative image models, and speech recognition—directly in their web browser. Integrating AI into daily browsing will revolutionise online interactions, offering instant, intelligent assistance tailored to individual needs.

Why

I see Artificial Intelligence as the modern equivalent of electricity—essential, transformative, and, yeah, a bit daunting. It's a powerful force that can truly revolutionise our lives, and I reckon everyone should have the chance to experience and benefit from its advancements. By making AI accessible to all, we can unlock its full potential and drive innovation forward.

Download

Check our Repo on Github

AI/LLMs (ChatGPT, Llama and more) at Your Fingertips, Anytime, Anywhere!

Alberto Cubeddu — Mon, 05 Aug 2024 03:04:28 +0000

I want to empower every individual to use artificial intelligence (AI) with a unique user experience and without lock-in from any single provider.

Features

Providers: Choose among Groq, OpenAI, Together.ai and your local - host using Ollama!
Prompt Factory: Effortlessly Tailor Every Prompt to Your Needs with Our Standard Installation.
Prompt Factory: Choose the Functionality for Every Prompt: From Copy-Pasting to Opening a New Sidebar. Seamless Integration: Effortlessly access any LLM model directly from your favourite website.
Secure Storage: Your API key is securely stored in the browser’s local storage, ensuring it never leaves your device.
[Beta] Mixture of Agents: Experience the innovative Mixture Of Agents feature.

Video

Screenshot

Download

Check my github (albertocubeddu) and download it directly from the extensionOS repository!

Implementing Conditional Hover States in Nested Divs with React Hooks

Alberto Cubeddu — Sun, 04 Aug 2024 01:29:57 +0000

In this article, we’ll simulate an interview scenario. We’ll begin by outlining a specific task and its requirements, and then delve into what a candidate should ideally think and consider during the interview to successfully navigate the situation.

The task

“Your task is to demonstrate how you would implement a hover effect for nested div elements in a React application. This will involve using React Hooks to manage the conditional behaviour of these elements based on their hover state.”

The image provided displays two rectangular panels that represent the transition of a hover effect:

First Panel (“First Header”): Shows the default or initial visual state of the element before any mouse interaction.
Second Panel (“Second Header”): Depicts the changed appearance of the element when the cursor hovers over it, indicating the hover state has been activated.

Requirements

You must use Tailwind CSS.
You can omit the arrow, however, pay attention to the underline.
Use React Hooks (e.g., useState, useEffect) to manage the hover state of the nested div elements.
Ensure that the hover state triggers a visual transition between the two states illustrated in the panels.
Your solution should accommodate the scenario where hovering over a nested div element triggers its specific hover effect without interfering with the parent or adjacent elements.
Your solution should provide a different way to achieve the same result; No code is needed.
Ensure you add anything extra you would like to consider if this is a real production application.

Start with the analysis

As a candidate, before jumping into technical details, confirm with the interviewer you’ve understood the task, and ensure you’re clarifying the requirements outlining the desired effect upon interaction with the element:

Example

Based on the task and requirements provided, my understanding is that when the mouse moves beyond the borders of the “rectangular panel,” we are required to:

Change the colour of the text for the “Header” and the “Explore”
Add an underline on the “Explore”
Transition the background from white (#FFF) to black (#000)
Ensure no other elements are changed.
We can omit the arrow to speed up the development and provide an MVP faster.

Continue explaining your reasoning

By reading the requirement I understand we must use React (as React hooks are mentioned) and Tailwind. To accomplish the result as requested by using Event Handlers we should start analysing the design, understand the interaction across the elements and finally find a way to communicate the changes.

Event Handlers: onMouseEnter and onMouseLeave

Utilising the onMouseEnter() and onMouseLeave(), we can detect when the mouse cursor enters or leaves the boundaries of the rectangular element a.k.a “The outer div”.

Using the return function in those two handlers allows us to send messages downstream to the inner elements, enabling us to apply the hover state where necessary. A straightforward approach would involve implementing a toggle switch that can be turned on or off, signalling the state change to the specific inner elements that need to be adjusted.

React Hooks: useState

Our end objective is to modify the visual state of an element in response to a user event (more specifically a mouseHandler event). By binding the event to the outer div, we can then use the return to understand when the mouse enters/leave the outside area. The last piece of the puzzle is the communication between the EventHandler and the other element(s) inside the component. We can useState specifically registering when the mouse is entering setIsHovered(true) and exiting setIsHovered(false)the desired area.

 interface CardProps {  
  headerText: string;  
  paragraphText: string;  
  backgroundColor: string;  
}  

const Card: React.FC<CardProps> = ({  
  headerText,  
  paragraphText,  
  backgroundColor,  
}) => {  
  const [isHovered, setIsHovered] = useState(false);  

  return (  
    <div  
      id="container"  
      className={containerClass}  
      style={dynamicStyle}  
      onMouseEnter={() => setIsHovered(true)}  
      onMouseLeave={() => setIsHovered(false)}  
    > </div>  
   )  
}

Reading a state

Now we have our state changing in real-time, if we want to change any of the elements inside the component, we must read the state, and then automatically react will re-render the component based on the condition we specify.

In our example, we want to apply a conditional hover, and there is nothing simpler than using:

<span  
  className="flex self-center items-center flex-col"  
  style={{ textDecoration: isHovered ? "underline" : "none" }}  
>

Different Alternatives

As mentioned at the beginning the problem can have different solutions; In software engineering, we work with trade-offs where we need to calculate the benefit of one solution against others. In this case, we’ve already a guideline simplifying the decision-making process, however, it’s important to outline some of the different ways.

Hover State with CSS — Descendant combinator

Using pure CSS we could avoid the use of hooks and eventHandler, as the :hover pseudo-classes and descent combinator

.outer:hover .inner {

background-color: lightblue; /* Changes when the outer div is hovered */

}

Hover over me!

I change color when the outer div is hovered over.

Hover State with CSS — Child combinator

Very similar to the solution above, however, we use a more direct specific relationship (parent-child)

.outer:hover > .inner {

background-color: lightblue; /* Changes when the outer div is hovered */

}

Production Deployment

I would ensure to provide enough metrics to the product team to understand if the functionality is beneficial to the final user and make data-driven decisions about future enhancements or modifications.

Conclusion

There is always a second way to achieve a result; It’s up to us to understand the context where we are and choose the best solution for the occasion.

Working solution: https://codesandbox.io/p/devbox/still-dream-ywpvwt.

Subscribe Today

If you found this content valuable, consider becoming a member to access exclusive insights like these. Subscribe Now to be the first to receive updates and emails about my latest work.

Follow me on LinkedIn

https://www.linkedin.com/in/alberto-cubeddu/ and suggest other articles you would like to see in this space!

useEffect() - What You Need to Know for Acing Tech Interviews!

Alberto Cubeddu — Tue, 07 May 2024 08:43:45 +0000

Introduction

useEffect() is one of the React Hooks which, by definition, allow functional components to access state and lifecycle features. They are used to handle side effects, operations that should be separated from the main rendering process. Example of side effects include data fetching, manipulation of the DOM and subscriptions.

The common rules

Hooks must be used in React function components.
Only call them at the top level of a component and avoid conditional use!
Follow the naming convention ("useHook").

Examples

Use in class components (incorrect)

import React, { useState } from 'react';

class SSComponent extends React.Component {
  constructor(props) {
    super(props);
    const [number, setNumber] = useState(0);  // Incorrect: Hooks cannot be used here!!
  }

  render() {
    return <div>{`The count is ${count}`}</div>;
  }
}

Top Level Use (correct):

function SSComponent() {
  const [name, setName] = useState('');  // Correct: at the top level
  useEffect(() => {
    document.title = name;  // Correct: at the top level
  });

  return <input value={name} onChange={e => setName(e.target.value)} />;
}

Used inside conditional (incorrect)

function SSComponent({ isLogged }) {
  if (isLogged) {
    useEffect(() => {   // Incorrect: inside a conditional block
      console.log('The above will cause issues');
    });
  }
  return <div>Skill Society</div>;
}

How it works - Show me some examples

Let's start with the basic syntax:

useEffect(effect, dependency);

Effect: F(x) containing the logic.
Dependency: When presents illustrate in an array format which dependencies are watched. If any of the dependencies changes, the useEffect will trigger the F(x).

Default Behaviour (execute every time)

It execute every time your component is rendered

useEffect(() => {
  console.log('Runs on every render!');
});

Execute once (at component mount)

This emulate the componentDidMount executing the function as soon as the component is initially rendered.

useEffect(() => {
  console.log('Runs only on the first render!');
}, []);

### Execute when a dependency is updated
`const [website, setWebsite] = useState('https://skillsociety.com.au');

useEffect(() => {
  console.log(website); //Run on first render + anytime the dependency value changes!
}, [website]);

Execute only when a dependency is updated


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

export default function App() {
  return (
    <div>
      <h1>Hello Dev.to Reader!</h1>
      <h2>Visit our website Skill Society</h2>
      <a href="https://skillsociety.com.au>SkillSociety</a>
      <MyComponent value={2} />
    </div>
  );
}

function MyComponent({ value }) {
  const isInitialMount = useRef(true);

  useEffect(() => {
    if (isInitialMount.current) {
      isInitialMount.current = false; // Set to false after the first render
      console.log("initial mount, put logic here if you want to execute when the component is rendered");
    } else {
      // This code runs only when `value` changes, not on initial mount
      console.log("Value updated to:", value);
    }
    // This setup ensures the effect is ignored on the initial mount,
    // but runs on subsequent updates to the dependency `[value]`.
  }, [value]); // Dependency array includes only `value`

  return <div>Value is: {value}</div>;
}

With CleanUp functionality

const [count, setCount] = useState(0);

useEffect(() => {
  const intervalId = setInterval(() => {
    setCount(prevCount => prevCount + 1);
  }, 1000);

  return () => clearInterval(intervalId); // Cleanup function to clear the interval
}, []); // Empty dependency array to set up the interval once

The above are just the basic concepts!

Yes, we're only covering the essential concepts you must know for a tech interview. If you want to learn more about advanced dependency management, detailed lifecycle control, optimisation techniques, error handling, and concurrency issues, please DM me on LinkedIn!

Follow me on LinkedIn

NextJs 14 — App Router and Unit Testing (w/ async pages)

Alberto Cubeddu — Sat, 17 Feb 2024 21:56:11 +0000

Unit testing is pivotal in the Software Development Life Cycle, enabling rapid progress and code refactoring with confidence in the application’s functionality. It minimises production bugs, fosters creative problem-solving, and accelerates coding as the application scales.

This guide uses NextJs (Version ^14) with the App Router and Jest to set up the unit-testing framework. If you want to skip the step-by-step tutorial, jump to the end of the guide and visit the GitHub link.

Install NextJs

To start, let’s create a new NextJS application using: npx create-next-app@latest

npx create-next-app@latest

The command will install a fresh version of NextJS (at the time of writing: 14.0.3) with the configuration specified above.

Install the Jest packages.

To enable the unit testing, we need to install different packages; please run the following command on your terminal inside the root directory of your application.

npm i -D jest jest-environment-jsdom ts-jest

npm i -D @testing-library/jest-dom @testing-library/react @testing-library/user-event 

npm i -D @types/jest eslint-plugin-jest-dom eslint-plugin-testing-library

After running the command, your package.json should look like this:

"devDependencies": 
    "@testing-library/jest-dom": "^6.1.4",
    "@testing-library/react": "^14.1.2",
    "@testing-library/user-event": "^14.5.1",
    "@types/jest": "^29.5.10",
    "eslint-plugin-jest-dom": "^5.1.0",
    "eslint-plugin-testing-library": "^6.2.0",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "ts-jest":"^29.1.1"
  }

When you’re running the install, the version will most likely be updated; therefore, if they don’t match the above, that’s perfectly ok.

Configure the package.json

Now that the packages are ready, we must configure the runner. This involves modifying the package.json by adding these two lines under the "script"section

"test": "jest", 
"test:watch": "jest --watchAll"

The first command is accessible via npm jest , and it initiates the manual test run. The second commandnpm jest:watch is designed to automatically execute the test upon any changes, triggering a test run each time a test file is saved.

The script section inside your package.json should look like the below example:

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "test": "jest", 
    "test:watch": "jest --watchAll",
    "start": "next start",
    "lint": "next lint",
  },

Configure Jest

To bootstrap jest, we need to create a file in our root directory named: jest.config.mjs and copy/paste the below

import nextJest from 'next/jest.js'


const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: './',
})

// Add any custom config to be passed to Jest
/** @type {import('jest').Config} */
const config = {
  // Add more setup options before each test is run
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testEnvironment: 'jest-environment-jsdom',
  preset: 'ts-jest'
}

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
export default createJestConfig(config)

Node.js will treat .cjs files as CommonJS modules and .mjs files as ECMAScript modules.

Create another one called: jest.setup.js

import '@testing-library/jest-dom'

Configure Linting

Open up .eslintrc.json and add the plugin we’ve installed in the first part of the guide. Your file should look like this:

{
  "extends": [
    "next/core-web-vitals",
    "plugin:testing-library/react",
    "plugin:jest-dom/recommended"
  ]
}

ESLint statically analyses your code to find problems quickly. It is built into most text editors, and you can run ESLint as part of your continuous integration pipeline. Find issues, Fix problems automatically and give the ability to configure everything!

After finishing this configuration, we’re ready to start.

Dry Run

Run the command npm run test to check everything is installed and working:

Write your first test

Using the page provided by the next.js installation, let’s start running the application using: npm run dev and visiting the URL:

After visiting the URL, you’ll see the NextJS example page:

The source code for the page is located at src/app/page.tsx and the function is called Home.

Following the naming convention, I usually name the test file after the function. In this example, the file is called: home.test.tsx. While you can save the file in the same folder as your page resides, I opt to group all my tests in a single directory.

Write a simple Jest test

Open the Home.test.tsx and start writing your test. To ensure everything works fine, copy-paste this example:

import { render, screen } from '@testing-library/react'
import Home from '@/app/page'
import '@testing-library/jest-dom'

describe('Home', () => {
    it ('Should Have Learn Text', () => {
        // Arrange
        render(<Home />)

        // Act
        const LearnText = screen.getByText('Learn')

        // Assert
        expect(LearnText).toBeInTheDocument()
    })
})

Where we are looking for the word “Text” in our page, exactly this section below:

If you run npm run test or npm run test:watch it would help if you got a success from your test suite:

On the other hand, if you get an error, feel free to contact me, and I’ll help you fix it.

Write an ASYNC Page Jest test

Thanks to

Joaquin Lobo

we are expanding this guide to include async testing based on page.

Following the example on how to fetch data from the NextJS documentation:

async function getData() {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos/1')


  if (!res.ok) {
    // This will activate the closest `error.js` Error Boundary
    throw new Error('Failed to fetch data')
  }

  return res.json()
}

export default async function AsyncPage() {
  const data = await getData()

  // Return JSX that properly displays the data
  return (
    <main>
      <h1>Todo Details</h1>
      <p><strong>User ID:</strong> {data.userId}</p>
      <p><strong>ID:</strong> {data.id}</p>
      <p><strong>Title:</strong> {data.title}</p>
      <p><strong>Completed:</strong> {data.completed ? 'Yes' : 'No'}</p>
    </main>
  );
}

Following best-practices for UNIT-Testing, before testing this function we must mock the response of the API call;

global.fetch = jest.fn(() =>
    Promise.resolve({
        ok: true,
        json: () => Promise.resolve({ userId: 1, id: 1, title: 'Test Todo', completed: false }),
    })
);

Adding the global.fetch before run our test, will allow us to mock the native fetch funcion, available in NextJS 14 by default.

If you need to run an integration test, unfortunately i haven’t found a solution to run the fetch native functionality in JEST, unless i don’t use one of the “replacement” library; However the latter doesn’t ensure your code run as it would with the native function you’re using.

The final snippet would look like this:

import { render, screen } from '@testing-library/react'
import AsyncPage from '@/app/asyncpage/page'
import '@testing-library/jest-dom'

describe('AsyncPage', () => {

    it('Should Have User ID and Completed', async () => {
        // We are mocking the global.fetch as we're doing unit-test.
        // In case of integration-test, you must include one of the fetch-library to be included.
        // FYI: I wasn't able to include the fetch that next.js loads by default. If you know how to do, open a pull-request.
        global.fetch = jest.fn(() =>
            Promise.resolve({
                ok: true,
                json: () => Promise.resolve({ userId: 1, id: 1, title: 'Test Todo', completed: false }),
            })
        );

        //////////
        // Arrange
        //////////
        render(await AsyncPage());

        //////////
        // Act
        //////////
        // Wait for the data to be fetched and rendered, the AWAIT here is crucial.
        const titleElement = await screen.findByText(/Test Todo/i);

        //////////
        // Assert
        //////////
        expect(titleElement).toBeInTheDocument();
        // Now you can use the screen.
        expect(screen.getByText(/User ID:/i)).toBeInTheDocument();
        expect(screen.getByText(/Completed:/i)).toBeInTheDocument();
    })
})

Conclusion

This setup kick-starts your journey towards enhancing your application, significantly boosting productivity. It reduces time spent on manual testing and dramatically improves the reliability of your code.

Subscribe Today

If you found this content valuable, consider becoming a member to access exclusive insights like these. Subscribe Now to be the first to receive updates and emails about my latest work.

Follow me on LinkedIn

https://www.linkedin.com/in/alberto-cubeddu/

GitHub Link

If you wish to download a working version of the code, instead of following the guide step-by-step, clone this repository: https://github.com/albertocubeddu/nextjs-jest-app-router