{"id":23178875,"url":"https://github.com/aszurar/ignitefeed","last_synced_at":"2026-04-11T05:08:14.817Z","repository":{"id":166914799,"uuid":"641644997","full_name":"Aszurar/igniteFeed","owner":"Aszurar","description":"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.  Acesse em: https://ignitefeed-aszurar.netlify.app/","archived":false,"fork":false,"pushed_at":"2024-04-24T13:57:00.000Z","size":158,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-03T14:36:12.093Z","etag":null,"topics":["axe-core","css","css-flexbox","css-module","css-modules","date-fns","flex","flexbox","html","html-css-javascript","ignite-reactjs","javascript","jsx","netlify","react","reactjs","sentry","tsx","typescript","vite"],"latest_commit_sha":null,"homepage":"https://ignitefeed-aszurar.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Aszurar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-16T21:46:36.000Z","updated_at":"2024-04-24T13:57:04.000Z","dependencies_parsed_at":"2024-02-08T18:34:51.206Z","dependency_job_id":"6c006356-3935-44d5-8dfd-6c4d373940e0","html_url":"https://github.com/Aszurar/igniteFeed","commit_stats":null,"previous_names":["aszurar/ignitefeed"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Aszurar/igniteFeed","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aszurar%2FigniteFeed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aszurar%2FigniteFeed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aszurar%2FigniteFeed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aszurar%2FigniteFeed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Aszurar","download_url":"https://codeload.github.com/Aszurar/igniteFeed/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aszurar%2FigniteFeed/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31669123,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-10T17:19:37.612Z","status":"online","status_checked_at":"2026-04-11T02:00:05.776Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axe-core","css","css-flexbox","css-module","css-modules","date-fns","flex","flexbox","html","html-css-javascript","ignite-reactjs","javascript","jsx","netlify","react","reactjs","sentry","tsx","typescript","vite"],"created_at":"2024-12-18T07:13:02.520Z","updated_at":"2026-04-11T05:08:14.801Z","avatar_url":"https://github.com/Aszurar.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# #1 - React: **\u003chttps://ignitefeed-aszurar.netlify.app\u003e**\r\n\r\n\u003cdiv align=\"center\"\u003e\r\n    \u003cimg src=\"https://i.imgur.com/qW74Df1.png\" width=\"1000\"\u003e\r\n\u003c/div\u003e\r\n\r\n## Ignite Feed\r\n\r\n- 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.\r\n- O propósito aqui é aprender/praticar conceitos básicos de **React e seus estados** com **TypeScript** e estilizando via **CSS modules**.\r\n\r\n- 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.\r\n\r\n- O site foi publicado com CI/CD por meio da plataforma **[Netlify](https://www.netlify.com/)**.\r\n- Acesse em: **\u003chttps://ignitefeed-aszurar.netlify.app\u003e**\r\n\r\n  \u003cdiv align=\"center\"\u003e\r\n    \u003ch3\u003e\u003ca href=\"https://ignitefeed-aszurar.netlify.app\"\u003eIgnite Feed\u003c/a\u003e\u003c/h3\u003e   \r\n\r\nhttps://github.com/Aszurar/igniteFeed/assets/64987824/c064848d-bc07-45a6-8ea3-8521eee4c7a9\r\n\r\n  \u003c/div\u003e\r\n\r\n\r\n\u003cdiv align=\"center\"\u003e\r\n\r\n[![Netlify Status](https://api.netlify.com/api/v1/badges/4299df7d-5adb-4416-93a6-8a0fe7c49d2b/deploy-status)](https://app.netlify.com/sites/ignitefeed-aszurar/deploys) [![Vite](https://img.shields.io/badge/-Vite-%23646CFF.svg?style=flat\u0026logo=vite\u0026logoColor=white\u0026link=https://vitejs.dev/)](https://vitejs.dev/)  [![React](https://img.shields.io/badge/-React-black?style=flat\u0026logo=react\u0026link=https://react.dev)](https://react.dev/)   [![Radix UI](https://img.shields.io/badge/Radix%20UI-161618.svg?style=flat\u0026logo=radix-ui\u0026logoColor=white)](https://www.radix-ui.com/)  [![TypeScript](https://img.shields.io/badge/-TypeScript-%23007ACC?style=?style=flat-square\u0026logo=typescript\u0026logoColor=white\u0026link=https://www.typescriptlang.org/)](https://www.typescriptlang.org/) [![JavaScript](https://img.shields.io/badge/-JavaScript-%23323330.svg?style=flat\u0026logo=javascript\u0026link=https://www.javascript.com/)](https://www.javascript.com/) [![HTML5](https://img.shields.io/badge/-HTML5-E34F26?style=flat\u0026logo=html5\u0026logoColor=white\u0026link=https://developer.mozilla.org/pt-BR/docs/Web/HTML)](https://developer.mozilla.org/pt-BR/docs/Web/HTML) [![CSS3](https://img.shields.io/badge/-CSS3-1572B6?style=flat\u0026logo=css3\u0026link=https://www.w3schools.com/css/)](https://www.w3schools.com/css/) [![Yarn](https://img.shields.io/badge/-yarn-%232C8EBB?style=flat\u0026logo=yarn\u0026logoColor=white\u0026link=https://yarnpkg.com/)](https://yarnpkg.com/)\r\n\r\n\u003c/div\u003e\r\n\r\n\u003cdiv align=\"center\"\u003e\r\n        \u003ch2\u003e\r\n          \u003ca href=\"#information_source-sobre\"\u003eSobre\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\r\n          \u003ca href=\"#interrobang-motivo\"\u003eMotivo\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\r\n          \u003ca href=\"#art-design\"\u003eDesign\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\r\n          \u003ca href=\"#seedling-requisitos-mínimos\"\u003eRequisitos\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\r\n          \u003ca href=\"#rocket-tecnologias-utilizadas\"\u003eTecnologias\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\r\n          \u003ca\r\n          href=\"#truck-entrega-e-distribuição-continua\"\u003eCI/CD\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\r\n          \u003ca href=\"#package-como-baixar-e-executar-o-projeto\"\u003eBaixar e Executar\u003c/a\u003e\u0026nbsp;\r\n        \u003c/h2\u003e\r\n\u003c/div\u003e\r\n\r\n---\r\n\r\n\u003cdiv align=\"center\" \u003e\r\n    \u003cimg src=\"https://i.imgur.com/OInNBjH.gif\" width=\"500\"\u003e\r\n\u003c/div\u003e\r\n\r\n\u003cdiv align=\"center\" \u003e\r\n\r\n**[Vídeo no Youtube](https://www.youtube.com/watch?v=8ehNeoepYNE)**\r\n\r\n\u003c/div\u003e\r\n\r\n---\r\n\r\n## :information_source: Sobre\r\n\r\n- 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.\r\n- É o 1º projeto do curso **Ignite da trilha React Native 2022 da [Rocketseat](https://www.rocketseat.com.br/)**\r\n- Para a construção da interface desse projeto foi usado **[React](https://react.dev)** com **[TypeScript](https://www.typescriptlang.org/)**.\r\n- A estilização é feita com CSS comum sem nenhuma lib por meio do **[CSS modules](https://github.com/css-modules/css-modules)** já que a ideia é entender o básico do React em desenvolvimento web.\r\n\r\n- **Realizando Comentário**\r\n   \u003cdiv align=\"center\" \u003e\r\n      \u003cimg src=\"https://i.imgur.com/WnkvFdF.gif\" width=\"500\"\u003e\r\n   \u003c/div\u003e\r\n  \u003cdiv align=\"center\" \u003e\r\n      \u003cimg src=\"https://i.imgur.com/DK5KOgA.png\" width=\"350\"\u003e_\u003cimg src=\"https://i.imgur.com/GyYfHLt.png\" width=\"350\"\u003e\r\n  \u003c/div\u003e\r\n\r\n---\r\n\r\n## :interrobang: Motivo\r\n\r\n- 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.\r\n- É um projeto simples, mas que trata da base de uma aplicação web com React.\r\n- É o 1º projeto do curso **Ignite da trilha React 2022 da [Rocketseat](https://www.rocketseat.com.br/)**\r\n- Temos funcionalidades e práticas como:\r\n  1. Listar posts de um blog\r\n  2. Criar comentários para esses posts\r\n  3. Excluir comentários desses posts\r\n  4. Melhoria de acessibilidade com testes e correções com axe-core e ChromeVox.\r\n  5. Uso do Radix UI para construção de Modais com melhor acessibilidade\r\n  6. Estilização com CSS modules\r\n\r\n- **Exclusão de Comentários**\r\n\r\n  \u003cdiv align=\"center\" \u003e\r\n      \u003cimg src=\"https://i.imgur.com/dJxA4lh.gif\" width=\"500\"\u003e\r\n  \u003c/div\u003e\r\n  \u003cdiv align=\"center\" \u003e\r\n      \u003cimg src=\"https://i.imgur.com/GyYfHLt.png\" width=\"350\"\u003e_\u003cimg src=\"https://i.imgur.com/3VSx0pu.png\" width=\"350\"\u003e\r\n  \u003c/div\u003e\r\n\r\n---\r\n\r\n## :art: Design\r\n\r\n- O Design do projeto foi fornecido pela **[Rocketseat](https://www.rocketseat.com.br/)** no primeiro módulo do Ignite - React por meio do Figma.\r\n\r\n\u003cdiv align=\"center\"\u003e\r\n  \u003ch3\u003e\u003ca href=\"https://www.figma.com/file/hJ0lfBcqF3lM76iVweb1y0/Ignite-Feed-(Community)?type=design\u0026node-id=0-1\u0026mode=design\u0026t=RuHSPQg3xNweHyde-0\"\u003eIgnite Feed\u003c/a\u003e\u003c/h3\u003e\r\n\r\n  [![Design](https://i.imgur.com/08RaZ5K.png)](https://www.figma.com/file/hJ0lfBcqF3lM76iVweb1y0/Ignite-Feed-(Community)?type=design\u0026node-id=0-1\u0026mode=design\u0026t=RuHSPQg3xNweHyde-0)\r\n\r\n\u003c/div\u003e\r\n\r\n---\r\n\r\n## :seedling: Requisitos Mínimos\r\n\r\n  1. NodeJS\r\n  2. React\r\n  3. Vite\r\n  4. Yarn(ou NPM)\r\n  \r\n- **Curtir Comentários**\r\n\r\n  \u003cdiv align=\"center\" \u003e\r\n      \u003cimg src=\"https://i.imgur.com/WwlRNX1.gif\" width=\"500\"\u003e\r\n  \u003c/div\u003e\r\n  \u003cdiv align=\"center\" \u003e\r\n      \u003cimg src=\"https://i.imgur.com/GyYfHLt.png\" width=\"350\"\u003e_\u003cimg src=\"https://i.imgur.com/AbfdLfI.png\" width=\"350\"\u003e\r\n  \u003c/div\u003e\r\n\r\n---\r\n\r\n## :rocket: Tecnologias Utilizadas\r\n\r\n- O projeto foi desenvolvido utilizando as seguintes tecnologias:\r\n\r\n  1. **[axe-core/react](https://www.npmjs.com/package/@axe-core/react)**\r\n  2. **[AutoAnimate](https://auto-animate.formkit.com/)**\r\n  3. **[Date FNS](https://date-fns.org/)**\r\n  4. **[JavaScript](https://developer.mozilla.org/pt1.BR/docs/Web/JavaScript)**\r\n  5. **[Netlify](https://www.netlify.com/)**\r\n  6. **[NodeJS](https://nodejs.org/en/)**\r\n  7. **[Phosphor Icons](https://phosphoricons.com/)**\r\n  8. **[Radix UI](https://www.radix-ui.com/)**\r\n  9. **[React](https://pt1.br.react.dev/)**\r\n  10. **[Sentry](https://sentry.io/welcome/)**\r\n  11. **[TypeScript](https://www.typescriptlang.org/)**\r\n  12. **[Vite](https://vitejs.dev/)**\r\n  13. **[Yarn](https://classic.yarnpkg.com/blog/2017/05/12/introducing-yarn/)**\r\n\r\n---\r\n\r\n## :truck: Entrega e distribuição continua\r\n\r\n- Para a publicação da aplicação foi por meio da plataforma **[Netlify](https://www.netlify.com/)** 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.\r\n\r\n- 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.\r\n- Além disso, podemos customizar o próprio endereço do site, adicionar ferramentas dentre outras funcionalidades facilmente.\r\n\r\n\u003cdiv align=\"center\"\u003e\r\n\u003cimg src=\"https://i.imgur.com/sgafYT9.png\" width=\"1000\"\u003e\r\n\u003c/div\u003e\r\n\r\n---\r\n\r\n## :package: Como baixar e executar o projeto\r\n\r\n### Baixar\r\n\r\n- Clonar o projeto:\r\n\r\n  ```bash\r\n   git clone https://github.com/Aszurar/igniteFeed\r\n  ```\r\n\r\n- É 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:\r\n  - [Instalação do NodeJS](https://nodejs.org/en/)\r\n  - [Instalação do Yarn](https://classic.yarnpkg.com/blog/2017/05/12/introducing-yarn/)\r\n\r\n- Instalação das dependências:\r\n  - Execute o comando abaixo dentro da pasta do projeto\r\n\r\n    ```bash\r\n      yarn\r\n    ```\r\n\r\n### Execução\r\n\r\n- Caso tudo tenha sido instalado com sucesso, basta executar na raiz do projeto:\r\n\r\n  ```bash\r\n    yarn dev\r\n  ```\r\n\r\n---\r\n\r\n\u003cdiv align=\"center\"\u003e\r\n\r\nDesenvolvido por :star2: Lucas de Lima Martins de Souza.\r\n\r\n\u003c/div\u003e\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faszurar%2Fignitefeed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faszurar%2Fignitefeed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faszurar%2Fignitefeed/lists"}