Skip to content

bernardodemarco/github-blog

Repository files navigation

GitHub Blog

A personal blog built with React.js + TypeScript + GitHub API. It is the third challenge of Rocketseat's React.js course. It is deployed here.

homepage-image

About the project

On the application's main page, there is a card with my GitHub profile data. It contains my photo, name, short description, GitHub username, organization, number of followers and a link to my profile. All of this data has been fetched using the GitHub Users API.

Below the profile card, there is a form in which the user can search for posts, followed by the posts grid. The filtering has been done using the GitHub Search API, as well as the fetching of post data.

searching-posts-action

Whenever the user clicks on a post card, they are redirected to the corresponding post page. There is all the information related to the post, like title, author, number of comments, and, most importantly, the content. The GitHub Issues API has been used to retrieve all of this data.

post-details-1

post-details-2

All of the posts are issues from this repository that have the label blog-post.

🛠️ Built With

  • React.js
  • TypeScript
  • Styled Components
  • Axios
  • React Router
  • React Markdown

🚀 Setup

Clone this repository:

  # clone this repository
  git clone https://github.com/bernardodemarco/github-blog.git

Go to the project's folder and run the following commands:

  # install dependencies
  npm i

  # runs web app on http://localhost:5173/
  npm run dev

Bernardo De Marco Gonçalves, June 2023.