Next.js 14 na prática: Crie uma aplicação Full Stack

What's inside

Learning objectives

Criar do zero ao deploy um poderoso criador de currículos interativo.
Implementar um sistema de login utilizando google ou github
Gerenciar banco de dados utilizando um orm moderno (drizzle)

Gerar conteúdo com inteligência artificial
Monetizar o projeto com compras via stripe
Gerar pdf com componentes html

Criar do zero ao deploy um poderoso criador de currículos interativo.
Implementar um sistema de login utilizando google ou github
Gerenciar banco de dados utilizando um orm moderno (drizzle)
Gerar conteúdo com inteligência artificial
Monetizar o projeto com compras via stripe
Gerar pdf com componentes html

Syllabus

Introdução

Nesta aula você irá conhecer o projeto que iremos criar durante o curso.

Repositório do Projeto

Estrutura do Projeto

Nesta aula, vamos criar o projeto do zero e configurar o shadcn/ui

Nesta aula, vamos começar a estruturar a plataforma criando o layout do dashboard.

Nesta aula, vamos finalizar o layout e adicionar o suporte ao tema claro e escuro.

Nesta aula, vamos criar a página para listar os currículos do usuário e preparar o componente de modal.

Nesta aula, vamos criar o modal de criação de currículos e conhecer a biblioteca React Hook Form.

Nesta aula, vamos estruturar a página de currículo com seus painéis redimensionáveis.

Nesta aula, vamos criar a seção de informações básicas.

Nesta aula, vamos criar o componente de editor de texto usando a biblioteca TipTap.

Nesta aula, vamos começar a criação das seções multiplas.

Nesta aula, vamos adicionar o DragAndDrop para as seções múltiplas.

Nesta aula, vamos começar a criação do modal dinâmico para o cadastro das seções múltiplas.

Nesta aula, vamos finalizar o componente do modal.

Nesta aula, vamos criar o seletor de templates.

Nesta aula, vamos criar a seção para re-ordenar o layout do currículo.

Nesta aula, vamos criar a seção de temas.

Nesta aula, vamos criar a seção de linguagens.

Nesta aula, vamos conhecer a biblioteca que possibilita arrastar elementos.

Nesta aula, vamos renderizar o conteúdo preenchido no currículo, baseado no template selecionado.

Nesta aula, vamos configurar a biblioteca Auth.js, também conhecida por NextAuth.

Nesta aula, vamos configurar e integrar o Drizzle ORM para persistir a autenticação no banco de dados.

Nesta aula, vamos criar a tabela para armazenar os currículos e rodar nossa primeira migration.

Nesta aula, vamos atualizar os formulários existentes para salvar os currículos e então, listar todos na tela do dashboard.

Nesta aula, vamos salvar os dados do currículo após cada alteração, e também buscar os dados no carregamento da página.

Nesta aula, vamos adicionar a possibilidade de remover e duplicar currículos existentes.

Nesta aula, vamos adicionar a função de gerar PDF do currículo utilizando Puppeteer.

Nesta aula, vamos refatorar algumas chamadas API para conhecer a biblioteca TanStack Query.

Nesta aula, vamos criar a estrutura inicial do sistema de geração com IA.

Nesta aula, vamos utilizar IA para gerar conteúdo para vagas de emprego.

Nesta aula, vamos utilizar IA para aprimorar o conteúdo existente do currículo.

Nesta aula, vamos utilizar IA para traduzir o conteúdo do currículo em diversas linguagens.

Nesta aula, vamos conhecer o Stripe e configurar a integração.

Nesta aula, vamos entender o que são os "Stripe Webhooks" e adicionar o suporte a isso em nossa plataforma.

Nesta aula, vamos adicionar validações de crédito em todas as funcionalidades monetizadas da plataforma.

Nesta aula, vamos adicionar a tela de configurações de conta.

Nesta aula, vamos adicionar uma simples landing page para a plataforma.

Nesta aula, vamos configurar o SEO da plataforma e adicionar as OG Images

