Next.js avançado - Aprenda Atomic Design com Chakra UI

Nesta aula, vamos criar uma tela de login utilizando o método de design atomic e a biblioteca Chakra UI. Começaremos revisando o que é o design atomic e sua importância para a construção de interfaces de usuário consistentes e de fácil manutenção. Em seguida, vamos criar os componentes atômicos necessários para a nossa tela de login, como o input, o botão e o formulário.

PARA CONSUMIR A API E REALIZAR O LOGIN VOCÊ PODE UTILIZAR ESSA URL https://nodejs-production-22cd.up.railway.app

Como alternativa você pode também rodar o projeto do backend na sua própria máquina local configurando o env com o  secret jwt e a url de um banco MongoDB

https://github.com/gumiranda/CrazyStackNodeJs

A aula "Criando form genérico usando atomic design" irá ensinar como criar um formulário genérico que pode ser utilizado em diferentes partes da aplicação, baseado no conceito de atomic design.​

O objetivo é mostrar como criar componentes reutilizáveis de forma organizada e padronizada. A aula irá explicar como utilizar os conceitos de atomic design na criação de formulários, desde os átomos (componentes menores, como campos de formulários), moléculas (componentes intermediários, como grupos de campos), até os organismos (componentes complexos, como formulários completos).

A aula irá abordar também o uso de validações de formulários e como implementá-las de forma eficiente. Ao final da aula, os alunos terão aprendido a criar formulários genéricos e reutilizáveis com base no conceito de atomic design.

Nesta aula, você irá aprender a construir uma feature completa de login, incluindo validação de formulários com Yup e gerenciamento de estado com React Hook Form. O objetivo é construir uma interface de login reutilizável e fácil de usar com validações de formulários eficientes e gerenciamento de estado simplificado.​

Antes de começarmos, é importante ter uma compreensão básica de hooks e Yup. Se você ainda não tem essa compreensão, recomendo fazer uma pesquisa básica sobre esses conceitos antes de prosseguir.

Começaremos importando as dependências necessárias e criando um schema de validação com Yup. O schema define as regras de validação que serão aplicadas aos dados do formulário antes de enviá-los para o servidor. Em seguida, utilizaremos o React Hook Form para gerenciar o estado do formulário e registrar os campos de entrada.

Em seguida, adicionaremos as validações Yup aos campos do formulário usando o método "register" e "handleSubmit" fornecidos pelo React Hook Form. Ao clicar no botão "Enviar", o formulário será submetido e as validações Yup serão aplicadas aos dados do formulário. Se houver algum erro, será exibido uma mensagem de erro para o usuário.

Finalmente, adicionaremos um recurso de "loading" ao botão de envio para fornecer feedback visual ao usuário durante a submissão do formulário.

Com isso, você terá uma feature completa de login usando React Hook Form e Yup, além de ter aproveitado o formulário genérico construído na aula anterior. Essa solução é escalável e fácil de manter, além de ser altamente reutilizável em outros projetos.

Nesta aula, você aprenderá como carregar os dados de um usuário logado a partir de um cookie usando a biblioteca "nookies".​

​A ideia é salvar o estado de autenticação do usuário no cookie ao fazer o login, e carregá-lo na próxima vez que o usuário acessar o site. Isso é importante para que o usuário não precise fazer login novamente toda vez que recarregar a página.

A biblioteca "nookies" é uma solução fácil de usar para gerenciar cookies em aplicações Next.js. Ela fornece uma maneira simples de ler e escrever cookies em sua aplicação, além de permitir que você configure a validade de um cookie e outras opções importantes.

A aula começará explicando como instalar e configurar a biblioteca "nookies". Em seguida, você aprenderá como usar o hook "useCookies" para ler o cookie de autenticação do usuário e verificar se ele está logado.

Finalmente, você verá como salvar o estado de autenticação do usuário no cookie ao fazer login e como excluir o cookie ao fazer logout.

Com essa aula, você terá uma solução completa e confiável para gerenciar o estado de autenticação de um usuário em sua aplicação Next.js.

Nessa aula, você aprenderá a criar um componente de modal genérico utilizando a biblioteca Chakra UI. O objetivo é ter um componente reutilizável que possa ser usado em vários lugares da aplicação, sem precisar escrever o código do modal toda vez que precisarmos dele.​

O componente de modal consistirá em uma janela flutuante que será exibida em cima do conteúdo da aplicação, ocupando toda a tela e escurecendo o fundo. O usuário poderá interagir com o conteúdo do modal e fechá-lo clicando em um botão ou clicando fora da janela.

Para criar esse componente, você precisará importar os componentes Modal, ModalOverlay, ModalContent, ModalHeader, ModalFooter e ModalBody da biblioteca Chakra UI. Além disso, você precisará utilizar os hooks useState e useRef do React para controlar a exibição do modal e a referência do elemento do modal, respectivamente.

