motsu8 / youtube_note

youtube動画の複合的なノート機能
https://youtube-note-neon.vercel.app
0 stars 0 forks source link

Open in Visual Studio Code image image image image image image image image image image

概要

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. ノートエディタもしくは、動画選択でそれぞれの参照先を指定します。

ノート一覧での利用機能

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

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

ユーザー認証機能

使用技術

カテゴリ 技術
フロントエンド Typescript React Next.js Tailwindcss
バックエンド Next.js
インフラ Vercel
Baas Supabase
ビルド Next.js
CI husky
...etc ESLint prettier FontAwesome