-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
b02c0dc
commit 5a2b3a0
Showing
1 changed file
with
89 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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/) | ||
|
||
--- |