DEV Community

Cover image for Enhance your portfolio: Show your Github repositories as posts in a blog using Github API
Sarah Siqueira
Sarah Siqueira

Posted on • Updated on

Enhance your portfolio: Show your Github repositories as posts in a blog using Github API

Some time ago, I decided to build a portfolio application to show my previous work and skills. For that, naturally, I would like to share some code samples.

Since these code samples are all available on repositories at my Github Profile, so why do not use them?

After two minutes of research, I ended up on GitHub API documentation and this is the result.

Steps

The first step was to create the component SliderGit.js. On this component, we will use the famous React hooks useEffect and useState, so we need to import them:

import React, { useEffect, useState } from 'react';
Enter fullscreen mode Exit fullscreen mode

Then, we need to initialize the state which will hold the repositories information and the loading state

const [repo, setRepo] = useState ([]);
Enter fullscreen mode Exit fullscreen mode

In the SliderGit.js component, we will get the data from GitHub. I could use two different methods of making network requests: either Fetch or Axios. I decided to use Fetch, as you can see below:

// SliderGit.js

 useEffect( () => {
        fetch ('https://api.github.com/users/sarahcssiqueira/repos')
        .then ((res) => res.json())
        .then ((res) => {setRepo(res);
        });
    },
Enter fullscreen mode Exit fullscreen mode

Then, I like to console log:

console.log(repo);
Enter fullscreen mode Exit fullscreen mode

As everything is working as expected:

return (
        <section className='articles'>
        {repo.map((repo) => {
          return (
            <article key={repo.id}
                     className="article">
                <Link to={repo.svn_url}
                      className=''>
                      {repo.name}
                </Link>
                <p className=''>
                   {repo.description} 
                  <Link to={repo.svn_url} 
                        className=''> 
                        <BsBoxArrowUpRight/>
                  </Link>
                </p>
                <ul>
                  <li className=''>
                        <BsCalendarDate/>
                        {' '}
                        {new Date(repo.created_at).toDateString()}
                    </li>
                </ul>
                <ul>
                    <li className=''>
                        <AiFillTag/> {' '}
                        {repo.topics}{' '}
                    </li>
                </ul>
                <section className=''>
                  <p className=''>
                    <BsStar className=''/>
                      {' '}
                      {repo.stargazers_count}
                  </p>
                  <p className=''>
                    <VscRepoForked className=''/>
                    {' '}
                    {repo.forks_count}
                  </p>
                </section>
            </article>
            )})}
    </section>
Enter fullscreen mode Exit fullscreen mode

The result can be seen at my portfolio on code samples page.

Top comments (0)