Construa um App Full Stack com Next.js 14, Tailwind, shadcn/ui e SQLite | Do zero ao deploy (2024)

Nesse vídeo vamos criar juntos uma lista com os atletas olímpicos e paralímpicos do Brasil 💪🏽

Capítulos
00:00 Introdução
01:16 Participando do projeto
05:48 Revisão do README e dicas
26:31 Configurando o backend: Prisma, TursoDB e SQLite
47:15 Criando a navbar
58:57 Exibindo os dados dos atletas no front-end
1:14:41 Estrutura do card com shadcn/ui
1:16:50 Criando o header
1:30:15 Formatando o número de seguidores
1:36:33 Incluindo a bio do atleta no card
1:39:56 Criando o footer do card
1:47:35 Customizando o card
1:51:36 Criando o fundo colorido do card
1:58:07 Criando a paginação no banco de dados
2:04:38 Configurando o componente AthletesList
2:11:05 Instalando a lib para fazer o scroll infinito
2:20:08 Filtro por nome e bio no back-end
2:23:42 Input de search
2:29:50 Atualizando a url com os search params
2:40:48 Mandando os search params para o backend
2:46:52 Filtro por categoria no backend
2:50:20 Toggle group para selecionar categoria
3:00:27 Atualizando os search params com a categoria
3:05:26 Mandando os search params para o back-end
3:08:47 Filtro por esporte no backend
3:11:07 Select de esportes
3:37:07 Atualizando a url com os search params
3:42:36 Mandando os search params para filtrar no banco de dados
3:44:47 Ordenação (sort by) no backend
3:52:09 Componente de select para ordenação
3:59:26 Atualizando a url com search params
4:07:09 Ordenação no backend
4:10:55 Filtros no mobile
4:24:51 Fazendo o deploy na Vercel
Se você tem alguma dúvida ou se algo não está claro, sinta-se à vontade para deixar um comentário. Lembre-se de dar um like se este vídeo te ajudou e se inscrever para mais conteúdo como este!

Este tutorial é ideal para quem tem conhecimento prévio em React, HTML, CSS e JavaScript, e está interessado em aprimorar suas habilidades em NextJS e React.

[maycondouglas]

Cara, dificil ver esse nível de projeto no Brasil, geralmente só tem gringo trazendo aplicações completas. Parabéns.

[geraldocoelho]

@Codante like primeiro, pois é mais um super projeto. Obrigado.

[fillipeamg]

Coisa boa, finalmente saiu! Ansioso pra codar. Valeu!

[renatafreitas]

Os direitos de acesso do github foram negados.. Não consegui fazer o clone, mesmo depois da verificação do fork.

[fillipeamg]

Tem um problema com as imagens dos perfis de instagram...

Os links das imagens dos avatares possuem um token e expiram. É inútil salvar essas url no banco de dados.

Penso que a forma mais simples ai seria infelizmente baixar tudo, e armazenar no servidor próprio ou localmente mesmo.

[gabrielTx]

alguém sabe me dizer se usar o shadcn vai diminuir a velocidade do site? aumentar o tbt e tals

[Rafaeldias-]

Estou tendo o seguinte erro ao fazer a requisição para buscar os atletas, mais alguém teve esse problema?
Invalid `prisma.athlete.findMany()` invocation:

RESPONSE_TOO_LARGE: Response is too large