Next.js 15で完成する実戦YouTube クローン開発
antonio
この24時間のチュートリアルでは、自分だけのYouTubeクローンを作る方法を学びます。Next 15とReact 19(tRPCを含む)、サーバーコンポーネントでのプリフェッチ、クライアントコンポーネントでのサスペンス活用、ビデオ処理、バックグラウンドジョブ、AI機能など、高度なトピックを扱います。
초급
Next.js, React, PostgreSQL
リアルタイム同期とレスポンシブデザインを備えたフルスタックアプリケーションの構築:直感的なNotionクローンを作成することで、Web開発のスキルを1段階アップグレードします。実際のプロジェクト体験で急速に成長するのに最適な機会です! (Powered by Antonio Erdeljac)


最新のWeb技術を活用する:Next.js 14とReactを使用して現代のWebアプリケーションを構築する方法を学びます。
リアルタイムデータベースの構築:Convexを活用して、リアルタイムでデータを処理して同期する方法を学びます。
Notionスタイルのエディタ開発:Reactを使用して直感的で強力な文書編集機能を実装します。
ライトとダークモードの切り替え:ユーザーの好みに応じてインターフェーステーマを変更する機能を実装します。
階層文書管理:無限階層子文書構造を作成および管理する方法を学びます。
効率的なファイル管理システム:ファイルのアップロード、削除、および交換機能を含む包括的なファイル管理システムを構築します。
ユーザー認証とセキュリティ:安全なユーザー認証システムを実装してアプリケーションを保護します。
レスポンシブWebデザイン:すべてのデバイスで完全に機能するレスポンシブデザインを実装します。
Web公開機能:ユーザーが自分のメモをWebに共有できるようにする機能を開発します。
ファイル回復システム:削除されたファイルを回復する機能を実装し、データの損失を防ぎます。
ユーザーエクスペリエンスの向上:拡張と縮小が可能なサイドバー、魅力的なランディングページ、ドキュメント固有のカバーイメージなどにより、豊富なユーザーエクスペリエンスを提供します。

