Construa um App Full Stack com Next.js 14, Tailwind, shadcn/ui e SQLite | Do zero ao deploy (2024)
🔗 Link do projeto no Codante: https://codante.io/mini-projetos/siga...
🔗 Aplicação no ar: https://sigaseuatleta.com.br
🔗 Nossa comunidade no Discord: / discord
🔗 Assine o Codante com R$50 de desconto https://codante.io/planos?coupon=ICARO
Nesse vídeo vamos criar juntos uma lista com os atletas olímpicos e paralímpicos do Brasil 💪🏽
Vamos utilizar Next.js, Typescript, React, Tailwind CSS, shadcn/ui, SQLite e Turso DB. Depois de construir tudo vamos fazer o deploy na Vercel.
Capítulos
00:00 Introdução
01:16 Participando do projeto
05:48 Revisão do README e dicas
16:53 Configurando o Next.js
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.
Tags: #nextjs #nextjs14 #fullstack #vercel #react18 #reactjs #codante #codante.io #tutorialpassoapasso #tutorial #frontend #shadcn #tailwind #sql
Смотрите видео Construa um App Full Stack com Next.js 14, Tailwind, shadcn/ui e SQLite | Do zero ao deploy (2024) онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Codante - Evolua no front-end 07 Сентябрь 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 2,698 раз и оно понравилось 232 людям.