{"id":22559698,"url":"https://github.com/taurusilver7/github-search","last_synced_at":"2026-05-10T05:03:25.921Z","repository":{"id":181445540,"uuid":"335837834","full_name":"taurusilver7/github-search","owner":"taurusilver7","description":"A fully functional, mobile responsive github user search application created using react-js","archived":false,"fork":false,"pushed_at":"2023-08-20T05:59:10.000Z","size":2648,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-02T12:35:50.838Z","etag":null,"topics":["react","react-router"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/taurusilver7.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}},"created_at":"2021-02-04T04:29:46.000Z","updated_at":"2021-12-18T08:48:02.000Z","dependencies_parsed_at":"2025-02-02T12:34:51.321Z","dependency_job_id":"a1fdadf5-d85b-469c-86b6-be3f621906cc","html_url":"https://github.com/taurusilver7/github-search","commit_stats":null,"previous_names":["taurusilver7/github-search"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taurusilver7%2Fgithub-search","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taurusilver7%2Fgithub-search/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taurusilver7%2Fgithub-search/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taurusilver7%2Fgithub-search/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/taurusilver7","download_url":"https://codeload.github.com/taurusilver7/github-search/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246026110,"owners_count":20711581,"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":["react","react-router"],"created_at":"2024-12-07T21:08:00.767Z","updated_at":"2026-05-10T05:03:20.900Z","avatar_url":"https://github.com/taurusilver7.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# A Github user Search Application\n\n\u003e using React-js, Auth0 \u0026 material-ui, a mobile responsive application to search for github user details, repos, projects, followers, following....\n\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app)\n\n- The application contains navbar, search, user-info, user \u0026 repos components.\n\n* The styling is done using styled components from [Main docs](https:/styled-components.com/).\n* Icons used are [React Icons - Main Docs](https://react-icons.github.io/react-icons/)\n* The page routing is a little specific. Since a traditional navbar with all link is absent- [react-router-dom - Main Docs](https://reactrouter.com/web/guides/quick-start)\n* \u003cSwitch\u003e renders the first child \u003cRoute\u003e that matches\n* A \u003cRoute path=\"*\"\u003e always matches\n\n- The Github API content:\n\n* [Root Endpoint](https://api.github.com)\n* [Get User](https://api.github.com/users/taurusilver7)\n* [Repos](https://api.github.com/users/taurusilver7/repos?per_page=100)\n* [Followers](https://api.github.com/users/taurusilver7/followers)\n* [Rate Limit](https://api.github.com/rate_limit)\n\nFor unauthenticated requests, the rate limit allows for up to 60 requests per hour. Unauthenticated requests are associated with the originating IP address, and not the user making requests.\n\n- [Fusion Charts - Main Docs](https://www.fusioncharts.com/)\n\n- [Auth0 - Main Docs](https://auth0.com/)\n- Create Application\n- Choose : Single Page Web Applications\n- Choose : React\n- Go to Settings Tab\n- Copy/Paste Domain, ClientID - can be public (or use .env)\n- Add Domain -\n  for now http://localhost:3000 (DON'T COPY PASTE FROM URL BAR)\n\n  - Allowed Callback URLs\n  - Allowed Logout URLs\n  - Allowed Web Origins\n  - SAVE CHANGES!!!!!!!!!!!!!!!\n\n- Connections\n  email,social\n\n### Deployments\n\n[netlify](https://www.netlify.com/)\n\n### redirects with react-router-dom\n\nIn order for routing to work on netlify, redirects was added to the public folder.\n\n- create a \\_redirects file in public \u0026 add the following lines to it.\n- \\_redirects file in public\n\n```\n/*   /index.html\n```\n\n### warning with build process.\n\n\u003e If the buid process fails at any time, rewrite the build code in package.json\n\n```js\n\"build\": \"CI= react-scripts build\",\n```\n\n- The App component has dashboard, login, error pages for respective uses.\n- The dashboard contains navbar, search,user info, user \u0026 repos components to display the details of the github user.\n- To create a datalayer to connect the whole components, a StateProvider called GithubProvider is created using Reacct Context API.\n- Some Mock user, followers, repos are available at gitgub api to avoid over usage of gthub request usage rate of 60 req/hr.\n- The initial states of all user, follwer, repos are set to their respoective moc values.(own values can e used.)\n- this intial state values can be dragged into Info components to display on the component.\n\n- the static compnents are designed \u0026 customized first \u0026 Info component is first styled.\n- An object of various info's are created from the obj githubUser.\n- An array of items with color combos, values(repos,follw,folwng,gists), label(thier names), icons(imported), id's is created and iterated over the created component _Item_ for rendering with a required design format.\n\n- the next component is user component. It has 2 local componetns Card \u0026 Followers.\n  The card component retrieves the data(avatar_url, html_url, name,company,blog,bio,location, twitter_username..) from the githubUser via `useContext`.\n- The card is customized to display all the data obtained from object {githubUser}\n- The followers local component is customized in the same process.\n\n- The next component is the repos component designed using charts.\n- FusionCharts library is preferred over other chart libraries is integration(seamlessly made easy - import lib, setup component, go), specilization, default setup \u0026 the documentation\n- To get the most used language by the user, iterate over the array of repos to grab the value of _language_ property \u0026 count them to display in chart to get the most used language. \u003e\u003e\u003e\u003e\u003e `Array.prototype.reduce(callbck, rtrn value obj)`.\n- calculate the popular languages, stars for lanuages, forks on repos \u0026 ntegrate into the charts.\n\n- The search component contains the search bar, search button \u0026 requests/hr counter.\n- step-1: update the user value in state as an input is being entered.\n- step-2: preventDefault \u0026 update the user if the user exists.\n- step-3 (optinal): empty the form after a search is made.\n- [gihub api end point](https://api.github.com). Make an ajax request to the api end point.\n\n- The authentication is provided by auth0- a III party tool providing authentication \u0026 authorization with extremely strict API regualtion.\n- [Auth0 - Main Docs](https://auth0.com/)\n- Domain name: taurusilver.us.auth0.com\n- Client ID: \"CAGxHudhlEBy060KTujVQktFYKbZfkMS\"\n\n- A single page application is created in the Auth0. Select the technology used as React \u0026 get the domain \u0026 client ID. These two can be stored as env variables for privacy issues. Set the callback URL at localhost:3000. **but change it to the host site after hosting.**(netlify, herou, firebase...)\n- Create google \u0026 social media connections which uses the respective auth for login to the project\n- Auth0.com \u003e\u003e Docs \u003e\u003e (choose libraries in docs) \u003e\u003e Auth0 React SDK \u003e\u003e auth0/auth0-react\n\n- The Auth0 React SDK (auth0-react.js) is a JavaScript library for implementing authentication and authorization in React apps with Auth0. It provides a custom React hook and other Higher Order Components so you can secure React apps using best practices while writing less code.\n\n- The navbar is customized to show login button if no user \u0026 user image, name \u0026 logout button if logged in.\n\n- To set restriction to access to the ones not logged in,\n\n1.  direct the logout button to the login page created.\n2.  The login page is redirected to the auth0 authentication panel.\n\n- This can be done by setting a private route. There are routes for login, dashboard, error.\n- The PrivateRoute wraps the route that is to be protected (i.e Dashboard) \u0026 make it into a private route on conditions of logged in.\n- the private route needs access to props- children b/c \u003e\u003e Dashboard is a child of PrivateRoute \u0026 rest props (...rest).\n- The PrivateRoute returns the children _(Dashboard)_ on condition (the user \u0026\u0026 isAuthen) true else redirect to _Login_ page\n- The login functionality is coded in the Login page with useAuth0() \u003e\u003e loginWithRedirect\n- Even after the login functionaity is added to login page, successfully logging in, the user is redirected to the login page b/c the isLoading parameter is still true. (i.e, isAuthenticated \u0026\u0026 user \u003e\u003e false).\n- Use a wrapper (AuthWrapper) with isLoading, error from useAuth0 \u0026 return a page using a condition. (return loading gif id isLoading is true, error.msg if error is true, children component (\n  \u003cRouter\u003e\n  \u003cPrivateRoute\u003e\n  \u003cDashboard\u003e\u003c/Dashboard\u003e\n  \u003c/PrivateRoute\u003e\n  \u003c/Router\u003e)).\n\n- use continous depoyment with github repo \u003e\u003e\u003e establish a connection b/w netlify \u0026 github repo, so the future changes in repo allows for rebilding the app in netlify.\n\n\n## Learn More\n\nYou can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).\n\nTo learn React, check out the [React documentation](https://reactjs.org/).\n\n### Code Splitting\n\nThis section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)\n\n### Analyzing the Bundle Size\n\nThis section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)\n\n### Making a Progressive Web App\n\nThis section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)\n\n### Advanced Configuration\n\nThis section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)\n\n### Deployment\n\nThis section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)\n\n### `npm run build` fails to minify\n\nThis section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaurusilver7%2Fgithub-search","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftaurusilver7%2Fgithub-search","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaurusilver7%2Fgithub-search/lists"}