#Projeto do Aluratube desenvolvido na Imersão React da Alura em 2022 https://www.alura.com.br/imersao-react/aula01-web-componentes-deploy

Figma do Projeto: https://www.figma.com/file/1acrju7CLwHkSh6e7xEk9h/Aluratube?node-id=5%3A2

Repositório no Github: https://github.com/alura-challenges/aluratube

##Aula 01: a Web, os Componentes e o deploy! Essa é a primeira aula do projeto, onde você vai aprender como usar as estruturas de dados que temos no JavaScript para apresentar informações do lado do React. Mas no final eu garanto que você já vai ter algo incrível para mostrar para todo mundo e com uma URL dedicada utilizando a Vercel! Resumo da aula:

• Criamos o projeto inicial com NextJS;
• Vimos NPM scripts;
• Entendemos como checar a versão do Node e que o NPM vem junto com o projeto;
• Utilizamos o npx gitignore node para gerar o gitignore do projeto;
• Vimos a criação de um componente com React;
• Vimos como trabalhar com estilos no React;
• Como trabalhar com StyledComponents;
• Vimos como usar Props no React;
• Vimos sobre o children do React;
• Ao final pegamos o CSS já pré-criado pelo DevSoutinho, adicionamos no nosso projeto e seguimos com os desafios.

##Aula 02: entendendo state e fazendo a busca do AluraTube Essa é a aula primordial de React! Vamos implementar uma busca, falar do conceito de State, Rerender e veremos muito mais da base do ReactJS. Resumo da aula:

• Criamos o nosso search.js;
• Aprendemos sobre State;
• Vimos o conceito de Prop-drilling;
• No final, criamos o banner utilizando Styled Components e passando Props por ele.

##Aula 03: implementando Dark Mode com ContextAPI Você prefere Light ou Dark Mode no seus devices? Se você queria o Dark Mode na Imersão, seus problemas acabaram! Vamos implementar essa feature utilizando a ContextAPI do React, o Styled Components para nos auxiliar e muito mais. Vamos lá? Resumo da aula:

• Começamos olhando o Design Systems;
• Falamos sobre a importância de ter contratos de cores e valores de Design;
• Criamos o componente Dark Mode Switch;
• Criamos um state local no nosso componente de Dark Mode Switch;
• Começamos a trabalhar esse state para não fazer Prop Drilling e sim ter um contexto que nos permite acessar os dados de forma "global";
• E por fim, um Provider que configura quais dados vão estar disponíveis no contexto.

##Aula 04: criando nossos próprios hooks Agora é hora de criarmos nossos próprios Custom Hooks! Vamos trabalhar com um formulário que possui múltiplos campos e mostrar como você pode tirar vantagens dos recursos do React para deixar seu código mais declarativo. Resumo da aula:

• Importamos os estilos que criamos;
• Começamos a trabalhar com formulários;
• Vimos que lidar com Forms e State pode ser complexo;
• Vimos como criar Custom Hooks.

##Aula 05: useEffect e Supabase Nesta aula nós vamos nos aprofundar um pouquinho no conceito de BFF (Back End for Front End) e entender como podemos utilizar o Next.JS para ter uma "API" que vai nos ajudar a fazer a integração com o nosso banco de dados direto do Supabase. Código da Aula Resumo da aula:

• Entender como usar a Fetch API;
• Ver a API do GitHub;
• Entender os status do HTTP;
• Como usar a aba network do navegador;
• Como começar no Supabase;
• Criando nossa primeira tabela;
• Importante: não ativar a proteção de linhas do Supabase;
• Usamos o client público do Supabase;
• Criamos um service ao final para organizar melhor nosso código.