#1 - React: https://ignitefeed-aszurar.netlify.app

Ignite Feed

• O projeto Ignite Feed é um site de uma página para listar posts de um blog, criar e excluir comentários desses posts, um projeto simples sem muitas funcionalidades para praticar conceitos básicos.

• O propósito aqui é aprender/praticar conceitos básicos de React e seus estados com TypeScript e estilizando via CSS modules.

• A acessibilidade também foi levada em consideração, com o uso da lib axe-core para testes e correções de acessibilidade assim como leitor de tela ChromeVox.

• O site foi publicado com CI/CD por meio da plataforma Netlify.

• Acesse em: https://ignitefeed-aszurar.netlify.app

  Ignite Feed

igniteFeed.mov

Sobre |  Motivo |  Design |  Requisitos |  Tecnologias |  CI/CD |  Baixar e Executar 

---

Vídeo no Youtube

---

ℹ️ Sobre

• A ideia dessa aplicação é poder listar posts de um blog e os comentar de forma simples, sem muitas funcionalidades, apenas para praticar os conceitos básicos de React, Vite e TypeScript e a acessibilidade.

• É o 1º projeto do curso Ignite da trilha React Native 2022 da Rocketseat

• Para a construção da interface desse projeto foi usado React com TypeScript.

• A estilização é feita com CSS comum sem nenhuma lib por meio do CSS modules já que a ideia é entender o básico do React em desenvolvimento web.

• Realizando Comentário

  
  _

---

⁉️ Motivo

• Esse projeto tem o objetivo de praticar os conceitos básicos do desenvolvimento web com React, componentes, propriedades, variável Estado, manipulações de variável Estado, estilização básica com CSS e a aplicação de CSS modules, e formas de passar dados/funções para componentes criados, além de praticar o uso de TypeScript e boas práticas de acessibilidade com axe-core.

• É um projeto simples, mas que trata da base de uma aplicação web com React.

• É o 1º projeto do curso Ignite da trilha React 2022 da Rocketseat

• Temos funcionalidades e práticas como:

  1. Listar posts de um blog
  2. Criar comentários para esses posts
  3. Excluir comentários desses posts
  4. Melhoria de acessibilidade com testes e correções com axe-core e ChromeVox.
  5. Uso do Radix UI para construção de Modais com melhor acessibilidade
  6. Estilização com CSS modules

• Exclusão de Comentários

  
  _

---

🎨 Design

• O Design do projeto foi fornecido pela Rocketseat no primeiro módulo do Ignite - React por meio do Figma.

Ignite Feed

---

🌱 Requisitos Mínimos

1. NodeJS
2. React
3. Vite
4. Yarn(ou NPM)

• Curtir Comentários

  
  _

---

🚀 Tecnologias Utilizadas

• O projeto foi desenvolvido utilizando as seguintes tecnologias:

  1. axe-core/react
  2. AutoAnimate
  3. Date FNS
  4. JavaScript
  5. Netlify
  6. NodeJS
  7. Phosphor Icons
  8. Radix UI
  9. React
  10. Sentry
  11. TypeScript
  12. Vite
  13. Yarn

---

🚚 Entrega e distribuição continua

• Para a publicação da aplicação foi por meio da plataforma Netlify onde é possível publicar de forma rápida, fácil e simples projetos React que estão hospedados no GitHub, GitLab, dentre outras plataformas de repositório remoto de graça.

• Com isso, o CI/CD já é aplicado automaticamente por meio dessa plataforma definindo a branch de produção, sempre que houver uma atualização nela, será gerado uma nova versão do projeto e já publicado.

• Além disso, podemos customizar o próprio endereço do site, adicionar ferramentas dentre outras funcionalidades facilmente.

---

📦 Como baixar e executar o projeto

Baixar

• Clonar o projeto:

   git clone https://github.com/Aszurar/igniteFeed

• É necessário ter o Node.js e um gerenciador de pacotes, como o Yarn, instalados em seu sistema. Se você ainda não os tem, siga estas instruções:

  • Instalação do NodeJS
  • Instalação do Yarn

• Instalação das dependências:

  • Execute o comando abaixo dentro da pasta do projeto

      yarn

Execução

• Caso tudo tenha sido instalado com sucesso, basta executar na raiz do projeto:

    yarn dev

---

Desenvolvido por 🌟 Lucas de Lima Martins de Souza.