Forem: Lucas Lomeu

Building a Scalable URL Shortener

Lucas Lomeu — Tue, 10 Feb 2026 11:08:45 +0000

I thought a URL shortener was literally a simple CRUD. It turned out to be the exact opposite, so here’s how I designed and built mine.

The Problem

Let's understand what we're building:

What it does:

Convert https://website.com/very/long/url into short.com/aB3x
Redirect users from short URL back to the original
Handle 1,000+ writes/sec and 10,000+ reads/sec
Never generate duplicate short codes

What makes it hard:

IDs must be globally unique - no collisions
Read-heavy workload - 10:1 read/write ratio
Must scale horizontally

The Math Behind It

Let's do some napkin math to understand scale:

100 million URLs/day x (24 hours / 3600 ms) = ~1,160 writes/sec
10:1 read ratio - 1,160 writes/sec x 10 = ~11,600 reads/sec
Over 10 years - 100M x 365 days * 10 years = ~365 billion URLs

Architecture: Hexagonal Pattern

I chose Hexagonal Architecture because it keeps the business logic independent from infrastructure. This makes it easier to swap databases, frameworks, or transport layers without touching the core of the application. It also aligns with what I’ve been studying lately, since I plan to dive deeper into this architecture and eventually write an article about it.

Database Choice: PostgreSQL

Strong consistency – Ensures there are no duplicate short codes, even during network partitions
ACID transactions – ID generation and insertion happen atomically
Simple operations – Around 99% of the queries are direct key lookups

Schema Design

CREATE SEQUENCE urls_id_seq;

CREATE TABLE urls (
  id BIGINT PRIMARY KEY DEFAULT nextval('urls_id_seq'),
  short_code VARCHAR(10) NOT NULL UNIQUE,
  long_url TEXT NOT NULL,
  created_at TIMESTAMPTZ NOT NULL DEFAULT now()
);

CREATE UNIQUE INDEX idx_urls_short_code ON urls (short_code);

Why this works:

id is the source of truth (sequence-generated)
short_code has unique index for fast O(log n) lookups
No index on long_url (expensive, rarely queried)

The Core Problem: ID Generation

Generating short codes sounds simple, but in practice you need IDs that:
1. Are globally unique (no collisions)
2. Stay short (7 characters or less)
3. Don't require coordination between servers

Strategy: Sequence + Base62 Encoding

Here's the actual implementation:

public class ShortCodeGenerator implements ShortCodeGeneratorPort {
    private static final String BASE62 =
        "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";

    @Override
    public String generate(long id) {
        if (id <= 0) {
            throw new IllegalArgumentException("ID must be positive");
        }

        StringBuilder sb = new StringBuilder();
        long n = id;

        while (n > 0) {
            int remainder = (int) (n % 62);
            sb.append(BASE62.charAt(remainder));
            n /= 62;
        }

        return sb.reverse().toString();
    }
}

Why this is collision-free:

PostgreSQL sequence guarantees unique IDs (1, 2, 3, ...)
Base62 is a bijective function: unique ID -> unique code
If ID1 != ID2, then Base62(ID1) != Base62(ID2)
No retry logic needed

Capacity Analysis

Length	Possible URLs	Years at 1k/sec
5 chars	916 million	29 years
6 chars	56.8 billion	1,800 years
7 chars	3.52 trillion	111,000 years

With 7 characters, we’re set for a while. We only need about 365 billion.

Caching

At ~10k reads/sec, PostgreSQL was fine. But I knew the moment traffic spiked, the DB would start being the bottleneck.

What surprised me the most was how visible the change became after adding cache.

The Problem

Every request:
1. App -> PostgreSQL: "SELECT * FROM urls WHERE short_code = 'aB3x'"
2. PostgreSQL -> Disk: Read from index + table
3. PostgreSQL -> App: Return result
4. App -> Client: 302 redirect

Latency: 5-10ms per request

Even with indexes, disk I/O is expensive and most users keep hitting the same short URLs.

Solution: Cache‑Aside with Redis

The pattern is simple:

1. Try Redis first
2. If miss -> query in Database
3. Store in Redis for next time

This gave me the best of both worlds: resilience (if Redis dies, the system still works) and speed (most reads never touch the DB).

API Design

Keep it simple:

Create Short URL

POST /api/v1/shorten
Content-Type: application/json

{
  "url": "https://website.com/very/long/url"
}

Response:

{
  "shortCode": "aB3x"
}

Redirect

