work on tuto for GitHub deploy

o1-labs · Jul 25, 2023 · 64863bc · 64863bc
1 parent 4aac418
commit 64863bc
Showing 1 changed file with 17 additions and 3 deletions.
diff --git a/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx b/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
@@ -58,14 +58,15 @@ Before you go through the tutorial steps, take a look at a working zkApp UI exam
 
 ## High-Level Overview
 
-In this tutorial, you build an application that:
+In this tutorial, you create a new GitHub repository so you can deploy the UI to GitHub Pages.
+
+You then build an application that:
 
 1. Loads a public key from an extension-based wallet.
 1. Checks if the public key has funds and if not, directs the user to the faucet.
 1. Connects to the example zkApp `Add` smart contract that is already deployed on Berkeley Testnet at a fixed address.
 1. Implements a button that sends a transaction.
 1. Implements a button that requests the latest state of the smart contract.
-1. Deploys the zkApp to GitHub Pages.
 
 Like previous tutorials, you use the provided example files so you can focus on the React implementation itself. 
 
@@ -123,6 +124,15 @@ Your UI is created in the project directory: `/04-zkapp-browser-ui/ui` with two
   $ npm install
   ```
 
+## Create a repository
+
+When you want to interact with your deployed zkApp UI on GitHub pages, you must create a GitHub repository. Go ahead and create your repository now. You can name your GitHub repository anything you want. For this tutorial, use `04-zkapp-browser-ui`.
+
+1. Go to [https://github.com/new](https://github.com/new).
+1. For the **Repository name**, enter `04-zkapp-browser-ui`.
+1. Optionally, add a description and a README.
+
+
 ## Project structure
 
 For all projects, you run `zk` commands from the root of your `04-zkapp-browser-ui` project directory. 
@@ -611,7 +621,11 @@ And that's it! You have reviewed the code for your application.
 
 If you've been using `npm run dev`, you can now interact with the application on `localhost:3000`. The application has all of the functionality that is implemented in this tutorial.
 
-## Deploying the UI to GitHub Pages
+## Create the repository for your project
+
+
+
+## Deploy the UI to GitHub Pages
 
 Before you can deploy your project to GitHub Pages, you must push it to a new GitHub repository.