2. Agenda
Blockchain & IPFS basics
➔ Why blockchain has fees
➔ How to connect to a blockchain
➔ How to work with keys
➔ Introduction to IPFS and motivation for
using IPFS together with blockchain
➔ Introduction to Subsocial and its SDK
Understanding the basics of Next.js power
➔ Kinds of renders (SSR, SSG, ISR)
➔ Routing
➔ Compressing images
➔ API out of the box
Development
➔ Incorporating user authentication using
key pair generation
➔ Setting up a captcha for spam
protection
➔ Incorporating data storage using IPFS
➔ Optimizing app speed using Next.js
features
Deployment
➔ Deploying the chat on Vercel

3. Blockchain & IPFS basics

4. What is
Blockchain?
A decentralized and distributed
database technology, differs from
centralized databases by storing data
across multiple nodes without a
governing central authority.
Consisting of blocks linked by
cryptographic hashes, blockchains
ensure secure, tamper-proof data
chains with immutable content that
cannot be altered without network
consensus.

6. What is the main difference in interacting with a blockchain
compared to databases?

7. Fees

8. Prevent spam and malicious
transactions, promote efficient
network usage.
Why blockchain has fees?
Incentivize miners/validators:
Encourage participation and
maintain network security.
Users pay fees for blockchain
transactions because blockchains
rely on fees to maintain network
operations.
Network security: Fees raise
the cost of potential attacks,
ensuring a more secure and
stable network.

9. How to connect to
a blockchain?
An RPC node facilitates
communication between nodes
in a blockchain network. It
enables user interaction with the
blockchain via APIs.
RPC node is a program on a
computer that receives and
responds to requests from other
network nodes.
JSON-RPC for public
or own nodes
➔ HTTP
➔ WS
JS libraries:
➔ Ethereum: web3.js, either.js,
wagmi
➔ Polkadot: @polkadot/api
➔ Subsocial: @subsocial/api
➔ GraphQL

10. JSON-RPC Examples

11. JS SDKs Examples

12. Frontend
How to work with
keys?
Public Key:
➔ Used as an identifier.
➔ Can be safely shared.
➔ Validates signature
authenticity.
Private Key:
➔ Stored secretly on the user's
side.
➔ Signs transactions, providing
cryptographic proof of identity.
➔ Losing the key equates to
losing the account.
Backend

13. Introduction to IPFS - InterPlanetary File System
IPFS is a set of peer-to-peer protocols for decentralized file systems, enabling resilient
networks with persistent availability, even without internet backbone connectivity.

14. What is motivation for using IPFS together with blockchain
Cost Reduction
Storing data on a blockchain can be
expensive due to transaction fees and
storage constraints. Integrating IPFS
with blockchain allows for off-chain
storage of large data while maintaining
the data's integrity.
Improved Performance
IPFS enables faster data retrieval
and distribution, as users can
access files from multiple sources
simultaneously.
Scalability
IPFS can efficiently distribute and store
large amounts of data. By integrating
IPFS with blockchain, the limitations of
blockchain storage can be addressed.
Censorship resistant storing
IPFS's decentralized and distributed
nature makes saved data more
resilient to censorship compared to
traditional centralized systems.

15. What is Subsocial?
A Layer 1 blockchain based on Substrate framework designed specifically for social
networking. Subsocial provide social primitives suitable for many social use case
Click-to-deploy
dapps
Interactive
media
DAO
communities
Photo/video
sharing
Career
networking
E-commerce
storefronts

16. Solidity
Rust
JavaScript
❌
❌
✅

17. Understanding the basics of
Next.js
Disclaimer: We are looking at the stable version of Next.js. Currently, there is a
Beta version that offers a different project structure, but this concept remains
the same, only the organization style changes.

18. Kind of renders (CSR, SSR, SSG, ISR)

19. Well-defined structure (based on pages!)
main wrapper for application: _app.js
Main wrapper for the application. You could add a reusable layout
here.
Dynamic routes

20. Next.js pages examples

21. Optimization from the Box
Optimizing Images
Size Optimization:
Automatically serve correctly
sized images for each device,
using modern image formats
like WebP and AVIF.
Visual Stability: Prevent layout
shift automatically when
images are loading.
Faster Page Loads: Images are
only loaded when they enter the
viewport using native browser
lazy loading, with optional
blur-up placeholders.

22. Optimization from the Box
Layouts:
Many of these
components are often
reused between pages.
For example, you might
have the same navigation
bar and footer on every
page or particular pages

23. API Routes
Any file inside the folder pages/api is mapped to /api/* and will be treated as an API endpoint instead
of a page. They are server-side only bundles and won't increase your client-side bundle size.

24. Development
Tech stack: Next.js, SWR, Typescript, TailwindCSS, Subsocial SDK

25. What modules do we need to build a typical chat?

26. What modules do we need to build a typical chat?
➔ Database
➔ Auth service
➔ CRUD backend
➔ Real-time fetching messages (websocket)
➔ Frontend interface

27. What modules do we need to build decentralized chat?
➔ Database (Blockchain + IPFS)
➔ Auth service (Based on blockchain accounts)
➔ CRUD backend (Blockchain modules)
➔ Real-time fetching messages (ws subscription
out of the box)
➔ Frontend interface (Your own part)

28. Connect to Blockchain

29. Fetch messages from blockchain with Subscription

30. Login with accounts

31. Transaction sending

32. Captcha

33. Next.js optimizations

34. Deployment
➔ Deploying the chat on Vercel