Remix and Strapi go together like git merges and zero conflicts - a rare yet delightful occurrence in the world of web development.
We just published a full course on the freeCodeCamp.org YouTube channel that will teach you to create full stack apps with Remix and Strapi. Paul Bratslavsky created this course. Paul is an experienced developer and excellent instructor.
Before diving into the course, it's essential to understand the tools at its core. Remix is a modern React framework that focuses on delivering smooth, user-friendly front-end interfaces. It leverages React's capabilities to enhance web application performance and developer experience. On the other hand, Strapi is a flexible, open-source Headless Content Management System (CMS) that simplifies content management and delivery. Its headless nature allows for more creative freedom in front-end development, making it a perfect match with Remix.
The course is structured to walk learners through both the basics and advanced aspects of using Remix and Strapi in application development. It begins with setting up the project environment and provides an overview of the necessary tools and technologies. From there, it delves into key concepts such as creating and managing routes in Remix, linking CSS for styling, and setting up detailed pages for user interaction.
As the course progresses, it covers more complex topics, including dynamic route creation, data loading techniques, and integrating Strapi as the headless CMS. This integration is crucial for efficient content management and delivery, and learners will gain hands-on experience in setting up and utilizing Strapi within their applications.
The course also emphasizes practical skills like form validation using Zod, implementing programmatic navigation, error handling, and enhancing functionality with features like contact favorites and search capabilities. Towards the end, learners will explore the use of various Remix hooks for form submission and state management, and how to handle errors effectively in a Remix application.
Here are all the sections in this course:
- 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 help
By the end of this course, you will have a solid understanding of building full stack applications with Remix and Strapi, equipped with the skills to implement these technologies in real-world scenarios. Watch the full course on the freeCodeCamp.org YouTube channel (2-hour watch).