🌟ようこそ! Notionサービスの作成講義で皆さんを招待します! 🌟
現代のデジタル時代における情報の効果的な管理と組織化は、もはや選択肢ではなくて不可欠になりました。その中心には「Notion」などの強力なツールがあります。今、あなたはそのようなツールを自分で作る機会がありました。
この講義は、単に技術を教えることを超えて、創造的で実用的なアプリケーションを実際に構築する旅にあなたを招待します。リアルタイムデータベースの構築からユーザーインターフェイスの設計、モバイル最適化まで、1つの完成した製品を作成するすべてのプロセスを体験します。
この講義は単なる理論学習にとどまらない。実際にコードを書いて、問題を解決し、創造的なアイデアを実現する過程を通じて、あなたは真の開発者に成長することができます。
Powered by Antonio Erdeljac
1.リアルタイムデータベース🔁
2. Notionスタイルエディタ📝
3.ライトとダークモードの切り替え🌗
4.無限階層文書システム🌲
5.ごみ箱とソフト削除機能🗑
6.ユーザー認証システム🔒
7. ファイルのアップロードと削除、置換📂
8.リアルタイムで変更される文書アイコン🌟
9. 拡張可能なサイドバー➡ 🔀 ⬅
10.モバイル環境の最適化📱
11. Webにノートを投稿する機能🌐
12. 完全に折りたたみ可能なサイドバー↕
13. ランディングページ🛬
14. 各文書のカバーイメージの設定🖼
15.削除されたファイルの回復機能🔁📄
サイドバー折りたたみ展開機能(Collapsable Sidebar)
無限階層文書システム(Infinite Level Document System)
文書検索機能 (Document Search Feature)
ごみ箱:削除と回復機能(Remove and Restore Feature)
リアルタイムのタイトルとドキュメントのアイコンを同期する
カバーイメージの追加、削除、および代替機能 (Add, Remove, and Replace a Cover Image)
ノッションスタイルエディタの適用(Notion Style Editor)
Web ノート公開機能 (Publish Document)
モバイル環境の最適化(Responsive Design)
リアルタイムデータベースの反映 (Real-Time Database Update)
1.リアルタイムデータベース:データベースの選択と設定方法を学び、リアルタイムでデータを同期する原理とサーバー - クライアント間の通信方法を学びます。
2. Notionスタイルエディタ:ユーザーフレンドリーなテキストエディタを作成するための基本的な要素と豊富なテキスト機能を実装する方法を学びます。
3.ライトとダークモードの切り替え:ユーザーの好みに応じてインターフェイスの色を切り替える方法とCSSを使用したテーマ管理技術を学びます。
4.無限階層文書システム: ツリー構造データ管理と再帰的コンポーネント設計により、複雑な情報も体系的に管理する方法を扱う。
5.ごみ箱とソフト削除機能:削除されたデータを効率的に管理する戦略とユーザーインターフェイスの設計を学びます。
6.ユーザー認証システム:セキュリティを強化する認証プロトコルとソーシャルログインの統合方法を学習します。
7.ファイルのアップロードと管理:ファイルのアップロードメカニズムとクラウドストレージの統合、ファイルメタデータの管理方法を学びます。
8.リアルタイム文書アイコンの変更:ユーザーがアイコンをリアルタイムで変更できるようにするUIアップデート技術を学びます。
9.スケーラブルなサイドバー:ユーザーがサイドバーを自由に調整できるようにするレスポンシブデザインとアニメーション技術を学びます。
10.モバイル環境の最適化:モバイル機器に合わせたレスポンシブWebデザインとインタラクション、パフォーマンス最適化方法をカバーします。
11. Web へのノートの公開: ノートを Web に公開する方法、SEO の最適化、ソーシャルメディア統合戦略を学びます。
12.折りたたみ式サイドバー:ユーザーのワークスペースを最大化するためのサイドバー設計と状態管理技術を学習します。
13.ランディングページデザイン:効果的な最初の印象を与えるランディングページデザインの原則とユーザーエンゲージメントの強化戦略を学びます。
14.文書カバーイメージの設定:個々の文書に合ったカバーイメージを設定し、画像処理と最適化技術を習得します。
15.削除されたファイルの回復機能:データのバックアップと回復戦略、ユーザーインターフェイスの設計、データの整合性を確保する方法を学びます。
このレッスンでは、上記のトピックを通じて実際にアプリケーションを構築するために必要な技術的知識と実践的なアプローチを提供します。
Next.js 14(App Router)
React
TypeScript
Tailwind
Convex
Clerk
Cloudinary
BlockNote
絵文字-ピアッカー
Shadcn-UI
Radix-UI
Sonner
Zustand
SSR&CSR&SSG
🚀あなたの創造性を発揮し、独自のNotionスタイルアプリケーションを世界に披露する準備ができましたか?今すぐこの講義に参加して、その可能性を探索してみてください! 🚀
講義の学習に必要な注意事項がある場合は、慎重に作成してください。
受講生たちが講義で扱う内容を十分に理解させ、学習満足度を高めることができます。
オペレーティングシステムとバージョン(OS):Windows 11
使用ツール: Node.js 20, Next 14
各レッスンで使用されているソースコードとそのコードの説明をレッスンノートエントリに記録します。
HTML/CSS/JSの基本的な知識が必要です!
質問は24時間以内に答えます!
講義に必要なタイプスクリプトは講義内でお知らせします!
Antonio Erdeljac ( All right reserved)
学習対象は
誰でしょう?
フルスタック開発に興味のある開発者:最新のWeb技術を活用したフルスタック開発に興味のある開発者に最適です。
個人プロジェクトやポートフォリオを構築したい人:実際に利用できるフルスタックアプリケーションを作成しながら、自分のポートフォリオを強化したい人に適しています。
自己主導学習を好む方:自分のスピードに合わせて学習し、実際のプロジェクトに適用したい方に適しています。
企業向けまたは個人用コラボレーションツールの開発に興味がある人:コラボレーションツールや文書管理システムの開発に興味がある開発者や学生に役立ちます。
初級および中級のWeb開発者:基本的なWeb開発知識を持っていますが、実際に動作するフルスタックアプリケーションを構築する経験を積みたい開発者。
フリーランスの開発者:独立したプロジェクトまたはクライアントプロジェクトのためにさまざまな技術スタックを習得したいフリーランスの開発者。
企業のITおよび開発チームのメンバー:会社の内部プロジェクトまたはシステム開発に参加したいIT専門家。
趣味でコーディングを学ぶ人:コーディングを趣味で学び、自分だけのプロジェクトを作ってみたい人。
既存のWeb開発者のための進化した学習機会:現在の技術スタックを超えて新しい技術を学びたい経験豊富なWeb開発者。
前提知識、
必要でしょうか?
HTML、CSS、およびJavaScriptの知識
React基礎知識
Typescript(講義内でお知らせします)
全体
60件 ∙ (6時間 35分)
講座資料(こうぎしりょう):
同じ分野の他の講座を見てみましょう!