{"id":22886624,"url":"https://github.com/alaa-abdallah1/github-searcher","last_synced_at":"2026-04-11T06:05:08.283Z","repository":{"id":206814695,"uuid":"717757492","full_name":"alaa-abdallah1/github-searcher","owner":"alaa-abdallah1","description":"GitHub Searcher is a single-page application that leverages the GitHub Search API to allow users to search for GitHub users or repositories. The application is built with React.js, TypeScript, Redux with redux-persist, React Router, and vanilla CSS for styling.","archived":false,"fork":false,"pushed_at":"2023-12-31T12:45:09.000Z","size":50,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-06T23:19:19.632Z","etag":null,"topics":["html-css","javascript","react-router","reactjs","redux","redux-persist","redux-toolkit","typescript"],"latest_commit_sha":null,"homepage":"","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/alaa-abdallah1.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}},"created_at":"2023-11-12T13:55:23.000Z","updated_at":"2023-11-12T14:09:25.000Z","dependencies_parsed_at":null,"dependency_job_id":"e276a186-9e1f-4e96-b143-6bb4d371b22b","html_url":"https://github.com/alaa-abdallah1/github-searcher","commit_stats":null,"previous_names":["alaa-abdallah1/github-searcher"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alaa-abdallah1%2Fgithub-searcher","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alaa-abdallah1%2Fgithub-searcher/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alaa-abdallah1%2Fgithub-searcher/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alaa-abdallah1%2Fgithub-searcher/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alaa-abdallah1","download_url":"https://codeload.github.com/alaa-abdallah1/github-searcher/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246523089,"owners_count":20791431,"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":["html-css","javascript","react-router","reactjs","redux","redux-persist","redux-toolkit","typescript"],"created_at":"2024-12-13T20:19:34.861Z","updated_at":"2025-12-30T23:14:13.945Z","avatar_url":"https://github.com/alaa-abdallah1.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GitHub Searcher\n\nGitHub Searcher is a single-page application that leverages the GitHub Search API to allow users to search for GitHub users or repositories. The application is built with React.js, TypeScript, Redux with redux-persist, React Router, and vanilla CSS for styling.\n\n## Live Demo\n[View the live demo ↗.](https://github-searcher-45ss.onrender.com)\n\n## Features\n\n- **Entity Type Selection**: Users can choose to search for either GitHub users or repositories using a dropdown menu.\n- **Debounced Search Input**: Search queries are debounced to reduce the number of API calls, improving performance and user experience.\n- **Infinite Scrolling**: Users can scroll through a seemingly endless list of search results, loaded dynamically as they scroll.\n- **Responsive Design**: The layout adjusts gracefully to different screen sizes, ensuring a seamless experience on both desktops and mobile devices.\n- **State Handling**: The application handles various states like initial load, loading, error, and empty results, providing feedback to the user at each stage.\n\n## Screenshots\nHere are some screenshots of the main pages:\n\n![image](https://github.com/alaa-abdallah1/github-searcher/assets/97352430/a977cdf9-899e-405a-bf72-46d525f59983)\n\n![image](https://github.com/alaa-abdallah1/github-searcher/assets/97352430/c47e01f0-b204-444c-b2f0-711153e7f669)\n\n![image](https://github.com/alaa-abdallah1/github-searcher/assets/97352430/9c9f5329-e991-4cc9-af96-93f0a0c8b557)\n\n![image](https://github.com/alaa-abdallah1/github-searcher/assets/97352430/253383e6-75a6-4f2a-b6d1-9b61e739e276)\n\n\n## High-Level Solution\n\nThe solution involves setting up a React application with TypeScript, managing the application state using Redux, and persisting the search results with redux-persist. React Router manages the navigation, and the UI is built with vanilla CSS for simplicity and full control over the styling.\n\n### Key Decisions:\n\n- **Redux and redux-persist**: Chosen for state management to cache the API response data, reducing the need for unnecessary API calls and providing a faster user experience.\n- **TypeScript**: Provides type safety, which helps to catch errors during development time and improves code readability and maintainability.\n- **Debounce Implementation**: Added to the search input to prevent excessive and unnecessary API calls, which can lead to performance issues and rate limit problems with the GitHub API.\n- **Infinite Scrolling**: Implemented to create a better user experience by loading additional data as needed rather than all at once.\n\n## Setup and Run\n\n1. Clone the repository:\n\n```\ngit clone https://github.com/alaa-abdallah1/github-searcher.git\n```\n\n2. Navigate to the project directory:\n\n```\ncd github-searcher\n```\n\n3. Install dependencies using\n\n```\nnpm install\n```\n\n4. Start the development server with\n\n```\nnpm run dev\n```\n\n5. Build the project for production using\n\n```\nnpm run build\n```\n\n6. Preview the production build with\n\n```\nnpm run preview\n```\n\n## Project Structure\n\n- `/src`: Source files for the application.\n- `/src/components`: Reusable React components.\n- `/src/pages`: Components representing pages within the app.\n- `/src/store`: Redux store configuration, reducers, and actions.\n- `/src/types`: TypeScript type definitions and interfaces.\n- `/src/services`: Services for external API calls to GitHub.\n- `/src/styles`: Global and component-specific styles.\n\n## Built With\n\n- [React.js](https://reactjs.org/) - The web framework used\n- [TypeScript](https://www.typescriptlang.org/) - For type-safe code\n- [Redux](https://redux.js.org/) with [redux-persist](https://github.com/rt2zz/redux-persist) - For state management and persistence\n- [React Router](https://reactrouter.com/) - For navigation\n- [Vite](https://vitejs.dev/) - Next Generation Frontend Tooling\n- Vanilla CSS - For styling without any frameworks\n\n## Future Enhancements\n\n- Implement unit and integration tests to ensure reliability and facilitate easier refactoring.\n- Explore server-side rendering (SSR) for improved initial load performance and SEO benefits.\n\n## Contributing\n\nIf you'd like to contribute to the project, feel free to submit a pull request or open an issue on the repository.\n\n## Credits\n\nThis project was created by [Alaa Abdallah](https://github.com/alaa-abdallah1)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falaa-abdallah1%2Fgithub-searcher","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falaa-abdallah1%2Fgithub-searcher","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falaa-abdallah1%2Fgithub-searcher/lists"}