Fale com a gente no WhatsApp Fale com a gente no WhatsApp
Fale com a gente no WhatsApp

Next.js e Material UI - HiperProf Aplicação web de busca de professores particulares Projeto Prático Next.js e Material UI - HiperProf Aplicação web de busca de professores particulares

Aprenda, na prática, como desenvolver um sistema web completo com React, Material UI e Next.js

Curso com 14h03 de vídeos Categoria Desenvolvimento Front-end

Sobre o projeto

Neste projeto prático vamos desenvolver uma aplicação web completa chamada HiperProf utilizando React, Material UI e Next.JS. Essa aplicação permitirá que pessoas interessadas em aprender um determinado assunto possam procurar por professores particulares. Ela também contará com uma área administrativa voltada para o professor, onde ele poderá verificar os contatos recebidos, além de gerenciar os dados da sua conta.

Neste projeto prático vamos desenvolver uma aplicação web completa chamada HiperProf utilizando React, Material UI e Next.JS. Essa aplicação permitirá que pessoas interessadas em aprender um determinado assunto possam procurar por professores particulares. Ela também contará com uma área administrativa voltada para o professor, onde ele poderá verificar os contatos recebidos, além de gerenciar os dados da sua conta.

O que irá aprender?

Neste projeto prático veremos todo o processo de criação de um sistema web front-end. Vamos aprender como consumir APIs, trabalhar com roteamento, gerenciamento de telas, trabalhar com localStorage e sessionStorage.

Alguns itens apresentados no curso:

  • Trabalhar com gerenciamento de estados;
  • Configurar API REST com axios;
  • Utilizar os principais métodos http para fazer um CRUD;
  • Persistir dados no localStorage e sessionStorage;
  • Validação de formulários;
  • Criar componentes e utilizar os componentes do Material UI;
  • CSS-in-JS utilizando styled components;
  • Publicar sistema na Vercel.

Para quem?

Esse projeto prático é voltado a desenvolvedores que já conhecem o React e Next, mas ainda possuem dúvidas de como aplicá-los dentro de um sistema, na prática, ou querem ter conteúdo como portfólio.

Metodologia

  • Videoaulas
  • Texto e imagens
  • Início Imediato

Ambiente do curso

  • Node: 16.17.0
  • React: 18.2.0
  • Material-UI: 5.10.12
  • Next: 13.0.0

Sobre o professor

Ariel Sardinha

Ariel Sardinha

Professor e desenvolvedor. Formando em engenharia de software. É autor de cursos em diversos temas, como, desenvolvimento front-end, Flutter, JavaScript e Vue.js. Nas horas vagas adora estudar sobre tecnologia, filme e brincar com a pequena Maria Eduarda.

Quais os pré-requisitos para esse curso?

Conteúdo programático

  1. Preparando o projeto

    Neste módulo do projeto iremos criar o projeto e fazer as configurações iniciais.

    11 aulas
    • Apresentação
    • O Código final do projeto está no Github
    • Apresentação do projeto
    • Primeiros passos com o Git
    • Aplicação base
    • Vinculando projeto ao Github
    • Instalando e configurando Material UI
    • Estrutura de pastas e arquivos com React
    • Organizando estrutura de pastas e arquivos
    • Configurando importações absolutas
    • Plugins necessários
  2. Home

    Neste módulo vamos construir a tela home e fazer nossos primeiros commits

    7 aulas
    • Análise da tela home
    • Componente PageTitle
    • Commitando componente
    • Criando página home
    • Criando lógica da tela home
    • Configurando objeto de roteamento
    • Configurando git
  3. Área do aluno

    Neste módulo vamos criar a tela de pesquisa para listar os professores disponíveis, configurar o Axios para realizar requisições http, buscar professores da API e salvar dados na sessionStorage.

    10 aulas
    • Análise da tela pesquisa professor
    • Construindo tela de pesquisa professor
    • Componente CardProfessor
    • Componente ListaCardProfessor
    • Definindo interface do professor
    • Fazendo commit pelo VsCode
    • Buscando professor na API
    • Editando a pesquisa do professor
    • Persistindo dados na sessionStorage e navegando para tela de detalhes
    • Fazendo commit do projeto
  4. Tela de detalhe professor

    Iremos criar a tela que vai detalhar os dados do professor para permitir que o aluno se candidate a uma aula com o professor.

    9 aulas
    • Criando tela de detalhes do professor
    • Buscando professor selecionado da sessionStorage
    • Buscando professores
    • Adicionando filtro a lista de professores
    • Trabalhando com Stashes
    • Criando componente de dialog
    • Cadastrando aluno
    • Adicionando máscara ao campo data
    • Limpando sessionStorage ao sair da tela de detalhes
  5. Login

    Neste módulo iremos criar a tela de login, integrar tela com a API, configurar o tema da aplicação e criar um dos principais componentes da aplicação, o Header.

    7 aulas
    • Componente Link
    • Componente Header Desktop
    • Componente Header Mobile
    • Criando tela de login
    • Configurando tema
    • Integrando login com API
    • Fazendo commit da tela de login
  6. Cadastro professor

    Neste módulo iremos cadastrar um novo professor para que ele fique disponível para os alunos.

    8 aulas
    • Criando tela de cadastro professor
    • Construindo lógica para cadastrar professor
    • Validando campos no front:end
    • Submetendo formulário para Aplicação
    • Adicionando máscara ao input
    • Fazendo login e buscando dados do professor ao cadastrar
    • Guardando dados do professor no contexto
    • Fazendo commit
  7. Área do professor

    Agora iremos criar a tela que vai lista os alunos que se candidataram. Vamos permitir fazer a edição e deletar a sua conta, configurar o redirect com Axios e publicar o sistema na Vercel.

    14 aulas
    • Criando tela do professor
    • Componente UserHeaderMenu
    • Componente UserHeaderAvatar
    • Finalizando componente UserHeaderMenu
    • Corrigindo menu no desktop
    • Corrigindo menu no mobile
    • Logout
    • Redirecionamento e Salvando usuário ao logar
    • Interceptando request
    • Componente ButtonFile
    • Atualizando foto do professor
    • Editando cadastro
    • Deletando conta
    • Publicando conta na vercel
