https://github.com/ericting2000/gublight
A website helps you explore fantasies on Github.
https://github.com/ericting2000/gublight
github nextjs react tailwindcss typescript
Last synced: 9 months ago
JSON representation
A website helps you explore fantasies on Github.
- Host: GitHub
- URL: https://github.com/ericting2000/gublight
- Owner: ericting2000
- License: mit
- Created: 2022-03-09T12:57:46.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-04-27T04:02:47.000Z (almost 4 years ago)
- Last Synced: 2025-04-23T13:17:11.530Z (9 months ago)
- Topics: github, nextjs, react, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://gublight-ralqxvcfp-ericting2000.vercel.app
- Size: 807 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![MIT License][license-shield]][license-url]
Overview
-
About The Project
-
Getting Started
- Usage
- Architecture Design & Explanation
- A Little More Detail
- License
## ๐ About The Project
Gublight is a [**React**](https://reactjs.org) app paid homage to [**Github**](https://github.com) in design that could๏ผ
- browse users/organizations on [**GitHub**](https://github.com)
- list user's repositories with `Infinite Scroll` from [**GitHub REST API**](https://docs.github.com/en/rest)
- get repository's detail from [**GitHub REST API**](https://docs.github.com/en/rest)
- searching user with `Fuzzy Search` feature.
### Built With
- [Next.js](https://nextjs.org/)
- [React.js](https://reactjs.org/)
- [Tailwind CSS](https://tailwindcss.com)
### Using
- [Typescript](https://www.typescriptlang.org)
- [Sass](https://sass-lang.com)
## ๐ Getting Started
> This is how you set up your project locally. To preview online, please visit [here](https://www.gublight.com).
### Prerequisites
- yarn
```sh
npm install yarn -g
```
### Installation
1. Clone the repo
```sh
git clone https://github.com/ericting2000/Gublight.git
```
2. Install Yarn packages
- yarn
```sh
yarn install
```
3. Start the development server
- yarn
```sh
yarn dev
```
4. Enjoy Gublight at http://localhost:3000
## ๐ Usage
- Insert the Github user you would like to look for. Options that match your request may show up under the input box.
- Click 'Explore' or options showed below to navigate to the designated user page. You're welcomed to use the 'Enter' key to submit.
- In the user's page, all public repository will be listed. Click whichever repo you would like to explore for more information about it.
- Fill free to re-search for any user at anytime as you wish !
## ๐ Architecture Design & Explanation
### Routing Architecture Diagram
```bash
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
```
- Dynamic Routing
- `/users/{username}/repos` for specific user's repo list.
- `/users/{username}/repos/{repo}` for specific repo info of some user.
- Custom Error Page (404 Not Found, 500 Internal Server Error)
- Showed when the route is not exist or encounter internal error.
### Pages
#### Landing Page
- `Fuzzy Search`
- Feature is accessible across all app.
- With Custom Hook _useFuzzySearch()_, users will be able to implement fuzzy search using the input data they gave to generate suggestions.
#### Repository List
- `Infinite Scroll`
- Infinite Scroll(Lazy Loading) is essential to this kind of "Large Data requested" app, as it optimizes the performance of both API call procedure and render process.
- With Infinite Scroll, app only sends a request when the content(data) is about to use. Also, less things for initial render improve the performance and decrease the waiting time which provides a better user experience.
- `How I Implement` ?
- _useCallback_ + _useRef()_ + _IntersectionObserver API_ + _useFetchRepoList_ custom hook.
- `Core Concept`
- When ever the last repository is showed on the screen, we send anthoer request to the API.
- Below is the example code.
```ts
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(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]
);
```
```tsx
{
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.
# Code of render repo.
);
} else {
return (
# Code of render repo.
);
}
});
}
```
- For demo, i log a message each time when the fetch funtion is triggerd.
#### Repository Information
- Shows the information of the designated repository.
### Components
#### Header
- `Header.tsx`
- Used all across the app (except for the landing page only), `Header.tsx` includes the _Search Box_ for users to explore Github.
- While displayed in mobile mode, the _Search Box_ will folded into the header. (It is still accessible at anytime by clicking the magnifier icon.)
- `LandingHeader.tsx`
- Used only for landing page. No _Search Box_ included.
#### Footer
- `Footer.tsx`
- Giving a Link for navigation to [Gublight's](https;//www.gublight.com) Github repository.
### Custom Hooks
- `useFetchRepoList.ts`
- Used for fetching all public repositories that the user has.
- cooperate with the **_IntersectionObserver_** WebAPI to decide whether to fetch for new data or not.
- `useFuzzySearch.ts`
- Used for `Fuzzy Search` feature.
### States Within The Code
- Error Handling
- _limit_ for rate limit indication.
- _error_ for fetching error indication.
- _empty_ for empty users/repo list/repo info indication.
- Loading
- _loading_ for fetching execution.
### Other Stuffs
- Custom Error Page
- `404.tsx` for _404 Not Found_
- `500.tsx` for _500 Internal Server Error_
## ๐ A Little More Detail
### Rate Limit
- Github restricts API request to prevent DDoS attack and cyberterrorism. For unauthenticated requests, the rate limit allows for up to 60 requests per hour. Since Gublight is a public repository, we're not allowed to submit personal access token for authentication to increse the limit rate.
- When you encountered such circumstances, some of the functions may thus be temporarily restricted.
### Responsive Web Design
- With responsive design, Gublight is perfect to use in any of the devices.
- Toggle the search input by clicking the magnifier icon!
### Fuzzy Search Debounce
- 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.
```ts
// In useFuzzySearch()
const timeout = useRef(null);
useEffect(() => {
setLoading(true);
function getUserList(queryString: string) {
clearTimeout(timeout.current as NodeJS.Timeout);
timeout.current = setTimeout(async () => {
// Fetching data code
}, 600);
}
```
### SEO
- SEO(Search Engine Optimization) makes [Gublight](https;//www.gublight.com) being found from anywhere at anytime on anydevice all around the world more easily !
```ts
GubLight: Explore the software fantasy
```
> Adding `` seciton to include meta tags and information of Gublight.
## ๐ License
Gublight is distributed under the MIT License. See `LICENSE` for more information.
[contributors-shield]: https://img.shields.io/github/contributors/ericting2000/Gublight.svg?style=for-the-badge
[contributors-url]: https://github.com/ericting2000/Gublight/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/ericting2000/Gublight.svg?style=for-the-badge
[forks-url]: https://github.com/ericting2000/Gublight/network/members
[stars-shield]: https://img.shields.io/github/stars/ericting2000/Gublight.svg?style=for-the-badge
[stars-url]: https://github.com/ericting2000/Gublight/stargazers
[issues-shield]: https://img.shields.io/github/issues/ericting2000/Gublight.svg?style=for-the-badge
[issues-url]: https://github.com/ericting2000/Gublight/issues
[license-shield]: https://img.shields.io/github/license/ericting2000/Gublight.svg?style=for-the-badge
[license-url]: https://github.com/ericting2000/Gublight/blob/master/LICENSE
[product-screenshot]: images/screenshot.png
