Learn how to build full stack applications using Remix and Strapi in this course. Discover how to create dynamic front-end interfaces with Remix, a modern React framework, and efficiently manage content by integrating Strapi, an open-source Headless CMS. The course covers setting up projects, creating routes, loading data, form validation, navigation, error handling, and more. The teaching method includes practical demonstrations and coding examples. This course is intended for individuals interested in full stack development, React framework, and Headless CMS integration.
Overview
Syllabus
Introduction
Prerequisites
Setting up our project and overview
Root route explained and linking our CSS
Creating your first route and render via outlet
Creating Dynamic Routes in Remix
Setting up contact detail page
Using the loader function to load data
Loading single-user based on id via params
Setting up Strapi, a headless CMS
Strapi Admin overview and creating our first collection type
Fetching all contacts from our Strapi endpoint
Fetching single contact
Adding the ability to add a new contact
Form validation with Zod and Remix
Adding the ability to update contact information
Programmatic navigation using useNavigate hook
Implementing the delete contact functionality
Showing a fallback page when no items are selected
Handling errors in Remix with error boundaries
Implementing mark contact as a favorite
Implementing search with Remix and Strapi filtering
Submitting our form programmatically on input change
Implementing loading state via useNavigation hook
Project review and some improvement
Styling active link in Remix
Using useFetcher hook for form submission
Throwing errors in Remix
Closing thought and where to find hel
Taught by
freeCodeCamp.org
