Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

freeCodeCamp

Remix and Strapi Crash Course – Full Stack Development

via freeCodeCamp

Overview

Google, IBM & Meta Certificates – 40% Off
One Coursera Plus subscription covers most Professional Certificates on Coursera.
Unlock All Certificates
This course builds a full-stack contacts application with Remix and Strapi. It covers routing, data loading, CRUD operations, form validation, search and filtering, navigation, loading states, and error handling.

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

Reviews

Start your review of Remix and Strapi Crash Course – Full Stack Development

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.