Nesta aula, vamos finalizar o projeto fazendo o deploy na Vercel.

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Uses Next.js 14, TypeScript, and Tailwind CSS, which are highly sought-after technologies in modern web development

Integrates Stripe for monetization, which allows developers to implement payment processing and subscription models

Employs OpenAI's API for content generation, which can enhance user experience and streamline content creation processes

Utilizes Auth.js (NextAuth) for authentication, which simplifies the implementation of secure user login and registration systems

Incorporates Drizzle ORM for database management, which provides a type-safe and efficient way to interact with databases

Features Puppeteer for PDF generation, which enables the creation of visually appealing and well-formatted documents directly from the application

Reviews summary

Construindo app full stack moderno

Segundo os alunos, este curso é altamente recomendado para quem busca criar uma aplicação full stack completa e moderna. Muitos elogiam a abordagem prática, que permite aprender fazendo, e a escolha de tecnologias atualizadas como Next.js 14, Drizzle ORM e shadcn/ui. Os estudantes destacam a qualidade do instrutor e a didática clara, mesmo ao abordar tópicos complexos como autenticação (Auth.js), banco de dados, inteligência artificial (OpenAI) e monetização (Stripe). A construção do projeto ResumeCraft do zero ao deploy é vista como um diferencial positivo, fornecendo uma base sólida para projetos futuros e para o mercado de trabalho. Algumas sugestões de melhoria incluem aprofundamento em testes e talvez mais detalhes sobre o deploy em ambientes de produção.

Prepara para o mercado de trabalho.

"Me sinto mais preparado para vagas de Next.js depois deste curso."

"O projeto pode ser usado como portfólio, demonstrando habilidades full stack."

"Aprendi técnicas e ferramentas que são essenciais no mercado atual."

"Excelente para impulsionar a carreira na área de desenvolvimento web."

Cobre autenticação, DB, AI, pagamentos.

"O curso cobre muita coisa: auth, banco, Stripe, OpenAI, deploy. É um combo completo."

"Adorei a parte de integração com IA e Stripe, adiciona muito valor ao projeto."

"Muito bom ver como integrar Auth.js e Drizzle em um projeto real."

"Cobre desde o setup inicial até funcionalidades avançadas como pagamentos."

Uso de stack atualizado e relevante para o mercado.

"Excelente curso, stack bem atual (Next 14, Drizzle, ShadCN), muito útil para quem busca se atualizar."

"Aborda uma stack extremamente relevante para o mercado em 2024."

"Gostei muito da escolha das tecnologias como Drizzle ORM e shadcn/ui, muito eficientes."

"Foco em Next.js 14 e TypeScript com outras libs modernas é um ponto fortíssimo."

Instrutor claro e explicações detalhadas.

"Didática do instrutor excelente, explicando passo a passo sem pular etapas."

"Professor explica muito bem, mesmo assuntos complexos se tornam fáceis de entender."

"A forma como o conteúdo é apresentado facilita muito o aprendizado."

"Muito clara a explicação de cada tópico abordado."

Desenvolva um app full stack completo do zero.

"O projeto desenvolvido no curso é bem legal, pois aborda diversos aspectos de um aplicação fullstack (auth, banco, IA, pagamentos...)."

"Construção de um projeto real e prático utilizando tecnologias atuais."

"Muito bom o curso, gostei bastante da ideia de construir um projeto completo do zero."

"Aprender fazendo em um projeto full stack real é o grande trunfo deste curso."

Alguns tópicos poderiam ser mais detalhados.

"Senti falta de mais conteúdo sobre testes e talvez algumas otimizações de performance."

"O deploy poderia ser um pouco mais explorado, talvez com outras opções além da Vercel."

"Algumas libs são introduzidas, mas o aprofundamento é limitado ao necessário para o projeto."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Next.js 14 na prática: Crie uma aplicação Full Stack - 2024 with these activities:

Revisar os Fundamentos do React

Show steps

Refresque seus conhecimentos em React para entender melhor como o Next.js funciona e aproveitar ao máximo o curso.

Browse courses on Next.js

Show steps

