跳到正文

Corda

一项我正在搭建的对接服务:一个宣传网站,和一个为每种角色提供控制台的应用。

角色
创始人,设计与开发
我的部分
每一项设计和技术决定都是我做的。
技术栈
HTML, CSS, JavaScript, Canvas 2D, Next.js, TypeScript, Supabase
其他渠道
访问线上网站
corda-nu.vercel.app
Corda 的首页:黑色背景、标题“You know you need help”、两个按钮,以及一个由白色圆点组成的地球,显示美洲和部分非洲。
图 01首页:地球在转动。

01 / 08

构想

说出你需要什么,就会被介绍给一位能帮上忙的真人。

corda-nu.vercel.app
“Three steps. No noise.”部分:三个带边框的栏目,编号 01 到 03,中间一栏被抬起,编号被圈住,因为指针正停在它上面。
图 02三个步骤。

02 / 08

问题

这是我自己的创业项目,所以需求是我写的。客户发出请求,管理员指派一位专业人士,专业人士跟进这条线索。

大部分设计都围绕两个问题展开:在没有后端的网站上怎样收款,以及有了账户之后怎样让每个人的请求保持私密。

corda-nu.vercel.app
connect 页面顶部:标题“Need something done? Start here.”、一个“Find someone”按钮、几个示例请求和一排四个徽章。
图 03客户从这里开始。
connect 页面上空白的请求表单:姓名、邮箱或 WhatsApp、一个类别下拉框、所在地、详情,以及一个“Request a connection”按钮。
图 04请求表单。

03 / 08

思路

两个部分,感觉像一个整体:八个静态页面负责解释想法并收集请求,一个应用负责保存账户。

04 / 08

关键决定

我让宣传网站保持静态:纯 HTML、CSS 和 JavaScript,没有构建步骤,也没有后端,所有页面共用一个样式表和一个脚本。

付款使用 Flutterwave 托管的支付链接,所以银行卡信息从不经过本站,也不需要额外的脚本或安全策略例外:每个支付按钮都只是一个链接。

在真正的支付链接出现之前,按钮仍可点击,但会提示服务即将上线并指向 WhatsApp;遗留的测试链接也算作未设置,所以不会误把有问题的东西放上线。

客户的前两次请求免费。Flutterwave 托管的方案没有免费试用,网站也没有账户可以用来计数,所以计数保存在访客自己的浏览器里。清除数据或换设备就会重置,但每个请求仍会进入我的收件箱,所以我可以自己兑现或调整这个优惠。

专业人士永久免费加入;Pro 每月 ₦7,500;前两次之后,客户每次请求支付统一的 ₦1,500。

在应用里,安全边界是数据库,而不是页面:访问规则是行级安全策略,所以即使页面里的某个查询写错了,客户也读不到别人的请求。

注册时选的角色由触发器复制到用户资料里,表单只提供客户和专业人士两个选项。如果加上管理员选项,任何人都能给自己选上,因为表单数据来自一个没有被验证过的浏览器,所以管理员由我手动创建。

客户只能在请求处于待处理状态时修改自己的请求,用来取消它;这条策略不让他们把请求标为已完成,也不让他们把它转给别人。

按角色跳转时,每次访问仪表盘都会查询一次角色。目前这个规模没问题;如果变慢,下一步是把角色放进登录令牌里。

05 / 08

设计

黑色背景、白色墨色和安静的光晕。宣传网站是灰阶的,图像是一个由白色圆点组成的地球。

corda-nu.vercel.app
一幅中心辐射图:一个标着 CORDA 的方框,用细线连着八个轮廓方框(Designer、Developer、Photographer、Caterer 等)。
图 05网络页面。
首屏地球的特写:一排排白色圆点在深色球体上组成美洲、欧洲和非洲,越靠近边缘越小越暗。
图 06地球,近距离。

06 / 08

实现

网站用朴素的 HTML、CSS 和 JavaScript;应用用 Next.js 和 Supabase。

地球是一个不用任何库的 2D canvas。在应用里,访问规则放在数据库中,而不是界面里。

宣传网站在 11 天内提交了 44 次,时间是 2026 年 9 月 4 日至 15 日;应用是第一个切片,共 7 次提交,在 9 月 14 日和 15 日。

应用有带角色的注册、密码或魔法链接登录(启用后还有 Google 登录)、重置密码,以及面向客户、专业人士和管理员的请求仪表盘。

网站
8 个静态页面,朴素的 HTML、CSS、JavaScript
地球
2D canvas,不用任何库
应用
Next.js 14、TypeScript、Supabase
登录
密码、魔法链接;启用后可用 Google
角色
客户、专业人士、管理员
源码
私有仓库
手机上的 Corda 首页:标题、全宽的“Find a connection”和“Join the network”按钮,以及一个悬浮的“Chat with us”按钮。
图 07手机,首屏。
黑色面板上打开的 Corda 移动端导航:How it works、Network、FAQ、Pricing、About、Contact 和 Create account,另有一个“Find a connection”按钮。
图 08手机上的菜单。
手机宽度下,价格页上并排的 Free 和 Pro 套餐卡片,带有功能列表和按钮。
图 09手机上的价格页。

07 / 08

细节

三个步骤会在指针下亮起。FAQ 一次只展开一个答案。

08 / 08

目前状态

宣传网站已完成。支付尚未开启。应用是第一个版本:注册,以及为每种角色提供的控制台。

仪表盘目前显示的是模拟数据。要上线还需要我来做:创建两个支付链接和表单接收地址,并给仪表盘接入真实数据。

corda-nu.vercel.app
并排的 Free(0 奈拉)和 Pro(每月 7,500 奈拉)套餐卡片,有“Join Corda for Free”和“Go Pro”按钮;“Go Pro”显示“Coming soon”。
图 10价格:Pro 套餐显示“Coming soon”。
六个网络类别(Technology、Creative、Food & Hospitality 等);已选中 Food & Hospitality,它的面板写着还没有人加入。
图 11这个类别还没有人加入。

下一个项目

Z3N

Victor Ohiri