[応用編] NextjsとSupabaseによるリアルタイムWeb開発

Supabase Table/Row Level subscription, Storage, Cypress E2E

4.80 (15 reviews)
Udemy
platform
日本語
language
Web Development
category
instructor
217
students
4 hours
content
Jul 2022
last update
$84.99
regular price

What you will learn

Supabase Storage

Supabase Table + Row Level Subscription

Automatic cache (react-query) update with subscription

CypressによるE2Eテスト

ZustandとReact-queryによる状態管理

Usage of Suspense (React 18)

Description

本コースでは、SupabaseのSubscriptionとNextjsと連携したReal-time Appの開発について4ステップで学習します。また、作成したWebアプリケーションに対してCypressを使用したE2Eテストを行います。


Step1. SupabaseとNextjsによる認証機能

Step2. Supabase StorageとNextjsによるユーザーAvatar画像のUploadとDownload

Step3. Supabase Table Level Subscription (お知らせ機能)

Step4. Supabase Row Level Subscription (画像投稿+コメント機能)


学習のポイント


  • NextjsとSupabaseを連携したリアルタイムApp開発

  • Supabase Storage

  • Supabase Table/Row Level Subscription

  • SubscriptionとReact-queryのCache連携

  • CypressによるE2Eテスト


本コースで使用するTech stack

Nextjs

Supabase

Cypress:  E2E Test

React-query: サーバーデータ管理(cache)

Zustand: クライアント状態管理

Typescript

Tailwind CSS

Screenshots

[応用編] NextjsとSupabaseによるリアルタイムWeb開発 - Screenshot_01[応用編] NextjsとSupabaseによるリアルタイムWeb開発 - Screenshot_02[応用編] NextjsとSupabaseによるリアルタイムWeb開発 - Screenshot_03[応用編] NextjsとSupabaseによるリアルタイムWeb開発 - Screenshot_04

Content

Introduction

Overview
GitHub

Realtime App

Supabase (Tables, RLS, Storage bucket)
Supabase (Real time setup)
Supabase authentication
useUpload + Download Avatar image hooks
UserProfile with Suspense
Subscription hooks
Notification component with suspense
Post + Comment hooks
Feed component with suspense
Comments component with suspense

E2E Test with Cypress

E2E Test : Authentication
E2E Test : DashBoard

Reviews

Inoue
May 25, 2022
【良かった点】 改善して欲しかった点以外は良かったです。 【改善してほしい点】 ・クライアントサイドのデータ構造の設計の仕方(考え方)について、より詳細な説明が欲しかった。 ・「yarn dev」で動作確認をするときに、コード上で「どのような流れでデータが取得され、更新されるのか」を再度追いながら説明して欲しかった。 ・「なぜmemo化する必要があるのか」を説明して欲しかった。 ・ダッシュボード上でAvatar画像やPost画像を更新・削除したときに、supabaseのstorageからも古い画像を削除する処理が欲しかった。

Charts

Price

[応用編] NextjsとSupabaseによるリアルタイムWeb開発 - Price chart

Rating

[応用編] NextjsとSupabaseによるリアルタイムWeb開発 - Ratings chart

Enrollment distribution

[応用編] NextjsとSupabaseによるリアルタイムWeb開発 - Distribution chart
4663306
udemy ID
4/28/2022
course created date
5/7/2022
course indexed date
Bot
course submited by