Scribd
Upload
73 views3 pages

Use Remix and Strapi To Create Full Stack Apps

Uploaded by

AB
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
73 views3 pages

Use Remix and Strapi To Create Full Stack Apps

Uploaded by

AB
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Use Remix and Strapi to Create Full Stack Apps

freecodecamp.org/news/use-remix-and-strapi-to-create-full-stack-apps

Beau Carnes December 18, 2023

December 18, 2023 / #Remix


Beau Carnes

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.

1/3
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

2/3
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).

Watch Video At: https://youtu.be/5yIivwrvH6w

Beau Carnes
I'm a teacher and developer with freeCodeCamp.org. I run the
freeCodeCamp.org YouTube channel.

If this article was helpful, .

Learn to code for free. freeCodeCamp's open source curriculum has helped more than
40,000 people get jobs as developers. Get started

3/3

You might also like