Remix.js - The Practical Guide
Learn how to build rich & highly reactive fullstack React applications with Remix.
Watch Promo Enroll in Course
Remix is a strongly growing React framework that (vastly!) simplifies the process of building rich, interactive fullstack React applications and websites.
With Remix, backend and frontend code work seamlessly together and as a developer, you don't have to worry about managing multiple, separated projects or codebases. Instead, you implement your backend logic next to your frontend code and let Remix handle the rest.
In this course, you will learn how to build fullstack React.js applications and websites with Remix from the ground up. All key concepts are covered in-depth and taught step-by-step, slowing building up on each other. By the end of this course you will therefore be able to build your own Remix fullstack websites!
As part of this course, you will build two major demo projects, including an "Expenses Management Website" where users can signup, manage their expenses and view expense analytics. As part of this project, you will learn how to perform CRUD (Create, Read, Update, Delete) operations with Remix and how to connect your React app to a database.
In general, in this course, the following concepts are covered in great detail:
- What Remix is & how it works
- Remix vs NextJS
- Adding routes and pages
- Working with nested routes
- Managing (potentially nested) layouts
- Combining pages with non-page components
- Styling pages and components
- Fetching data (also for nested pages)
- Submitting data - via forms & programmatically
- Handling data submissions on the backend
- Storing data in databases & fetching data from databases
- Validating user input
- Authenticating users (signup & login)
- Managing sessions via cookies
- Optimizing Remix applications
- Deploying Remix applications
- And much more!
8+
hours
100+
lessons
Course Curriculum
-
StartModule Introduction (1:43)
-
StartMust-read: Creating a Remix v1 Project
-
StartCreating a Remix Project (3:35)
-
StartAnalyzing the Created Project (4:02)
-
StartGetting Started with File-based Routing (3:46)
-
StartAdding Links & Building a SPA (Single-Page Application) (5:11)
-
StartOnwards to a Better Project (3:06)
-
StartStyling Pages & Understanding the Root Route (9:05)
-
StartSurfacing Component Styles (6:44)
-
StartStyling Active Links via NavLink (3:02)
-
StartHow Form Submissions Work (3:57)
-
StartServer-side Form Handling via action() (3:23)
-
StartAdding Backend Code & Redirecting (9:16)
-
StartFetching Page Data via loader() (4:59)
-
StartReturning & Using Fetched Data (7:51)
-
StartFrom to (4:49)
-
StartProviding User Feedback via useNavigation (3:59)
-
StartValidating Input & Returning Data in action() (6:05)
-
StartError Handling via ErrorBoundary (6:52)
-
StartHandling Error Responses via CatchBoundary (7:34)
-
StartAdding Dynamic Routes & Dot-delimited Routes (7:53)
-
StartFetching Data for Dynamic Routes (4:07)
-
StartAnother CatchBoundary Example (1:41)
-
StartSetting Page Metadata (4:31)
-
StartSummary (2:17)
-
StartModule Introduction (1:33)
-
StartWhat We'll Build - A Demo (2:04)
-
StartProject Planning & Creation (3:54)
-
StartCreating Project Routes - A Refresher (10:12)
-
StartNested Paths - An Alternative Approach (5:47)
-
StartLayout Routes (7:54)
-
StartAdding Components & Styling (6:38)
-
StartUsing Custom Fonts
-
StartWorking on More Routes (10:51)
-
StartMarketing Pages & Static Images (4:04)
-
StartLeveraging Layouts (2:41)
-
StartRendering a Modal Page (Overlay Page) (3:30)
-
StartAdding Links (5:13)
-
StartPaths: Absolute vs Relative (2:34)
-
StartNavigating Programmatically (3:33)
-
StartAdding NavLinks (3:32)
-
StartIntroducing Pathless Layout Routes (8:56)
-
StartDoing More with Pathless Layout Routes (3:41)
-
StartIntroducing Resource Routes (3:39)
-
StartUnderstanding Splat Routes (5:31)
-
StartWorking with URL Search Parameters (Query Parameters) (9:29)
-
StartAdding More Expense-related Links (3:42)
-
StartModule Summary (1:52)
Course Prerequisites
Basic React knowledge is required
NO prior Remix knowledge is required
NO advanced React knowledge is required
All pre-requisites are covered by courses in our "Academind Pro" Membership.
Don't take my word for it - here's what other students are saying.
Ira Scott Herman
The more I go through this course, the more incredible I think it is! The course is well organized and practical knowledge. The instructor uses best practices, and is consistently updating the course so I just keep getting more and more value from my initial purchase.
J. Scott Cromie
I feel like I learned a ton and feel like I can build custom apps to store on the flat thingy I keep in my pocket! Thanks for the course. It's great. Highly recommended.
Rachael Bouissey
As always, great teacher. I got a lot out of the React course and React Native is starting out just as helpful. Never would have made it through bootcamp without Maximillian!
30 Day Money Back Guarantee - No Questions Asked!
Our courses helped thousands of students learn something new and improve their lives.
We're so convinced by our course quality that we guarantee your success and provide a full refund within the first 30 days if you're not happy with the course.
Your Instructor
As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enable me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 2,500,000 students worldwide as well as a successful YouTube channel with 900.000 subscribers is the best proof for that.
The most rewarding experience for me is to see how people find new, better jobs, build awesome web applications, work on amazing projects or simply enjoy their hobby with the help of my content.
That's why, together with Manuel Lorenz, I founded Academind to offer the best possible learning experience and to share the pleasure of learning with our students.
Frequently Asked Questions
Join 3037 happy students!
Single-Course License
Full access to "Remix.js - The Practical Guide"
$69
Access to this course only.
This is a one-time payment that grants access to this course only, not to any other courses.
Academind Pro Membership
Unlimited access to this and all other current & future courses!
$25/month
Cancel Anytime!
This is a recurring payment, charged automatically on a monthly basis. You can cancel anytime from inside your user profile to avoid being charged again once your billing cycle ends. For more information, please contact Academind.