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

Set up the UI authentication routes with React Router Dom, create login, register, and home pages, and wire routes in app.tsx using BrowserRouter and Routes.

Create a centered registration ui in React using the entity form with name, email, and password fields, including validation and on-submit logging, styled with a gray background and white card.

Replicate the register form design for the login page, using email and password fields in a React and Supabase full-stack app, with validation and a link to register.

Create a new Supabase account, set up an organization and project, obtain the project URL and public key, and integrate Supabase with a React app via env vars.

Register a new user with Supabase authentication using email and password, manage loading, handle errors with a message component, and navigate to the login page after a successful signup.

Builds custom attributes storage by creating a user profiles table linked to the users table, adds name and profile pic, and enforces unique email with error handling during registration.

Learn to implement user login with Supabase authentication using email and password, handle errors, and redirect to the home page while managing loading states and token storage.

Fetch and display the logged-in user on the home page by combining the user record from the users table with the profile from the user profiles table in Supabase.

Implement a logout button that calls supabase auth sign out, handles errors, navigates to the login page on success, and verifies token removal from local storage for complete sign-out.

Implement public and private layouts to manage routes, redirect logged-in users from login or register to the home page, and protect access using a browser-stored auth token.

Implement a forgot password flow in a React and Supabase app with dedicated forgot password and reset password pages and a send reset link action via supabase auth.

Build the reset password flow in a React and Supabase app by creating the UI, validating password fields, updating the password via Supabase auth, and routing to login.

Create a header and sidebar in a private layout for a React.js app, featuring a left logo title, a right username, and a hamburger to toggle the drawer.

Store the logged-in user in a global zustand store and display the username in the header across pages without props, replacing component state with a universal data source.

Build and integrate a toggleable sidebar in private layout using a drawer component, rendering home, profile, transactions, and logout button with active route highlighting in a React and Supabase app.

Learn to build a profile page that fetches and displays logged-in user data from a global store, formats timestamps, and adds update profile and update password actions with modal prompts.

Implement a centered change password modal on the profile page with a form for new password and confirm password, including validation and success or error messages for a backend update.

Open a centered update profile modal with a name input and profile picture upload from a local file selector, using loading state and error messages via the context holder.

Upload and manage user profile pictures in Supabase storage by creating a bucket and policies, uploading files, retrieving public URLs, and updating the user profile.

Debug a supabase storage public url issue by making the bucket public, then update the user name and profile picture by updating state in a React and Supabase app.

Create the transactions table in a React and Supabase expense tracker, defining title, type (credit or debit), category, amount, and user_id with a user profile relation, and CRUD operations.

learn how to build transactions crud services with Supabase, including add, update, delete, and get operations by user id, and fetch a single transaction by id.

Create routes and pages for transactions, add transaction, and edit transaction within a private layout, using a shared transaction form and React Router links.

Create a dynamic transaction form ui for an expense tracker, with a responsive grid, name, type (income or expense), dynamic category options, date, and resilient submit and error handling.

Learn to add a transaction in a react and supabase app by attaching the user id to the payload on finish and showing a toast with navigation on success.

Fetch and display the logged-in user’s transactions in a table, format dates and currency, and provide edit and delete actions with navigation to the edit page.

Load existing transaction data by ID into the form, then submit to add or edit the transaction, with dynamic messages and category handling.

Implement the delete transaction functionality by building a delete handler that calls the API, manages loading states, and updates the local transactions array by removing the deleted item.

Design and implement a transactions filters UI with type, category, and date selectors, dynamically loading categories by type and wiring apply to refresh the data via the get transactions call.

Apply filters to the get transactions SQL query, starting with a default user id and updating filters by type, category, and date.