{"id":20197016,"url":"https://github.com/itsjonq/gallereakit","last_synced_at":"2025-08-14T05:13:00.278Z","repository":{"id":146984541,"uuid":"420836016","full_name":"ItsJonQ/gallereakit","owner":"ItsJonQ","description":"Reakit x Next.js: (Unsplash) Gallery previewer","archived":false,"fork":false,"pushed_at":"2021-10-25T14:58:47.000Z","size":122,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-13T19:41:24.330Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://gallereakit.vercel.app/","language":"TypeScript","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/ItsJonQ.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-10-25T01:03:40.000Z","updated_at":"2021-11-26T16:05:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"2c2be522-2326-4cee-9825-0f987691ce81","html_url":"https://github.com/ItsJonQ/gallereakit","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/ItsJonQ%2Fgallereakit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fgallereakit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fgallereakit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fgallereakit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ItsJonQ","download_url":"https://codeload.github.com/ItsJonQ/gallereakit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241629769,"owners_count":19993710,"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":[],"created_at":"2024-11-14T04:26:58.278Z","updated_at":"2025-03-03T08:15:44.557Z","avatar_url":"https://github.com/ItsJonQ.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Gallereakit\n\n\u003e Reakit x Next.js: (Unsplash) Gallery previewer\n\nThis project uses [Next.js](https://nextjs.org/) with accessible components from [Reakit](https://reakit.io/docs/dialog/) to create a paginated photo gallery previewing experience (images courtesy of [Unsplash](https://unsplash.com/developers)).\n\n## Approach\n\n### File organization\n\nThis project is organized with a [\"domain driven development\" strategy](https://css-tricks.com/domain-driven-design-with-react/). Instead of splitting _all_ components in a `/components`, and _all_ utils in a `/utils`, the domain (or feature) specific code has been moved into a dedicated `/features` directory.\n\nEverything the feature needs to work will be located in that directory. In the feature, if it needs to grab come from somewhere else, it can do that. For the most part, each feature should stay pretty contained in their domain.\n\n### Reakit Dialog (Modal)\n\nThe preview modal in this example is a little different compared to the code snippets provided by [Reakit](https://reakit.io/docs/dialog/). The dialog examples from Reakit suggest a **1:1** relationship between a Modal trigger (e.g. a preview card) and the preview modal itself.\n\nWhat we need is a **one to many** setup. Where we have many preview cards that open and render a preview in the same shared modal. Because of this, our Reakit Dialog setup will be a little different.\n\n### API Layers\n\nLayers (plural). Next.js provides us with a back-end via their `pages/api/` directory. However, it is useful to create some sort of organized API (middleware) that grabs things from the back-end and tidies up the code for our React components.\n\n### Feature hook logic (e.g. usePhotoGallery)\n\nYou don't _have_ to do this. However, I like abstracting as much logic I can into hooks to keep the primary component as simple and tidy as possible. If you do this, the job of the primary component is to stitch everything together.\n\nThis approach is very simpler to the composition experience you'd get from Redux. Where Redux does all the heavy lifting and your component flows the ~~state~~ props to it and potential sub-components accordingly.\n\n### ComponentProp Types\n\n(Only pay attention to this if you're interested in TypeScript)\n\nSome of the components in this project extend the base HTML props. For example:\n\n```jsx\ntype PhotoCardProps = React.ComponentProps\u003c'div'\u003e \u0026 PhotoData;\n```\n\nThis allows for the `PhotoCard` component to be much more flexible as it does a `{...rest}` prop spread underneath.\n\nThis technique isn't required if you know your components will be very specific or narrowly scoped. However, it is useful if you're constructing base-level reusable components.\n\n## Development\n\n- Clone and pull down this repo.\n- Run `yarn` to install dependencies.\n- Run `yarn dev` to start development.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsjonq%2Fgallereakit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitsjonq%2Fgallereakit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsjonq%2Fgallereakit/lists"}