Revise os conceitos básicos de componentes, props e state em React.
Pratique a criação de componentes simples e a manipulação de eventos.
Explore a documentação oficial do React para relembrar os principais recursos.

Revisar Conceitos de TypeScript

Show steps

Relembre os conceitos de tipagem estática e interfaces em TypeScript para facilitar o desenvolvimento com Next.js.

Browse courses on TypeScript

Show steps

Revise os tipos básicos do TypeScript (string, number, boolean, etc.).
Estude como definir interfaces e tipos personalizados.
Pratique a utilização de TypeScript em pequenos projetos.

Leitura: 'Next.js: Up and Running'

Show steps

Leia este livro para obter uma compreensão mais profunda do Next.js e suas funcionalidades.

View Putting Knowledge to Work on Amazon

Show steps

Leia os capítulos introdutórios para entender os conceitos básicos do Next.js.
Explore os capítulos sobre roteamento, renderização e gerenciamento de dados.
Experimente os exemplos de código fornecidos no livro.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Criar um Portfólio Pessoal Simples com Next.js

Show steps

Desenvolva um portfólio pessoal para aplicar os conhecimentos adquiridos no curso e demonstrar suas habilidades.

Show steps

Crie um novo projeto Next.js e configure o ambiente de desenvolvimento.
Projete o layout do seu portfólio, incluindo uma página inicial, uma página de projetos e uma página de contato.
Implemente os componentes e as funcionalidades do seu portfólio, utilizando os recursos do Next.js.
Faça o deploy do seu portfólio em uma plataforma como Vercel ou Netlify.

Escrever um Artigo sobre um Tópico Específico do Next.js

Show steps

Escreva um artigo detalhado sobre um tópico específico do Next.js para aprofundar seu conhecimento e compartilhar com a comunidade.

Browse courses on Next.js

Show steps

Escolha um tópico específico do Next.js que você deseja explorar (por exemplo, roteamento dinâmico, API routes, etc.).
Pesquise e colete informações relevantes sobre o tópico escolhido.
Escreva um artigo claro e conciso, explicando o tópico em detalhes e fornecendo exemplos práticos.
Publique seu artigo em um blog pessoal ou em uma plataforma como Medium.

Contribuir para um Projeto Open Source Next.js

Show steps

Contribua para um projeto open source Next.js para ganhar experiência prática e colaborar com outros desenvolvedores.

Browse courses on Next.js

Show steps

Encontre um projeto open source Next.js que você ache interessante.
Explore o código do projeto e identifique áreas onde você pode contribuir (por exemplo, correção de bugs, adição de novas funcionalidades, etc.).
Crie um fork do projeto e implemente suas alterações.
Envie um pull request com suas alterações para o projeto original.

Leitura: 'Fullstack React with Next.js'

Show steps

Leia este livro para aprender a construir aplicações full-stack completas com Next.js.

View Putting Knowledge to Work on Amazon

Show steps

Leia os capítulos sobre a criação de APIs e a integração com bancos de dados.
Explore os capítulos sobre autenticação e autorização.
Experimente os exemplos de código fornecidos no livro.

Career center

Learners who complete Next.js 14 na prática: Crie uma aplicação Full Stack - 2024 will develop knowledge and skills that may be useful to these careers:

Desenvolvedor Full-Stack

O desenvolvedor full stack atua tanto no front-end quanto no back-end, criando aplicações completas. Este curso é ideal para quem busca essa versatilidade, pois ensina a construir um projeto complexo, o ResumeCraft, usando Next.js 14 para o front-end, gerenciamento de banco de dados com Drizzle ORM, implementação de autenticação com Auth.js e integração de APIs. O curso aborda também funcionalidades essenciais como geração de conteúdo com IA, processamento de pagamentos (Stripe) e geração de PDFs, capacitando o desenvolvedor full stack a dominar um leque amplo de tecnologias.

See salaries and explore the career path for Desenvolvedor Full-Stack

Desenvolvedor de Aplicações Web