Com esses componentes e hooks, você poderá criar a estrutura básica do modal, que consistirá em um componente Modal com uma ModalOverlay que cobrirá o fundo da tela, uma ModalContent com o conteúdo principal do modal, uma ModalHeader com o título do modal, uma ModalBody com o corpo do modal e uma ModalFooter com os botões de ação.

Você também precisará adicionar algumas interações ao componente, como a capacidade de abrir e fechar o modal, bem como a opção de fechar o modal ao clicar fora da janela. Para isso, você pode usar a função useEffect e o hook useRef para manter a referência do elemento do modal e controlar sua exibição.

Com todos esses componentes e interações, você terá criado um componente de modal genérico reutilizável que pode ser usado em várias partes da aplicação. Espero que você aproveite essa aula e aprenda a criar componentes de modal com Chakra UI!

Nesta aula, você aprenderá a criar modais genéricos de sucesso e erro na sua aplicação Next.js. Estes modais são uma forma importante de dar feedback ao usuário sobre ações que ele realizou na sua aplicação. Ao invés de criar modais específicos para cada ação, criaremos modais genéricos que poderão ser reutilizados em diferentes pontos da aplicação.​

Para isso, utilizaremos o pacote "chakra-ui" para estilizar nossos modais de maneira rápida e fácil. Além disso, também usaremos o gerenciador de estado "react-query" para lidar com a exibição dos modais na aplicação.

Nesta aula, você aprenderá como criar os componentes BoxSuccess e BoxError, que serão nossos componentes de feedback genéricos.

Você também aprenderá como utilizar o estado do "react-query" para controlar a exibição dos componentes na aplicação, tornando este processo mais simples e intuitivo.

Ao final da aula, você terá aprendido a criar modais genéricos na sua aplicação Next.js, o que lhe permitirá dar um feedback mais personalizado ao seu usuário sobre as ações que ele realiza na sua aplicação.

Objetivos da aula:

• Compreender a importância de exibir indicadores de carregamento em sistemas web

• Aprender a utilizar a biblioteca react-loading-overlay-ts para exibir indicadores de carregamento em componentes React

• Tópicos abordados:

  • A importância de indicadores de carregamento em sistemas web

  • O que é a biblioteca react-loading-overlay-ts e como ela funciona

  • Utilizando a biblioteca react-loading-overlay-ts para exibir indicadores de carregamento em componentes React

  Atividades práticas:

  • Adicionar a biblioteca react-loading-overlay-ts ao projeto Next.js

  • Utilizar a biblioteca react-loading-overlay-ts para exibir um indicador de carregamento enquanto as requisições do sistema de agendamentos são processadas

  • Personalizar o indicador de carregamento com estilos CSS personalizados, como cores e animações

A aula de "Sidebar" irá ensinar como criar uma barra lateral (ou sidebar) personalizada no painel de administração de um sistema de agendamentos online.

A barra lateral é uma parte importante do painel de administração, pois fornece acesso rápido a várias seções e funcionalidades da aplicação. É uma maneira eficiente de navegar no sistema e ajuda a melhorar a experiência do usuário.

Durante a aula, os alunos irão aprender a utilizar o framework Next.js e a biblioteca React para criar a barra lateral. Eles irão aprender a dividir a página em dois componentes principais: a barra lateral e o conteúdo principal da página. A barra lateral será fixa na tela e exibirá uma lista de links para as diferentes seções do painel de administração. O conteúdo principal será atualizado dinamicamente ao clicar em cada link da barra lateral.

Os alunos irão aprender a utilizar o componente Link do Next.js para criar links para as diferentes seções do painel de administração, e a utilizar o componente useState do React para gerenciar o estado da barra lateral (aberta ou fechada). Eles também irão aprender a utilizar Chakra UI para estilizar a barra lateral e o conteúdo principal da página.

Ao final da aula, os alunos terão aprendido como criar uma barra lateral personalizada no painel de administração do sistema de agendamentos online. Eles terão adquirido habilidades em Next.js, React e Chakra UI, e terão aprendido a utilizar essas ferramentas para criar uma experiência de usuário mais agradável e eficiente.

O código a seguir é a implementação de um componente ActiveLink que utiliza as bibliotecas Next.js e React para renderizar links que ficam ativos (ou em destaque) quando a página atual corresponde ao link.

Na aula "Navbar no painel admin", vamos aprender como criar uma barra de navegação (ou navbar) para o painel administrativo de um sistema web. A navbar é um elemento muito importante em qualquer sistema web, pois permite que os usuários possam navegar pelas diferentes páginas e funcionalidades do sistema de forma intuitiva e eficiente.

