A personal blog for tracking GitHub issues in any public repository.
The purpose of this project was to learn about consuming an API using an HTTP client, understanding the impact of asynchronous requests in a React application, and effectively managing their side effects.
- Node.js
- Git
- Clone the repository (
git clone git@github.com:rodrigofontesdev/blog.git
) - Install dependencies (
npm install
) - Copy .env.example file (
cp .env.example .env
) - Add a GitHub token to the .env file, refer to the How to Use section
- Run application (
npm run dev
)
- Fetch repository owner details, including avatar, follower count, and name
- Retrieve and filter issues from a repository
- Display issue content in a post-like format
- Go to GitHub Account Settings
- Click Developer Settings in the sidebar menu
- Select Personal access token
- Create a new fine-grained personal access token
- Assign a descriptive name to your token, set an expiration date, authorize access to specific or all repositories
- Grant read-only access to followers under Account permissions
- Grant read-only access to issues and metadata for private repositories under Repository permissions
- Add your GitHub access token to the .env file as an environment variable
To track a different repository from your account, modify the VITE_GITHUB_USERNAME
and VITE_GITHUB_REPO
environment variables in the .env file. Note that accessing private repositories requires specific permissions. Refer to the Get Your GitHub Token section for details.
To track any public GitHub repository, specify the desired username and repository name in the environment variables.
Caution
GitHub imposes rate limits on its REST API to ensure fair usage and prevent service abuse.
- Render Markdown content as HTML using react-markdown
- Prevent layout shifts by loading web fonts optimally
- Enhance user experience by displaying placeholders during content loading
- Implement strategies to significantly reduce Cumulative Layout Shift (CLS)
- React
- TypeScript
- Styled Components
This project is licensed under the MIT License - see the LICENSE.md file for details.