{"id":29904435,"url":"https://github.com/web3builder7/inkasocial","last_synced_at":"2026-05-12T19:50:52.089Z","repository":{"id":232640582,"uuid":"679558156","full_name":"web3builder7/Inkasocial","owner":"web3builder7","description":null,"archived":false,"fork":false,"pushed_at":"2023-08-17T06:07:39.000Z","size":484,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-28T05:56:24.739Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/web3builder7.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}},"created_at":"2023-08-17T05:42:45.000Z","updated_at":"2023-08-17T06:09:50.000Z","dependencies_parsed_at":"2024-04-10T20:08:22.542Z","dependency_job_id":"de2a9ec2-3c92-4263-9d9c-6fc40f82ae2f","html_url":"https://github.com/web3builder7/Inkasocial","commit_stats":null,"previous_names":["degenbuilder7/inkasocial","web3builder7/inkasocial"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/web3builder7/Inkasocial","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web3builder7%2FInkasocial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web3builder7%2FInkasocial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web3builder7%2FInkasocial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web3builder7%2FInkasocial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/web3builder7","download_url":"https://codeload.github.com/web3builder7/Inkasocial/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web3builder7%2FInkasocial/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268270633,"owners_count":24223504,"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","status":"online","status_checked_at":"2025-08-01T02:00:08.611Z","response_time":67,"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":[],"created_at":"2025-08-01T17:42:31.944Z","updated_at":"2026-05-12T19:50:52.032Z","avatar_url":"https://github.com/web3builder7.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ink!asocial NFT based Social Platform\n\n![Typescript](https://img.shields.io/badge/Typescript-blue)\n![Next.js](https://img.shields.io/badge/Next.js-gray)\n![Tailwind](https://img.shields.io/badge/Tailwind-pink)\n![ink!](https://img.shields.io/badge/ink!-purple)\n[![Scio Labs](https://img.shields.io/badge/Scio%20Labs-We%20are%20hiring-black)](https://scio.xyz)\n\n\u003cimg src=\"packages/frontend/public/images/cover.jpg\" width=\"800\" height=\"auto\" alt=\"Cover Image\" /\u003e\n\n---\n\nThis is an opinionated boilerplate to get up and running with dApp development in the Substrate ecosystem, especially with ink! smart contracts. It uses custom-built [`useInkathon` React Hooks](https://github.com/scio-labs/use-inkathon) that abstract \u0026 improve the polkadot.js experience.\n\nBy [Dennis Zoma](https://zoma.dev) \u0026 [Scio Labs](https://scio.xyz) 🪄\n\nJoin our [Telegram Group](https://t.me/inkathon) 💬\n\n---\n\n**Table of Contents:**\n\n1. [Disclaimer 🚨](#disclaimer-)\n2. [The Stack](#the-stack)\n3. [Projects using it](#projects-using-it)\n4. [Getting Started](#getting-started)\n   1. [Frontend](#frontend)\n   2. [Contracts](#contracts)\n5. [Development](#development)\n   1. [Frontend Quickstart](#frontend-quickstart)\n   2. [Contracts Quickstart](#contracts-quickstart)\n   3. [VSCode Setup](#vscode-setup)\n6. [Customization](#customization)\n7. [Deployment](#deployment)\n8. [FAQs \\\u0026 Troubleshooting](#faqs--troubleshooting)\n\n---\n\n## Disclaimer 🚨\n\nThis repository is still work-in-progress and there are probably bugs. See the [open issues](https://github.com/scio-labs/inkathon/issues).\n\n## The Stack\n\n\u003cimg src=\"inkathon-stack.png\" width=\"800\" height=\"auto\" alt=\"The Stack of ink!athon\" /\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eThe Stack in Detail\u003c/strong\u003e\u003c/summary\u003e\n\n- Structure: Monorepo\n- Package-Manager: `pnpm`\n- Smart Contract Development: `ink!`, `rust`, `cargo`, `cargo-contract`, `contracts-node`\n- Frontend: `next`, `react`, `typescript`\n  - Contract Interactions: `polkadot-js`, [`useInkathon` React Hooks](https://github.com/scio-labs/use-inkathon)\n  - Styling: `chakra`, `tailwindcss`, `twin.macro`, `emotion`\n- Misc:\n  - Linting \u0026 Formatting: `eslint`, `prettier`, `husky`, `lint-staged`\n- Deployment: Vercel\n\n\u003c/details\u003e\n\n## Projects using it\n\nBelow you find a few projects that use this boilerplate, a variation of it, or have a similar setup that inspired it:\n\n- [AZERO Domains](https://github.com/wottpal/azero.domains) – Domain Name Service for Aleph Zero\n\n## Prerequisites\n\n### Frontend\n\n```bash\n# 1. Setup Node.js (recommended via nvm)\n\n# 2. Install pnpm: https://pnpm.io/installation (recommended via node corepack)\n\n# 3. Install dependencies\npnpm install\n\n# 4. Copy \u0026 fill environments\n# NOTE: Documentation of environment variables can be found in the `.example` files\n# NOTE: For simplicity, start with only the `alephzero-testnet` enabled\ncp packages/frontend/.env.local.example packages/frontend/.env.local\n```\n\n### Contracts\n\n```bash\n# 1. Setup Rust: https://docs.substrate.io/install/\n# NOTE: Skip the \"Compile a Substrate node\" section\n\n# 2. Install ink! cli (cargo contract): https://github.com/paritytech/cargo-contract\n\n# 3. Install local contracts node: https://github.com/paritytech/substrate-contracts-node\n```\n\n## Development\n\n### Frontend Quickstart\n\nThe frontend should work out of the box as remote deployments (address \u0026 abi) for `alephzero-testnet` and `shibuya` are provided within the repo already.\n\n```bash\n# Start Frontend (Next.js)\n# NOTE: Can be executed in both, the root-dir or in `packages/frontend/`\npnpm dev\n```\n\nIf you want to run it against a local deployment on a locally running Substrate node, make sure to set the defined `NEXT_PUBLIC_DEFAULT_CHAIN` in `packages/frontend/.env.local` to `development`. Then follow the startup and deployment process described in the section below.\n\n### Contracts Quickstart\n\nI created convenience scripts for most interactions (i.e. build \u0026 deploy). To run those the active terminal directory needs to be `packages/contracts`. The full command list can be found in `packages/contracts/package.json`.\n\n```bash\n# Build Contracts \u0026 move deployments to `./deployments/{contract}/` folders\n# NOTE: When adding/renaming your contracts, edit them in `build-all.sh`\npnpm build\n\n# Test Contracts\n# NOTE: When adding/renaming your contracts, edit them in `test-all.sh`\npnpm test\n\n# Start local node with persistence (contracts stay deployed after restart)\n# NOTE: When using Brave, shields have to be taken down for the UIs\npnpm node\n\n# Deploy Contracts (on the local node)\n# NOTE: Prerequisites fo all scripts are Node, pnpm, and `pnpm install`\npnpm run deploy\n\n# Deploy Contracts (on any other chain)\n# NOTE: Make sure to create a `.{chain}.env` environment file (gitignored)\n#       with the `ACCOUNT_URI` you want to use.\n#       Also, chain must be a network-id from here: https://github.com/scio-labs/use-inkathon/blob/main/src/chains.ts.\nCHAIN=alephzero-testnet pnpm run deploy\n\n# Run any other script from the `./scripts` directory\npnpm ts-node scripts/{script}.ts\n```\n\nYou can also upload \u0026 instantiate contracts manually using [Contracts UI](https://contracts-ui.substrate.io/) (`pnpm contracts-ui`).\n\n### VSCode Setup\n\n#### Workspace\n\nI strongly recommend developing in VSCode by opening the workspace file located at `.vscode/inkathon.code-workspace` instead of just the directory. This has multiple advantages and assures a more predictable monorepo configuration. The first plugin listed below will help with getting used to it.\n\n#### Plugins\n\nI strongly recommend installing all plugins listed inside `.vscode/extensions.json`. They should be suggested automatically by VSCode.\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003ePlugin Details\u003c/strong\u003e\u003c/summary\u003e\n\n1. [`zoma.vscode-auto-open-workspace`](https://marketplace.visualstudio.com/items?itemName=zoma.vscode-auto-open-workspace) – Automatically suggests opening the according `.code-workspace` file.\n2. [`dbaeumer.vscode-eslint`](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) – Adds ESLint editor support.\n3. [`esbenp.prettier-vscode`](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) – Adds Prettier editor support.\n4. [`bradlc.vscode-tailwindcss`](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) \u0026 [`lightyen.tailwindcss-intellisense-twin`](https://marketplace.visualstudio.com/items?itemName=lightyen.tailwindcss-intellisense-twin) – Adds tailwindcss \u0026 twin.macro editor support.\n5. [`tamasfe.even-better-toml`](https://marketplace.visualstudio.com/items?itemName=tamasfe.even-better-toml) – Adds `.toml` file support.\n6. [`rust-lang.rust-analyzer`](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer) – Adds Rust language support.\n7. Optional: [`gruntfuggly.todo-tree`](https://marketplace.visualstudio.com/items?itemName=gruntfuggly.todo-tree) \u0026 [`wayou.vscode-todo-highlight`](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight) – Lists all `TODO` comments in your workspace.\n8. Optional: [`mikestead.dotenv`](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv) – Adds syntax highlighting for `.env` files.\n\n\u003c/details\u003e\n\n#### Snippets\n\nThe file [`packages/frontend/.vscode/frontend.code-snippets`](https://github.com/scio-labs/inkathon/blob/main/packages/frontend/.vscode/frontend.code-snippets) contains useful snippets for quickly creating components \u0026 pages with Next.js, React, Typescript, and twin.macro. Example: Enter \"Function Component with Props\" in an empty `.tsx` file to get a `FC` component boilerplate with an empty TypeScript interface declaration and already imported 'twin.macro'. Check out the snippet-file itself to get a full overview.\n\n## Customization\n\nThere are multiple places where you need to insert your actual project name \u0026 identifier. I highlighted most of these occurrences with a `/* TODO */` comment in the code. When installing the `todo-tree` plugin [listed above](#vscode-setup) you can easily replace them one by one.\n\nAdditionally, there are the following un-highlighted occurrences:\n\n- The name of the `.vscode/*.code-workspace` file\n- The package names within `package.json`, `packages/frontend/package.json`, and `packages/contracts/package.json`\n- The workspace dependency defined in `packages/frontend/package.json`\n\n## Deployment\n\nSetting up a deployment via Vercel is pretty straightforward as build settings are preconfigured in `vercel.json`. To get started, press the **Deploy** button and enter the default environment variables listed below.\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fscio-labs%2Finkathon%2F\u0026env=NEXT_PUBLIC_DEFAULT_CHAIN\u0026envDescription=Environment%20Variables%20Documentation\u0026envLink=https%3A%2F%2Fgithub.com%2Fscio-labs%2Finkathon%2Fblob%2Fmain%2Fpackages%2Ffrontend%2F.env.local.example\u0026demo-url=https%3A%2F%2Finkathon.xyz)\n\n### Environment Variables\n\nThe only mandatory environment variable you need to add is `NEXT_PUBLIC_DEFAULT_CHAIN`. Just set it to `alephzero-testnet` at least for the first deploy, as there is the sample contract deployed \u0026 the [deplyoments](https://github.com/scio-labs/inkathon/blob/main/packages/frontend/src/deployments/deployments.ts) are pre-configured.\n\nPlease see all pre-defined environment variables below and find more info in [`packages/frontend/.env.local.example`](https://github.com/scio-labs/inkathon/blob/main/packages/frontend/.env.local.example). All available blockchain network identifiers are defined in the [`useInkathon` repository](https://github.com/scio-labs/use-inkathon/blob/main/src/chains.ts).\n\n| Environment Variable           | Value                          |\n| ------------------------------ | ------------------------------ |\n| `NEXT_PUBLIC_PRODUCTION_MODE`  | `true`                         |\n| `NEXT_PUBLIC_URL`              | `https://your-repo.vercel.app` |\n| `NEXT_PUBLIC_DEFAULT_CHAIN`    | `alephzero-testnet`            |\n| `NEXT_PUBLIC_SUPPORTED_CHAINS` | `[\"alephzero-testnet\"]`        |\n\n### Contract Deployment\n\nPlease see the [Contract Quickstart](#contracts-quickstart) section above.\n\n## FAQs \u0026 Troubleshooting\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eWhat is pnpm and do I need it?\u003c/strong\u003e\u003c/summary\u003e\n\n[Pnpm](https://pnpm.io/) works in my experience way faster and more reliably within monorepos than npm or yarn. When using it though, it's strongly recommended everyone on the team uses it. No installs should perform be performed nor any other lock files should be committed.\n\nAlso, esp. the `contracts` package has multiple shorthand npm scripts defined in its `package.json` that are recommended to use.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eHow to approach styling?\u003c/strong\u003e\u003c/summary\u003e\n\nThis boilerplate currently offers styling via the following options.\n\n- [Chakra UI](https://chakra-ui.com/) – Component library for quick prototyping e.g. during hackathons)\n- [twin.macro](https://github.com/ben-rogerson/twin.macro) – [Tailwindcss](https://tailwindcss.com/) within Styled Components via [Emotion](https://emotion.sh/docs/styled) (see [snippets](#snippets))\n- Standard (S)CSS styles via `className` and `*.module.(s)css` files.\n\nImportant, in production it's recommended to use at most one of 1. and 2. to reduce bundle size.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eCan I just use plain TailwindCSS?\u003c/strong\u003e\u003c/summary\u003e\n\nThe packages above can be easily switched out with plain TailwindCSS, a detailed guide that is coming soon. In the meantime, open an issue to get guidance.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eResources to learn more about Substrate, ink!, and polkadot.js\u003c/strong\u003e\u003c/summary\u003e\n\n- [Polkadot Builder's Guide](https://wiki.polkadot.network/docs/build-index)\n- [Substrate Documentation](https://docs.substrate.io/)\n- [Awesome Substrate](https://github.com/substrate-developer-hub/awesome-substrate)\n- [ink! Documentation](https://use.ink/)\n- [OpenBrush Documentation](https://docs.openbrush.io/)\n- [polkadot.js Documentation](https://polkadot.js.org/docs/)\n\n\u003c/details\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweb3builder7%2Finkasocial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweb3builder7%2Finkasocial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweb3builder7%2Finkasocial/lists"}