Remix and Strapi Crash Course – Full Stack Development

Dive into a comprehensive tutorial on building full-stack applications using Remix and Strapi. Learn to create dynamic front-end interfaces with Remix, a modern React framework, and integrate Strapi, an open-source Headless CMS, for efficient content management. Explore key concepts including setting up projects, creating routes, implementing CRUD operations, form validation with Zod, error handling, and advanced features like search functionality and programmatic navigation. Follow along with practical examples, from basic setup to advanced techniques like using the useFetcher hook and throwing errors in Remix. By the end of this 2-hour 18-minute course, gain the skills to build robust, full-stack applications and understand where to find additional help for your development journey.

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