solidity-chinese-community / frontend

Solidity CN - DApp front

React project scaffold based on TypeScript, MobX & Bootstrap, which is inspired by WebCell scaffold.

Technology stack

• Language: TypeScript v4
• Component engine: React 17
• State management: MobX v5
• Component suite: React Bootstrap v2
• HTTP Client: KoAJAX
• PWA framework: Workbox v6
• Package bundler: Parcel v2
• CI / CD: GitHub Actions + Pages

Extra components

1. Component Sample
2. Rich-text editor
   • HTML version
   • JSON version

Development

npm i pnpm -g

pnpm i

npm start

Gitpod

pnpm start:gitpod

Deployment

pnpm build

frontend's Issues

事件监听（第五节课）

1. 页面布局（页面路由）
2. 投票后和创建后事件监听，过滤

完成首页内容，Vote 首页（第三节课）

1. 页面布局
2. ethers.js 引入（Provider、Signer、Contract）
3. Mint NFT（先判断有没有 NFT）(合约的写)
4. 查询自己的 NFT（合约记录读取）

前端环境搭建（第二节课）

• 介绍：本次分享主要介绍项目要使用的技术栈，及环境搭建。
• 课程任务：技术栈介绍及环境搭建。
• 知识要点：
  1. 解释技术栈：
  2. Node.js
  3. npm/pnpm
  4. Typescript
  5. parcel
  6. Bootstrap
  7. React
  8. Mobx
  9. 环境搭建

前端基础（第一节课）

1. 解释 HTML、CSS、JavaScript。
2. 什么是 HTML 标签、HTML 标签属性？查文档。
3. CSS 引入方式（3种），属性和值，查文档；引入 Bootstrap。
4. JavaScript 引入方式，基础语法，事件（点击事件），查文档。
5. 推荐学习资料。

部署（第六节课）

1. 部署到 vercel

创建投票页、投票列表页（第四节课）

1. 创建投票页和投票列表页布局
2. Vote 列表（合约批量读取）