Celo Frontend Development 101 Content
Closed this issue · 2 comments
Emmanuel
- Restructure content see below.
- Show how to test the Composer before we add any UI (maybe with a gif)
- Create Dummy data to test the UI without contract
- Only show code of the blockchain contract integration stuff not for the UI elements only explain the UI components and then link to repo with the code for them
- Adopt style from https://github.com/dacadeorg/celo-development-201/blob/main/content/celo201_03_build_an_nft_minter_with_hardhat_and_react.md
- Look into comments of this file if all was addressed https://hackmd.io/RmjrF3juTXSWDj46HhZPjQ
Moritz
- Final rewrite.
New tasks
-
Add comments to all code that we link to for people to include and also for all other code.
-
All code that people download they should get from the tutorial repository
-
Update the final project repo which will be public with the commented code too.
-
Create new clean contract for it with two products (use data from celo 101).
-
Create a branch inside the final project which is the version with just the dummy data no contract.
-
Rename project / repos everywhere to celo-frontend-101
-
Add how we are using typescript (not fully)
-
Hydration error with dummy data
-
Say that we will mostly comment code
-
Tell people that they can skip and directly go to contract implementation.
-
https://chainlist.org/chain/44787 add alfajores connection to tutorial
-
Is name of repository: "celo-frontend-101"?
-
Let them know that they could also just copy the folder https://minhaskamal.github.io/DownGit/#/home
-
add delete RCheader again
-
Add new contract.
Structure (Outline)
Project Setup
1.1 How to install
1.2 Explaianition of Celo composer structure and current project.
1.3 …
UI Elements (Mockdata) (Dont show the code, just link to the files where it is in and add comments inside the files in the tutorial only write a paragraph of what the componen is doing)
2.1. Product list
2.2. Product (identicon)
2.3. Add products
2.4. Add prodcut modal
3.3. Alerts
Contract + Logic (Hooks) (Show code).
Combinging everything
- Add instructions how to connect wallet maybe to alfayores and get funds from faucet.