【フルスタック開発】NotionクローンをMERNスタックで本格的に構築するWebアプリケーション開発実践講座

人気メモアプリ「Notion」を1からフルスタック開発する講座。使用する技術はReact/Redux/Node.js/Express/MongoDB。ユーザー認証APIやメモ作成API構築など、この講座1本で多くの技術が学べるお得な実践講座

4.67 (177 reviews)
Udemy
platform
日本語
language
Web Development
category
instructor
【フルスタック開発】NotionクローンをMERNスタックで本格的に構築するWebアプリケーション開発実践講座
1,452
students
7 hours
content
Jan 2024
last update
$54.99
regular price

What you will learn

Reactを使って超本格的なNotionクローンを構築できます

ReactとReduxを使った状態管理手法が学べます

新規登録、ログイン、トークン発行API作成方法が学べます

パスワードの暗号化と複合化について学べます

React、Redux、MongoDB、Nodejs、Expressを使ったフルスタックプロジェクトフローが理解できます

JWTを使ったクライアント認証方法が学べます

JWTの基礎と認証の流れが図解で理解できます

Expressフレームワーク使ったバックエンド開発フローが学べます

MongoDBを使ったユーザーとメモのスキーマ定義が学べます

Postmanを使ったテストAPI手法が学べます

Express Validatorを使ったバリデーションチェック手法が学べます

APIのルーティング設定で運用と保守がしやすいリファクタリングが学べます

react-router-domを使ったルーティング設定とOutletの利用法が学べます

Axiosインスタンスを使ったAPIフェッチング手法が学べます

Axois interceptrosでリクエスト前処理の記述方法が学べます

CORSエラー回避法が学べます

MaterialUIを使ったクライアントUI実装が学べます

ローカルストレージにトークンを保存する方法が学べます

JWTチェックで自動ログインが実現できます

Redux Toolkitを使って状態管理する手法が学べます

useDispatchとuseSelectorのHooks利用法が学べます

Notionメモの作成、更新、取得、削除APIを構築できます

絵文字アイコン用ライブラリの使い方が分かります

Why take this course?

React/Redux等の基礎を学び終え、Notionクローンをフルスタックで開発することでWebアプリケーション開発の大まかな流れを把握して応用力を高める講座です。


■ 本コースの対象者

・React等の基礎技術を学んだだけでは物足りない方

・React/Reduxは一通り学んだからもっとアプリケーションを作ってみたい方

・クライアントとサーバーサイドを自らの手で1から全て構築してみたい方

・本格的なWebアプリを構築することで現場・実務で求められる技術を把握しておきたい方

・ReactやReduxだけでなくNode.jsやDBについての理解も深めたい方

・JWTを使ったユーザー認証やログイン、新規登録のAPI構築を学びたい方

・API構築やAPIルーティング設定、APIフェッチング方法を知っておきたい方

・etc...


フロントエンドもバックエンドも両方扱えるフルスタックエンジニアを目指したい・・・

実際にフルスタックプロジェクト開発をすることでその1歩を踏み出すことができます。


ReactやNode.jsの基礎は分かるけど「実用的なアプリ開発がしたい」「もっとステップアップしたい」という方におすすめの

講座内容となっています。


今回はMERN(MongoDB/Express/React/Node.js)と呼ばれる技術スタックを使用してNotionクローンを開発します。

また、MERNだけでなくJWT認証やAxiosやEmojiPicker等の詳細な技術についても学ぶことができます。


■ 本コースを受講する際の注意点

・HTML/CSS/JavaScriptの基本的な文法とルールは教えていません。

・Reactの基礎知識は知っている前提でお話を進めております(コンポーネントやJSX記法等)。

・ある程度Javascriptを触ったことがある人だとスムーズに受講できると思います。

Screenshots

【フルスタック開発】NotionクローンをMERNスタックで本格的に構築するWebアプリケーション開発実践講座 - Screenshot_01【フルスタック開発】NotionクローンをMERNスタックで本格的に構築するWebアプリケーション開発実践講座 - Screenshot_02【フルスタック開発】NotionクローンをMERNスタックで本格的に構築するWebアプリケーション開発実践講座 - Screenshot_03【フルスタック開発】NotionクローンをMERNスタックで本格的に構築するWebアプリケーション開発実践講座 - Screenshot_04

Reviews

野崎
August 28, 2023
MERNスタックの一連の開発を学べました。 セクション4のJWT トークンを取得してログイン状態にするところでバグを作ってしまい。デバッグするのに2日かかってきつかったです。 ただし、デバッグを行う過程でで教えていただいた内容の復習ができるので、学べる機会となりました。 エラーメッセージ: 発行済みJWT でログインしようとすると、下記のエラーが出る POST http://localhost:5000/api/v1/auth/verify-token 401 (Unauthorized) 問題のあるコード: client axiosClient.js のgetToken で”return” が抜けていた const getToken = () => { return localStorage.getItem('token'); }; 追記:講習になかった「お気に入り」機能はすぐ実装出来ました。 Beautiful DND を使ったプライベートとお気に入りの並び替えも、Shin 先生のYouTube 動画を見て15日ぐらいで実装出来ました。
Hanafusa
June 27, 2023
覚えることがかなり多く大変だったが、最後の方は慣れてきた。 バックエンドの処理についてもイメージが湧いてきた。 ちょっとしたバグ取りにも苦労したが、chatgptの助けで乗り切ることができた。 (ドラッグ&ドロップのライブラリ導入のため最初にダウングレードをしたが、別にしなくてもよかったのではと思った。)
大洞
January 31, 2023
Reactを使ったWEBアプリ作成をフロントエンド、バックエンドの連携も含めて学ぶ事ができました。コンソール出力を使ったデバッグについてもテンポよく説明されていました。実際に機能するアプリを作成する過程を一通り学習できるので、よく使われる部分は反復練習のようにして頭に入りました。

Charts

Price

【フルスタック開発】NotionクローンをMERNスタックで本格的に構築するWebアプリケーション開発実践講座 - Price chart

Rating

【フルスタック開発】NotionクローンをMERNスタックで本格的に構築するWebアプリケーション開発実践講座 - Ratings chart

Enrollment distribution

【フルスタック開発】NotionクローンをMERNスタックで本格的に構築するWebアプリケーション開発実践講座 - Distribution chart
4801536
udemy ID
7/27/2022
course created date
9/6/2022
course indexed date
Bot
course submited by