GET /aB3x
GET /api/v1/aB3x

Returns 302 Found with Location: https://website.com/very/long/url

Why 302 instead of 301?

301 (permanent) gets cached by browsers -> no click tracking
302 (temporary) hits your server every time -> you can measure clicks or any metrics

For a URL shortener with analytics, 302 is the right choice.

Code Structure

Here's the actual file structure:

src/main/java/org/lomeu/
├── application/
│   ├── service/
│   │   └── UrlService.java         (use case orchestration)
│   └── port/
│       ├── in/
│       │   └── UrlUseCase.java     (inbound port)
│       └── out/
│           ├── UrlRepository.java  (outbound port)
│           └── ShortCodeGeneratorPort.java
│
├── domain/
│   └── Url.java                    (pure domain model)
│
├── infrastructure/
│   ├── http/
│   │   └── UrlController.java      (HTTP adapter)
│   ├── database/
│   │   ├── Database.java           (connection pool)
│   │   └── JdbcUrlRepository.java  (persistence adapter)
│   └── generator/
│       └── ShortCodeGenerator.java (Base62 implementation)
│
├── config/
│   └── AppConfig.java
│
└── Main.java                        (entry point + shutdown hook)

The complete implementation at github.com/lucaslomeu/url-shortener.

Arquitetura Fullstack com Angular 19 + Spring Boot

Lucas Lomeu — Mon, 05 May 2025 11:11:21 +0000

Neste post, compartilho um pouco da experiência de desenvolver uma aplicação fullstack real com Angular 19, Spring Boot e Docker.

O objetivo não é ensinar passo a passo, mas sim apresentar as decisões técnicas, aprendizados e desafios enfrentados ao longo do projeto.

Ao abordar tópicos como autenticação JWT, arquitetura, integração entre frontend e backend e containerização.

📌 Sobre o projeto

O Mony é uma aplicação web para controle de assinaturas e finanças pessoais. A ideia é oferecer uma forma simples de:

Cadastrar serviços recorrentes (como Netflix, Spotify, etc.)
Visualizar todos os gastos mensais
Ter uma visão clara sobre o orçamento

O foco desse projeto foi estruturar um app fullstack moderno (por isso a escolha do Angular 19) com boas práticas de frontend, backend e containerização com Docker

🔧 Tecnologias utilizadas

Frontend: Angular 19 + Tailwind CSS v4
Backend: Java 11 - Spring Boot + Spring Security + JWT + Spring Data JPA
Banco de dados: PostgreSQL 15
Containerização: Docker + Docker Compose

🧱 Arquitetura da aplicação

Visão geral da arquitetura lógica da aplicação:

🧬 Modelo de dados

As entidades principais do sistema são MonyUser, Subscription, Category e Address. Veja como elas se relacionam:

🗂️ Estrutura do Projeto

mony/
├── server/        # Backend Spring Boot
│   └── ...        # Controllers, DTOs, Repositories, etc.
├── client/        # Frontend Angular 19
│   └── ...        # Features, Shared Modules, Layout

A descrição completa das pastas e suas responsabilidades está disponível no README do repositório.

🧰 Uso do Lombok no backend

Durante o desenvolvimento do backend, utilizei o Project Lombok para reduzir o boilerplate nas classes Java, especialmente nas entidades, DTOs e serviços.

Com anotações como @Getter, @Setter, @NoArgsConstructor, @AllArgsConstructor e @Builder, consegui manter o código mais limpo, legível e focado na lógica de negócio, evitando repetições desnecessárias de métodos.

Além de deixar as classes mais enxutas, o uso do Lombok contribuiu para a produtividade e organização geral do projeto.

🔐 Autenticação JWT com Spring Security

Implementei autenticação e autorização com JWT no backend, protegendo todos os endpoints sensíveis. A geração e validação dos tokens são feitas com filtro personalizado no Spring Security.

No frontend, o Angular armazena o token localmente com LocalStorage e utiliza um HTTPInterceptor para enviá-lo automaticamente em cada requisição autenticada.

💡 Principal no backend

Durante a implementação, tive que decidir como lidar com os dados do usuário autenticado no backend.

Inicialmente, pensei em enviar o ID do usuário em cada requisição ou armazenar algo no LocalStorage, mas isso abriria espaço para falhas de segurança.

Foi nesse momento que conheci a interface Principal do Spring — algo novo pra mim até então. Ela resolvia exatamente o que eu buscava: deixava o backend 100% responsável por identificar o usuário autenticado, com base no JWT.

