Este é o resultado de um estudo aprofundado de React.js, realizado no treinamento Ignite, da Rocketseat.
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.
A página em formato desktop é vista na imagem abaixo:
As seguintes tecnologias foram empregadas na criação deste projeto:
- ReactJs
- TypeScript
- Styled Components
- Vite
- Axios
- React Hook Form
- Zod
- React Markdown
- Font Awesome
- Date FNS
Clone o projeto para o local desejado em seu computador.
$ git clone git@github.com:andreviapiana/GitHub-Blog.git# 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://localhost:5173/O resultado FINAL pode ser visto aqui
Made with ❤️ by André Viapiana 👋🏽 Get in Touch!