GitHub-repo-api

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

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