GitHub-repo-api
Tags: codepen, api, github, username
Published: 2024-05-03 08:15:46


GitHub api to search GitHub repos by username

several frameworks all implementing github RestFul APIs.

made with react app, tailwind, and vercel. 

V2 Demo: https://gitreactrepos.vercel.app

V1 Demo: https://user-repos.vercel.app

github's build your own octocat:  https://myoctocat.com

{% codepen https://codepen.io/sudo-self/pen/KKYjXXZ %}

Create a React App

```
npx create-react-app my-app
cd my-app
npm start
```

add tailwind.css 

```
npm install -D tailwindcss
npx tailwindcss init
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

```

Fetch Repos and Followers by username

```
//api
fetch(`https://api.github.com/users/${username}`);
      const data = await response.json();
```
```
//username
 const handleSubmit = async (event) => {
    event.preventDefault();
    try {
      const response = await fetch(`https://api.github.com/users/${username}`);
      const data = await response.json();
      setProfile(data);
      await fetchRepos(username);
      await fetchFollowers(username);

```
```
//repos
 const fetchRepos = async (username) => {
    try {
      const response = await fetch(
        `https://api.github.com/users/${username}/repos`
      );
      const data = await response.json();
      setRepos(data);
   
//followers
  const fetchFollowers = async (username) => {
    try {
      const response = await fetch(
        `https://api.github.com/users/${username}/followers`
      );
      const data = await response.json();
      setFollowers(data);
  
```

return json via JSX with tailwind.css

```

//repos
{Array.isArray(repos) && repos.length > 0 && (
        <div className="repos-container bg-gray-100 text-red-800 rounded-lg shadow-lg p-4 mb-4 mx-auto md:w-1/3" style={{ overflowY: "auto" }}>
          <h3 className="text-lg font-semibold">Repositories</h3>
          <ul className="list-none">
            {repos.map((repo) => (
              <li key={repo.id}>
                <a href={repo.html_url}>{repo.name}</a>
              </li>
            ))}
          </ul>
        </div>
      )}

//followers
      {Array.isArray(followers) && followers.length > 0 && (
        <div className="followers-container bg-gray-100 text-red-800 rounded-lg shadow-lg p-4 mb-4 mx-auto md:w-1/3" style={{ overflowY: "auto" }}>
          <h3 className="text-lg font-semibold">Followers</h3>
          <ul className="list-none">
            {followers.map((follower) => (
              <li key={follower.id}>
                <a href={follower.html_url}>{follower.login}</a>
              </li>
            ))}
          </ul>
        </div>
      )}
```

implementing tsParticles with npm
 
```
npm install tsparticles-engine
```
```
import { loadFull } from "tsparticles";
import particlesOptions from "./particles.json";

```

initialize engine

``` 
 useEffect(() => {
    if (init) {
      return;
    }

    initParticlesEngine(async (engine) => {
      await loadFull(engine);
    }).then(() => {
      setInit(true);
    });
  }, [])

``` 
particles.json (sample)

``` 
{
  "autoPlay": true,
  "background": {
    "color": {
      "value": "#000"
    },
    "image": "",
    "position": "",
    "repeat": "",
    "size": "",
    "opacity": 1
  },
``` 
Demo: https://gitreactrepos.vercel.app