Remix v2 complete masterclass - Build Full-stack AI apps

Explore Remix v2 for building full-stack ai apps by hosting a react app with a node server. See how server side and client side rendering work together with Remix.

Explore hosting a React app with a Node.js server, serve the index.html and bundle.js from dist, and compare static hosting vs server-side rendering for faster initial loading.

Learn how server side rendering renders React components on the server to produce html markup, generating faster load times and better SEO, while client side rendering handles interactions.

Combine server side rendering and client side rendering with hydration to attach interactivity, and Remix framework offers a solution for complex routing and data fetching in this hybrid approach.

Explore how Remix unifies server-side and client-side rendering, with built-in routing, loader and action data handling, file-based routing, and code-splitting for fast, maintainable full-stack apps.

Kick off remix v2 by creating both typescript and javascript apps, explore the default project structure, and review the built-in code to establish the base for future full-stack ai lessons.

Create a Remix app from scratch by using Create Remix, install dependencies, and explore project structure (app, public, entry files, tsconfig.json) while running a dev server with hot module replacement.

Explore the Remix v2 project structure, including routes, the root route, the public folder, and the entry client and server files, with hydration and server-side rendering.

Explore the routing concepts in a Remix application, including root routes, nested routes, layout sharing, pathless routes, dynamic and optional segment routes, splat routes, API routes, and resource routes.

Explore Remix routing, blending server-side and client-side routing with a routes folder and file-based routes (js, jsx, ts, tsx), including root and demo UI routes and API routes.

Explore how the root route in remix v2 acts as the app scaffold, exporting a component that renders the full html tree and wraps all child routes.

Learn how to implement nested routes in Remix v2 with layout sharing, pathless routes, and dot notation; use outlet for child views and trailing underscores to control layout sharing.

Explore dynamic and optional segments in remix v2, learn to capture slug and other URL data with loader functions and params, and render language-aware routes using optional segments.

Explore splat routes in Remix v2, using fixed URL parts with dynamic segments to render category-specific posts, and learn how to access dynamic params via a loader.

Explore resource routes in Remix, where every route serves as both UI and API, using loader functions and data loading to render UI or deliver JSON, PDFs, or webhooks.

Discover how navigation works in Remix, covering the link component, nav links, and programmatic navigation for building full-stack ai apps.

Explore how Remix link component enables client-side navigation with the use location hook, passing state, prefetching, and replace behavior, and compare it to traditional anchor tags for faster page transitions.

Explore how Remix v2 nav links wrap a link to manage active and pending states, style via CSS or the style prop, and enable a navbar with programmatic navigation.

Learn to perform programmatic navigation in a Remix app with the useNavigate hook, navigate to posts with path, search, and hash, and move backward or forward in the browser history.

Learn how meta tags work in Remix and apply a local stylesheet to style pages. Add custom fonts and use Tailwind CSS to accelerate styling with a CSS library.

Learn how to configure meta tags in Remix v2 to control page titles, descriptions, open graph data, viewport, and charset using the meta function.

Style a Remix app with a local stylesheet by creating and importing a CSS file, then apply CSS classes to blog posts, navigation, and dates.

Learn how to add custom fonts to a remix app by creating a header component named brand, importing the Pacifio font in style.css, and applying it to the brand class.

Master styling Remix apps with css libraries like bootstrap, using both cdn link and import methods, and learn how import order affects customization, className usage, and bootstrap-based user interface components.

Learn data mutation in Remix v2, covering loaders, actions, pending and optimistic UI, and fetchers; load data in routes, intercept submissions, and handle forms with validation.

Export an async loader on the remix root to fetch data from a database or API and render the page using server-side data via remix's json helper.

Learn to load data into Remix v2 components by using the useLoaderData hook to access loader-returned data, illustrated with a posts list loaded from a JSON file.

Adjust the project to enrich blog data, introduce user id, author, and slug fields, and implement a single post page using the peacocks classless CSS library for Pico CSS styling.

Explore loading data in nested routes with Remix v2 using a parent posts route, a loader to fetch a post by slug from data.json, and rendering with outlet and useLoaderData.

