Cursos

Clone do Twitter/X: Interface Completa com Next.js + Tailwind

• Nível: Projetos
• Módulos: 6
• Aulas: 22
• Tempo de leitura: 1h 21min
• Tecnologias: Next.js, Tailwind
• Preço: R$ 97,00

Código do curso: github.com/johnpires/clone-twitter-nextjs-tailwind

Conteúdo do curso

Módulo 1: Introdução e Setup

Visão geral do que será construído, configuração do ambiente Next.js 14 com Tailwind CSS e TypeScript, e estrutura do projeto.

1. O que vamos construir — Visão Geral do Clone do Twitter/X (2 min)
2. Configurando o Ambiente — Next.js 14 + Tailwind CSS + TypeScript (8 min)
3. Estrutura do Projeto e Arquitetura de Componentes (4 min)

Módulo 2: Design System e Layout Base

Configuração do tema Tailwind personalizado com as cores do Twitter/X, criação da Sidebar de navegação, RightSidebar e layout responsivo.

1. Configurando o Tema Tailwind — Cores e Tipografia do Twitter/X (2 min)
2. Componente Sidebar — Navegação Principal com Ícones (8 min)
3. Componente RightSidebar — Tendências e Sugestões (8 min)
4. Layout Responsivo com Breakpoints Tailwind (2 min)

Módulo 3: Feed e Componentes de Tweet

Construção dos componentes TweetCard e TweetForm, montagem do feed principal com lista de tweets, scroll infinito e loading states.

1. Componente TweetCard — Exibindo Tweets com Avatar e Ações (2 min)
2. Componente TweetForm — Criando Novos Tweets com Validação (3 min)
3. Feed Principal com Lista de Tweets e API Route GET (4 min)
4. Scroll Infinito e Loading States com Intersection Observer (2 min)

Módulo 4: Autenticação e Perfil

Implementação de autenticação completa com NextAuth.js, páginas de login e cadastro, página de perfil do usuário e middleware de proteção de rotas.

1. Configurando NextAuth.js com Credenciais e Prisma Adapter (4 min)
2. Páginas de Login e Cadastro com Formulários Validados (3 min)
3. Página de Perfil do Usuário com Header Dinâmico (3 min)
4. Middleware de Proteção de Rotas com next-auth (3 min)

Módulo 5: Funcionalidades Sociais

Sistema de likes com optimistic UI, retweets e citações, comentários e threads, e sistema de follow/unfollow entre usuários.

1. Sistema de Likes — Toggle com Optimistic UI (4 min)
2. Retweets e Citações de Tweets (3 min)
3. Comentários e Threads — Replies Aninhados (4 min)
4. Sistema de Follow/Unfollow entre Usuários (3 min)

Módulo 6: Deploy e Conclusão

Deploy na Vercel com configuração de variáveis de ambiente, otimizações de performance com Image Optimization e próximos passos do projeto.

1. Deploy na Vercel — Configuração e Variáveis de Ambiente (3 min)
2. Otimizações de Performance — next/image e Caching (3 min)
3. Próximos Passos e Melhorias do Projeto (3 min)