A responsive, modern GitHub search autocomplete component built with Next.js. Search for GitHub users and repositories with real-time results.
- Language: TypeScript
- Framework: Next.js
- UI: React, Tailwind CSS
- Data Fetching: TanStack React Query
- Icons: Lucide React
- Testing: Jest, React Testing Library
- Package Manager: pnpm
pnpm dev- Start the development server with Turbopackpnpm build- Run tests and build the applicationpnpm start- Start the production serverpnpm lint- Run ESLintpnpm test- Run testspnpm test:watch- Run tests in watch mode
- Real-time search for GitHub users and repositories
- Keyboard navigation support (arrow keys, enter, escape)
- Responsive design
- Accessibility support
- Debounced API calls
- Error handling for API rate limits
-
User experience
- Recent searches history
- Infinite scroll for results
- Highlight matching text in results
- Clear search button
- Displaying most popular results when the query is empty
- "View all results on GitHub" link
- Configurable debounce time
-
Other features
- Filtering by result type (Users/Repositories)
- Support for GitHub search qualifiers
- Expanded repository information
- Grouped results by type
- Keyboard shortcut for focus (Cmd/Ctrl + K)
- Custom result item rendering
-
Performance
- Virtualized lists for better performance with large result sets
- Prefetching popular results
- Progressive loading of repository details
-
Tech
- Sophisticated CI/CD workflow
- Implement Storybook for component documentation
- Implement code coverage artifacts uploading
- Clone the repository
- Install dependencies:
pnpm install - Start the development server:
pnpm dev - Open http://localhost:3000 with your browser