Slides used during the "Scaffold your dApp with ink!athon" during the Polkadot ink! Hackathon!

1. Scaffold your dApp
with ink!athon
@dennis_zoma
Co-Founder of Scio Labs & AZERO.ID

3. d(ecentralized)Apps
=
Decentralized
Frontend + Backend
Web3 Connection, IPFS,
Light Clients, …
Smart Contracts, Pallets,
Indexer Network, …

4. Why Frontend
matters?
→ 10x better UX needed to onboard the masses
→ Unpopular Opinion: Good design & frontend
work takes more time than contract work
→ Hackathonistas: Good UI showcasing your
project convinces judges 󰥟 ✨ 💸

5. ink! dApp Tooling
Frontend level
→ polkadot-js/api
→ useInk
→ useInkathon
Type Generation
→ @727/typechain-polkadot ⚠
→ @squid-sdk/ink-typegen
Boilerplates
→ ink!athon
Contract level
→ ink!, cargo-contract
→ OpenBrush (PSP22, PSP34) ⚠
Node & Deployments
→ substrate-contracts-node
→ swanky
Deployment & Interaction
→ cargo-contract
→ DRink!
→ contracts-ui
→ polkadot-js/apps
Checkout the Polkadot Wiki
https://wiki.polkadot.network/docs/build-open-source#ink-smart-contracts

6. ink!athon & useInkathon
…or useInk

7. Monorepo Structure
with pnpm, vscode-workspaces, and pre-configured vercel deployment
/packages/contracts /packages/frontend
The Stack
of ink!athon

8. Monorepo Structure
with pnpm, vscode-workspaces, and pre-configured vercel deployment
/packages/contracts
Rust & Cargo & ink!
substrate-contracts-node
contracts-ui & polkadot.js/apps
/packages/frontend

9. Monorepo Structure
with pnpm, vscode-workspaces, and pre-configured vercel deployment
/packages/contracts
Rust & Cargo & ink!
substrate-contracts-node
Custom Shorthand Scripts ⚡
contracts-ui & polkadot.js/apps
/packages/frontend

10. Monorepo Structure
with pnpm, vscode-workspaces, and pre-configured vercel deployment
/packages/contracts /packages/frontend
Rust & Cargo & ink! Next.js (TypeScript)
substrate-contracts-node
Custom Shorthand Scripts ⚡
contracts-ui & polkadot.js/apps

11. Monorepo Structure
with pnpm, vscode-workspaces, and pre-configured vercel deployment
/packages/contracts /packages/frontend
Rust & Cargo & ink! Next.js (TypeScript)
substrate-contracts-node polkadot.js 🤖
Custom Shorthand Scripts ⚡
contracts-ui & polkadot.js/apps
Basic Styling &
Components 💅

12. /packages/contracts /packages/frontend
Rust & Cargo & ink! Next.js (TypeScript)
substrate-contracts-node polkadot.js 🤖
Basic Styling &
Components 💅
Custom Shorthand Scripts ⚡
contracts-ui & polkadot.js/apps
useInkathon 💪
Typesafe React Hooks abstracting
functionality by polkadot.js
Monorepo Structure
with pnpm, vscode-workspaces, and pre-configured vercel deployment

13. What the …
useInkathon?
⚡ Saves 100+ lines of code
🔬 Imports contracts only once
🪄 Shorthands for gas estimation, queries,
tx’s, deploys, balance fetches, etc.
💎 Constants for chains & wallets
📈 Battle-tested in production by AZERO.ID
& dozens of hackathon projects
Alternative: useInk

14. It’s …
Demo Time

15. What’s next?
→ Tons of improvements are planned 🏗
→ Scaffolding CLI ⚡
→ More docs & education 🎓
Try it on inkathon.xyz

16. Hackathon Bounty 🤑 💸
1,000 $
Best project using
ink!athon or AZERO.ID
We’re looking for the best project that is either using ink!athon to scaffold
their hackathon dApp, or integrating AZERO.ID in the most innovative way.

17. Give me links!
● Live Demo: https://inkathon.xyz/
● Docs: https://github.com/scio-labs/inkathon
● Official ink! Docs: https://use.ink/frontend/overview
● Polkadot.{js} Docs: https://polkadot.js.org/docs/
● Polkadot Wiki: https://wiki.polkadot.network/docs/build-open-source
● Aleph Zero Docs: https://docs.alephzero.org/aleph-zero/build/
● Workshop Recording: https://youtube.com/watch?v=SoNLZfsd0mQ

18. Need some help?
🗣
Ask on the Encode Discord
🫂
Join ink!athon Telegram
✍
File an issue on GitHub
We try to be as responsive as possible
during the hackathon weeks!

19. Scaffold your dApp
with ink!athon
@dennis_zoma
Co-Founder of Scio Labs & AZERO.ID