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';

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

const [repo, setRepo] = useState ([]);

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);
        });
    },

Then, I like to console log:

console.log(repo);

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>

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