{"id":21188207,"url":"https://github.com/danny-englander/react-objkt-nfts","last_synced_at":"2026-05-05T09:32:32.604Z","repository":{"id":39697475,"uuid":"507138774","full_name":"danny-englander/react-objkt-nfts","owner":"danny-englander","description":"This project pulls in Objkt.com NFTs using the Objkt.com API via graphQL","archived":false,"fork":false,"pushed_at":"2022-06-27T11:04:43.000Z","size":10165,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-02T19:21:37.287Z","etag":null,"topics":["cryptocurrency","cssmodules-react","graphql","javascript","jsx","nft","nfts","react","reactjs","tezos","tezos-blockchain"],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"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/danny-englander.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}},"created_at":"2022-06-24T20:40:14.000Z","updated_at":"2022-06-25T14:33:08.000Z","dependencies_parsed_at":"2022-07-29T00:48:25.716Z","dependency_job_id":null,"html_url":"https://github.com/danny-englander/react-objkt-nfts","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/danny-englander/react-objkt-nfts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danny-englander%2Freact-objkt-nfts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danny-englander%2Freact-objkt-nfts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danny-englander%2Freact-objkt-nfts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danny-englander%2Freact-objkt-nfts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danny-englander","download_url":"https://codeload.github.com/danny-englander/react-objkt-nfts/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danny-englander%2Freact-objkt-nfts/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32643635,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-04T10:08:07.713Z","status":"online","status_checked_at":"2026-05-05T02:00:06.033Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["cryptocurrency","cssmodules-react","graphql","javascript","jsx","nft","nfts","react","reactjs","tezos","tezos-blockchain"],"created_at":"2024-11-20T18:43:02.350Z","updated_at":"2026-05-05T09:32:32.583Z","avatar_url":"https://github.com/danny-englander.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Object.com NFTs\n\n![Screen Shot of the app](cover.png 'Screen Shot of the app')\n\n## Demo site\n\n[https://objkt-nfts.netlify.app/](https://objkt-nfts.netlify.app/)\n\n## Overview\n\nThis project pulls in my artwork that I have listed on [Objkt.com](https://objkt.com/collection/KT1UjcUAQWjNy4mYqUKwmBgEbu93aoos5qq5), an NFT marketplace built upon the Tezos cryptocurrency blockchain. This React app uses Objkt's API via graphQL to pull in data.\n\n## Getting started\n\nYou can read some general info about [getting started with React](React-README.md).\n\n## Install this project\n\nThis app is now on React 18. You should either be running Node version 16 or Node Version Manager. In the project directory, you can run:\n\n```bash\nnvm use\nnpm install\n```\n\nThereafter, you can run `npm run start` to open the webpage. If you want to change any CSS, you can run `gulp` in a separate terminal window.\n\n## Methodology and API\n\nThis project pulls in my own Objkt.com NFT collections as a sort of brochure site; that is to say, this does not have anything to do with NFT minting which is beyond the current scope of the project.\n\nI wrote a custom query in `ObjktQuery.jsx` that pulls in graphQL data from the Objkt.com API endpoint here: [https://data.objkt.com/explore/](https://data.objkt.com/explore/).\n\nThe key part of the query is:\n\n```sql\nquery objkts {\n  fa(where: {contract:\n  {_in:\n  [\"KT1W7eBKSVZB3xhwXCX8PpMivbK19wgh21QS\",\n   \"KT1UjcUAQWjNy4mYqUKwmBgEbu93aoos5qq5\"]\n   }},\n   order_by: {name: asc}) {...\n```\n\nThis points to the two smart contract ids for my collections. You can copy and paste the entire query into Objkt's graphQL explorer and adjust to your own liking within the endpoint linked to above.\n\nTo view Objkt's API documentation, go to [https://data.objkt.com/docs/](https://data.objkt.com/docs/)\n\n## Image handing\n\nCurrently, images are handled locally for better performance and responsiveness. For example, we can use API data to render the matching collection id image.\n\n```jsx\nimg src={`/assets/nft-dist/${item.fa.contract}-${item.token_id}.jpg\n```\n\nIf you want to pull images directly from the The InterPlanetary File System or IPFS, you could do something like this:\n\n```jsx\nimg src={`https://ipfs.io/ipfs/${item.thumbnail_uri.slice(7)}`}\n```\n\nBe aware that pulling images from IPFS will severely degrade performance, even using Objkt's `thumbnail_uri` image.\n\nIf you want to process images using gulp, place source images in a folder at `src/assets/nft-src` and then run gulp. Appropriately sized JPG and webP images will then be rendered at `public/assets/nft-dist` for use in this app. You should name images according to the contract and token id, for example, `KT1UjcUAQWjNy4mYqUKwmBgEbu93aoos5qq5-7.jpg` where the long string is the smart contract id and the `-7` is the token id of the NFT in your Objkt.com collection.\n\n## CSS / SCSS\n\nThis project implements the latest Sass module methods using `@use` and `@forward` dropping usage of the now legacy `@import` method.\n\nThe React components use [CSS modules](https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/).\n\n## Performance\n\nTo measure performance on this site, ensure you are using the production build with an incognito browser. Here is the Lighthouse score below.\n\n![Lighthouse score](performance.png 'Lighthouse score')\n\n## TODO\n\n- Theme header\n- Theme footer\n- \u003cdel\u003eUse local images\u003c/del\u003e\n- \u003cdel\u003eImplement responsive images\u003c/del\u003e\n- \u003cdel\u003eImplement webP image formats\u003c/del\u003e\n- \u003cdel\u003eDemo site on Netlify\u003c/del\u003e\n- Upgrade to Node v18\n- \u003cdel\u003eLazy load ObjktRender using React Suspense\u003c/del\u003e\n- Implement React Helmet for OG and Twitter card tags.\n\n## Roadmap\n\n- TBD\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanny-englander%2Freact-objkt-nfts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanny-englander%2Freact-objkt-nfts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanny-englander%2Freact-objkt-nfts/lists"}