Desafio: Full Stack com Paginação
Crie uma aplicação full stack simples, mas completa, que lista produtos com suporte a paginação no backend e navegação interativa no frontend.
Criado em 26 de dezembro de 2025
Crie uma aplicação full stack simples, mas completa, que lista produtos com suporte a paginação no backend e navegação interativa no frontend.
Este desafio é ideal para quem está estudando desenvolvimento web com Spring Boot (Java) no backend e HTML + JavaScript puro no frontend, com um toque de integração real entre as camadas.
📦 Contexto
Imagine que você trabalha em uma pequena empresa e foi encarregado de criar uma interface simples para listar os produtos cadastrados em um banco de dados. O problema é que a base de dados já conta com centenas de registros, então a ideia de listar "tudo de uma vez" está fora de cogitação.
Seu objetivo é:
Desenvolver um backend paginado usando Spring Boot + JPA, e um frontend navegável que se comunica via API REST.
🎯 Objetivo
O desafio consiste em implementar (ou entender e adaptar) a seguinte estrutura:
Backend (Java + Spring Boot):
Modelo
Productpersistido via JPADTO para expor apenas
nameepriceRepositório com
JpaRepositoryServiço que aplica um limite de paginação de até 100 itens por página
Controller REST acessível via
/api/v1/productClasse
PageResponse<T>que encapsula as informações de paginação no retorno
Frontend (HTML + JavaScript):
Página simples que:
Lista produtos vindos da API
Exibe os campos
name,priceecreatedAtPermite navegação entre páginas com botões "Anterior" e "Próxima"
Atualiza dinamicamente a interface a cada mudança de página
🧪 Requisitos Técnicos
Banco de Dados:
PostgreSQL
Nome do banco:
produtosCredenciais padrão:
postgres/manager
⚠️ Lembre-se de rodar o PostgreSQL localmente e criar o banco manualmente antes de iniciar a aplicação.
Configuração esperada do application.properties:
spring.datasource.url=jdbc:postgresql://localhost:5432/produtos
spring.datasource.username=postgres
spring.datasource.password=manager
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.PostgreSQLDialect