Isso permitiu que cada controller acessasse diretamente o contexto do usuário logado sem depender de nenhuma informação adicional do frontend.

Resultado: código mais limpo, seguro e desacoplado.

A partir disso, todos os controllers que precisam de contexto do usuário simplesmente recebem o Principal como parâmetro. Com isso, o backend consegue filtrar ou associar dados automaticamente ao usuário autenticado, mantendo a integridade dos dados e a segurança da aplicação.

📦 Docker Compose: backend + frontend + PostgreSQL

Para facilitar o desenvolvimento e isolar os serviços, configurei um ambiente completo com Docker Compose.

services:
  - PostgreSQL 15 (banco de dados)
  - Spring Boot (backend)
  - Angular 19 (frontend)

E com o comando abaixo, toda a aplicação sobe em containers:

docker-compose up --build

🧠 Aprendizados e desafios técnicos

Enquanto desenvolvia o Mony, tive a oportunidade de aprofundar e aplicar conceitos importantes em várias áreas do stack fullstack moderno:

🔷 Frontend (Angular 19)

Estruturei a aplicação com lazy loading e arquitetura modular por feature, seguindo boas práticas para escalabilidade.
Usei o Tailwind CSS v4 para estilização rápida, com foco em produtividade e responsividade.
Como venho de projetos com versões mais antigas do Angular (8, 11, 14), esse projeto foi também uma oportunidade para aplicar as novidades das versões mais recentes. Entre os destaques:
- inject(): substitui a injeção de dependência tradicional via construtor. O código ficou mais limpo e menos verboso, especialmente em componentes simples ou standalone.
- @computed(): facilita a criação de propriedades derivadas e reativas sem depender de rxjs, tornando o código mais declarativo, previsível e legível.
- @for e @if: evoluções das diretivas estruturais (*ngFor, *ngIf) que tornam o HTML mais moderno e direto, eliminando a necessidade de blocos ng-template e melhorando a performance.
- resource(): uma das features que mais gostei (mesmo ainda sendo experimental). Permite declarar loader e request de forma reativa e integrada ao ciclo de vida, gerenciando chamadas assíncronas com muito menos código, utilizando signals.
- effect(): executa funções automaticamente sempre que um signal dependente muda de valor. Usei no serviço de CEP, por exemplo, para atualizar campos dinamicamente conforme o usuário escolhia um estado, assim o DOM respondia instantaneamente.

🔶 Backend (Spring Boot)

Configuração completa do Spring Security com autenticação via JWT
Implementação de filtros personalizados para validar tokens
Uso da interface Principal para identificar automaticamente o usuário logado sem expor dados no frontend
Mapeamento e relacionamento de entidades com JPA, incluindo um cenário N:N usando @ManyToMany com @JoinTable
Separação clara entre DTOs, entidades, serviços e repositórios

🤝 Conclusão

Você pode conferir o código completo aqui:

🔗 Repositório no GitHub - Mony

📋 Resumo técnico

✅ Stack: Angular 19, Spring Boot, PostgreSQL
🧠 Auth: JWT + Spring Security + Principal
🐳 Dev: Docker Compose com 3 containers
🧰 Extras: Lombok, Tailwind, ng2-charts

Linux Básico: comandos essenciais do terminal

Lucas Lomeu — Mon, 13 Nov 2023 11:44:37 +0000

LINUX COMMAND LINE

Listing

O comando ls é usado para listar arquivos e diretórios. Aqui estão algumas opções comuns:

-a ou --all: Lista inclusive arquivos ocultos.
-l: Fornece informações extras.
-h: Formata a saída de forma legível.
-R: Lista recursivamente.

ls [path] -a -l -h -R

Exemplo:

ls -a -l -h -R

Change Directory

O comando cd é utilizado para navegar entre pastas. Para voltar uma pasta, use ...
Para voltar uma pasta, use ..

Exemplo:

cd [path]

Copy

O comando cp copia arquivos ou pastas para o destino. A opção -r indica que a cópia deve ser feita de forma recursiva.

cp path ou file -r

Exemplo:

cp [origem] [destino] -r

Move

O comando mv move arquivos ou pastas para o destino e pode ser usado para renomear. Utilize com cuidado.

Exemplo:

[path ou file] [dest] -r -f

Remove

Apaga arquivos ou diretórios.
Exemplo:

rm [path ou file] [dest] -r -f

Make directory

Cria pasta, passando o destino completo ou apenas o nome do arquivo.

