YouTube動画を見ながらノートをとることができるWebアプリアプリです。
ノートはマークダウンエディタとなっており、HTMLプレビューでスタイルを確認することができます。また、プログラミング言語別のシンタックスハイライトに対応しているため、コードブロックが読みやすくなっています。
学習したい動画はアプリ内で動画のURLを指定し、動画を保存することでノートでの参照ができるようになります。
demo.mp4
https://youtube-note-neon.vercel.app
- ノート一覧画面にてノートを作成します。
- プレイリスト画面にて動画URLを指定し、動画を保存します。
- ノートエディタもしくは、動画選択でそれぞれの参照先を指定します。
- フォルダ・ノートの検索
- フォルダ・ノートの新規作成
- チェックボックスで選択したフォルダ・ノートの削除
- 参照動画の関連付け
- Markdownエディタ
- HTMLプレビュー
- 言語別シンタックスハイライト
- 動画URLでのアプリ内保存
- 保存済み動画のURL検索
- カスタムプレイリストの作成
- チェックボックスで選択した動画・カスタムプレイリストの削除
- Googleサインイン
- email/passwordでのサインイン
- サインアウト
- 登録解除
| カテゴリ | 技術 |
|---|---|
| フロントエンド | Typescript React Next.js Tailwindcss |
| バックエンド | Next.js |
| インフラ | Vercel |
| Baas | Supabase |
| ビルド | Next.js |
| CI | husky |
| ...etc | ESLint prettier FontAwesome |