{"id":16513661,"url":"https://github.com/robertkirsz/github-repositories-explorer","last_synced_at":"2026-04-09T23:02:28.874Z","repository":{"id":73762376,"uuid":"298000002","full_name":"robertkirsz/github-repositories-explorer","owner":"robertkirsz","description":"GitHub Repositories Explorer","archived":false,"fork":false,"pushed_at":"2020-09-29T20:30:55.000Z","size":746,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-12T23:11:15.313Z","etag":null,"topics":["github","react","redux"],"latest_commit_sha":null,"homepage":"https://repos-explorer.netlify.app","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/robertkirsz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2020-09-23T14:40:29.000Z","updated_at":"2021-09-08T15:13:49.000Z","dependencies_parsed_at":null,"dependency_job_id":"3e29870f-6219-4447-acd2-181e272e0506","html_url":"https://github.com/robertkirsz/github-repositories-explorer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robertkirsz%2Fgithub-repositories-explorer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robertkirsz%2Fgithub-repositories-explorer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robertkirsz%2Fgithub-repositories-explorer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robertkirsz%2Fgithub-repositories-explorer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/robertkirsz","download_url":"https://codeload.github.com/robertkirsz/github-repositories-explorer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241494184,"owners_count":19971871,"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":["github","react","redux"],"created_at":"2024-10-11T16:09:51.113Z","updated_at":"2026-04-09T23:02:23.854Z","avatar_url":"https://github.com/robertkirsz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GitHub Repositories Explorer\n\nAn app that lets you search for GitHub users and list their repos. Made as a part of a recruitment process.\n\nCheck it out here: https://repos-explorer.netlify.app\n\n## Installation\n```bash\nnpm install\n```\n\n## Development\n```bash\nnpm start\n```\nThe app will be available at http://localhost:1987/ with Hot Module Replacement ([HMR](https://webpack.js.org/guides/hot-module-replacement/)) enabled.\n\n## Building\n```bash\nnpm run build\nnpm run serve\n```\nThe production-ready app will be built into the `dist` folder, served from there, and made available at http://localhost:8080/.\n\n## Deployment\nDeployment is done automatically with each commit to master. The app is hosted on [Netlify](https://www.netlify.com/).\n\n## Linting\n```bash\nnpm run lint\nnpm run prettier\n```\n\n## Testing\n```bash\nnpm test\n```\n\nYou can also run `npm run test:coverage` to generate coverage report (it will be available in `coverage` folder).\n\nI'm using [Testing Library](https://testing-library.com/) with Jest and [MSW](https://mswjs.io/) form mocking API requests. I'm focusing on testing the flow from the user perspective and not the implementation details (although I do some `store.getState()` checks here and there). I wrote integration tests for the main flow and error handling and unit tests for utility functions.\n\n## Build system\nI decided to write a custom webpack + Babel setup, rather than using a ready-made solution like [Create React App](https://create-react-app.dev/) (which I like a lot) mostly because I didn't have an opportunity to do that recently and I like writing build setups from scratch.\n\nIt's a simple JSX-parsing, async/await-supporting setup with `src` being treated as a root-level folder to enable absolute paths for importing files.\n\n## Redux\nI didn't check Redux docs in ages and I was surprised in now something called [Redux Toolkit](https://redux-toolkit.js.org/). It's an official module that \"is intended to be the standard way to write Redux logic\". It's quite nice, I like the `createSlice()` function that bundles actions and reducers together and the `createAsyncThunk()` that makes it very easy to handle request statuses (\"pending\", \"fulfilled\", \"rejected\"). It also uses [Immer](https://immerjs.github.io/immer/) behind the scenes which let us use mutating syntax but makes sure the data is not being mutated.\n\nI think I'll be using this toolkit in the future, it reduces the infamous Redux boilerplate significantly. I'm perfectly fine (and at that point much more fluent) working with Redux the old way though 👍\n\n## UX changes\nI decided to make some changes in the UX 😬 I normally NEVER DO THAT! I always stick to the designs and try to implement them as close to the intentions of the authors as possible. I started as a web designer myself, so I have respect for the work designers do. But here I decided it will be more fun to replace the \"Search\" button with an input that makes requests automatically as you type. I also added a \"Show more\" button that appends more search results to the existing list.\n\n## Custom modules\nI'm using [styled-kit](https://www.npmjs.com/package/styled-kit) - it's a tiny styled-components-based npm package that exposes a `Div` component I wrote years ago. It's a generic wrapper element useful for when we need a container for some other components. It's flex-based and makes it easy to control the layout and spacing of its children.\n\nThe module has a simple [demo page](https://robertkirsz.github.io/styled-kit/) (work in progress). There's also something called `HeightTransition` there but it's not yet documented.\n\n## Code format\nThese ESLint and Prettier configs that I'm using are rules that I use in my personal projects, but I'm fine using any style guides.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobertkirsz%2Fgithub-repositories-explorer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobertkirsz%2Fgithub-repositories-explorer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobertkirsz%2Fgithub-repositories-explorer/lists"}