Explore GitHub profiles with style and elegance

GitHubify is a modern, responsive React application that transforms the way you explore GitHub profiles. With its sleek interface, theme customization, and real-time data fetching, GitHubify makes profile discovery a delightful experience.

Check out GitHubify in action

• Real-time Profile Search: Instantly fetch and display GitHub user profiles
• Theme Switching: Seamlessly toggle between light and dark themes
• Responsive Design: Optimized for mobile (320px), tablet (768px), and desktop (1024px+)
• Accessibility: ARIA labels, semantic HTML, and keyboard navigation
• Error Handling: Clear error messages for failed searches or API issues
• Local Storage: Persists theme preference across sessions

• React 18.3.1 - UI library
• React Context API - State management
• GitHub REST API - Profile data fetching
• CSS3 - Custom styling with CSS variables
• Vite 6.0.5 - Build tool and development server
• ESLint 9.17.0 - Code quality and consistency

1. Clone the repository:

git clone https://github.com/KeepSerene/github-user-search-site-react.git

2. Install dependencies:

cd githubify npm install

3. Start the development server:

npm run dev

4. Open http://localhost:5173 in your browser

GitHubify uses CSS custom properties for easy theme customization. For example,

:root { --primary-blue: 212 100% 50%; --light-bg-primary: 0 0% 94%; --light-bg-secondary: 0 0% 100%; --light-bg-accent: 227 100% 96%; --light-text-primary: 217 21% 21%; --light-text-secondary: 217 35% 45%; } [data-theme="dark"] { --bg-primary: var(--dark-bg-primary); --bg-secondary: var(--dark-bg-secondary); --bg-accent: var(--dark-bg-accent); --text-primary: var(--dark-text-primary); --text-secondary: var(--dark-text-secondary); --primary: var(--primary-blue); }

• Mobile: 320px - 767px
• Tablet: 768px - 1023px
• Desktop: 1024px and above

• Semantic HTML structure
• ARIA labels for interactive elements
• Keyboard navigation support
• High contrast color schemes
• Screen reader friendly content

GitHubify uses the GitHub Users API:

GET https://api.github.com/users/{username}

Key data points retrieved:

• Profile information
• Repository count
• Follower statistics
• Social links
• Join date

[Dhrubajyoti Bhattacharjee]

• GitHub: @KeepSerene
• Portfolio: MathToDev
• Twitter: @UsualLearner

This project is licensed under the MIT License - see the LICENSE file for details.

• Design inspiration from Frontend Mentor
• Icons from Heroicons
• GitHub API documentation and team

Made with ❤️ and React