https://github.com/alaa-abdallah1/github-searcher
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.
https://github.com/alaa-abdallah1/github-searcher
html-css javascript react-router reactjs redux redux-persist redux-toolkit typescript
Last synced: 3 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/alaa-abdallah1/github-searcher
- Owner: alaa-abdallah1
- Created: 2023-11-12T13:55:23.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-31T12:45:09.000Z (over 2 years ago)
- Last Synced: 2025-02-06T23:19:19.632Z (over 1 year ago)
- Topics: html-css, javascript, react-router, reactjs, redux, redux-persist, redux-toolkit, typescript
- Language: TypeScript
- Homepage:
- Size: 48.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# GitHub Searcher
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.
## Live Demo
[View the live demo ↗.](https://github-searcher-45ss.onrender.com)
## Features
- **Entity Type Selection**: Users can choose to search for either GitHub users or repositories using a dropdown menu.
- **Debounced Search Input**: Search queries are debounced to reduce the number of API calls, improving performance and user experience.
- **Infinite Scrolling**: Users can scroll through a seemingly endless list of search results, loaded dynamically as they scroll.
- **Responsive Design**: The layout adjusts gracefully to different screen sizes, ensuring a seamless experience on both desktops and mobile devices.
- **State Handling**: The application handles various states like initial load, loading, error, and empty results, providing feedback to the user at each stage.
## Screenshots
Here are some screenshots of the main pages:
## High-Level Solution
The 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.
### Key Decisions:
- **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.
- **TypeScript**: Provides type safety, which helps to catch errors during development time and improves code readability and maintainability.
- **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.
- **Infinite Scrolling**: Implemented to create a better user experience by loading additional data as needed rather than all at once.
## Setup and Run
1. Clone the repository:
```
git clone https://github.com/alaa-abdallah1/github-searcher.git
```
2. Navigate to the project directory:
```
cd github-searcher
```
3. Install dependencies using
```
npm install
```
4. Start the development server with
```
npm run dev
```
5. Build the project for production using
```
npm run build
```
6. Preview the production build with
```
npm run preview
```
## Project Structure
- `/src`: Source files for the application.
- `/src/components`: Reusable React components.
- `/src/pages`: Components representing pages within the app.
- `/src/store`: Redux store configuration, reducers, and actions.
- `/src/types`: TypeScript type definitions and interfaces.
- `/src/services`: Services for external API calls to GitHub.
- `/src/styles`: Global and component-specific styles.
## Built With
- [React.js](https://reactjs.org/) - The web framework used
- [TypeScript](https://www.typescriptlang.org/) - For type-safe code
- [Redux](https://redux.js.org/) with [redux-persist](https://github.com/rt2zz/redux-persist) - For state management and persistence
- [React Router](https://reactrouter.com/) - For navigation
- [Vite](https://vitejs.dev/) - Next Generation Frontend Tooling
- Vanilla CSS - For styling without any frameworks
## Future Enhancements
- Implement unit and integration tests to ensure reliability and facilitate easier refactoring.
- Explore server-side rendering (SSR) for improved initial load performance and SEO benefits.
## Contributing
If you'd like to contribute to the project, feel free to submit a pull request or open an issue on the repository.
## Credits
This project was created by [Alaa Abdallah](https://github.com/alaa-abdallah1)