Hear Me Out Server Actions are Great

Why React is Not Enough for Full-Stack Web Development

Section Introduction React 101

What is React

Understanding JSX Syntax

Component Props (Passing Data to Components)

Components as the Basic UI Building Blocks

Responding to Events

Keeping Component State using Hooks (useState)

Conditional Rendering

Rendering List of Elements

Importing and Exporting Components

Creating a Next.js Project

Next.js Project Structure

Layouts (UI Shared Between Pages)

File-system Routing & Creating Pages

Section Introduction Routing, Pages & Layouts

Dynamic Routes with Parameters

Links and Navigation

Understand Prefetching and Caching

Section Introduction Data Fetching (and Caching!)

Running a Mock JSON Server

Actually Fetching Data with fetch inside a Server Component

Understanding Data Cache and Request Memoization

How Data Fetching Works in Next.js (Explanation and Recommendations)

Fetch Cache in Practice

Section Introduction Dealing with Slow Data Sources

Loading UI and Streaming

Loading UI and React Suspense

How a Slow Data Source Can Block Your Whole Page!

When to Use React Suspense When Loading UI Differences

About Streaming and SSR

Section Introduction Styling With Tailwind and CSS Modules

Styling Options in Next.js

Getting Started with Tailwind CSS

Flex Container & Responsive Design

Adding a CSS Module and Using Tailwind Inside

Positioning Elements with Flex

Using Grid and Making Customizable Components

Section Introduction Error Management in Next

Error Handling on Pages

Error Boundaries

Error Hierarchy - Where Does the Error Get Catched

Nested Layouts

Recovering from the Errors

Custom Not Found (404) Page

Error Handling in Layouts and in the Root Layout

Section Introduction Images and Image Optimizations

Problems with Images

Core Web Vitals, LCP, CLS and Optimizing Images

Using the Next Image Component for Automatic Optimization

Adding Image Gallery (Not Optimized Yet!)

Measuring the Page with Lighthouse

Placeholders & Image Quality

Responsive Image Size

Section Introduction Fonts, OpenGraph, Scrips, Metadata

Optimizing Fonts with Next.js (Google and Local Fonts!)

Optimizing Scripts (Connecting with External Services like Analytics, Chatbots)

An Overview of Metadata Attributes

Introduction to Metadata

Static Metadata

Dynamic Metadata

Dynamic (OpenGraph) Image Generation

Section Introduction Markdown and MDX

Setting Up Markdown and MDX and First MDX Page!

Styling MDX - Tailwind Typography

MDX Remote (Rendering any Markdown)

Loading MDX From Files (Blog Posts)

Section Introduction Blog Project Metadata, Frontmatter, Post List

Metadata #1 - What's Frontmatter and Refactor Time #1

Metadata #2 - Extracting Frontmatter and Content, Refactor Time #2

Blog Post List - Fetching Metadata of All Files

Blog Post List - Links

Section Introduction Caching, Filtering, Sorting, Pagination

Performance Improvements and Refactoring - Using cache for Memoization

Tags and Filtering Using Search Query Params

Sorting Posts - Using Query Params for State #1

Change Sort Order - Using Query Params for State #2

Adding Pagination - Using Query Params for State #3

Pagination Component - Pages #1

Pagination Component - Links #2

Section Introduction Custom HTML, Tags, Dark Mode, Cookies

Customizing HTML Generated from Markdown

Tags on Blog Post

Dark Mode Toggling - Component #1

Note About Cookies in Server Components and Dynamic Rendering

Dark Mode Toggling - Custom Hook, Setting DarkLight Mode #2

Dark Mode Toggling - Using Cookies in Next #3

Wrapping Up the Project - Home Page

Section Introduction Going Live! + Performance Tips & Tricks

Dynamic Functions Forcing the Dynamic Page Renders

Using generateStaticParams() to Pre-render Pages

SearchParams and Static Pre-Rendering

Adressing Metadata Base and Talking on Edge vs Node Runtimes

Creating a Vercel Account and Deploying Live!

The Header Component

Creating the Project and Playground

