GitHub Checker

A modern React application that analyzes GitHub user profiles and their technology stacks. Built with TypeScript, Vite, and Tailwind CSS.

✨ Features

• User Profile Analysis: View GitHub user information including followers, following, and public repositories
• Tech Stack Detection: Automatically detect programming languages and frameworks from repositories
• Repository Statistics: Get insights into repository distribution and language usage
• Real-time Search: Debounced search with instant feedback
• Responsive Design: Beautiful UI that works on all devices
• Error Handling: Comprehensive error boundaries and user-friendly error messages
• Loading States: Skeleton loaders for smooth user experience

🚀 Tech Stack

• Frontend: React 19, TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS
• Icons: Lucide React
• State Management: React Hooks
• API: GitHub REST API

🛠️ Installation

1. Clone the repository:

git clone <your-repo-url>
cd github-checker

2. Install dependencies:

pnpm install

3. Start the development server:

pnpm dev

4. Open your browser and navigate to http://localhost:5173

📦 Available Scripts

• pnpm dev - Start development server
• pnpm build - Build for production
• pnpm preview - Preview production build
• pnpm lint - Run ESLint

🎯 Usage

1. Enter a GitHub username in the search field
2. Click "Analyze" or press Enter
3. View the user's profile information
4. Explore their technology stack analysis
5. Check repository statistics

️ Project Structure

src/
├── components/          # React components
│   ├── ErrorBoundary.tsx
│   ├── Header.tsx
│   ├── RepositoryStats.tsx
│   ├── TechStackAnalysis.tsx
│   ├── UserCard.tsx
│   └── UserCardSkeleton.tsx
├── utils/              # Utility functions
│   ├── constants.ts    # App constants and patterns
│   └── fetchApi.ts     # API functions
├── types.ts            # TypeScript type definitions
├── App.tsx             # Main application component
└── main.tsx            # Application entry point

Configuration

The app uses the GitHub REST API without authentication for public data. For higher rate limits, you can add a GitHub token in the API configuration.

Features in Detail

User Profile Analysis

• Avatar, name, and bio
• Follower/following counts
• Public repository count
• Location information
• Direct link to GitHub profile

Tech Stack Detection

• Language distribution analysis
• Framework detection based on repository names and descriptions
• Repository statistics (total vs public)

Error Handling

• Global error boundary for unexpected errors
• API error handling with user-friendly messages
• Loading states and skeleton components

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests and linting
5. Submit a pull request

📄 License

This project is open source and available under the MIT License.

Acknowledgments

• GitHub API for providing user and repository data
• Lucide React for beautiful icons
• Tailwind CSS for utility-first styling
• Vite for fast development experience