Skip to content

Creativelf/Web3-Frontend-Bootcamp

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Web3 Frontend Bootcamp

一个具备前端+智能合约能力的开发者就可以完成一个完整的应用开发,因此前端开发者已经成为Web3的主流力量 ,也是所有开发者群体中最容易进入Web3开发的。

Introduction

本次「Web3前端训练营」由 W3F 和 OpenBuild 共同发起。Artela、Morph 共同主办,并获得 theGraph、Vara 和 Chainlink 生态支持。通过系统的课程和共同学习机制,帮助更多前端开发者丝滑进入Web3。与此同时,本训练营以实战为导向,一步步熟悉和掌握 Web3 前端代码开发。

Github Discussion 使用方法

Categories Description
🍕Materials 课外资料/课堂笔记(欢迎贡献)
🙏 Q&A 提问 / 知识答疑
💰Bounty Bounty 任务:课堂作业/课堂笔记/社区贡献etc
💡I've got an idea! 关于一些 Amazing fancy ideas, 用来
1. Web3前端共学
2. 组队开发
3. 参加黑客松
4. 招聘内推
5. 自娱自乐🎣

⭐ 核心亮点 ⭐

🧙‍♂️ OpenBuild技术导师 + 助教团队,小白友好型氛围

👩‍🏫 录播课 + 研讨会 + 免费知识库,学习灵活高效

🙌 免费学习 + 官方背书,资源丰富

✅ 认证证书,边学边提升竞争力

⭐ 学习大纲 ⭐

一、React框架介绍和优势(官网 | 哔站 | 油管

二、Web3技术基础入门(官网 | 哔站 | 油管

三、智能合约快速入门(官网 | 哔站 | 油管

四、Web3前端框架和合约关系(官网 | 哔站 | 油管

四点五、Web3前端训练营AMA答疑第一期(官网 | 哔站 | 油管

五、实战项目一:轻松开发DApp前端项目(官网 | 哔站 | 油管

六、实战项目二:Uniswap实战(官网 | 哔站 | 油管

七、进阶实战一:探索EVM++(官网 | 哔站 | 油管

八、进阶实战二:在Morph上部署你的第一个合约(官网 | 哔站 | 油管

八点五、Web3前端训练营AMA答疑第二期(哔站 | 油管

九、扩展工具篇:利用The Graph实现DAPP数据分析和数据可视化(哔站

参与方式

⚠️⚠️⚠️ 请先完整地看完这部分内容再开始操作!

  1. 注册 OpenBuild 账号;
  2. 联系 fxxkol 加入微信交流群;
  3. 参考「活动报名」提交 PR,完成报名。

任务提交

除了下面的文字说明,也可看视频《OpenBuild Web3 前端训练营作业提交演示》。

前置操作

先点击页面顶部右上角的「Fork」在自己空间中创建备份,随后将备份仓库 git clone 至本地,接下来的所有操作请在自己的仓库内完成。

如果你不熟悉 Git 的操作,可以下载 GitHub Desktop,使用 GUI 完成。

活动报名

复制 members 文件夹中的 github_id 文件夹,将新文件夹名称改为自己的 GitHub ID,填写其中 readme.md 的信息,提交 PR,完成注册报名。

不要把 github_id 文件夹删除了,只能提交自己新创建的文件夹!

课后作业

每节课都有相应的实战任务,需要在 members/[github_id] 文件夹下按照 task[n] 的命名方式创建任务文件夹,如:task1task2

任务代码必须全部开源公开,每个任务提交一次 PR。

提交规范

每完成一个任务,在你自己的仓库 commit 之后提交一个 pull request,只可以修改你自己的文件,不可修改其他人的文件。

⚠️⚠️⚠️ 不符合规范的会加上「invalid」标签,请按要求提交你的 PR!

PR 命名

注册的 PR,命名为 init: user-name,例如 init: Beavnvvv

提交 task 的 PR,命名为 task[n]: user-name,例如: task0: Beavnvvv

需要编写网页的 task,请在描述中上传效果截图。

请不要把报名和提交TASK的内容合并到一起,也不要将多个TASK放到一起提交!
请不要把报名和提交TASK的内容合并到一起,也不要将多个TASK放到一起提交!
请不要把报名和提交TASK的内容合并到一起,也不要将多个TASK放到一起提交!

开启多个 PR

很多人学习热情高涨,会迫不及待地把能做的任务都做了;但由于审核人员人手不够,PR 合并得会比较慢,若只是「单线程」地提交 PR 的话,影响学员的进度。

实际上是可以开启多个 PR 的,可「多线程」去完成任务——

将本仓库 fork 到自己空间后,基于 main 分支创建相应的功能分支,如:inittask1

在功能分支完成对应任务后,发起 PR;切换到其他功能分支继续做任务,再发起 PR,如此往复。

任务说明 请仔细阅读要求

任务 名称 说明
Task 1 React To-Do-List 开发一个待办事项应用
Task 2 Blockchain Basic 区块链基础小测
Task 3 NFTMarket Contract 编写并部署一个NFTMarket的合约
Task 4 NFTMarket Components 使用ethers.js和wagmi与NFTMarket合约交互
Task 5 NFTMarket Dapp 开发一个完整的NFTMarket的Dapp
Task 6 Uniswap SDK 完成SDK学习,制作一个与uniswap交互的前端app
Task 7 web3小工具实践 跟随教程学习EVM++,实现一个限流器demo
Task 8 Hello Morph 在Morph Holesky上部署任意合约并在Morph浏览器上验证
Task 9 Hello TheGraph 为NFTMarket创建一个The Graph子图

参考资料

前端基础

  1. Front End Roadmap
  2. React Learn

Web3 技术库

  1. WAGMi
  2. web3-react

实践参考

  1. Next.js Ethereum 脚手架
  2. Uniswap

大牛学习心得

  1. Web3 DApp 最佳编程实践指南
  2. 郭宇的 Web3 技术栈收藏

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 32.4%
  • TypeScript 26.2%
  • WebAssembly 19.4%
  • Solidity 11.3%
  • CSS 8.7%
  • HTML 1.8%
  • Other 0.2%