{"id":28739353,"url":"https://github.com/arnobt78/search-github-users-explorer--reactvite-graphql","last_synced_at":"2025-06-16T06:02:54.115Z","repository":{"id":299302714,"uuid":"1002602410","full_name":"arnobt78/Search-Github-Users-Explorer--ReactVite-GraphQL","owner":"arnobt78","description":"A modern, feature-rich web application to search and explore GitHub users using the GitHub GraphQL API. Built with React, Vite, TypeScript, Tailwind CSS, Apollo Client, and shadcn/ui, this project demonstrates advanced state management, data visualization, and a clean, responsive UI.","archived":false,"fork":false,"pushed_at":"2025-06-15T21:27:30.000Z","size":1267,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-15T21:52:14.445Z","etag":null,"topics":["apollo-client","apollo-graphql","charts","github-api","github-profile","graphql","graphql-api","graphql-schema","loading-skeleton","react-vite-typescript","responsive-ui","search-github-user-repositories","search-github-users","search-github-users-explorer","shadcn-ui","statics","tailwindcss","toast-notifications","typescript","user-profile"],"latest_commit_sha":null,"homepage":"https://search-github-users-explorer.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arnobt78.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-15T20:13:34.000Z","updated_at":"2025-06-15T21:41:23.000Z","dependencies_parsed_at":"2025-06-15T21:52:18.022Z","dependency_job_id":"131ff958-38ef-4cdf-a94b-17a485db470e","html_url":"https://github.com/arnobt78/Search-Github-Users-Explorer--ReactVite-GraphQL","commit_stats":null,"previous_names":["arnobt78/search-github-users-explorer--reactvite-graphgl"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/arnobt78/Search-Github-Users-Explorer--ReactVite-GraphQL","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FSearch-Github-Users-Explorer--ReactVite-GraphQL","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FSearch-Github-Users-Explorer--ReactVite-GraphQL/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FSearch-Github-Users-Explorer--ReactVite-GraphQL/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FSearch-Github-Users-Explorer--ReactVite-GraphQL/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arnobt78","download_url":"https://codeload.github.com/arnobt78/Search-Github-Users-Explorer--ReactVite-GraphQL/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FSearch-Github-Users-Explorer--ReactVite-GraphQL/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260109456,"owners_count":22960023,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apollo-client","apollo-graphql","charts","github-api","github-profile","graphql","graphql-api","graphql-schema","loading-skeleton","react-vite-typescript","responsive-ui","search-github-user-repositories","search-github-users","search-github-users-explorer","shadcn-ui","statics","tailwindcss","toast-notifications","typescript","user-profile"],"created_at":"2025-06-16T06:00:58.735Z","updated_at":"2025-06-16T06:02:54.082Z","avatar_url":"https://github.com/arnobt78.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Search GitHub User Explorer (GraphQL) - ReactVite\n\n![Screenshot 2025-06-15 at 22 00 23](https://github.com/user-attachments/assets/72515557-bec1-42ab-a420-05d79ac03b77)\n![Screenshot 2025-06-15 at 21 29 04](https://github.com/user-attachments/assets/00ff6fa3-6cd5-4888-b5dd-4fda0512bce2)\n\nA modern, feature-rich web application to search and explore GitHub users using the GitHub GraphQL API. Built with React, Vite, TypeScript, Tailwind CSS, Apollo Client, and shadcn/ui, this project demonstrates advanced state management, data visualization, and a clean, responsive UI.\n\n**Live Online:** https://search-github-users-explorer.netlify.app/\n\n---\n\n## Table of Contents\n\n- [Features](#features)\n- [Demo \u0026 Screenshots](#demo--screenshots)\n- [Project Structure](#project-structure)\n- [Technology Stack](#technology-stack)\n- [Getting Started](#getting-started)\n- [Environment Variables](#environment-variables)\n- [Usage Guide](#usage-guide)\n- [Key Functionalities](#key-functionalities)\n- [How GraphQL \u0026 Apollo Client Work](#how-graphql--apollo-client-work)\n- [Detailed Project Walkthrough](#detailed-project-walkthrough)\n- [Keywords](#keywords)\n- [License](#license)\n\n---\n\n## Features\n\n- **Search GitHub Users** by username using the GitHub GraphQL API\n- **User Profile**: View avatar, name, bio, and profile link\n- **Statistics**: See total repositories, followers, following, and gists\n- **Charts**: Visualize most used languages, most popular repos, and most forked repos\n- **Responsive UI**: Built with Tailwind CSS and shadcn/ui for a modern look\n- **Toast Notifications**: User feedback for invalid input and errors\n- **Loading Skeletons**: Smooth loading experience\n- **TypeScript**: Type-safe codebase\n\n---\n\n## Demo \u0026 Screenshots\n\n## \u003c!-- Screenshots are preserved above. Do not remove or edit the image links. --\u003e\n\n## Project Structure\n\n```text\n├── public/\n├── src/\n│   ├── apolloClient.ts         # Apollo Client setup\n│   ├── App.tsx                 # Main app component\n│   ├── main.tsx                # Entry point\n│   ├── queries.ts              # GraphQL queries\n│   ├── types.ts                # TypeScript types\n│   ├── utils.ts                # Data transformation utilities\n│   ├── assets/                 # Static assets\n│   ├── components/\n│   │   ├── charts/             # Chart components (UsedLanguages, PopularRepos, ForkedRepos)\n│   │   ├── form/               # SearchForm\n│   │   ├── ui/                 # shadcn/ui components (button, card, chart, input, label, skeleton, toast, toaster)\n│   │   └── user/               # UserCard, UserProfile, StatsCard, StatsContainer, Loading\n│   ├── hooks/                  # Custom hooks (use-toast)\n│   └── lib/                    # Shared utilities\n├── .env.local                  # Environment variables (GitHub token)\n├── package.json\n├── tailwind.config.js\n├── postcss.config.js\n├── vite.config.ts\n├── tsconfig.json\n└── README.md\n```\n\n---\n\n## Technology Stack\n\n- **React** (with Vite)\n- **TypeScript**\n- **Tailwind CSS**\n- **shadcn/ui** (UI primitives)\n- **Apollo Client** (GraphQL)\n- **Recharts** (Charts)\n- **GitHub GraphQL API**\n\n---\n\n## Getting Started\n\n### 1. Clone the repository\n\n```bash\ngit clone \u003crepo-url\u003e\ncd 21-search-github-users-graphql\n```\n\n### 2. Install dependencies\n\n```bash\nnpm install\n```\n\n### 3. Set up environment variables\n\n- Create a `.env.local` file in the root directory\n- Add your GitHub personal access token:\n\n```env\nVITE_GITHUB_TOKEN=YOUR_TOKEN_HERE\n```\n\n\u003e **Note:** [How to create a GitHub personal access token](https://github.com/settings/tokens)\n\n### 4. Start the development server\n\n```bash\nnpm run dev\n```\n\nThe app will be available at `http://localhost:5173` (or as shown in your terminal).\n\n---\n\n## Environment Variables\n\n- `VITE_GITHUB_TOKEN`: Your GitHub personal access token (required for API access)\n\n**Note:** Make sure you enable (tick) at least these two fields while generating your GitHub API Token (Classic) for deploying on Netlify or Vercel or other server.\n\nread:user (for reading user profile info)\n\npublic_repo (for reading public repository info)\n\n---\n\n## Usage Guide\n\n1. **Search for a user**: Enter a GitHub username in the search bar and submit.\n2. **View profile**: See the user's avatar, name, bio, and a link to their GitHub profile.\n3. **Explore stats**: View total repositories, followers, following, and gists.\n4. **Visualize data**: Check out charts for most used languages, most popular repos, and most forked repos.\n5. **Error handling**: Invalid usernames or API errors are shown via toast notifications.\n\n---\n\n## Key Functionalities\n\n- **SearchForm**: Handles user input and search submission with validation and toast feedback.\n- **UserProfile**: Fetches and displays user data using Apollo Client and GraphQL.\n- **UserCard**: Shows avatar, name, bio, and profile link.\n- **StatsContainer \u0026 StatsCard**: Display user statistics.\n- **Charts**: Visualize language usage, popular repos, and forked repos using Recharts.\n- **Loading**: Skeleton UI for loading states.\n- **Toast**: User feedback for errors and actions.\n\n---\n\n## How GraphQL \u0026 Apollo Client Work\n\n### What is GraphQL?\n\nGraphQL is a query language for APIs and a runtime for executing those queries. Unlike REST, which exposes multiple endpoints, GraphQL exposes a single endpoint and allows clients to specify exactly what data they need. This reduces over-fetching and under-fetching of data.\n\n- **Schema**: Defines the types and structure of data available.\n- **Query**: Request to fetch data (like GET in REST).\n- **Mutation**: Request to modify data (like POST/PUT/DELETE in REST).\n- **Fields \u0026 Arguments**: Specify exactly what data and filters you want.\n- **Types**: Strongly-typed system (e.g., User, Repository).\n\n**Example GraphQL Query:**\n\n```graphql\nquery ($login: String!) {\n  user(login: $login) {\n    name\n    avatarUrl\n    repositories(first: 5) {\n      nodes {\n        name\n        stargazerCount\n      }\n    }\n  }\n}\n```\n\n### What is Apollo Client?\n\nApollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. It handles fetching, caching, updating, and error handling for your data.\n\n- **ApolloProvider**: Wraps your React app to provide GraphQL data via context.\n- **useQuery Hook**: Fetches data from the server and manages loading/error states.\n- **InMemoryCache**: Caches query results for performance.\n- **Error Handling**: Handles GraphQL and network errors gracefully.\n\n**How it works in this project:**\n\n- The app uses Apollo Client to send queries to the GitHub GraphQL API.\n- The `apolloClient.ts` file configures the client, sets up error handling, and injects the GitHub token for authentication.\n- Components like `UserProfile` use the `useQuery` hook to fetch user data and display it.\n\n---\n\n## Detailed Project Walkthrough\n\n### Main Files \u0026 Their Roles\n\n- **src/apolloClient.ts**: Configures Apollo Client with error handling and authentication for GitHub's GraphQL API.\n- **src/queries.ts**: Contains the main GraphQL query to fetch user profile, repositories, followers, following, and gists.\n- **src/types.ts**: TypeScript types for all data structures returned by the API (User, Repository, Language, etc).\n- **src/utils.ts**: Utility functions to process and aggregate repository data for charts (e.g., most used languages, most starred repos).\n- **src/components/form/SearchForm.tsx**: Controlled input form for searching GitHub users, with validation and toast notifications.\n- **src/components/user/UserProfile.tsx**: Fetches user data using Apollo's `useQuery`, displays profile, stats, and charts. Handles loading and error states.\n- **src/components/user/UserCard.tsx**: Displays avatar, name, bio, and a link to the user's GitHub profile.\n- **src/components/user/StatsContainer.tsx \u0026 StatsCard.tsx**: Show user statistics (repos, followers, following, gists) in a grid of cards.\n- **src/components/charts/UsedLanguages.tsx**: Bar chart of the user's most used programming languages (uses Recharts and utility functions).\n- **src/components/charts/PopularRepos.tsx**: Bar chart of the user's most starred repositories.\n- **src/components/charts/ForkedRepos.tsx**: Bar chart of the user's most forked repositories.\n- **src/components/ui/**: shadcn/ui components for consistent, modern UI (button, card, input, skeleton, toast, etc).\n- **src/components/user/Loading.tsx**: Skeleton loading UI for a smooth user experience.\n\n### How Data Flows\n\n1. **User enters a username** in the search form.\n2. **SearchForm** validates input and updates the username state.\n3. **UserProfile** receives the username, triggers a GraphQL query via Apollo Client.\n4. **Apollo Client** sends the query to GitHub's GraphQL API, using the token for authentication.\n5. **Data is fetched and cached**; loading and error states are handled.\n6. **UserProfile** displays the user's info, stats, and charts using the fetched data.\n7. **Charts** use utility functions to aggregate and visualize repository data.\n\n### Error Handling \u0026 Feedback\n\n- All API/network errors are caught and displayed to the user.\n- Invalid input triggers a toast notification.\n- Loading states are shown with skeleton components.\n\n### Customization \u0026 Extending\n\n- You can easily add more fields to the GraphQL query in `queries.ts`.\n- Add more charts or visualizations by creating new components and utility functions.\n- The UI is fully responsive and can be themed via Tailwind/shadcn.\n\n---\n\n## Keywords\n\nReact, Vite, TypeScript, Tailwind CSS, shadcn/ui, Apollo Client, GraphQL, GitHub API, Recharts, Data Visualization, User Search, Responsive UI, Toast, Skeleton, Modern Web App\n\n---\n\n## License\n\nThis project is for educational/demo purposes. See [LICENSE](./LICENSE) if present.\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Fsearch-github-users-explorer--reactvite-graphql","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnobt78%2Fsearch-github-users-explorer--reactvite-graphql","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Fsearch-github-users-explorer--reactvite-graphql/lists"}