之前一段时间迷上了前端,所以疫情期间找业余时间用 js 写了个学英语的 web,方法是我自己平时看 YouTube 学习的办法,我感觉比较合适中高级和喜欢 shadow practice 的人。技术方面后端 Graphql ( Apollo Server + prisma2 ),前端是 Next.js(只有首页开了 ssr) + Apollo client + mobx-state-tree 。由于此前看到的众多不大好的事例,决定不开源(也不是什么高科技的东西)。此外还有更多想法和可以优化的地方,但可能受众太小了,目前没有计划继续这个 side project,打算迟点本地跑就行了。趁现在网站还活着分享一下看看大家的想法💡
由于需要 YouTube,所以需要飞机,请自行准备。下面是一些截图,提供一个快速的指南。
截图的地址是: https://cabylang.com/learn/w0ztlIAYTCU
网站的首页是: https://cabylang.com
1
ps4512 2020-05-22 00:33:53 +08:00 via iPhone
做的不错
|
2
falcon05 2020-05-22 00:39:14 +08:00 via iPhone
看上去不错的样子
|
4
cheung 2020-05-22 01:45:54 +08:00 via iPhone
厉害
|
5
seanxx 2020-05-22 09:43:01 +08:00
收藏了,等我听完 englishpod 再来尝试下
|
6
hejingyuan199 2020-05-22 10:54:15 +08:00 via Android
很有创意。我觉得很棒。
字幕是利用它自动生成的吗? 有的视频是直接有字幕的。 我有点想法,如果一个用户在多个视频都收藏了某个单词,那会切到哪个视频呢? 哈哈。要是能剪辑一下视频拼接起来,是不是更酷。YouTube 视频是可以下载的,用 ffmpeg 剪辑一下,或者别的 opencv 啥的。哈哈。 |
7
hejingyuan199 2020-05-22 10:55:55 +08:00 via Android
@hejingyuan199 楼主的技术结构我很羡慕。以后多多指教。多介绍下前端的这些技术面。不知道如何编辑自己的留言,所以回了两条。
|
8
yuankui 2020-05-22 11:25:40 +08:00 1
看技术栈就知道楼主牛逼
|
11
Philippa OP |
12
mara1 2020-05-22 19:23:34 +08:00
@Philippa, EnglishPod 还是蛮好的,我听第 1 期时候大半听不懂,需要对着文本,到 300 多期时候,已经可以听懂 90%了。
现在我在听 All Ears English, 感觉也挺好玩的。 |
13
Philippa OP @hejingyuan199
视频的字幕是可以自动生成和人工的。在用户加入视频页面两种字幕都认,可能使用者感觉自动字幕都很好,就没理由拒绝。后台的 pipeline 批量加就只加人工字幕,因为自动字幕很难判断其质量如何。 后面那个 idea 很好,目前视频之间没有交换数据。切到的视频就是当前页面的视频,这个有这个想法,以后可能会加上,比如跨视频,做一个整合的跟踪,但那样后台我需要长期运行的 pipeline,考虑到成本,目前没做。现在前后端都是纯 serverless 部署的,没人访问情况下基本上除了数据库的费用其他都可以忽略。 剪视频我要研究一下版权问题,我不确定那样可行。不过这是最理想的情况,前一天学过什么视频,第二天剪好就等点开一个个的过,那样效率最高,因为现在的设计都是视频之间是割裂的。 技术这方面的话,前端这边 Nextjs,个人感觉和 create-react-app 区别很少,只是基础上多了 ssr 。另外是 ApolloClient 做 graphql 的 client 端,css 用了 tailwindcss,这个方便自己做设计,设计用的 Figma,几小时的教程就能速成。部署用了 serverless+aws lambda,为的是便宜。:) |
15
iMusic 2020-05-23 10:48:33 +08:00
网站做的很棒,完全不像小作坊 /个人作品,感谢
|
16
iMusic 2020-05-23 10:57:49 +08:00
邮箱注册有问题哈,确认地址是 localhost:3000 的,手动改成网站地址,验证通过。
|
18
sooo 2020-05-27 17:16:34 +08:00
感觉很好,先收藏
|
20
chocolatesir 2021-02-04 10:52:21 +08:00
请问楼主重构完了吗
|