Download da ementa

Utilizada e amada por milhares! Veja mais opiniões reais

  • Bastante conteúdo rico de informação. Parabéns e obrigado por esse curso <3

  • Nota 10 para esse curso. O professor Ariel é PHD muito bom alias fizemos 2 cursos em 1. Além de abordar NextJs, deu um curso paralelo de Git passo a passo completo. Pensamento: Aprender com os melhores, encurta o caminho para o sucesso!

  • Bom, já tinha um conhecimento em programação C#, resolvi fazer o básico só por fazer e me surpreendi, vi muitas coisas novas, entendi melhor vários conceitos, enfim, estou a caminho do intermediário e recomento é um ótimo curso.

    Depoimento - Roberto
    C# (C Sharp) Básico
    Roberto Itaquaquecetuba / SP
  • Curso Excelente, otimos professores, explicação muito boa...ja estou adquirindo o proximo curso c# avançado. Indico para qualquer um e garanto um dos melhores curso que ja fiz. Parabens a toda equipe.

    Depoimento - Fabrício
    C# (C Sharp) Básico
    Fabrício Cariacica / ES
  • Gostei muito do curso, ele abriu minha mente para o Visual Studio e o C#, deixando bem claro os usos das ferramentas. Assim como me ajudou a revisar de forma bem pratica os principais conceitos de Programação Orientada a Objetos. Recomendo.

    Depoimento - William
    C# (C Sharp) Básico
    William Poços de Caldas / MG
  • Antes de começar o curso eu já possuía um conhecimento mediano sobre C# e mesmo no módulo básico vi funcionalidades que ainda não conhecia. Ótimos métodos de aprendizagem, simples e eficaz. Recomendado.

    Depoimento - Carlos
    C# (C Sharp) Básico
    Carlos Poços de Caldas / MG
  • Ótimo curso! Realmente bastante esclarecedor e didático. O conteúdo é bem completo, abrangendo diversos assuntos de forma dinâmica e complementar, o que ajuda, e muito, no aprendizado e na visão de aplicabilidade. Além de todo o ambiente e dos recursos disponíveis tornarem o estudo mais amigável e menos cansativo.

    Depoimento - Dimitrius
    C# (C Sharp) Básico
    Dimitrius Três Corações / MG
  • Já fui e paguei caro por um curso de C# que não me instruiu em nada, pois não tinha o conhecimento básico. Aí arrisquei no TreinaWeb, pois sempre tive preconceito com cursos assim... a distancia. Sempre achei que presencial com uma pessoa ali do seu lado era a melhor forma... estava enganado... Ótimo curso, didática excelente. E vamos agora para o Intermediário. Vlw equipe do TreinaWeb

    Depoimento - Leonardo
    C# (C Sharp) Básico
    Leonardo Nilópolis / RJ
  • Esse curso para mim foi um desafio que eu recebi na empresa que eu trabalho, me fizerem uma proposta para eu aprender e me certificar em C# .NET em 90 dias. Esse curso foi minha salvação! Agora vamos para o Intermediário e por fim o Avançado!!! Agradeço...

    Depoimento - David
    C# (C Sharp) Básico
    David Fortaleza / CE

Plano de acesso total!

Tenha um ano de acesso completo a todos os cursos da plataforma, incluindo novos lançamentos, mentoria de carreira e suporte direto com os professores!

Um ano de acesso completo

Contrate agora e tenha acesso ilimitado a todo o nosso portfólio. Isso inclui:

  • 1 ano de acesso a todos os cursos
  • Cursos novos toda semana
  • Suporte direto com professores
  • Aplicativos para Android e iOS
  • Plano de carreira personalizado
  • Certificados digitais inclusos
  • Suporte com SLA de 4 horas úteis
  • Acesso offline através dos apps
R$ 129,00 ECONOMIZE R$ 960,00
12x R$ 49,00 sem juros, no cartão de crédito
Matricule-se agora
Garantia incondicional de satisfação
Garantia incondicional de satisfação

Confiamos tanto nos resultados dos nossos cursos, que criamos uma garantia incondicional de satisfação para você, que são 7 dias de teste!