[LISKDOCS-19] Introduction to Web3 app development

docs/building-on-lisk/web3-app-development.mdx

@@ -0,0 +1,184 @@
+---
+title: Web3 App Development
+slug: /web3-app-development
+description: 'An introduction into Web3 application development on Lisk.'
+keywords:
+  [
+    'Lisk',
+    'Web3 apps',
+    'Web3 app',
+    'Web3 application',
+    'Web3 app development',
+    'Web3 mobile app',
+    'Web3 PWA',
+    'dApp development',
+    'Mobile dApp development',
+    'Mobile app development',
+    'Lisk apps',
+    'Lisk dApps',
+  ]
+---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Web3 App Development
+
+On this page, you will learn about Web3 applications, and how to get started with Web3 app development.
+
+## What are Web3 applications?
+
+### Evolution of the Web
+Since the internet was born, there has been constant innovation in how people use the internet to communicate and interact with each other.
+To describe important steps in this innovation, websites and apps are generally categorized into different Web "versions":
+
+<Tabs queryString="web-version">
+  <TabItem value="web1" label="Web 1.0">
+    Web 1.0 is the first "version" of the Web, i.e. the first generation of websites that occured when the internet became available to the broader public around 1990.
+    Web 1.0 is often referred to as the "static" or "read-only" web, consisting mainly of simple static HTML pages with limited interactivity.
+
+    However, some Web 2.0 capabilities were present in the days of Web 1.0, but were implemented differently.
+    For example, a Web 1.0 site may have had a guestbook page for visitor comments, instead of a comment section at the end of each page (typical of Web 2.0). 
+
+  </TabItem>
+  <TabItem value="web2" label="Web 2.0">
+    In the late 1990s the transition to [Web 2.0](https://en.wikipedia.org/wiki/Web_2.0) started, when some Web 1.0 sites introduced dynamic HTML with social features, allowing users to interact with web pages in a much more fluent way. 
+
+    :::info
+    The term "Web 2.0" was coined by Darcy DiNucci, an information architecture consultant, in her January 1999 article [Fragmented Future](http://darcyd.com/fragmented_future.pdf).
+    :::
+
+    Web 2.0 is the era where social media, [web applications](https://en.wikipedia.org/wiki/Web_application), and mobile apps come to the rise.
+    Because of the new social features and improved user experience that Web 2.0 apps offered, the number of users interacting with the web increased significantly, leading to the creation of many new web services and applications.
+    Some of the most popular examples for Web 2.0 applications are Facebook, Twitter/X, Amazon and YouTube.
+
+    Many of these applications and services became important pillars of the internet and peoples life, and even society as a whole.
+    However, the more relevant these applications became, the more obvious and relevant became their limitations, as users had to trust the companies behind these applications with their data and privacy.
+
+    <h5>Web2 limitations</h5>
+
+    Though Web 2.0 revolutionized how people use the web in a positive way, it's characteristics lead to certain disadvantages, for users who interact with Web2 applications:
+
+    - Censorship
+    - Lack of transparency
+    - Limited privacy  
+    - Limited interoperability
+  </TabItem>
+  <TabItem value="web3" label="Web3" default>
+    Web3 (also known as Web 3.0) is the next step in the evolution of the Web, aiming to address the [limitations of Web 2.0](web3-app-development.mdx?web-version=web2#web2-limitations).
+    Web3 is the idea of a decentralized internet, where users are in control over their data.
+
+    :::info
+    The term "Web3" was coined by Polkadot founder and Ethereum co-founder Gavin Wood in 2014, referring to a [decentralized online ecosystem based on the blockchain](https://www.wired.com/story/web3-gavin-wood-interview/).
+    :::
+
+    2015, when Ethereum launched as the world's first programmable blockchain, marked the beginning of the Web3 era.
+    Web3 applications are decentralized applications (also known as "dApps") that run on a blockchain, allowing users to interact with each other and the blockchain in a trustless way.
+    This puts users in control of their data and privacy, removing the need to trust a central authority.
+
+    Web3 apps are built on top of blockchain technology, which allows users greater ownership and control over their data.
+    This provides new features and services that are not possible in the Web2 world.
+    The [Brave](https://brave.com/) browser for example allows users to earn cryptocurrency for viewing ads.
+    Often, Web3 apps combine other cutting edge technologies like AI to provide unique new user experiences.
+
+    New types of Web3 apps include:
+
+    - DeFi (Decentralized Finance), for example:
+      - DEXs (Decentralized Exchanges)
+      - GameFi (Gaming Finance)
+      - Staking and yield farming platforms
+      - Decentralized crowdfunding and -investing platforms
+      - Decentralized lending and borrowing
+      - Prediction markets
+      - Asset / RWA tokenization platforms
+    - DAOs (Decentralized Autonomous Organizations)
+    - [DeSoc](https://onchain.org/magazine/decentralized-social-media-business-opportunities-are-they-real/) (Decentralized Social Media)
+    - [DeSci](https://onchain.org/magazine/not-only-the-best-desci-crypto-projects-an-overview/) (Decentralized Science)
+    - [DePIN](https://onchain.org/magazine/how-depin-web3-projects-are-connecting-the-world-to-crypto/) (Decentralized Physical Infrastructure Networks)
+
+    Web3 is a promise to bring back the original vision of the internet, where users are in control of their data and privacy, and where the internet is a place for free speech and innovation.
+    However, how blockchain technology is implemented and used in apps can vary greatly, and not all Web3 apps are equally decentralized and trustless.
+  </TabItem>
+</Tabs>
+
+### Web2 vs Web3 app development
+#### Languages
+Regarding languages used to build Web2 and Web3 apps, there aren't many differences regarding the frontend.
+All languages that are typically used for Web2 app development can also be used for Web3 app development.
+In the end, Web3 apps can even look and feel exactly like Web2 apps for users, because their frontend is built with the same technologies.
+
+However, the backend of Web3 apps is different, as it interacts with the blockchain through smart contracts.
+Smart contracts are written in [Solidity](https://soliditylang.org/), therefore Web3 developers need to know Solidity to build the smart contracts they require for their app.
+Luckily, for many use cases, there are already audited smart contracts available(see [OpenZeppelin](https://www.openzeppelin.com/solidity-contracts) or [thirdweb](https://thirdweb.com/explore)) that can be used, so developers don't need to write their smart contracts from scratch.
+
+#### Tech stack
+As mentioned above, the Web2 and Web3 app frontend development is very similar.
+Theoretically, you could build a Web3 app with nearly the same tech stack as a Web2 app, like Next.js, Vite, etc.
+The only thing you need to add is a way for your application to interact with the blockchain.
+For this, there are serveral libraries and frameworks available, like [viem](https://viem.sh/), [web3.js](https://web3js.readthedocs.io) or [ethers.js](https://docs.ethers.io).
+
+To support developers, many blockcain platforms offer their own SDKs and tools to interact with their blockchain, which can make development easier and more efficient.
+There are also SDKs for Web3 app development that provide a complete tech stack, like [thirdweb](https://thirdweb.com/) or [Alchemy](https://www.alchemy.com/), which take away most of the complexity of blockchain development and provide a smooth developer experience.
+thirdweb supports [Lisk](https://thirdweb.com/lisk) and many other EVM-compatible blockchains.
+
+#### Data storage
+In Web2 apps, data is typically stored in a centralized database.
+In Web3 apps, some data is stored on the blockchain, which is a decentralized database.
+How the data is stored is defined inside of smart cotracts.
+However, not all data can be stored on the blockchain, as it is quite expensive and slow to store large amounts of data on the blockchain.
+Therefore, Web3 apps often use a combination of onchain storage and offchain storage.
+
+#### Data access
+In Web2 apps, data from the database is accessed through APIs.
+In Web3 apps, blockchain data is accessed through smart contracts.
+They usually expose public functions that can be called by the app frontend to read and/or write data from/to the blockchain, similar to a classical API.
+
+## Getting started with Web3 app development
+
+To get started with the actual development of a Web3 app, you need to be clear about the the right app **platform(s)** to build your Web3 app on.
+The following sections will give you an overview of the different platforms you can choose from to build your Web3 app on, including further resources and guides to get you started with the app development.
+
+### Web3 Mobile Apps
+Mobile applications are generally a great way to reach a large audience, as most people have a smartphone and use it to access the internet.
+Mobile apps can use the integrated features of handheld devices and are typically faster and more user-friendly than websites.
+This can provide a more immersive experience for users.
+Last but not least, mobile apps allow users to access your app on the go, which can be a big advantage for many use cases.
+
+#### Development resources
+- [Build Web3 Mobile Apps with React Native on Lisk with thirdweb](https://blog.thirdweb.com/web3-mobile-apps/build-web3-mobile-apps-with-reactive-native-on-lisk/)
+- [Building a mobile dApp with Flutter](https://medium.com/dash-community/building-a-mobile-dapp-with-flutter-be945c80315a)
+
+### Web3 Web Apps
+The main advantage of web applications is that they are platform-independent and can be accessed from any device with a web browser.
+Additionally, they don't need to be installed by the user, and can be used directly in the browser.
+
+#### Development resources
+- [How to Build an NFT Minting dApp](https://blog.thirdweb.com/guides/build-nft-minting-dapp-with-thirdweb-guide/) *by thirdweb*
+
+### Web3 PWAs
+A Progressive Web App (= PWA) allows users to install your web app to their device.
+They appear as native apps on your desktop or mobile device and offer features like offline support and push notifications.
+This way, PWA allow to develop an application that can be used via browser[^1], mobile, or desktop application alike.
+
+Therefore, PWAs are a great choice to reach users on different platforms simultaneously.
+
+Additionally, PWAs allow a user to directly install the app through your web app, without need to visit an app store.
+This allows you to serve the app directly to the users, without bothering about high restrictions of app stores on what is allowed for blockchain applications.
+In-app purchase fees can also be avoided because users no longer need to go through the app store.
+
+The major app stores support the publication of PWAs to varying to degrees.
+Currently, Google Play, Microsoft Store, and Samsung Galaxy Store support PWAs, but Apple App Store does not.
+
+[^1]: Only supported in PWA-compatible browsers (most Chromium based browsers should work).
+
+#### Development resources
+- [How to Create a Web3 PWA](https://blog.thirdweb.com/guides/how-to-create-a-web3-pwa/) *by thirdweb*
+- [Video tutorial: Build a web3 PWA](https://www.youtube.com/watch?v=VU8i-dn2_GE) *by thirdweb*
+
+### Web3 Desktop apps
+Desktop apps are native applications that are installed on a user's computer.
+Similar to mobile apps, they are platform dependent.
+Additionally, desktop apps make it difficult for users to access them on the go, as you need a computer to use them.
+On the other side, desktop apps shine with their performance and the ability to use the full power of the computer they are running on, and they are typically build for larger screens allowing more complex user interfaces.
+So if you application requires a lot of computing power, or a very complex UI that might not be fitting for a mobile screen, a desktop app can be the right choice.
+
+#### Development resources

sidebars.js

@@ -30,7 +30,6 @@ const sidebars = {
         'about-lisk/fees'
       ],
     },
-
     {
       type: 'category',
       label: 'Building on Lisk',
@@ -108,6 +107,7 @@ const sidebars = {
             keywords: ['guides','smart contracts','token development','token standards','erc-20','erc-721','erc-1155'],
           },
         },
+        'building-on-lisk/web3-app-development',
         {
           type: 'category',
           label: 'Using oracle data',