Imersão React - Alurakut

Overview

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

tela

💻 Linguagens e tecnologias utilizadas

css3 html5 javascript nodejs react git figma

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

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
You might also like...

Projeto criado na imersão React com a @alura @omariosouto @peas

Projeto criado na imersão React com a @alura @omariosouto @peas

aluracord-starwars Projeto de estudo criado na imersão React da Alura. Treinamento dado por Mario Souto e Paulo Silveira. Aprendemos a usar: Nextjs Re

Feb 1, 2022

Projeto desenvolvido durante a Imersão React da Alura

Projeto desenvolvido durante a Imersão React da Alura

Alura Witcher Alura Witcher é tematizada no universo do jogo The Witcher 3 e é uma variação da aplicação que desenvolvemos durante a Imersão React da

Feb 7, 2022

Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

Recoil · Recoil is an experimental set of utilities for state management with React. Please see the website: https://recoiljs.org Installation The Rec

Jan 8, 2023

React Starter Kit — isomorphic web app boilerplate (Node.js, Express, GraphQL, React.js, Babel, PostCSS, Webpack, Browsersync)

React Starter Kit — isomorphic web app boilerplate (Node.js, Express, GraphQL, React.js, Babel, PostCSS, Webpack, Browsersync)

React Starter Kit — "isomorphic" web app boilerplate React Starter Kit is an opinionated boilerplate for web development built on top of Node.js, Expr

Dec 30, 2022

📋 React Hooks for forms validation (Web + React Native)

📋 React Hooks for forms validation (Web + React Native)

English | 繁中 | 简中 | 日本語 | 한국어 | Français | Italiano | Português | Español | Русский | Deutsch | Türkçe Features Built with performance and DX in mind

Dec 29, 2022

:black_medium_small_square:React Move | Beautiful, data-driven animations for React

:black_medium_small_square:React Move | Beautiful, data-driven animations for React

React-Move Beautiful, data-driven animations for React. Just 3.5kb (gzipped)! Documentation and Examples Features Animate HTML, SVG & React-Native Fin

Jan 1, 2023

React features to enhance using Rollbar.js in React Applications

Rollbar React SDK React features to enhance using Rollbar.js in React Applications. This SDK provides a wrapper around the base Rollbar.js SDK in orde

Jan 3, 2023

🎉 toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense!

🎉 toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense!

toastify-react-native 🎉 toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense! De

Oct 11, 2022

Soft UI Dashboard React - Free Dashboard using React and Material UI

Soft UI Dashboard React - Free Dashboard using React and Material UI

Soft UI Dashboard React Start your Development with an Innovative Admin Template for Material-UI and React. If you like the look & feel of the hottest

Dec 28, 2022
Projeto criado na imersao React com a @alura com os instrutores @omariosouto @peas

"May the force be with you" Project created with @alura with the support from @omariosouto @peas Starcord An awasome Discord clone with Star Wars them

Luis Biancardi 2 Jan 30, 2022
Projeto criado na Imersão React com a @alura, @omariosouto e @peas.

Hobbit Chat: Imersão React 4 - Alura Aula 1 - Criando o nosso projeto Manual Setup getting-started yarn init -y yarn add next react react-dom coolor

Lucas Magalhães 3 Jan 31, 2022
Projeto da Imersão React 4 da @alura com @omariosouto e @peas

Aluracord Projeto da Imersão React 4 da @alura com @omariosouto e @peas ??‍?? Tecnologias utilizadas ??‍?? Linguagem : Typescript / Javascript Framewo

Rodolfo H Okino 2 Apr 21, 2022
projeto realizado durante a imersão react realizada pela @alura em jan/2022 com @omariosouto e @peas

Aluracord ?? Sobre o projeto: Projeto realizado durante a imersão react ocorrida em janeiro de 2022. Trata-se de um chat, inspirado no Discord em que

Guilherme Lucena 4 Jan 31, 2022
Projeto feito na Imersão React 4 da @alura com @omariosouto e o @peas

Aluracord - RapTalk Projeto feito na Imersão React 4 da @alura com @omariosouto e o @peas Todo o passo a passo do projeto pode ser acompanhado no arqu

Lario dos Santos Diniz 6 Apr 21, 2022
Projeto desenvolvido durante a imersão React proporcionada pela @alura @omariosouto @peas .

Aluracord Projeto desenvolvido durante a Imersão React (21/01/2022 -- 31/01/2022), proporcioando pela Alura. Professores: Mario Souto; Paulo Silveira;

null 6 Feb 12, 2022
Projeto criado na Imersão React com a @Alura @omariosouto @peas

Aluracord League Of Legends ??‍?? Projeto criado na Imersão React com a @Alura @omariosouto @peas Feito com Next/React: Tela inicial Tela do chat Demo

Pedro Henrique Vieira Fernandes 3 Jun 24, 2022
Projeto criado na Imersão React na @alura

Aluracord-Matrix - REACT ?? Projeto desenvolvido durante a Imersão React da Alura Dedicado ao meu filho Henrique, autor da releitura do desenho Gwen.

Lucia Helena Mesquita Viola Tomaz 6 Jan 31, 2022
Projeto desenvolvido durante a imersão React da Alura

Arcanecord (Imersão Alura) Sobre Chat em real-time, baseado na interface gráfica do Discord. Projeto feito enquanto acompanhava as aulas da 4ª Imersão

Natália Francisco da Silva 7 Sep 6, 2022
Projeto Criado Juntamente com @omariosouto e @peas na imersão React da @alura.

Aluracord-Matrix Projeto Criado por @Levi-Magny juntamente com @omariosouto e @peas na imersão React da @alura. Sobre o Projeto: Este Projeto foi inic

Levi Medeiros Magny 6 Feb 21, 2022