O desenvolvedor de aplicações web constrói sistemas acessíveis através de navegadores, usando tecnologias como HTML, CSS e JavaScript. Este curso é muito relevante para essa carreira, pois aborda o desenvolvimento de um projeto web full stack, o ResumeCraft, utilizando Next.js 14, TypeScript e várias bibliotecas para criação de interfaces, gerenciamento de dados e funcionalidades avançadas. A experiência prática na construção de um projeto completo o prepara para lidar com os desafios de um desenvolvedor de aplicações web.

See salaries and explore the career path for Desenvolvedor de Aplicações Web

Desenvolvedor Front-End

Um desenvolvedor front-end cria interfaces de usuário para aplicativos e sites, garantindo que sejam intuitivos e responsivos. Este curso capacita você na criação de interfaces modernas com Next.js 14, utilizando componentes de interface reutilizáveis (shadcn/ui) e estilização com Tailwind CSS. A experiência prática na construção do ResumeCraft, um criador de currículos completo, oferece um portfólio relevante e demonstra proficiência no desenvolvimento front-end com foco em formulários (React Hook Form), gerenciamento de estados (TanStack Query) e edição em tempo real.

See salaries and explore the career path for Desenvolvedor Front-End

Desenvolvedor de Ferramentas de Produtividade

Um desenvolvedor de ferramentas de produtividade cria software para ajudar as pessoas a serem mais eficientes. Este curso mostra a construção de um criador de currículos interativo completo, o ResumeCraft, que demonstra como criar uma ferramenta que melhora a produtividade dos usuários, facilitando a criação de currículos. A experiência pratica com Next.js 14, React Hook Form e outras tecnologias para criação de interfaces pode ajudar um desenvolvedor de ferramentas de produtividade a criar soluções de alta qualidade.

See salaries and explore the career path for Desenvolvedor de Ferramentas de Produtividade

Engenheiro de Software

Um engenheiro de software projeta e desenvolve soluções tecnológicas, buscando a melhor arquitetura e desempenho. Este curso oferece uma base sólida em um projeto de software real, o ResumeCraft, que permite treinar a criação de funcionalidades complexas como autenticação, gestão de banco de dados, geração de conteúdo com IA e processamento de pagamentos. O curso também é relevante para a familiarização com diversas bibliotecas e ferramentas de desenvolvimento, que são cruciais para um engenheiro de software.

See salaries and explore the career path for Engenheiro de Software

Especialista em Interface de Usuário

Um especialista em interface de usuário se concentra na criação de experiências de usuário agradáveis e eficazes. O curso auxilia no desenvolvimento de uma ferramenta de criação de currículos, o ResumeCraft, que envolve a criação de interfaces interativas e funcionais. Com o uso de shadcn/ui e Tailwind CSS, o profissional aprende a construir componentes que garantem uma experiência de usuário moderna. O curso também aborda a importância de formulários bem projetados com React Hook Form, além de edição em tempo real e personalização de conteúdo.

See salaries and explore the career path for Especialista em Interface de Usuário

Desenvolvedor de API

Um desenvolvedor de API cria interfaces que permitem a comunicação entre diferentes softwares. Este curso aborda a criação e consumo de APIs usando ferramentas como Next.js 14, além de tratar de autenticação (Auth.js) , gerenciamento de dados (Drizzle ORM), e integração de serviços externos (Stripe e OpenAI). O curso leva o aluno a construir uma aplicação completa, o ResumeCraft, que mostra as melhores práticas para desenvolvimento de APIs eficazes.

See salaries and explore the career path for Desenvolvedor de API

Especialista em Soluções de Pagamento Online

Um especialista em soluções de pagamento online implementa e gerencia sistemas de pagamento em plataformas digitais. Este curso é especialmente útil pois aborda a integração com a plataforma Stripe, que é utilizada para implementar funcionalidades premium no ResumeCraft. A experiência prática com pagamentos online, incluindo o uso de webhooks do Stripe, capacita o profissional a lidar com desafios e implementações de pagamentos web complexos.

See salaries and explore the career path for Especialista em Soluções de Pagamento Online

Consultor de Tecnología

