概要

YouTube動画を見ながらノートをとることができるWebアプリアプリです。

ノートはマークダウンエディタとなっており、HTMLプレビューでスタイルを確認することができます。また、プログラミング言語別のシンタックスハイライトに対応しているため、コードブロックが読みやすくなっています。

学習したい動画はアプリ内で動画のURLを指定し、動画を保存することでノートでの参照ができるようになります。

https://github.com/motsu8/youtube_note/assets/80054036/eae50423-6adc-45db-89ea-905a19ecd183

URL

https://youtube-note-neon.vercel.app

使用方法

1. ノート一覧画面にてノートを作成します。
2. プレイリスト画面にて動画URLを指定し、動画を保存します。
3. ノートエディタもしくは、動画選択でそれぞれの参照先を指定します。

ノート一覧での利用機能

• フォルダ・ノートの検索
• フォルダ・ノートの新規作成
• チェックボックスで選択したフォルダ・ノートの削除

ノートエディタでの利用機能

• 参照動画の関連付け
• Markdownエディタ
• HTMLプレビュー
• 言語別シンタックスハイライト

プレイリスト一覧での利用機能

• 動画URLでのアプリ内保存
• 保存済み動画のURL検索
• カスタムプレイリストの作成
• チェックボックスで選択した動画・カスタムプレイリストの削除

ユーザー認証機能

• Googleサインイン
• email/passwordでのサインイン
• サインアウト
• 登録解除

使用技術