Alurakut

<h1 align="center">Imersão React - Alurakut</h1> <h4 align="justify">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. </h4> <h2 align="center"><a href="https://alurakut-cas.vercel.app/">Clique aqui para ver meu projeto final!</a></h2>

📺 Imagem

💻 Linguagens e tecnologias utilizadas

<p align="left"> <a href="https://www.w3schools.com/css/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/> </a> <a href="https://www.w3.org/html/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/> </a> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg" alt="javascript" width="40" height="40"/> </a> <a href="https://nodejs.org" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/nodejs/nodejs-original-wordmark.svg" alt="nodejs" width="40" height="40"/> </a> <a href="https://reactjs.org/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/react/react-original-wordmark.svg" alt="react" width="40" height="40"/> </a> <a href="https://git-scm.com/" target="_blank"> <img src="https://www.vectorlogo.zone/logos/git-scm/git-scm-icon.svg" alt="git" width="40" height="40"/> </a> <a href="https://www.figma.com/" target="_blank"> <img src="https://www.vectorlogo.zone/logos/figma/figma-icon.svg" alt="figma" width="40" height="40"/> </a> </p>

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

<a href="styled-components.md">Example app with styled-components</a>

👩‍🏫/👨‍🏫 Instrutores

• <a href="https://twitter.com/omariosouto">Mario Souto</a> <br>
• <a href="https://twitter.com/juunegreiros">Juliana Negreiros</a> <br>
• <a href="https://twitter.com/paulo_caelum">Paulo Silveira</a> <br>

<h2 align="center"><a href="https://github.com/alura-challenges/alurakut">Clique aqui para ver o projeto dos outros participantes!</a></h2>

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

📂 Referencias

<details> <summary>Aula 01</summary> - <a href="https://pt-br.reactjs.org/docs/create-a-new-react-app.html#recommended-toolchains">React</a> <br> - <a href="https://www.youtube.com/watch?v=S-jqd6WZ7M0">Mario Souto - Strategy Pattern</a> <br> - <a href="https://www.youtube.com/watch?v=85vJXFpXLQw">Mario Souto - Pegando dados de uma API com React</a> <br> - <a href="https://www.youtube.com/watch?v=-kVnp3fg-v4">Mario Souto - O sistema de rotas do NextJS, principais dúvidas</a> <br> - <a href="https://www.youtube.com/watch?v=yMRSDdifGW8">Mario Souto - Linter</a> <br> - <a href="https://www.youtube.com/watch?v=Cu-HP-gvggg">Mario Souto - Centralizar conteúdo na tela</a> <br> - <a href="https://cssgridgarden.com/">CSS Grid Garden</a> <br> - <a href="https://www.youtube.com/watch?v=UBAX-13g8OM">Rafaella Ballerini - Como usar git e github na prática</a> <br> </details> <details> <summary>Aula 02</summary> - <a href="https://www.youtube.com/watch?v=yMRSDdifGW8&t=2s">Mario Souto - Github Pro + Eslint</a> <br> - <a href="https://www.youtube.com/watch?v=jOAU81jdi-c&list=PLTcmLKdIkOWmeNferJ292VYKBXydGeDej">Criando Flappy Bird com JavaScript - Mario Souto</a> <br> - <a href="https://www.youtube.com/watch?v=JbzcLKiTThk">Aprender forEach e map - Mario Souto</a> <br> </details> <details> <summary>Aula 03</summary> - <a href="https://www.youtube.com/watch?v=aiZSAn_2SJc">O que é Wordpress</a> <br> - <a href="https://www.youtube.com/watch?v=IZi6nogysRM">Mario Souto - O que é um CMS</a> <br> </details> <details> <summary>Aula 04</summary> - <a href="https://www.youtube.com/watch?v=RLP9MixVZvw&t">Ju Negreiros - Hello World com GraphQL</a> <br> - <a href="https://medium.com/@omariosouto/entendendo-como-fazer-ajax-com-a-fetchapi-977ff20da3c6">Como fazer ajax</a> <br> - <a href="https://www.youtube.com/watch?v=IZi6nogysRM&t">Mario Souto - O que é um CMS?</a> <br> - <a href="https://www.youtube.com/watch?v=BP2KQtCyzo8">Mario Souto - Variáveis de ambiente e segurança</a> <br> </details> <details> <summary>Aula 05</summary> - <a href="https://www.youtube.com/watch?v=x5Hs8kXlktM&t">Mario Souto - Rotas Next</a> <br> - <a href="https://www.youtube.com/watch?v=zSl_n-9yGRs">Mario Souto - Cookies e LocalStorage</a> <br> - <a href="https://www.youtube.com/watch?v=76eEzmx3irs">Mario Souto - SEO, Performance e Segurança no Front End</a> <br> - <a href="https://www.alura.com.br/artigos/como-funciona-o-import-e-export-do-javascript">Post - Como funciona import e export do Javascript</a> <br> - <a href="https://reactrouter.com/web/guides/quick-start">React Router DOM</a> <br> - <a href="https://www.postman.com/">Postman</a> <br> - <a href="https://www.youtube.com/watch?v=f8a-qwKC5yk">Ju Negreiros - Destructuring</a> <br> </details>