> Canonical URL: https://codingcat.dev/podcast/cwcc-0-6-remix-with-kent-c-dodds
# Remix with Kent C. Dodds
🎧 Podcast EpisodeAugust 17, 2022[Remix](/topic/remix)[JavaScript](/topic/javascript)[React](/topic/react)[Node.js](/topic/nodejs)[Angular](/topic/angular)[React Native](/topic/react-native)[Svelte](/topic/svelte)[#Serverless](/topic/serverless)
# Remix with Kent C. Dodds
[@CodingCatDev62.5K / 100K Subscribers Goal](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Subscribe on YouTube→](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Watch on YouTube App ↗](https://www.youtube.com/watch?v=ZWVYJOclIXY&list=UUnKZ8gEb78zXKMi1ns-IQ2g)[Alex Patterson](/author/alex-patterson)[Brittney Postma](/author/brittney-postma)[Kent C. Dodds](/guest/kent-c-dodds)🎧 Listen & Subscribe[Spotify](https://open.spotify.com/episode/6DicyT2od71t6Ljwu0twNw)[Apple](https://podcasts.apple.com/us/podcast/code-with-codingcat-dev-remix-with-kent-c-dodds/id1491655542?i=1000660662769)[YouTube](https://www.youtube.com/watch?v=ZWVYJOclIXY&list=PLUKgAjyG9B0ZhUEXp9eVa7h4L__FDW3uV)[Subscribe on YouTube (62.5K / 100K) →](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Pocket Casts](https://pca.st/episode/0e40a7a8-89ce-4039-98ed-017f7f0136d0)[Castbox](https://castbox.fm/episode/id2508485-id715128390)[Castro](https://castro.fm/episode/6Zt976)[Overcast](https://overcast.fm/itunes1491655542)[RSS](https://anchor.fm/s/115b203c/podcast/rss)
Remix is a full-stack React framework that provides a seamless server and browser runtime for building modern web applications. It leverages distributed systems and native browser features to deliver snappy page loads, instant transitions, and a resilient user experience. Remix is built on top of the Web Fetch API, making it deployable to various environments, including serverless, traditional Node.js, and even non-Node.js environments like Cloudflare Workers.
**Getting Started with Remix**
To get started with Remix, follow the quickstart guide provided in the official documentation:
Copied! 🐾
```
npx create-remix
```
This command will create a new Remix project and install the necessary dependencies. Once the project is created, you can start the development server using the following command:
Copied! 🐾
```
npm run dev
```
The development server will open your browser to the Remix application. You can now start making changes to the code and see the results reflected in the browser immediately.
**Key Features of Remix**
Remix offers several key features that make it a powerful and versatile framework for building modern web applications:
- **Server-side rendering (SSR):** Remix can render React components on the server, providing SEO benefits and faster initial page loads.
- **Client-side rendering (CSR):** Remix also supports CSR, allowing for interactive and dynamic web applications.
- **Data fetching:** Remix provides built-in data fetching capabilities, making it easy to load data from APIs or other sources.
- **Routing:** Remix has a flexible routing system that supports both static and dynamic routes.
- **Forms:** Remix simplifies handling user input and form submissions.
- **Error handling:** Remix provides a robust error handling mechanism for graceful handling of errors and unexpected situations.
**The Epic Stack**
The Epic Stack is a popular architecture for building web applications using Remix, Tailwind CSS, and TypeScript. It combines the strengths of these tools to provide a productive and efficient development experience.
**Kent C. Dodds' Contributions to Remix**
Kent C. Dodds is a renowned developer and educator who has made significant contributions to the development of Remix. He is the creator of React Router, a popular routing library for React applications, and has been a key contributor to Remix's development since its inception.
**Examples of Remix Applications**
Remix has been used to build a variety of web applications, including:
- **Landbot:** A conversational AI platform
- **Vercel:** A cloud platform for deploying and hosting web applications
- **Superview:** A data visualization tool
- **Remix Academy:** An online course platform
**Code Snippets from Remix Documentation**
Here are some code snippets from the Remix documentation that demonstrate the framework's capabilities:
**Fetching data from an API:**
Copied! 🐾
```
import { useFetcher } from '@remix/data';
function MyComponent() {
const { data } = useFetcher('/api/data.json');
if (!data) {
return Loading...;
}
return (
{data.map((item) => (
## {item.title}
{item.description}
))}
);
}
```
**Handling form submissions:**
Copied! 🐾
);
}
" aria-label="Copy code" title="Copy code to clipboard">
```
import { useForm } from '@remix/forms';
function MyForm() {
const { register, handleSubmit } = useForm();
const onSubmit = (values) => {
// Submit the form data to an API or perform other actions
console.log(values);
};
return (
Submit
);
}
```
**Error handling:**
Copied! 🐾
```
import { ErrorBoundary } from '@remix/error-boundary';
function MyComponent() {
return {/* Render your component here */};
}
```
**Advantages of Using Remix**
Remix offers several advantages over other React frameworks:
- **Seamless server and browser runtime:** Remix provides a unified runtime that handles both server-side and client-side rendering, simplifying development and improving performance.
- **Resilient user experience:** Remix's use of distributed systems and native browser features ensures a responsive and reliable user experience, even under heavy load.
- **Deployment flexibility:** Remix can be deployed to various environments, including serverless, traditional Node.js, and non-Node.js
## Shorts
## Resources, Links & Official Documentation
- **Watch on YouTube: ** [Remix with Kent C. Dodds Full Video](https://www.youtube.com/watch?v=ZWVYJOclIXY) (plus [Subscribe to CodingCat.dev](https://www.youtube.com/@CodingCatDev?sub_confirmation=1))
- [**Kent C. Dodds Guest Profile & Episodes on CodingCat.dev**](/guest/kent-c-dodds)
- [**Kent C. Dodds on GitHub**](https://github.com/kentcdodds)
- [**Remix Documentation:**](https://remix.run/docs) Web standards, nested routing, and progressive enhancement
- [**MDN JavaScript Reference:**](https://developer.mozilla.org/en-US/docs/Web/JavaScript) ECMAScript specifications, Web APIs, and runtime fundamentals
- [**React Official Reference:**](https://react.dev/reference/react) Hooks, Server Components, and UI state patterns
## Related CodingCat.dev Tutorials & Podcast Episodes
- [**WebDev Fundamentals | React, Angular, and Vue**](/podcast/webdev-fundamentals-or-react-angular-and-vue): Dive into web development fundamentals with Corbin. Explore frameworks, APIs, and developer education. Purrfect for new and seasoned developers looking to expan...
- [**Expo from a Web Developers View**](/podcast/cwcc-1-expo-react-native): Dive into the seamless world of cross-platform app development as we unravel the magic of React Native with Expo, combining power and simplicity for an unparall...
- [**Speedrun Your App Onto Fly.io**](/podcast/3-22-fly-io-with-dov-alperin): Fly is a platform for running full stack apps and databases close to your users
## Frequently Asked Questions (FAQ)
### What are the main takeaways from Remix with Kent C. Dodds?
Kent C. Dodds walks us through an Epic reveal of Remix. Remix with Kent C Dodds: #codewithcodingcatdev https://codingcat.dev Throughout this podcast, Kent C. Dodds breaks down real-world implementation details for Remix, JavaScript, React so developers can apply these patterns directly in production.
### How do you implement Remix best practices in production?
When adopting Remix and JavaScript in a production stack, start by validating your configuration against the [**Remix Documentation**](https://remix.run/docs) (Web standards, nested routing, and progressive enhancement). Focus on incremental adoption, automated testing, and observability so your team can measure performance and developer velocity improvements at each stage.
### Where can I watch the full Remix with Kent C. Dodds walkthrough and find related code resources?
You can watch the complete video session for [**Remix with Kent C. Dodds**](https://www.youtube.com/watch?v=ZWVYJOclIXY) on the [**CodingCat.dev YouTube channel**](https://www.youtube.com/@CodingCatDev?sub_confirmation=1). For a deeper dive into Remix, check out our related guide: [**WebDev Fundamentals | React, Angular, and Vue**](/podcast/webdev-fundamentals-or-react-angular-and-vue).
## ✏️ Episode Summary
Remix with Kent C Dodds: #codewithcodingcatdev
https://codingcat.dev — Welcome back, perfect peeps, to code with coding cat. That felt weird, didn't it? It did. It's usually perfect.dev. It throws me off every week. Uh, as you can probably tell, we have Keny Dods with us. Hey, Ken. Hello. With the awesome neon remix sign in the background. Somebody told me I need to put it up here, but Oh, yeah. That would be cool. It's harder to It's literally just hanging on the ho...
✏️ Visual Architecture Diagram
## how this episode connects together.
Follow AJ from first principles to production-ready architecture.
Let’s build it!✏️ Visual Diagram: Remix with Kent C. Dodds✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for Remix with Kent C. Dodds: start with Kent C. Dodds, implement Architecture & Patterns, and ship to production.AAA Contrast Verified
## related episodes.
[All Episodes→](/podcasts)[](/course/odin-nodejs-backend-and-getting-hired)November 4, 2026[TypeScript](/topic/typescript)[Node.js](/topic/nodejs)[Cloudflare](/topic/cloudflare)[+1](/course/odin-nodejs-backend-and-getting-hired)
### [The Odin Project 8: Backend APIs (Hono vs. Express), Auth & Getting Hired](/course/odin-nodejs-backend-and-getting-hired)
Build end-to-end typed backend APIs with Hono RPC and Zod, implement secure HTTP-only session cookies and OAuth, and master the 2026 engineering portfolio & system design interview.
[Alex Patterson](/author/alex-patterson)[](/course/remotion-skills-ai-agents)November 4, 2026[TypeScript](/topic/typescript)[#AI & Agents](/topic/ai)[React](/topic/react)
### [Remotion Skills: Teaching AI Agents to Build Videos the Right Way](/course/remotion-skills-ai-agents)
Install and customize remotion-dev/skills so Claude Code, Cursor, and Google Antigravity write deterministic, well-paced React video compositions on the first try.
[Alex Patterson](/author/alex-patterson)