Next.js and Supabase Masterclass - Build full-stack apps

Build the sign-up page of the auth flow in a Next.js app, implementing an Ant Design form with validation and a styled auth layout to match the deployed UI.

Design and implement the sign in, forgot password, and reset password UI for a Next.js and Supabase full-stack app, including forms, routing, and reset link flow.

Set up a Supabase account and project, sign in via GitHub or manual email, create an organization, and configure env variables and Supabase JS library to connect your Next.js app.

Learn to implement a signup flow with Supabase auth, using the sign up function with email and password, importing db config, handling errors and loading, and wiring email verification.

This lecture explains adding custom values to the signup flow by creating a public user profiles table linked to auth.users via id. It stores name and profile pic.

Implement sign-in with password using Supabase auth, handle loading and errors, store user data in local storage on success, and navigate to the home page.

Master Next.js and Supabase auth by implementing a sign-out flow with a client component button, signOut calls, loading state, local storage cleanup, and redirect to the sign-in page.

Learn to access the logged-in user data in Next.js client components by fetching from the auth get user function and the user profiles table, then render id, email, and name.

Learn to fetch the logged-in user in Next.js server components by using the Supabase browser and server configs, storing auth in cookies instead of local storage.

Utilizes a Next.js middleware to protect private routes with server-side auth via Supabase, redirecting logged-in users away from auth pages and unauthenticated users to sign in.

Implement forgot password with Supabase in a Next.js app by sending a reset link to the user email, handling the reset route with a token, and configuring the redirect URL.

Learn to implement a secure reset password flow in a Next.js and Supabase app using server actions, code-based session generation, and updating the user password.

Implement a layout provider to wrap private routes with a header and navigation, render a dashboard with credits, debits, balance, and last transactions, and cover supabase authentication and storage concepts.

Demonstrates displaying the logged-in user's name in the header, handling loading with a spinner, and showing errors via an alert while wiring typed user data.

Implement a hamburger-triggered sidebar drawer in a Next.js app with home, profile, transactions, settings, and logout items. Use icons, active highlighting, and router navigation; organize routes with route-group private folder.

Create a user profile page that displays image and name and key properties like id, email, created at, and last updated, with modals to edit profile and change password.

Create an edit profile modal driven by a show state, wire a name field and profile picture upload using an upload component, and refetch the user after a successful update.

Upload a file to a Supabase storage bucket, obtain its public URL, and update the user profiles table with the new profile picture and name using a reusable upload function.

Implement a change password flow in a Next.js and Supabase app using a dedicated change password modal, password validation, and Supabase auth to update the password.

Navigate the transactions module to render transactions and open a transaction form (date, amount, type, category, comment) to insert a row into the Supabase transactions table, reusing this form for editing.

Create a dynamic transaction form in a Next.js app with fields for date, amount, type, category, and notes, with category options updating by income or expense, for a Supabase-backed app.

Create a save transaction flow by building a transactions table in Supabase connected to user profiles via foreign key, and validate and submit fields type, category, amount, date, and notes.

Fetch the logged-in user's details with Supabase and query the transactions table. Display the results in a client component table with edit and delete actions.

Fetch the transaction by id from the url, populate the edit form with initial values, then update the transaction in Supabase and navigate back to the transactions list.

Build a dashboard UI for a finance manager app that displays total credits, total debits, and balance, and shows the last five transactions using a reusable dashboard card.

Build a server action get dashboard data to fetch the last five transactions for the logged-in user and compute credits, debits, and balance for the dashboard.