Refactor build e2e dapp guide (#851)

* refactor build e2e dapp guide

* address comments

* handle redirects

* add guide source code

Author: 0xmaayan

apps/nextra/next.config.mjs

@@ -1090,22 +1090,42 @@ export default withBundleAnalyzer(
       },
       {
         source: "/tutorials/build-e2e-dapp/add-wallet-support",
-        destination: "/en/build/guides/build-e2e-dapp/3-add-wallet-support",
+        destination: "/en/build/guides/build-e2e-dapp/2-set-up-react-app",
+        permanent: true,
+      },
+      {
+        source: "/tutorials/build-e2e-dapp/3-add-wallet-support",
+        destination: "/en/build/guides/build-e2e-dapp/2-set-up-react-app",
         permanent: true,
       },
       {
         source: "/tutorials/build-e2e-dapp/fetch-data-from-chain",
-        destination: "/en/build/guides/build-e2e-dapp/4-fetch-data-from-chain",
+        destination: "/en/build/guides/build-e2e-dapp/3-fetch-data-from-chain",
+        permanent: true,
+      },
+      {
+        source: "/tutorials/build-e2e-dapp/4-fetch-data-from-chain",
+        destination: "/en/build/guides/build-e2e-dapp/3-fetch-data-from-chain",
         permanent: true,
       },
       {
         source: "/tutorials/build-e2e-dapp/submit-data-to-chain",
-        destination: "/en/build/guides/build-e2e-dapp/5-submit-data-to-chain",
+        destination: "/en/build/guides/build-e2e-dapp/4-submit-data-to-chain",
+        permanent: true,
+      },
+      {
+        source: "/tutorials/build-e2e-dapp/5-submit-data-to-chain",
+        destination: "/en/build/guides/build-e2e-dapp/4-submit-data-to-chain",
         permanent: true,
       },
       {
         source: "/tutorials/build-e2e-dapp/handle-tasks",
-        destination: "/en/build/guides/build-e2e-dapp/6-handle-tasks",
+        destination: "/en/build/guides/build-e2e-dapp/5-handle-tasks",
+        permanent: true,
+      },
+      {
+        source: "/tutorials/build-e2e-dapp/6-handle-tasks",
+        destination: "/en/build/guides/build-e2e-dapp/5-handle-tasks",
         permanent: true,
       },
       {

apps/nextra/pages/en/build/guides/build-e2e-dapp.mdx

@@ -2,46 +2,49 @@
 
 A common way to learn a new framework or programming language is to build a simple todo list. In this tutorial, we will learn how to build an end-to-end todo list dapp, starting from the smart contract side through the front-end side and finally use of a wallet to interact with the two.
 
-See the completed code in the [my_first_dapp](https://github.com/aptos-labs/aptos-core/tree/main/aptos-move/move-examples/my_first_dapp).
+See the completed code in the [source-code](https://github.com/aptos-labs/developer-docs/tree/main/apps/nextra/pages/en/build/guides/build-e2e-dapp).
 
 ## Chapters
 
 After meeting the [prerequisites](#prerequisites) and [getting set up](#setup) as described below, you will follow this tutorial in this order:
 
 1. [Create a smart contract](build-e2e-dapp/1-create-smart-contract.mdx)
-2. [Set up React app](build-e2e-dapp/2-set-up-react-app.mdx)
-3. [Add Wallet support](build-e2e-dapp/3-add-wallet-support.mdx)
-4. [Fetch Data from Chain](build-e2e-dapp/4-fetch-data-from-chain.mdx)
-5. [Submit data to chain](build-e2e-dapp/5-submit-data-to-chain.mdx)
-6. [Handle Tasks](build-e2e-dapp/6-handle-tasks.mdx)
+2. [Set up a frontend](build-e2e-dapp/2-set-up-the-frontend.mdx)
+3. [Fetch Data from Chain](build-e2e-dapp/3-fetch-data-from-chain.mdx)
+4. [Submit data to chain](build-e2e-dapp/4-submit-data-to-chain.mdx)
+5. [Handle Tasks](build-e2e-dapp/5-handle-tasks.mdx)
 
 ## Prerequisites
 
 You must have:
 
-- [Aptos CLI](../cli.mdx)
-- [Aptos TypeScript SDK](../sdks/ts-sdk.mdx)
-- [Aptos Wallet Adapter](../sdks/wallet-adapter.mdx)
-- [Create React App](https://create-react-app.dev/)
 - [node and npm](https://nodejs.org/en/)
 
 Although we will explain some React decisions, we are not going to deep dive into how React works; so we assume you have some previous experience with React.
 
 ## Setup
 
-In this section, we will create a `my-first-dapp` directory to hold our project files, both client-side code (React based)and the Move code (our smart contract).
+In this section, we will create a `my-first-dapp` directory to hold our project files, both client-side code (React based) and the Move code (our smart contract).
+
+For that, we will be using [create-aptos-dapp](../create-aptos-dapp.mdx) to create the project.
 
 1. Open a terminal and navigate to the desired directory for the project (for example, the `Desktop` directory).
-2. Create a new directory called `my-first-dapp`, for example:
+2. Run `npx create-aptos-dapp@latest` to create the project.
 
 ```bash filename="Terminal"
-mkdir my-first-dapp
+npx create-aptos-dapp@latest
 ```
 
-3. Navigate into that directory:
+3. Follow the instructions to create the project.
+- Choose a name for the project, for example `my-first-dapp`.
+- Choose the `Full-stack project` option.
+- Choose the `Boilerplate Template` option.
+- For simplicity, choose not to use Surf.
+- Choose the `Vite app` framework option.
+- Choose the `Devnet` network option.
 
-```bash filename="Terminal"
-cd my-first-dapp
-```
+The tool will create the project in a directory with the same name as the project and install the required dependencies.
+
+Follow the `Next Steps` instructions.
 
 Now let's [create a smart contract](build-e2e-dapp/1-create-smart-contract.mdx).