https://github.com/jerp86/github_blog
Nesse projeto será utilizado as #issues deste repositório como publicações
https://github.com/jerp86/github_blog
axios date-fns eslint font-awesome react-markdown react-router react-syntax-highlighter styled-components use-context-selector
Last synced: 9 months ago
JSON representation
Nesse projeto será utilizado as #issues deste repositório como publicações
- Host: GitHub
- URL: https://github.com/jerp86/github_blog
- Owner: jerp86
- License: mit
- Created: 2023-01-19T03:16:52.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-11-11T09:36:03.000Z (about 2 years ago)
- Last Synced: 2025-01-18T08:16:31.510Z (11 months ago)
- Topics: axios, date-fns, eslint, font-awesome, react-markdown, react-router, react-syntax-highlighter, styled-components, use-context-selector
- Language: TypeScript
- Homepage:
- Size: 842 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Desafio 03 - Github Blog
[](https://choosealicense.com/licenses/mit/)
---
Sobre |
Motivo |
Tecnologias |
Figma |
Cores |
Fontes |
Executar |
Licença
---
## :information_source: Sobre
Nesse módulo foi praticado a utilização de clientes HTTP consumindo a API do [Github](https://github.com/) para criar um blog pessoal.
A aplicação desenvolvida que utilizará da API do GitHub para buscar issues de um repositório, dados do meu perfil e exibir como um blog.
- Listagem do perfil com imagem, número de seguidores, nome e outras informações disponíveis pela API do GitHub.
- Listar e filtrar todas as issues do repositório com um pequeno resumo do conteúdo dela
- Criar uma página para exibir um post (issue) completo
Apesar de serem poucas funcionalidades, foi revisto conceitos como:
- Fetch / Axios
- Roteamento e React Router DOM
- Formulários
Para completar esse desafio foi preciso fazer alguns preparativos e principalmente algumas pesquisas para entender sobre a API do GitHub.
## :interrobang: Motivo
Reinicio dos estudos do bootcamp Ignite ReactJS da Rocketseat.
Como se tratou de um desafio, foi necessário alguns conhecimentos além dos abordados nesse módulo.
## :rocket: Tecnologias Utilizadas
- [React](https://reactjs.org/)
- [Axios](https://axios-http.com/)
- [date-fns](https://github.com/date-fns/date-fns#readme)
- [ESLint](https://eslint.org/)
- [Font Awesome](https://fontawesome.com/)
- [react-markdown](https://github.com/remarkjs/react-markdown#readme)
- [React-Router-Dom](https://github.com/remix-run/react-router#readme)
- [React Syntax Highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter#readme)
- [💅🏽 Styled-Components](https://styled-components.com/)
- [use-context-selector](https://github.com/dai-shi/use-context-selector#readme)
- [@rocketseat/eslint-config](https://github.com/rocketseat/eslint-config-rocketseat#readme)
## :art: Layout no Figma
Para essa aplicação foi fornecido um layout para que fosse possível seguir e implementar todas as funcionalidades desenhadas no #Figma.
[Github Blog](https://www.figma.com/community/file/1138814951106121051)
## :rainbow: Documentação de cores
| Cor | Hexadecimal |
| ---------- | ----------- |
| blue | #3294F8 |
| white | #FFFFFF |
| title | #E7EDF4 |
| subtitle | #C4D4E3 |
| text | #AFC2D4 |
| span | #7B96B2 |
| label | #3A536B |
| border | #1C2F41 |
| post | #112131 |
| profile | #0B1B2B |
| background | #071422 |
| input | #040F1A |
## :abc: Fontes utilizadas
- [Nunito](https://fonts.google.com/specimen/Nunito)
- [Fira Code](https://fonts.google.com/specimen/Fira+Code)
## :zap: Como executar
- Clone o projeto:
```
git clone https://github.com/jerp86/github_blog.git
```
- Acesse a pasta clonada:
```
cd github_blog
```
- Instale as dependências:
```
npm ci
```
- Inicie a fake API e o projeto:
```
npm run dev
```
## :memo: Licença
Esse projeto está sob a licença MIT. Veja o arquivo [LICENSE](LICENSE) para mais detalhes.
---
Feito por Jerp86 👋️
Entre em contato!
 