Para essa aula, vamos utilizar o framework Chakra UI para construir a nossa navbar. O Chakra UI é um framework de design de componentes para React, que oferece uma série de componentes personalizáveis e fáceis de usar, o que o torna uma ótima escolha para a criação de interfaces de usuário.

Durante a aula, vamos criar uma navbar com alguns links para as principais seções do nosso sistema de agendamentos online. Também vamos usar o conceito de rotas do Next.js para tornar os links da navbar funcionais, ou seja, ao clicar em um link da navbar, o usuário será direcionado para a página correspondente.

Além disso, vamos explorar o conceito de responsividade, tornando a nossa navbar adaptável a diferentes tamanhos de tela e dispositivos. Isso é muito importante, já que muitos usuários acessam sistemas web de diferentes dispositivos, como computadores, tablets e smartphones.

Por fim, vamos criar uma função que permite abrir e fechar a navbar em dispositivos móveis, para que os usuários possam acessar facilmente os links da navbar em telas menores.

Com tudo isso, esperamos que você aprenda como criar uma navbar funcional e estilizada para o seu painel administrativo, oferecendo aos usuários uma experiência de usuário agradável e intuitiva.

Na aula "Criando tabela dinâmica e genérica com Chakra UI", vamos aprender como criar uma tabela dinâmica e genérica utilizando a biblioteca Chakra UI, que é uma das mais populares para desenvolvimento de interfaces de usuário em React.

Uma tabela é uma estrutura muito comum em aplicações web para exibir dados de forma organizada e facilmente acessível aos usuários. No entanto, criar tabelas pode ser uma tarefa tediosa e repetitiva, especialmente se tivermos que criar uma tabela diferente para cada conjunto de dados que desejamos exibir.

Nessa aula, iremos criar uma tabela dinâmica que poderá ser reutilizada em diferentes partes da aplicação, tornando o processo de exibição de dados muito mais fácil e eficiente.

Para isso, utilizaremos o poderoso sistema de grade do Chakra UI para criar uma tabela com colunas flexíveis e responsivas, capaz de se adaptar a diferentes tamanhos de tela. Além disso, usaremos props dinâmicas para renderizar diferentes tipos de dados e tornar nossa tabela ainda mais genérica.

Ao final da aula, você terá aprendido como criar uma tabela dinâmica e genérica utilizando o Chakra UI, tornando o processo de exibição de dados em suas aplicações muito mais fácil e eficiente.

Bem-vindo à aula sobre a função utilitária de autenticação no lado do servidor (SSR) para aplicações Next.js. Autenticação é um aspecto fundamental de muitas aplicações modernas que lidam com informações sensíveis do usuário. É importante garantir que os usuários estejam autenticados e autorizados a acessar determinados recursos ou páginas da aplicação.

Nesta aula, você aprenderá a criar uma função utilitária que pode ser usada para proteger rotas que exigem autenticação. Veremos como criar uma função de middleware que verifica se o usuário está autenticado e, se não estiver, redireciona para a página de login. Essa função pode ser aplicada em qualquer página ou rota que exige autenticação, tornando o processo de autenticação mais seguro e confiável.

Na aula "Hook de gerenciamento de categorias com React Query e Axios", você aprenderá como usar React Query e Axios para gerenciar categorias em um aplicativo React. O React Query é uma biblioteca de gerenciamento de cache que ajuda a tornar as consultas e mutações de dados mais eficientes. Já o Axios é uma biblioteca de requisições HTTP que facilita a interação do aplicativo com um servidor.​

​Você verá como criar um hook customizado para gerenciar as categorias do seu aplicativo. Esse hook terá funções para buscar as categorias do servidor, pré-carregar dados de uma categoria específica, excluir categorias e selecionar categorias para exclusão em massa. Você também verá como usar o React Query para armazenar em cache os dados das categorias e como usar o Axios para fazer requisições para o servidor.

Durante a aula, serão apresentados exemplos de código e explicações detalhadas para que você possa acompanhar e entender todo o processo de criação do hook. Você também aprenderá a usar alguns recursos avançados do React Query, como invalidação manual de cache e revalidação de dados após uma mutação.

Ao final da aula, você terá um entendimento sólido de como usar o React Query e o Axios para gerenciar dados em um aplicativo React e como criar um hook personalizado para gerenciar as categorias do seu aplicativo.

Na aula "Hook de gerenciamento de categorias com React Query e Axios", você aprenderá como usar React Query e Axios para gerenciar categorias em um aplicativo React. O React Query é uma biblioteca de gerenciamento de cache que ajuda a tornar as consultas e mutações de dados mais eficientes. Já o Axios é uma biblioteca de requisições HTTP que facilita a interação do aplicativo com um servidor.​

