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
Learn React by Building Netflix.

It means that you are learning React.js by building a real-life project. I will explain concepts in detail. This post is the first part in my series and it is suitable for beginners.

Hiep Le 148 Sep 23, 2021
React Query for Firestore, that you can actually use in production, on every screen.

React Query + Firestore const { data } = useDocument('users/fernando') It's that easy. ?? This library provides the hooks you need for querying Firest

Amine Bl 56 Sep 16, 2021
Super convenient analytics provider for React

React Analytics Provider Super convenient analytics provider for React ?? Typescript support ??‍??‍??‍?? GA4 support ?? Currently maintaining 1. Getti

null 38 Sep 15, 2021
A Pokémon Themed Note Taking App Made with ReactJs.

Poket Book Who doesn't need a good note taking app, especially if it is Pokémon Themed! This cute little Poket Book allows you to add/delete/edit/view

Christine Coomans 8 Sep 13, 2021
A simple react app that has perfectly working notes app

A simple react app that has perfectly working notes app

Sudarsan Kumar 1 Sep 15, 2021
Netflix Clone. Search and find your favorite movie with coming from TMDB API. Also you can watch the trailers 📽️ 🍿 Used ReactJS, Material UI, Firebase, Firestore Database

Netflix Clone. Search and find your favorite movie with coming from TMDB API. Also you can watch the trailers ??️ ?? Used ReactJS, Material UI, Firebase, Firestore Database

null 9 Jun 22, 2021
This is a Facebook Messenger clone.You can comminicate to other at realtime.Used ReactJS, Material UI, Firebase, Firestore Database

?? facebook-messenger This is a facebook messenger clone.You can comminicate to other at realtime ?? ⚡ LIVE To check out the live demo of this app ABO

null 18 Sep 8, 2021
A calculator app built with React.js using React Hooks and Routers. The app contains 3 pages with basic styling. Calculator operations, as well as React components, were tested with Jest and React Testing Library.

Raect Calculator A calculator app built with React.js using React Hooks and Routers. App contains 3 pages with basic styling. Calculator operations, a

SarvarKhalimov 7 Sep 8, 2021
This is a calculator web app bootstraped with React

Math Magicians Math Magicians is a website for all fans of mathematics. Single Page App that allows users: Make simple calculations. Read a random mat

Daniel J 5 Aug 23, 2021
Chroma is an open source design system from the team at LifeOmic built with React and TypeScript.

Chroma is an open source design system from the team at LifeOmic. It is built with React and TypeScript. The goal of Chroma is to provide design-approved components to developers to speed up their development process and build visual consistency throughout web applications.

LifeOmic 38 Sep 21, 2021
İnstagram Clone.You can sign in, sign up, upload image, make comment 📷 Used ReactJS, Material UI, Firebase, Firestore Database

İnstagram Clone.You can sign in, sign up, upload image, make comment ?? Used ReactJS, Material UI, Firebase, Firestore Database

null 18 Aug 31, 2021
İnstagram Clone.You can sign in, sign up, upload image, make comment 📷 Used ReactJS, Material UI, Firebase, Firestore Database

?? instagram-clone This is a instagram clone. You can sign in, sign up, upload image, make comment ?? ⚡ LIVE To check out the live demo of this app AB

null 14 Jun 6, 2021
Chat app created by React.js

Chat app created by React.js

Alper Efe Şahin 9 Jul 11, 2021
This is a front-end of an application that will help organize and manage the bookstore. It is so fast, dynamic and responsive to actions and it is built with React & Redux.

Bookstore This is a front-end of an application that will help organize and manage bookstore. It is so fast, dynamic and responsive to actions and it

Baraka Mukelenga 4 Aug 9, 2021
News App created using React and NewsAPI

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 33 Sep 13, 2021
An app built with react and firebase and few other modules. It is tiktok but for movie trailers. that is why I called it tiktrailer

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 5 Sep 20, 2021
This project was bootstrapped with Chakra UI & Create React App

This project was bootstrapped with Chakra UI & Create React App

Pawan Kumar 33 Sep 13, 2021
A React & react-router-powered implementation of Hacker News using its Firebase API.

react-hn A React & react-router-powered implementation of Hacker News using its Firebase API.

Jonny Buchanan 2.2k Sep 21, 2021
Frontend of HRMS Project with React.

HRMS Project Frontend Frontend of HRMS Project with React. Report Bug · Request Feature About The Project Design Built With UML Component Diagram Usag

Ahmet Çetinkaya 47 Aug 6, 2021