Exemplo:

mkdir [path]

Remove Make directory

Apaga pastas, passando o destino completo ou apenas o nome do arquivo.

Exemplo:

rmdir [path]

Empty File

Cria um arquivo vazio com nome informado no parâmetro [file].

Exemplo:

touch [file]

Text Editor.

Abre Editor de texto (nano ou vim).
Exemplo:

nano [file]

vi [file]

Super user

Usado para executar comandos com permissão elevada.

sudo [comando]

Clear

Limpar a interface do terminal

Exemplo:

clear

Promises em JavaScript: entendendo o básico

Lucas Lomeu — Sun, 13 Mar 2022 17:03:30 +0000

PROMISES

Antes de entendermos as Promises, temos de conhecer as diferenças entre comportamentos síncronos e assíncronos.

Síncrono e Assíncrono

Como o próprio nome pode nos ajudar a deduzir, síncrono acontece em sincronia, ou seja, que ocorre em mesmo tempo que outra coisa. Já assíncrono é o oposto, é algo que não acontece junto com outra coisa. Podemos exemplificar esses comportamentos síncronos e assíncronos, como uma chamada de telefone e envio de e-mail, respectivamente.

Sabendo o básico, podemos afirmar que o Javascript é síncrono, sendo executado linearmente de cima para baixo. Isso se deve ao fato que ela é uma linguagem Single Thread, então cada linha de comando só será executada quando a anterior é finalizada.

console.log('Primeira linha');
console.log('Segunda linha');
console.log('Terceira linha');
console.log('Quarta linha');
console.log('Quinta linha');

Sendo assim, o código acima quando executado, nos retorna:

Primeira linha
Segunda linha
Terceira linha
Quarta linha
Quinta linha

No Javascript temos a função assíncrona setTimeout(), onde no primeiro parâmetro ela espera uma função e no segundo o tempo que após ser feita a chamada da função, ela será executada, isso em milissegundos.

Sendo assim, vamos analisar o código abaixo:

console.log('Primeira linha');
console.log('Segunda linha');

setTimeout(() => {
  console.log('setTimeout');
}, 2000);

console.log('Terceira linha');
console.log('Quarta linha');
console.log('Quinta linha');

Caso a função setTimeout() fosse síncrona, deveriamos ter o retorno abaixo, já que está sendo chamado na terceira linha:

Primeira linha
Segunda linha
setTimeout
Terceira linha
Quarta linha
Quinta linha

Porém, ela é uma função que não acontece junto com outra coisa -assíncrona - ela só sera retornada com uma condição ou parâmetro, que no caso, é ser executada após 2 segundos, nos retornando:

Primeira linha
Segunda linha
Terceira linha
Quarta linha
Quinta linha
setTimeout

Ou seja, ela executa todas as outras linhas de maneira síncrona, quando chega no setTimeout(), ela é entregue para uma request separada que é executada fora da thread do Javascript - lembrando que o código que escrevemos é executado em uma única thread - fazendo com que o restante continue a ser executado.

Agora já com o conhecimento de síncrono/assíncrono, podemos tratar das Promises. Como o próprio nome diz, é uma promessa que pode ou não estar disponível em algum momento, sendo assim, ela possui um comportamento assíncrono.

Promise é um objeto que possui três possíveis estados, sendo eles:

Pending – Estado inicial, pendente de execução
Fulfilled – Concluido com sucesso
Rejected – Ocorreu algum erro

A mesma recebe dois parâmetros, sendo eles comumente chamados de resolve e reject, sendo assim, apenas um dos métodos de tratamento será chamado. Para acessar a resposta dessa promisse, temos o .then e o .catch, sendo responsáveis por tratar a resposta e o erro respectivamente.

O método .then irá registrar um _callback _de sucesso e é comum executar duas ou mais operações assíncronas consecutivas, executando a ação posterior apenas quando a anterior for bem sucedida, isso é possível realizando o encadeamento do método .then, onde o mesmo retorna uma nova promise diferente da original.

 new Promise((resolve, reject) => {
  console.log('Inicio da Promise');
  const numero = 10;

  resolve(numero);
})
  .then((value) => {
    console.log(`Primeiro valor: ${value}`);
    return value;
  })
  .then((newValue) => {
    console.log(`Valor somado de 5: ${newValue + 5}`);
  });

No código foi chamado a função construtora passando os dois parâmetros como argumento e a chamada de uma função callback.
Logo de início já é executado nosso primeiro console.log e o armazenamento de numero em uma constante, recebendo o valor 10, logo após chamamos nosso resolve(numero), passando como resolvida nossa promise e ela recebe esse número.

