Encode Club

1. dApp development
on Tezos
putting it all together

2. Overview
At the presentations leading up to today, we have gone through the components of
building a distributed application.
In this session, we are going to recap the key takeaways, and review:
- The architecture of a distributed application
- User experience design for distributed applications
Also, we’ll say a few words about the upcoming Encode / Tezos hackathon.

3. dApp architecture

4. What is a dApp
Distributed Applications, or ‘dApps’ are
applications that rely on decentralized database(s) (usually including a blockchain).
Classification of dApps by decentralization:
- Fully decentralized (only a browser and a blockchain is needed)
- Fully decentralizable (single source of truth, all data accessible)
- Semi-centralized (some proprietary components / data)
- Centralized with decentralized components
(not really a ‘dApp’, but a valid application of decentralized technology)

5. dApp architecture
Centralized
DB
Blockchain
node
Indexer
Indexer DB
Application
backend
Application
frontend
Decentralized
storage (IPFS)

6. Smart contract layer
Code that runs on the blockchain
and implements business logic restrictions
“Soda vending machine” metaphor - Nick Szabo
What goes here?
- Only trust-critical components - payments, ownership
- Execution time and storage are limited
- and expensive
- Tezos: the smart contract layer is intentionally constrained
- most Tezos dApps are of the ‘decentralizable’ sort

7. Decentralized off-chain storage
Storing data on the blockchain is expensive!
Solution: Off-chain decentralized storage (IPFS)
- Decentralized technology (high redundancy, censorship resistant)
- Free & can store a lot of data
- Demand-driven (data that is requested is replicated)
- Volatile (data may be ejected from it)
- Content addressable - content is accessible by content hash
- Pinning: instructing a node to never eject certain data
- Accessible as a paid service

8. Centralized components
- De-facto centralized components
- These could be deployed by the user
- Open source
- No proprietary or restricted data is needed for functionality
- Blockchain node(!)
- IPFS node and pinning service
- Indexer - eg. https://github.com/tzConnectBerlin/que-pasa
- Open source backend
- Web server
- ‘Fully’ centralized systems
- eg. Proprietary MMO game with NFT / blockchain component

9. Centralized blockchain identity
Many dApps are impersonal - they are public goods to be used by anyone.
Some blockchain-based systems (not really ‘dApps’) involve a legal entity,
with its own blockchain identity (wallet)
‘‘I’d like to mint NFTs for everyone who finds this geocache’
- ‘Someone’ needs to mint the NFTs
- You need a centralized, automated system with a wallet
There are ‘task engines’ that can automatically originate operations on the chain.
eg. https://github.com/tzConnectBerlin/peppermint

10. dApp frontend
Frontend roles
- Presentation layer / UX optimization
- Identity management: blockchain wallet
- Non-trust-critical business logic
Key technologies and tools in Tezos
- Beacon for wallet connectivity
- Taquito for blockchain operations

11. Designing with a security mindset
- What operations need to be trusted?
- What data is trust-critical?
- What components can be exploited (eg. to cheat in a game)?
- Who could benefit from exploiting a component?
- How could they benefit?
- Who is in a position to exploit a component?
- How does their position set them up for this?
- What components does a user have to trust?
- In what way could they be harmed if these components were malicious?
- How could they mitigate these risks?
- What can you, as designer, do to mitigate these risks?

12. Design

13. Summary
1. Identify problems to solve
2. Identify user types
3. Brainstorm features to support user goals
4. Diagram user flows
5. Design UI
6. Write clear, concise, and useful copy
7. Validate ideas with user testing

14. Identify problems to solve
Research question
Determine a meaningful use case for NFTs in a video game tournament
Interview questions
Tell me about the last time you…
…participated in a video game tournament
…observed a video game tournament
Look for: sources of value, signs of accomplishment

15. Identify user types
Interview questions
What is your experience with blockchain? NFTs?
What is experience with this video game? This tournament?
Look for: knowledge, behavior patterns, values + attitudes

16. User research results
NFT use case
Give an NFT to player who dealt the final blow to a tournament victim
User types
Blockchain experience: mostly minimal interaction, heard about NFTs through the hype
Video game experience: mostly very invested in game and surrounding world
Very interested in new technologies, under-the-hood details

17. Brainstorm features to support user goals
Connect gaming account to dApp + create wallet
Receive NFT for each final blow
Send NFT to another address
Top up tez balance
Browse NFT gallery
Learn how it works

18. Diagram user flows
Considerations based on user type
Level of handholding + guidance
Abstraction from technical details
Nest off-app interactions in explanations
Meta education flow

19. Diagram user flows

20. Design UI
Sketches > wireframes > high fidelity
Use gestalt principles for clear information architecture
Use UI patterns to minimize cognitive load
Keep accessibility in mind

21. Design UI

22. Design UI

23. Write clear, concise, and useful copy
Pare it down to the essentials
Minimize complex language
Use consistent wording and language patterns
Use tone as a tool to signal weight of action

24. Write clear, concise, and useful copy

25. Validate ideas with user testing
Sample tasks
You open the landing page — describe what you see
Collect an NFT you earned from the tournament
Sell an NFT you earned from the tournament
Learn about the technical details on how this works

26. Hackathon

27. Hackathon
“Creating positive social impact via Web3: imagine ways in which the
Tezos stack can be used to help people around the world.”
Start Date: 13th April 2022
Register by: 13th April 2022, late registrations open until 20th April
Submission Date: Sunday, 15th May 2022

29. Tracks

30. Learn to Earn
Earn tez while gaining hands-on development experience in the Tezos ecosystem.
● Set up an NFT contract with automated minting of tokens with Peppermint
● Write and deploy a simple smart contract using LIGO
🤑 $50 in tez for the first 50 submissions in both categories
Total prize: $5000 in tez

31. Small but great
Build a simple dApp on the Tezos technology stack with a clear goal.
On this track, no project is too small to compete. Web3 has again opened up the world for individual
developers to create meaningful change with nothing but a computer and a dream. We invite you to take
part in this wave and build something cool.
🤑 Prizes
1st: $5000 in tez
2nd: $2500 in tez
3rd: $1000 in tez
Honorable ideas: 3*$500 in tez
Total prize: $10000 in tez

32. Disrupt all the things
Lay the foundations of a major Tezos-based project, and show us what you are truly capable of.
This track is intended for teams with a disruptive vision, to showcase an PoC / MVP of their dream Web3
product.
🤑 Prizes
1st: $20000 in tez
2nd: $10000 in tez
3rd: $5000 in tez
Total: $25000 in tez