Imersão React - Alurakut

A Imersão React é gratuita e é voltada para profissionais, estudantes e para todo mundo que quer aprender mais sobre front-end. Nesta imersão vamos mergulhar no passado e dominar o futuro com o Alurakut! O projeto é uma versão do Orkut, criado com React, styled-components e next/js.

Clique aqui para ver meu projeto final!

📺 Imagem

💻 Linguagens e tecnologias utilizadas

Funcionalidades da pagina

• Logout funcionando,
• Campos dos formulários obrigatórios,
• Inputs dos formulários vazios após post,
• Seguidores/Seguindo de acordo com o usuário,
• Possibilidade de criar comunidades,
• Adicionar comentários na pagina.

Aproveita e deixa algum comentário sobre o projeto ou alguma sugestão!(será muito bem-vinda).

Instalação

- Clonar repositorio
$ git clone https://github.com/carolandrade1/alurakut.git && cd alurakut

- Instalar dependencias
$ npm install

- Rodar aplicativo
$ npm run dev

Example app with styled-components

👩‍🏫/👨‍🏫 Instrutores

• Mario Souto
  
• Juliana Negreiros
  
• Paulo Silveira
  

Clique aqui para ver o projeto dos outros participantes!

📚 Pesquisar/Aprender

• Entender melhor como funciona a ligação entre as paginas,
• 'Puxar' o resultado do API para outras paginas,
• Organizar melhor os arquivos,
• Entender como a acessibilidade funciona no React (encontrei alguns desafios nessa parte),
• Componetizar melhor as tag para fazer com que as paginas tenham menos informações,
• Pesquisar boas práticas com React e NextJs.

📚 Desafios da Imersão

• Aula 01
  • Pegar os dados da API do GitHub e listar seus seguidores;
  • Adicionar quão confiável, legal e sexy você é;
  • Usar Strategy ao invés de vários ifs no css;
  • Separar e organizar o seu código;
  • Publicar o seu projeto;
  • Deixar o seu projeto com a sua cara;
• Aula 02
  • Criar suas comunidades para compartilhar com a gente;
  • Facilitar o cadastro da url da imagem;
  • Adicionar links para as suas comunidades
  • Adicionar o seu projeto na nossa vitrine;
  • Deixar o seu read me do projeto bonitão.
• Aula 03
  • Terminar de listar seus seguidores através da api do Github;
  • Adicionar suas comunidades no DatoCMS;
  • Organizar os seus dados, pensando no que irá querer que apareça no seu Alurakut e criando os modelos que precisar;
  • Subir sua aplicação na Vercel.
• Aula 04
  • Configurar suas variáveis de ambiente;
  • Fazer os scraps;
  • Subir sua aplicação na Vercel.
• Aula 05
  • Fazer o logout da aplicação;
  • Mensagem de feedback quando não conseguir logar na aplicação;
  • Criar página de perfil do usuário;
  • Subir a sua aplicação na Vercel e compartilhar com a gente.

📂 Referencias

Aula 01

- React
- Mario Souto - Strategy Pattern
- Mario Souto - Pegando dados de uma API com React
- Mario Souto - O sistema de rotas do NextJS, principais dúvidas
- Mario Souto - Linter
- Mario Souto - Centralizar conteúdo na tela
- CSS Grid Garden
- Rafaella Ballerini - Como usar git e github na prática

Aula 02

- Mario Souto - Github Pro + Eslint
- Criando Flappy Bird com JavaScript - Mario Souto
- Aprender forEach e map - Mario Souto

Aula 03

- O que é Wordpress
- Mario Souto - O que é um CMS

Aula 04

- Ju Negreiros - Hello World com GraphQL
- Como fazer ajax
- Mario Souto - O que é um CMS?
- Mario Souto - Variáveis de ambiente e segurança

Aula 05

- Mario Souto - Rotas Next
- Mario Souto - Cookies e LocalStorage
- Mario Souto - SEO, Performance e Segurança no Front End
- Post - Como funciona import e export do Javascript
- React Router DOM
- Postman
- Ju Negreiros - Destructuring