_Index

Remix Introduction and Installation — Full-Stack React Framework

Learn Remix: understand the full-stack React framework built on web standards, install it, create a project, and explore the file structure.

Remix Routing Conventions — File-Based Routing System

Learn Remix routing conventions: file-based routes, dynamic segments, nested routes, route groups, and URL parameter handling.

Remix Nested Routes — Layouts and Route Hierarchy

Learn Remix nested routes: parent layouts with Outlet, automatic data nesting, and building complex route hierarchies with shared UI.

Remix Layouts — Shared UI Across Routes

Learn Remix layouts: create shared layouts for groups of routes, use root layout, and combine nested layouts for complex page structures.

Remix Loaders — Server-Side Data Fetching

Learn Remix loaders: fetch data on the server before rendering, pass data to components, handle errors, and optimize loader performance.

Remix Data Loading — Advanced Patterns and Strategies

Learn Remix data loading: parallel fetching, dependent queries, caching strategies, prefetching, and optimizing loader performance.

Remix Basics -- Complete Beginner's Guide

Learn Remix fundamentals -- nested routing, loader and action functions, server-side data fetching, and how Remix leverages web standards for full-stack React.

Remix Actions — Server-Side Form and Data Handling

Learn Remix actions: handle form submissions on the server, process POST/PUT/DELETE requests, validate input, and return responses.

Remix Loaders -- Data Loading Guide

Learn Remix loaders -- fetch data on the server before rendering components, return JSON or redirect responses, and access URL parameters and HTTP request.

Remix Form Handling — Progressive Enhancement Forms

Learn Remix form handling: use HTML forms with progressive enhancement, upload files, handle nested forms, and build accessible form components.

Remix Actions -- Form Handling Guide

Learn Remix actions -- handle form submissions server-side with action functions, validate input, return field-level errors, and revalidate loader data after.

Remix Form Validation — Server-Side and Client-Side

Learn Remix form validation: implement server-side validation with Zod, show field-level errors, add client-side validation, and create reusable validators.

Remix Forms -- Progressive Enhancement

Learn Remix forms with progressive enhancement -- use Form and useNavigation for pending states, client-side validation, and optimistic UI without heavy JS.

Remix Error Boundaries — Graceful Error Handling

Learn Remix error boundaries: handle loader and action errors, create fallback UI, catch thrown responses, and prevent full page crashes.

Remix Sessions -- Authentication Guide

Learn Remix sessions for authentication -- create session storage with cookies or databases, handle login flows, protect routes, and persist user data across.

Remix Catch Boundaries — Handling Expected Errors

Learn Remix catch boundaries: handle expected error responses like 404, 403, and 500, differentiate from unexpected errors, and show user-friendly messages.

Remix Error Boundaries -- Error Handling Guide

Learn Remix error boundaries -- catch rendering and loader errors with ErrorBoundary components, show fallback UI, and handle 404 and 500 responses gracefully.

Remix Links and Meta — SEO and Head Management

Learn Remix links and meta: manage per-route SEO metadata, add stylesheets and link tags, and optimize for search engines.

Remix Resource Routes — JSON, Files, and Non-Page Routes

Learn Remix resource routes: create JSON APIs, file downloads, webhooks, and sitemaps without page components.

Remix Params and Query — URL Parameters and Search Strings

Learn Remix params and query: access dynamic route params, parse search query strings, filter data, and manage URL state.

Remix Sessions — Managing User Sessions

Learn Remix sessions: create session storage, read/write session data, implement flash messages, and manage authentication state.

Remix Cookies — Direct Cookie Management

Learn Remix cookies: create and manage cookies directly, set cookie attributes, read cookies in loaders and actions, and sign cookies for security.

Remix Authentication — Login, Session, and Protected Routes

Learn Remix authentication: implement login/logout, session-based auth, protected routes with middleware, and role-based access control.

Remix Mutations — Complex Data Mutation Patterns

Learn Remix mutations: handle complex mutations, batch operations, optimistic updates, and multi-step form workflows.

Remix Optimistic UI — Instant Mutation Feedback

Learn Remix optimistic UI: update the UI immediately during mutations, show pending state, and handle rollbacks on server errors.

Remix Pending UI — Loading States During Navigation

Learn Remix pending UI: show loading indicators during page transitions, loader submissions, and action processing for better user experience.

Remix Deferred Loading — Streaming and Progressive Rendering

Learn Remix deferred loading: stream critical data first, defer non-critical data, and progressively render content with Suspense.

Remix Resource Prefetching — Speculative Loading

Learn Remix resource prefetching: prefetch pages, data, and assets before navigation for instant page transitions.

Remix Environment Variables — Configuration Management

Learn Remix environment variables: manage secrets, configure for development and production, expose to the client, and use .env files.

Remix Deployment — Production Hosting and CI/CD

Learn Remix deployment: deploy to Vercel, Netlify, Fly.io, or Node.js servers with adapters, environment config, and CI/CD pipelines.

Remix Final Project — Build a Complete Full-Stack Application

Build a complete Remix application with authentication, nested routes, forms, API endpoints, and deployment to production.