【Next.js/Node.js/Prisma/Supabase】本格的なSNSアプリをフルスタック構築するマスター講座

モダンな技術スタックを駆使して1からSNSアプリケーション開発する講座。ユーザー認証からSupabaseでの投稿DB管理、PrismaのORMを使ってJavascriptのみの知識でフロントからバックエンドまで完結させる技術を身に着けます。

4.54 (130 reviews)
Udemy
platform
日本語
language
Web Development
category
instructor
【Next.js/Node.js/Prisma/Supabase】本格的なSNSアプリをフルスタック構築するマスター講座
1,322
students
4.5 hours
content
Jan 2024
last update
$49.99
regular price

What you will learn

フルスタック技術を使って簡単な機能を備えたSNS開発ができる

Nextjsの基礎(動的ルーティングやSSG等)が学べる

Nodejs(Express)を使ったバックエンドAPI構築ができる

Supabaseを使ったDB管理ができる

Prismaを使ってORMを実現し、Supabaseと連携する方法が学べる

フロントエンドとバックエンドを両方構築し、フルスタック開発手法が学べる

Prismaを使ってSNS開発に必要なモデルを定義できる

JWTの基礎知識が学べる

ユーザー認証/ログイン/新規登録API実装が学べる

ReactのHooksを使って状態管理手法が学べる

ThunderClientを使ってAPIテストする方法が学べる

NextjsにTailwindCSSを導入する方法が学べる

axiosライブラリを使ってAPIを叩く手法が学べる

CORSエラー回避方法が学べる

SNSで必要な呟き投稿や呟き取得APIを構築できる

Expressにおけるミドルウェア設定の意味と実装方法がわかる

ログイン状態の監視してナビゲーションバーUIの変更ができる

SNSにおけるプロフィールページが実装できる

identiconライブラリでユーザー新規登録時にアイコン自動生成ができる

閲覧中のユーザーが投稿した呟きで取得できるAPIが作れる

Vercelを使ってNextjsをデプロイする方法が学べる

renderを使ってNodejsをデプロイする方法が学べる

最終的にフロントとバックエンドをデプロイしてWeb上で公開・利用できるようにする

Why take this course?

フルスタックエンジニアになるためにはフルスタック技術を使って何かアプリを作ってみるのが1番の近道です。本講座では簡単なSNSアプリ(ユーザー認証、ログイン、新規登録、投稿取得、投稿、プロフィール等)を作ってフロントからバックエンドまでの技術を身に着けていただきます。


■ 本コースの対象者

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

・フルスタック技術を使ってSNS開発をしてみたい方

・PrismaのORMを使ってDB操作をしてみたい方

・SupabaseのBaasを使ってDB管理をしてみたい方

・デプロイ(無料)してSNSアプリを運用してみたい方

・モダンな技術をキャッチアップしてみたい方

・ただただWebアプリ開発好きで好奇心がある方

・etc...


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

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

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

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

Screenshots

【Next.js/Node.js/Prisma/Supabase】本格的なSNSアプリをフルスタック構築するマスター講座 - Screenshot_01【Next.js/Node.js/Prisma/Supabase】本格的なSNSアプリをフルスタック構築するマスター講座 - Screenshot_02【Next.js/Node.js/Prisma/Supabase】本格的なSNSアプリをフルスタック構築するマスター講座 - Screenshot_03【Next.js/Node.js/Prisma/Supabase】本格的なSNSアプリをフルスタック構築するマスター講座 - Screenshot_04

Reviews

遠藤
October 28, 2023
受講対象者が不明の動画 ただ、台本を読みながらの動画ではなく、考えながら作成している動画で、間違いやエラーがあっても、修正部分を含めて映像にしているので修正対応の参考になりありがたいです。 また、説明や解説をかなり省略していて、作成スピードを重視した動画に見受けられます。 説明が省略されていると感じる部分については、自分で調べればいいので、まずは動くアプリを作成するという目標に向かって学習できるのでモチベーションを保ちやすいです。 ただし、動画内で度々発現される 「どちらでもいいんですが、今回はこちらにします」のような発言については、講師自体がどのように考えてそれを選定しているのか不明です。 ただ、なんとなく選定したのか?
minami
October 11, 2023
弊社の社員向けに受講させたい動画を探していて、思うところがありすぎたのでFBさせて頂きます。 最低でした。 ・修正の動画があったが、バグが多すぎて実装しながら講義を受けるのが苦痛 ・実装の統一性が無い(同じような機能は同じ振る舞いが良い) ・Nextjsを利用する上での大事な箇所の説明が全くない。(例えば本来ログインユーザのみしかアクセスできないはずのページでのgetServerSidePropsからのAPIアクセス時の際の認証の説明・実装はない。) ・APIのURL設計が無茶苦茶。(例えば/posts/:userId はREST API設計規則に反しています。今回の要件だと、/users/:userId/postsがより良い。) ・LocalStorageは使わない方が良いという根拠のない情報をスピーカーしてる(Cookieにするのかなど、ここはよく議論されているが、結論どの方法でもリスクはある)。 など、雑すぎる講義でした。他の受講者の方は参考程度に見て頂いて、実際に実務で開発する場合はもう少し基礎をしっかり学んでから行ってほしいと強く思います。 また、ChatGPTの利用を促していましたが、現時点ChatGPTに頼れる人は、ChatGPTの回答に対して目利きが出来る人に対してはツールとして役に立ちますが、プログラミング初心者が使うと、良くない結果を鵜呑みにしてしまうなどリスクもあります。
三谷翔太
August 27, 2023
講座中にパス指定("/"の入れ忘れ等)を間違えたまま進み、後から間違えた箇所を修正するといった場面が多々あるので、その時点で自分が間違っているのか動画が間違っているのかの判断がつきにくい時がありました。エラー発生時の問題切り分けのライブ感は好きですが、学習中の身では余計な混乱を生んでしまうのではと思いました。
Leaf
June 10, 2023
フロントエンドを学ぶ上で中々難しい非同期周りをこれでもかと学べる良教材 バックエンドもデータベースもJavaScriptで触れます フロントエンドを志し、非同期通信周りの理解を深めたい人におすすめの教材でした

Charts

Price

【Next.js/Node.js/Prisma/Supabase】本格的なSNSアプリをフルスタック構築するマスター講座 - Price chart

Rating

【Next.js/Node.js/Prisma/Supabase】本格的なSNSアプリをフルスタック構築するマスター講座 - Ratings chart

Enrollment distribution

【Next.js/Node.js/Prisma/Supabase】本格的なSNSアプリをフルスタック構築するマスター講座 - Distribution chart
5174774
udemy ID
2/23/2023
course created date
6/3/2023
course indexed date
Bot
course submited by