​Você verá como criar um hook customizado para gerenciar as categorias do seu aplicativo. Esse hook terá funções para buscar as categorias do servidor, pré-carregar dados de uma categoria específica, excluir categorias e selecionar categorias para exclusão em massa. Você também verá como usar o React Query para armazenar em cache os dados das categorias e como usar o Axios para fazer requisições para o servidor.

Durante a aula, serão apresentados exemplos de código e explicações detalhadas para que você possa acompanhar e entender todo o processo de criação do hook. Você também aprenderá a usar alguns recursos avançados do React Query, como invalidação manual de cache e revalidação de dados após uma mutação.

Ao final da aula, você terá um entendimento sólido de como usar o React Query e o Axios para gerenciar dados em um aplicativo React e como criar um hook personalizado para gerenciar as categorias do seu aplicativo.

A aula "Desenvolvendo um componente de Paginação para React com Chakra UI" é um tutorial que ensina como criar um componente de paginação para uma aplicação web utilizando React e a biblioteca de design Chakra UI.

O objetivo principal aqui é ensinar os fundamentos do desenvolvimento de um componente de paginação personalizado, que possa ser utilizado em diferentes projetos React. Irei explicar os conceitos básicos de paginação, como o número de registros por página e o número total de registros.

Fala dev doido! Nesta aula, vamos aprender como criar uma lista genérica com layout de grid usando a biblioteca de componentes Chakra UI em React. A lista é um componente fundamental em muitas aplicações e pode ser usada para exibir uma variedade de conteúdos, como itens de uma loja, postagens em um blog ou mensagens em uma caixa de entrada. O layout de grid é uma técnica popular para organizar esses itens em uma grade visualmente agradável e responsiva. Com a ajuda da biblioteca Chakra UI, que fornece componentes pré-construídos com estilo personalizável, criaremos uma lista genérica com layout de grid que pode ser facilmente adaptada para diversos tipos de conteúdo. Vamos começar!

Bem-vindo à aula "Componente Genérico de Detalhes de Categoria usando Chakra UI e Atomic Design". Nesta aula, exploraremos como criar um componente genérico de detalhes de categoria, que pode ser facilmente reutilizado em diferentes projetos de interface do usuário. Usando o poder do Chakra UI, um conjunto de ferramentas de design de interface do usuário, e o Atomic Design, um método para criar hierarquias de componentes de interface do usuário, criaremos um componente versátil e flexível.

Na aula "Componente genérico de Criação de Categoria usando Chakra UI" aprendemos como criar um componente reutilizável para a criação de categorias usando a biblioteca de interface de usuário Chakra UI. O componente foi projetado de maneira genérica para poder ser facilmente adaptado para outras entidades que possuam os mesmos campos básicos, como nome e descrição. Ao longo da aula, foram mostrados conceitos importantes, como a utilização de formulários controlados, a validação de dados, a definição de tipos e interfaces e a reutilização de componentes.

O resultado final é um componente que pode ser facilmente utilizado em outras partes do código com poucas ou nenhuma alteração necessária.

Nesta aula, você aprenderá como criar um formulário interativo para a criação de categorias usando React. O código fornecido ilustra a implementação de um formulário de criação de categorias, onde os usuários podem inserir o nome da categoria e selecionar se ela está ativa ou não.

Durante a aula, você aprenderá sobre os seguintes tópicos:

1. Configuração do ambiente de desenvolvimento React.

2. Criação de componentes reutilizáveis, como BoxCreateItem, FormControl e Checkbox.

3. Utilização de hooks personalizados, como useCreateCategory, para gerenciar o estado do formulário e suas interações.

4. Validação de dados do formulário utilizando formState.errors.

5. Manipulação de eventos e atualização de estado utilizando register e setActive.

6. Envio do formulário e tratamento de ações utilizando handleSubmit e handleCreateCategory.

7. Navegação entre rotas utilizando cancelRoute.

Ao final da aula, você terá adquirido conhecimentos práticos sobre como criar formulários interativos no React, além de ter uma compreensão mais sólida sobre o desenvolvimento de componentes reutilizáveis e o uso de hooks personalizados.

Nesta aula, você aprenderá como criar o gerador de arquivo de tudo referente a categoria para reutilizar nos outros domínios restantes da aplicação.

Nesta aula, você aprenderá como criar o gerador de arquivo de tudo referente a categoria para reutilizar nos outros domínios restantes da aplicação.

Nesta aula, você aprenderá como usar o gerador de arquivo da aula anterior pra criar o CRUD de serviços

Nesta aula, você aprenderá como criar a página de edição de serviços usando select de categorias igual a aula passada.

Atualização do projeto pra versão mais atual do Next

Atualizando as dependencias do projeto e seus breaking changes