DEV Community

Cover image for GitHub-repo-api
sudo-self
sudo-self

Posted on • Edited on

2 1 1 1

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
Enter fullscreen mode Exit fullscreen mode

add tailwind.css

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

Enter fullscreen mode Exit fullscreen mode

Fetch Repos and Followers by username

//api
fetch(`https://api.github.com/users/${username}`);
      const data = await response.json();
Enter fullscreen mode Exit fullscreen mode
//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);

Enter fullscreen mode Exit fullscreen mode
//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);

Enter fullscreen mode Exit fullscreen mode

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>
      )}
Enter fullscreen mode Exit fullscreen mode

implementing tsParticles with npm

npm install tsparticles-engine
Enter fullscreen mode Exit fullscreen mode
import { loadFull } from "tsparticles";
import particlesOptions from "./particles.json";

Enter fullscreen mode Exit fullscreen mode

initialize engine

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

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

Enter fullscreen mode Exit fullscreen mode

particles.json (sample)

{
  "autoPlay": true,
  "background": {
    "color": {
      "value": "#000"
    },
    "image": "",
    "position": "",
    "repeat": "",
    "size": "",
    "opacity": 1
  },
Enter fullscreen mode Exit fullscreen mode

Demo: https://gitreactrepos.vercel.app

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More