A React app to look for popular repositories by keywords and topics!
Explore the docs »
Report Bug
·
Request Feature
Table of Contents
There are many great repositories templates available on GitHub, however, I didn't find one good search platform to search through the repositories by many filters. I created a search app in react through which you can filter and sort on repositories to find any public repository.
A list of commonly used resources that I find helpful are listed in the acknowledgements.
Make sure you have npm installed!
- npm
npm install npm@latest -g
- Clone the repo
git clone https://github.com/Rashi1997/Search-Github.git
- Install NPM packages
npm install
- Runs the app in the development mode
npm start
The component architecture of the app is as follows:
/**
* This component does the Github API call and does
* the filtering/sorting. It also has props and methods
* to aggregate bookmarks.
*
* States:
* error
* isLoaded
* data
* filtered
* searchname
* languagefilter
* topicsfilter
* sort
* bookmark
* countByLanguageTopics
*
* Props:
*
* Child Components:
* Drawer.jsx
*//**
* This component loads the sidebar and the
* form. The bookmarks and repository cards are loaded
* as child components.
*
* States:
* open
*
* Props:
* searchname
* handleChange
* topicsfilter
* settopicInput
* getuniquetopics
* filtered
* languagefilter
* setlanguageInput
* getuniquelanguages
* sort
* radiochange
* reset
* addBookmark
* removeBookmark
* bookmark
* countByLanguageTopics
* error
* isLoaded
*
* Child Components:
* Cards.jsx
* Bookmarks.jsx
*//**
* This component loads the cards for each repository
* in the filtered state or the bookmarks. This component
* is reused both in Bookmarks.jsx and Drawer.jsx components.
* It also checks for error from API call and the isLoaded
* state before displaying cards.
*
* States:
*
* Props:
* bookmark
* filtered
* addBookmark
* removeBookmark
* error
* isLoaded
*
* Child Components:
* RepoCard.jsx
*//**
* This component loads the word cloud visualization
* for bookmarks based on langugae and topics frequency.
* It also loads all the cards for the bookmarks and
* the user can remove the bookmarks from here.
*
* States:
* open
* Props:
* addBookmark
* removeBookmark
* bookmark
* countByLanguageTopics
*
* Child Components:
* Cards.jsx
*//**
* This component loads the code for a single card repository.
*
* States:
*
* Props:
* repo
* addBookmark
* removeBookmark
* bookmark
*
* Child Components:
*
*/The Web App can be used to search for the first 12 repositories on a keyword matching the repository name and description. The repositories listed can be filtered on language and topics and sorted on stars. The filters can also be reset. The app also allows you to bookmark repositories and view the bookmarks together with word cloud visualization.
For more examples, please refer to the Website
See the open issues for a list of proposed features (and known issues).
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.
Rashi Dhar
Project Link: https://github.com/Rashi1997/Search-Github