Share loader data across routes in Remix v2 by loading it in a parent route and accessing it with the useMatches hook, enabling reuse for index and single post pages.

Learn how to build a remix form for creating posts, define a post method and an action to process request.formData, and return a response or redirect after submission.

Master action method and useActionData hook: learn how Remix handles non-get requests on the root, returns server data, and enables client-side access for server-side validation and form submission.

Compare the Remix form component with traditional HTML forms, using fetch-based submissions to preserve context and control navigation with Remix props like action, method, and reload document.

Explains how submitting forms in nested remix routes calls the action method of the rendering route or current route, depending on remix form versus html form, and how loaders run.

Implement server-side form validation in remix with the form component and useActionData to surface field-level errors, ensuring a single source of truth on the server and protection against client-side tampering.

Explore pending UI concepts—busy indicators, optimistic UI, and skeleton fallbacks—that improve perceived performance during network requests. Use remix navigation to show a spinner and hide the submit button during submission.

Add a blog comment feature using optimistic UI in a Remix v2 full-stack artificial intelligence apps course, building a comments component, form, and server-side submission with a JSON store.

Master optimistic UI by immediately updating the UI after user actions, then validating with the server and rolling back on error to sustain a responsive experience in a blog app.

Learn to submit forms programmatically using the Remix useSubmit hook, enabling background auto save, real-time validations, and API key or secret submissions without user interaction.

Explore using the fetcher hook to interact with the server without navigation, and compare fetcher forms to the form component while noting fetcher.data and fetcher.load.

Master handling multiple and concurrent form submissions in Remix v2 by differentiating forms with a shared action, updating a fruits array, and managing loading states via navigation.

Explore concurrent submissions in remix by using fetcher and the fetcher form component to process multiple posts in parallel, overcoming the html form singleton limitation and showing real-time background updates.

Access URL query parameters in a Remix loader by parsing the request URL with a URL object and using searchParams.get to retrieve values like user id and user name.

Explore remix v2 error handling with its built-in mechanisms, default components, and strategies for handling errors thrown and error responses, including nested routes.

This Remix course teaches you to implement error handling with route-specific error boundaries, catch loader and action errors on the server or client, and customize the error UI.

Learn to use error boundaries in Remix v2 to distinguish error thrown from rendering versus error responses, using is route error response and customizing action and loader errors.

Implement per-route error boundaries in Remix v2 to isolate errors in nested routes, allowing child routes to render while the root boundary handles failures.

Set up and connect a database to your Remix app using ORM, migrate posts and comments from file system to the database, and enable routes to load and post data.

Set up a SQLite database in a Remix app using Prisma, define user, post, and comment models, and seed initial data for testing.

Load posts from a SQLite database using Prisma, display them in a post list and a single post, and optimize queries by loading user and comments only when needed.

Learn to insert posts in a remix app with prisma: create a post query, map title, content, and slug to the schema, handle errors, and save to the database.

Learn to create comments in a remix app with prisma, including user id, post id, post slug, and body, plus optimistic UI and loader and action data synchronization.

Learn to edit a post in a full-stack ai app by loading the post with a dynamic id and updating title and content via a form and action.

List a user's posts with a loader, then delete posts via a fetcher-based action, handling foreign key constraints by removing related comments first.

Explore authentication in Remix by building a signup form, creating and using cookie-based sessions to log in, protect admin routes, and log out.

Learn how to implement a signup flow with a toggleable login/signup form in a Remix app, create a new user in the database using Prisma, and handle form submission.

Learn how sessions pair cookies with server-side storage to authenticate users and serve protected content. See a Node.js example that creates, stores, and clears sessions for login and logout.

Learn to implement login and signup in Remix with per-route sessions, using cookie session storage, get and commit session, and database-backed user data.

Protect routes with session authentication using a loader, cookies, and get session to restrict access and redirect non-logged-in users to the home page.

Implement logout by creating a logout route, retrieving and destroying the cookie session, then redirecting to login and showing a logout link when the user is logged in.

Learn to implement a custom session storage in Remix v2 using a database, with Prisma, handling create, read, update, and delete, and migrate from cookie to database storage for authentication.