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
},
Top comments (0)