O consultor de tecnologia aconselha empresas na adoção e utilização de novas tecnologias. Este curso é útil porque oferece o aprendizado de uma stack moderna e bastante utilizada no mercado, incluindo Next.js 14 e outras ferramentas. Com o desenvolvimento prático e detalhado do ResumeCraft, o consultor aprenderá a fundo o processo de construção de aplicações, podendo assim melhor aconselhar seus clientes. A familiaridade com as últimas tecnologias e ferramentas é essencial para um consultor de tecnologia.

See salaries and explore the career path for Consultor de Tecnología

Especialista em Integração de Sistemas

Um especialista em integração de sistemas garante que diferentes sistemas de software funcionem juntos de maneira eficaz. O curso é útil para este profissional porque aborda a integração de diversas tecnologias, como Next.js 14, Auth.js para autenticação, Drizzle ORM para gerenciamento de dados e Stripe para pagamentos. Com o desenvolvimento prático do ResumeCraft, um projeto complexo que integra essas ferramentas, ele entenderá como diferentes partes de um sistema podem trabalhar em harmonia.

See salaries and explore the career path for Especialista em Integração de Sistemas

Analista de Sistemas

O analista de sistemas avalia as necessidades de uma empresa e propõe soluções tecnológicas. A experiência na criação do ResumeCraft, um projeto completo que integra diversas tecnologias, como Next.js 14, TypeScript, Drizzle ORM, e funcionalidades de IA, pode ajudar o analista de sistemas a entender as possibilidades e desafios na construção de aplicações web. O curso oferece um bom panorama do desenvolvimento de aplicações, o que permite ao analista ser mais preciso nas suas recomendações.

See salaries and explore the career path for Analista de Sistemas

Consultor de Inovação Tecnológica

Um consultor de inovação tecnológica auxilia empresas na adoção de novas tecnologias. O curso apresenta uma stack moderna e bastante usada no mercado de trabalho, incluindo o framework Next.js 14, e aborda funcionalidades avançadas como geração de conteúdo com IA e monetização com Stripe. Este conhecimento pode ajudar o consultor a identificar e recomendar soluções inovadoras para seus clientes, posicionando-os à frente no mercado.

See salaries and explore the career path for Consultor de Inovação Tecnológica

Arquiteto de Software

O arquiteto de software planeja a estrutura de sistemas complexos, definindo as tecnologias e padrões a serem utilizados. Embora o curso de Next.js 14 na prática seja focado na construção de um projeto específico, o ResumeCraft, ele oferece uma visão prática de como diversas tecnologias podem ser integradas em um projeto, desde o front-end até o back-end. O curso oferece um exemplo de uma arquitetura de software moderna, com autenticação, banco de dados e funcionalidades de IA, que pode ajudar o arquiteto de software em suas decisões.

See salaries and explore the career path for Arquiteto de Software

Gerente de Produto de Software

O gerente de produto de software define a visão e o roteiro de desenvolvimento de um produto de software. Este curso, que leva um projeto desde a concepção até o deploy, pode dar uma visão sobre o processo de desenvolvimento. O curso detalha a implementação de funcionalidades como autenticação, criação de currículos, integração com inteligência artificial e geração de PDFs, que podem ser úteis na definição e planejamento de novos produtos.

See salaries and explore the career path for Gerente de Produto de Software

Especialista em DevOps

Um especialista em DevOps é responsável por automatizar e otimizar o processo de desenvolvimento e implantação de software. O curso aborda a implantação (deploy) de uma aplicação na Vercel, o que é um aspecto comum do trabalho de um especialista em DevOps. A experiência com um projeto real como o ResumeCraft pode dar uma visão prática de como automatizar a implantação e manutenção de aplicações web, além de familiarizar o especialista com diversas tecnologias modernas.

See salaries and explore the career path for Especialista em DevOps

Next.js 14 na prática

Crie uma aplicação Full Stack - 2024

What's inside

Learning objectives

Syllabus

Traffic lights

Save this course

Reviews summary

Construindo app full stack moderno

Activities

Career center

Reading list

Share

Similar courses