Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aszurar/ignitefeed
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/
https://github.com/aszurar/ignitefeed
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
Last synced: 1 day ago
JSON representation
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/
- Host: GitHub
- URL: https://github.com/aszurar/ignitefeed
- Owner: Aszurar
- Created: 2023-05-16T21:46:36.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-24T13:57:00.000Z (10 months ago)
- Last Synced: 2024-12-18T07:13:13.401Z (about 2 months ago)
- 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
- Language: TypeScript
- Homepage: https://ignitefeed-aszurar.netlify.app/
- Size: 154 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# #1 - React: ****
## 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](https://www.netlify.com/)**.
- Acesse em: ****
Ignite Feed
https://github.com/Aszurar/igniteFeed/assets/64987824/c064848d-bc07-45a6-8ea3-8521eee4c7a9
[](https://app.netlify.com/sites/ignitefeed-aszurar/deploys) [](https://vitejs.dev/) [](https://react.dev/) [](https://www.radix-ui.com/) [](https://www.typescriptlang.org/) [](https://www.javascript.com/) [](https://developer.mozilla.org/pt-BR/docs/Web/HTML) [](https://www.w3schools.com/css/) [](https://yarnpkg.com/)
---
**[Vídeo no Youtube](https://www.youtube.com/watch?v=8ehNeoepYNE)**
---
## :information_source: 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](https://www.rocketseat.com.br/)**
- Para a construção da interface desse projeto foi usado **[React](https://react.dev)** com **[TypeScript](https://www.typescriptlang.org/)**.
- 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.
- **Realizando Comentário**
_
---
## :interrobang: 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](https://www.rocketseat.com.br/)**
- 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**
_
---
## :art: Design
- O Design do projeto foi fornecido pela **[Rocketseat](https://www.rocketseat.com.br/)** no primeiro módulo do Ignite - React por meio do Figma.
Ignite Feed
[](https://www.figma.com/file/hJ0lfBcqF3lM76iVweb1y0/Ignite-Feed-(Community)?type=design&node-id=0-1&mode=design&t=RuHSPQg3xNweHyde-0)
---
## :seedling: Requisitos Mínimos
1. NodeJS
2. React
3. Vite
4. Yarn(ou NPM)
- **Curtir Comentários**
_
---
## :rocket: Tecnologias Utilizadas
- O projeto foi desenvolvido utilizando as seguintes tecnologias:
1. **[axe-core/react](https://www.npmjs.com/package/@axe-core/react)**
2. **[AutoAnimate](https://auto-animate.formkit.com/)**
3. **[Date FNS](https://date-fns.org/)**
4. **[JavaScript](https://developer.mozilla.org/pt1.BR/docs/Web/JavaScript)**
5. **[Netlify](https://www.netlify.com/)**
6. **[NodeJS](https://nodejs.org/en/)**
7. **[Phosphor Icons](https://phosphoricons.com/)**
8. **[Radix UI](https://www.radix-ui.com/)**
9. **[React](https://pt1.br.react.dev/)**
10. **[Sentry](https://sentry.io/welcome/)**
11. **[TypeScript](https://www.typescriptlang.org/)**
12. **[Vite](https://vitejs.dev/)**
13. **[Yarn](https://classic.yarnpkg.com/blog/2017/05/12/introducing-yarn/)**
---
## :truck: Entrega e distribuição continua
- 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.
- 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.
---
## :package: Como baixar e executar o projeto
### Baixar
- Clonar o projeto:
```bash
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](https://nodejs.org/en/)
- [Instalação do Yarn](https://classic.yarnpkg.com/blog/2017/05/12/introducing-yarn/)
- Instalação das dependências:
- Execute o comando abaixo dentro da pasta do projeto
```bash
yarn
```
### Execução
- Caso tudo tenha sido instalado com sucesso, basta executar na raiz do projeto:
```bash
yarn dev
```
---
Desenvolvido por :star2: Lucas de Lima Martins de Souza.