Agora devemos tratar esse resultado fazendo a chamada do nosso primeiro .then onde o mesmo recebe um parâmetro value, esse valor recebe o que foi passado em resolve, logo value equivale a numero, sendo assim, chamamos o console.log desse value e retornamos ele para que possamos utilizar no próximo encadeamento de .then, onde iremos tratar o retorno anterior.
Para diferenciarmos, foi passado como parâmetro agora newValue onde o mesmo recebeu o valor anterior e será tratado no console, sendo acrescido de 5.

O resultado final desse código:

new Promise((resolve, reject) => {
  console.log('Inicio da Promise');
  const numero = 10;

  resolve(numero);
})
  .then((value) => {
    console.log(`Primeiro valor: ${value}`);
    return value;
  })
  .then((newValue) => {
    console.log(`Valor somado de 5: ${newValue + 5}`);
  });

Agora iremos tratar a promise caso fosse chamado o reject:

new Promise((resolve, reject) => {
  console.log('Inicio da Promise');
  const numero = 10;

  reject('Número não identificado');
})
  .then((value) => {
    console.log(`Primeiro valor: ${value}`);
    return value;
  })
  .then((newValue) => {
    console.log(`Valor somado de 5: ${newValue + 5}`);
  })
  .catch((error) => {
    console.log(`Houve um erro: ${error}`);
  });

Como fazemos a chamada de reject(), a função logo irá chamar o método .catch que também recebe um parâmetro e o mesmo é retornado no console.log(), renderizando:

Inicio da Promise
Houve um erro: Número não identificado

Um método muito utilizado, é a API fetch que realiza requisições HTTP através de Promises.

Todo List com React: passo a passo

Lucas Lomeu — Tue, 16 Nov 2021 23:36:56 +0000

Introdução

Nesse tutorial iremos desenvolver um "TodoList" em ReactJs da maneira mais simples possível, sendo assim, não iremos focar em estilização do mesmo. Recomendo que tenha noção básica de JavaScript.

Criando o projeto

Para iniciarmos o projeto, abra seu terminal e use o seguinte comando

npx create-react-app todolist

Após a criação, dirija-se até o diretório e abra seu VisualStudio Code

Limpando arquivos desnecessários

Para esse tutorial, poderemos remover alguns arquivos desnecessários de nossa aplicação.

Na pasta src, remova os arquivos:

App.test.js
index.css
logo.svg
reportWebVitals.js
setupTests.js

Você também deverá retirar a importação desses arquivos no App.js.

Parte 01

Logo de início deveremos fazer a importação do useState no App.js, pois estamos desenvolvendo um TodoList, ou seja, teremos alterações de estado (adição, remoção) de itens na lista de afazeres.

import { useState } from 'react';

Assim, estaremos aptos a utilizar o Hook.

Agora, deveremos criar o estado inicial da lista, para isso, utilizamos o useState, sendo um hook que retorna um array com dois valores, o primeiro é o estado atual e imutável, já o segundo uma função que irá alterar o estado do componente quando a mesma for ativada.

const [ todo, setTodo ] = useState([]);

-Todo representa o primeiro valor, logo o estado atual.
-setTodo representa o segundo valor, logo a função que irá realizar as alterações. (Por padrão costumamos nomear o segundo valor com "set" e logo após o nome dado ao primeiro valor).

O valor entre parenteses do useState representa o valor INICIAL do estado, como estamos criando uma lista de afazeres, o valor inicial é um Array que poderá conter vários itens.

Agora iremos criar outro estado para os novos itens a serem adicionados nesse array:

const [newTodo, setNewTodo] = useState('');

Dessa vez o estado inicial é uma string vazia, pois é o valor inicial do input do tipo texto que iremos inserir na nossa aplicação.

Parte 02

Com nossos estados criados, iremos desenvolver o que será renderizado, para isso adicionaremos um input.

function App() {
  const [todo, setTodo] = useState([]);
  const [newTodo, setNewTodo] = useState('');

  return (
    <>
      <h1>Todo List</h1>
      <input
        type="text"
        value={newTodo}
        onChange={(item) => setNewTodo(item.target.value)}
      />
    </>
  );
}

Para envolvermos várias tags HTML, podemos utilizar uma div ou então fragments <></> e todo o conteudo dentro do mesmo.

