DEV Community

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

Posted on • Edited on

GitHub-repo-api

#codepen #api #github #username

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

Top comments (0)