A website helps you explore fantasies on Github.
MIT License
<a href="https://github.com/ericting2000/Gublight/issues">Report Bug</a>
<a href="https://github.com/ericting2000/Gublight/issues">Request Feature</a>
Gublight is a React app paid homage to Github in design that could
Infinite Scroll
from GitHub REST API
Fuzzy Search
feature.This is how you set up your project locally. To preview online, please visit here.
npm install yarn -g
git clone https://github.com/ericting2000/Gublight.git
yarn install
yarn dev
pages
_app.tsx
index.tsx # Landing Page
400.tsx # Custom 404 page
500.tsx # Custom 500 page
users
[username]
repos
[reponame].tsx # detailed information of specific repository
index.tsx # List of repositories
/users/{username}/repos
for specific user's repo list./users/{username}/repos/{repo}
for specific repo info of some user.Fuzzy Search
Infinite Scroll
How I Implement
?
Core Concept
When ever the last repository is showed on the screen, we send anthoer request to the API.
Below is the example code.
const { limit, empty, loading, repos, error, hasMore } = useFetchRepo(
user,
page
); // Fetch or not depends on the value of state "user" or "page"
const observer = useRef<IntersectionObserver | null>(null);
const lastRepo = useCallback(
(node) => {
if (loading) {
return; // If is in loading state, return. If it didn't return, fetch function will constantly being triggered due to the observer detection.
}
if (observer.current) {
observer.current.disconnect(); // Disconnect the current observer if is existed.(Which is connected to the previous round's last repo, or "Null" in the first round)
}
observer.current = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting && hasMore) {
setPage((prevPage: number) => {
return prevPage + 1; // Entries[0] will be the last repo in current round, which is the one we want to observe. If it exists and it's on the screen, renew the page and triggered fetch function.
});
}
});
if (node) {
observer.current.observe(node); // Reconnect observer to the current round's last repo.
}
},
[loading, hasMore]
);
{
repos.map((repo: RepoData, index: number) => {
if (repos.length === index + 1) {
return (
// We only want to observe the last repo in every round. Please notice the "ref" property.
<div ref={lastRepo} key={repo.name}>
# Code of render repo.
</div>
);
} else {
return (
<div key={repo.name} className={styles.repo}>
# Code of render repo.
</div>
);
}
});
}
For demo, i log a message each time when the fetch funtion is triggerd.
Header.tsx
Header.tsx
includes the Search Box for users to explore Github.LandingHeader.tsx
Footer.tsx
useFetchRepoList.ts
useFuzzySearch.ts
Fuzzy Search
feature.404.tsx
for 404 Not Found
500.tsx
for 500 Internal Server Error
With responsive design, Gublight is perfect to use in any of the devices.
Toggle the search input by clicking the magnifier icon!
When executing Fuzzy Search
, Debounce is necessary to prevent performance issues. Most of the time, chances are the user already have a clue of their search goal. As a result, calling API immediately as soon as the user insert something is not efficent and a wise solution. Also, Debounce largely decrease the probability of hitting the Rate Limit metioned earlier.
// In useFuzzySearch()
const timeout = useRef<NodeJS.Timeout | null>(null);
useEffect(() => {
setLoading(true);
function getUserList(queryString: string) {
clearTimeout(timeout.current as NodeJS.Timeout);
timeout.current = setTimeout(async () => {
// Fetching data code
}, 600);
}
SEO(Search Engine Optimization) makes Gublight being found from anywhere at anytime on anydevice all around the world more easily !
<Head>
<title>GubLight: Explore the software fantasy</title>
<meta
name="description"
content="Explore the software fantasy. Search the Github Repo as you desire, find the next masterpiece."
/>
<meta property="og:image" content="https://i.imgur.com/Xf81Hvo.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://gublight.com" />
<Favicon />
</Head>
Adding
<Head>
seciton to include meta tags and information of Gublight.
Gublight is distributed under the MIT License. See LICENSE
for more information.