Criamos um input do tipo texto; no valor passamos o newTodo, sendo identico ao do estado já criado e onChange passamos uma função, onde conforme o estado é alterado, ele atualiza seu valor (value={newTodo}).

Ou seja, o valor (texto) atual presente no input criado, será adicionado ao nosso estado, com isso poderemos futuramente fazer com que esse valor seja renderizado na lista de afazeres.

Para que possamos adicionar esse valor em uma lista, iremos adicionar um botão que ao ser clicado, chamará a função addNewTodo:

function addNewTodo() {
    setTodo([...todo, newTodo]);
    setNewTodo('');
  }

Na primeira linha, chamamos a função do nosso primeiro estado, onde seu valor inicial é um array vazio e definimos agora que seu valor será tudo que estava presente nesse array antes (para isso utilizamos o spread), e no segundo parâmetro passamos o newTodo, ou seja, toda alteração que for feita nesse estado, após ser clicado no botão de "Adicionar", essa alteração/valor será adicionado ao nosso estado inicial da aplicação (todo).

Já na segunda linha, definimos que ao adicionar o novo valor no nosso estado, não podemos deixar o valor/texto do nosso input com o que foi digitado, devemos retirar tudo e transformar nosso estado inicial em uma string vazia novamente.

O botão a ser criado:

 <button onClick={() => addNewTodo()}>Adicionar</button>

Recapitulando: Ao ser clicado, chamará nossa função addNewTodo(), que irá adicionar o novo valor ao nosso estado atual e logo após resetar o valor escrito no input.

Parte 03

Agora iremos renderizar todos esses valores em uma lista, para isso utilizaremos o map.

<ul>
    {todo.map((item) => (
       <li>
         {item}
       </li>
    ))}
</ul>

Ou seja, a cada item/todo/valor novo adicionado ao nosso array de todos, o map irá percorrer essa lista de array e renderizar um por um em forma de lista. No código acima, passamos como parâmetro item, sendo assim, cada item presente no todo, será renderizado um a um, até que o ultimo seja renderizado.

Escrevemos o código entre chaves pra mostrar que se trata de um código javascript e não HTML.

Com isso, chegamos a uma tela semelhante a essa:

Parte 04

Assim como podemos adicionar itens/afazeres ao nosso array, podemos também excluir o mesmo.

Sendo assim, iremos criar dentro do map um botão para que seja renderizado a cada item.

<button onClick={() => removeTodo(index)}>Deletar</button>

Como podemos ver, ao ser clicado ele chama a função removeTodo que tem como parâmetro index. Esse parâmetro nós podemos identificar ele no próprio map, é o segundo valor a ser passado na função.

{todo.map((item, index) => (
   <li>
     {item}
   <button onClick={() => removeTodo(index)}>Deletar</button>
   </li>
 ))}

Deveremos passar esse parâmetro também na função, para que possamos identificar o item. Ele funciona como identificador único, ID

  function removeTodo(index) {
    let tmpArray = [...todo];
    tmpArray.splice(index, 1);
    setTodo(tmpArray);
  }

Criamos uma variável tmpArray, que define um array temporário, onde utilizamos o spread para adicionar tudo que contemos em nossa lista.

Utilizamos o splice e passamos como parâmetro o index (identificador único que utilizamos como parâmetro na função e que passamos ele no map) e definimos que ele irá retirar apenas um item a partir do index 1.

O método splice() altera o conteúdo de uma lista, adicionando novos elementos enquanto remove elementos antigos.

E para finalizar, definimos o novo valor do estado (setTodo), com o valor do nosso array temporário tmpArray, onde já foram feitas as modificações de exclusão de item.

Resultado da renderização

Código Final

import { useState } from 'react';

function App() {
  const [todo, setTodo] = useState([]);
  const [newTodo, setNewTodo] = useState('');

  function addNewTodo() {
    setTodo([...todo, newTodo]);
    setNewTodo('');
  }

  function removeTodo(index) {
    let tmpArray = [...todo];
    tmpArray.splice(index, 1);
    setTodo(tmpArray);
  }

  return (
    <>
      <h1>Todo List</h1>
      <input
        type="text"
        value={newTodo}
        onChange={(item) => setNewTodo(item.target.value)}
      />
      <button onClick={() => addNewTodo()}>Adicionar</button>
      <ul>
        {todo.map((item, index) => (
          <li>
            {item}
            <button onClick={() => removeTodo(index)}>Deletar</button>
          </li>
        ))}
      </ul>
    </>
  );
}

export default App;