Skip to content

Commit

Permalink
🚀 Create ReadMe for Deploy 🚀
Browse files Browse the repository at this point in the history
  • Loading branch information
andreviapiana committed Feb 17, 2023
1 parent b02c0dc commit 5a2b3a0
Showing 1 changed file with 89 additions and 0 deletions.
89 changes: 89 additions & 0 deletions readme.MD
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<p align="center">
<h1 align="center"><a href="https://githubblog.netlify.app/">GitHub Blog :rocket: </a></h1>
</p>

<p align="center" margin-top="25px" >
<img alt="GitHub Language Count" src="https://img.shields.io/github/languages/count/andreviapiana/igniteTimer" />

<img alt="GitHub Top Language" src="https://img.shields.io/github/languages/top/andreviapiana/igniteTimer" />
</p>


Este é o resultado de um estudo aprofundado de React.js, realizado no treinamento Ignite, da Rocketseat.

___

## 💻 Sobre
A ideia deste projeto é criar um Blog pessoal que vai realizar requisições HTTP e consumir a API do GitHub. Os posts deste blog serão carregados diretamente do repositório deste projeto, mais especificamente da aba de Issues. Sempre que um novo issue é cadastrado ele é exibido junto com os demais no blog.

Fique a vontade para criar um novo issue! Ficarei feliz, pois este é o intuito deste projeto!

O projeto faz ainda a listagem do perfil com imagem, número de seguidores, nome e todas as demais informações disponíveis na API do GitHub. É possível buscar por postagens específicas através de um campo de busca na página. Enquando a Home aprensenta um breve resumo dos Posts, ao clicar um um dos Cards o usuário é redirecionado para uma página onde pode visualizar o Post completo.

Por "trás dos panos" o projeto apresenta diversas funcionalidades, como o uso do React Hook Form e Zod no formulário de busca, o uso do React Router DOM para navegação entre as páginas, uso do Axios para realizar as requisições, uso do ReactMarkdown para exibir os Posts já formatados na sua página de detalhes, entre outros.

Visualmente, além de todo o design da página, foi adicionado um Skeleton para deixar o visual da aplicação mais interessante enquanto as infos da API não são retornadas.

___

## 🎨 Layout
A página em formato desktop é vista na imagem abaixo:

![Capa](https://user-images.githubusercontent.com/106932234/219651058-efbbebd7-f567-4754-af61-950c0a2c4acb.png)

___

## 🛠 Tecnologias

As seguintes tecnologias foram empregadas na criação deste projeto:

- [ReactJs](https://reactjs.org)
- [TypeScript](https://www.typescriptlang.org/)
- [Styled Components](https://styled-components.com/)
- [Vite](https://vitejs.dev/)
- [Axios](https://axios-http.com/ptbr/docs/intro)
- [React Hook Form](https://react-hook-form.com/)
- [Zod](https://zod.dev/)
- [React Markdown](https://github.com/remarkjs/react-markdown)
- [Font Awesome](https://fontawesome.com/)
- [Date FNS](https://date-fns.org/)

___

## 🚀 Como utilizar

Clone o projeto para o local desejado em seu computador.

```bash
$ git clone [email protected]:andreviapiana/GitHub-Blog.git
```
___

#### 🚧 Executando o Projeto
```bash

# Navegue até o diretório
$ cd GitHub-Blog

# Instale as dependências necessárias
$ npm install

# Agora inicie o servidor do FrontEnd
$ npm run dev

# O terminal irá exibir o endereço local onde a aplicação está sendo executada. Basta digitar o mesmo endereço em seu navegador preferido. O endereço usado na criação do projeto foi este:

http:https://localhost:5173/
```

___


[O resultado FINAL pode ser visto aqui](https://githubblog.netlify.app/)

___


Made with ❤️ by André Viapiana 👋🏽 [Get in Touch!](https://www.linkedin.com/in/andreviapiana/)

---

0 comments on commit 5a2b3a0

Please sign in to comment.