Financial Trend Component

Financial Trend Component - More or Less Money

Currency Formatting Hook

Transaction Summary Component

Transaction Item Component

Creating Buttons

Styling Form Inputs

Custom React Form Input Components

Section Introduction Creating UI and Components

Section Introduction Dark Mode, Fetching and Displaying Data

Adding JSON Server as Temporary Data Source

Displaying Transaction List

Adding LightDark Mode Toggle

Grouping Transactions by Date

Separator & Loading Skeleton

Fetching Finance Trends

Wrapping Transaction Loading in Suspense

Making a Suspense Fallback for Trends

Section Introduction Forms, Validation, Server Actions

Adding Transaction Form Markup

Adding Transaction Page & Link

Introducing the Zod Library

Introducing React Hook Form

Form Validation in React Hook Form

Adding a Zod Schema for Transactions

Storing Form Data

Using Environment Variables

Server Actions in Action

Form Error Component

Server Actions Explained

Section Introduction Adding Supabase, Seeding Data, Handling Errors

What is Supabase

Reading Transactions from Postgres

Adding Columns to Transactions Table

Adding Data to Postgres

Setting Up and Connecting the Next.js Project to Supbase!

Server Actions - Handling Errors

Generating Seed Data

Server Actions - Server Data Validation

Error Boundary for Trend and Removing JSON Server

Section Introduction More Complex Forms, Validation and Database Queries

Intermediate Dynamic Forms

Finance Trend - Postgres Function Calculating SUM

Finance Trend - Calling Postgres Function using RPC

Complex Transformation and Validation with Zod

Transactions Date Range - Selecting Option

Transactions Date Range - Display the Trend

Transactions Date Range - Get Current & Previous Sum in Postgres

Section Introduction Transactions Filtering and Pagination

Refactoring to a Client Component with Server Component Wrapper

Load More Functionality (Pagination)

Fetching Transactions Using Postgres Function

UX Improvements (No More Data, Loading Spinner etc)

Section Introduction Updating and Deleting Data

Naive Implementation of Delete Transaction Button

Delete Confirmation & Loading UI

Removing Transaction from the List

Handling the Pagination Shift

Update Transaction Server Action (Updating Data in Supabase)

Transaction Editing Page & Fetching Transaction Data

Transaction Editing Form and Handling 404

Loading UI for the Edit Form

Section Introduction User Authentication

Login Form & Invoking Server Action Through Form Submission

Authentication Layout and Page

Form Pending State

Handling Form Server Action Errors

Supabase Auth Overview and Passwordless Auth (Magic Links)

What's a Route Handler

How the Authentication Works in Supabase (and in General)

Sign-In Route Handler

Configuring Supabase Email Templates and Testing the Auth Process

Is User Authenticated

Signing Users Out

What's a Middleware Creating a Supabase Token Refresh Middleware

Section Introduction User Authorization

What's Authorization

Protecting Routes in Middleware

Link Users with Transactions and INSERT RLS Policy

What's Postgres RLS How it Integrates with Supabase Auth

Adding RLS Policies for SELECT, UPDATE and DELETE

Updating the Seeding Script with Users

Secion Introduction Uploading and Managing Files

Supabase Storage, Buckets and RLS

Creating a Bucket and Setting up Security Policies

Image Uploading Form

Settings Layout and Side Navigation

Image Uploading Server Action

Styling the File Input

Updating the User Metadata

Alert Component

Displaying User Avatar (Signed URLs)

More Graceful Error Handling in Server Actions

Deleting Files (Old Avatars)

Section Introduction User Settings, Server Side Form Validation

Success and Error Alert Components - Refactor

User Settings - Inputs and Loading UI

Scaffolding Settings Page and Form

User Settings - Saving and Applying Settings

Displaying the (Server Side) Validation Errors

User Settings - Validating Data Server Side using Zod

Going Live!

Section Introduction Introduction to Git and GitHub

Introduction to Git

Installing Git on Mac

Installing Git on Windows

Installing Git on Linux

GitHub, Remote Repository, Pushing Changes

Commiting Changes in Git