gh-projects-react is a React application that demonstrates simple GitHub API integration, enabling developers to interact with GitHub data directly from a web interface. Built primarily with JavaScript (94.3%) and HTML (5.7%), this project showcases how to authenticate with the GitHub API, fetch project and repository information, and display it in a clean, interactive React-based UI. Ideal for learning GitHub API fundamentals and React state management.
A React application demonstrating GitHub API integration for browsing and managing GitHub projects.
gh-projects-react is a lightweight web application built with React that showcases how to interact with the GitHub API. Users can authenticate with their GitHub account, explore repositories, view project data, and manage GitHub resources through an intuitive React interface. This project is perfect for developers learning about API integration and modern React development practices.
- GitHub Authentication - Secure login with GitHub account
- Repository Browsing - View and search your GitHub repositories
- Project Exploration - Access GitHub project information and details
- API Integration - Seamless GitHub API data fetching and management
- Responsive UI - Clean, modern interface built with React
- Real-time Updates - Dynamic data fetching and display
- Frontend: React, JavaScript (94.3%)
- Markup: HTML (5.7%)
- API: GitHub REST API v3
- Build Tool: Create React App (or similar)
- State Management: React Hooks/Context API
gh-projects-react/
├── public/
│ ├── index.html # Main HTML entry point
│ └── assets/ # Static assets
├── src/
│ ├── components/ # React components
│ │ ├── Auth/ # Authentication components
│ │ ├── Projects/ # Project display components
│ │ ├── Repos/ # Repository components
│ │ └── Layout/ # Layout components
│ ├── services/ # GitHub API service
│ ├── hooks/ # Custom React hooks
│ ├── App.js # Main App component
│ ├── index.js # React DOM render
│ └── styles/ # CSS styling
├── .env.example # Environment variables template
├── package.json # Dependencies
└── README.md # This file
- Node.js (v14 or higher)
- npm or yarn
- GitHub account
- GitHub Personal Access Token (for API access)
- Clone the repository:
git clone https://github.com/rbalogic/gh-projects-react.git
cd gh-projects-react- Install dependencies:
npm install-
Create a GitHub Personal Access Token:
- Go to GitHub Settings > Developer settings > Personal access tokens
- Click "Generate new token"
- Select required scopes (e.g.,
repo,read:org) - Copy the token
-
Create a
.envfile in the project root:
REACT_APP_GITHUB_TOKEN=your_personal_access_token_here
REACT_APP_GITHUB_USERNAME=your_github_username- Start the development server:
npm start- Open your browser and navigate to
http://localhost:3000
- Log in with your GitHub account (or provide your token)
- Browse your repositories on the main page
- Click on a repository to view details
- Navigate to the Projects section
- View project information and associated repositories
- Interact with project data in real-time
- Use the search bar to filter repositories by name or keyword
- Results update dynamically as you type
This project uses the GitHub REST API to fetch:
- User Information - Account details and profile data
- Repositories - List of user's repositories with metadata
- Projects - GitHub project data and organization
- Issues & Pull Requests - Repository activity information
// Fetch user repositories
GET /user/repos
// Fetch project information
GET /repos/{owner}/{repo}/projects
// Search repositories
GET /search/repositories?q=language:javascriptCreate a .env file with the following variables:
REACT_APP_GITHUB_TOKEN=your_token_here
REACT_APP_GITHUB_API_URL=https://api.github.com# Start development server
npm start
# Build for production
npm run build
# Run tests
npm test
# Eject configuration (one-way operation)
npm run eject- Components: Reusable React components for different sections
- Services: Centralized GitHub API service for data fetching
- Hooks: Custom React hooks for shared logic
- Styles: CSS files for component styling
The application supports GitHub authentication via:
- Personal Access Token - Store in
.envfile (development) - OAuth Flow - For production deployment (recommended)
Security Note: Never commit .env files or expose tokens in version control.
Be aware of GitHub API rate limits:
- Authenticated Requests: 5,000 requests per hour
- Unauthenticated Requests: 60 requests per hour
The application handles rate limiting gracefully with appropriate error messages.
vercelnpm run build
npm run deployEnsure the following for production deployment:
- Use OAuth for secure authentication
- Never expose personal access tokens
- Set appropriate API rate limit handling
- Configure CORS if needed
This project demonstrates:
- React component architecture and hooks
- GitHub API authentication and data fetching
- State management with React
- Error handling and loading states
- Environment variable configuration
- API integration best practices
- Verify your Personal Access Token is correct
- Check that the token hasn't expired
- Ensure required scopes are selected
- Wait for the rate limit to reset (hourly)
- Use a Personal Access Token for higher limits
- Optimize API calls to reduce requests
- Use a proxy service if making requests from browser
- Configure proper headers in API calls
This is a personal learning project. Feel free to fork and experiment!
This project is open source and available under the MIT License.
Note: This is a learning project demonstrating GitHub API integration with React. For production use, implement proper OAuth authentication and follow GitHub's API best practices.