Remix and Strapi Crash Course – Full Stack Development

Learn how to use Remix and Strapi to build full stack applications. In this course, you'll discover how to harness the power of Remix, a modern React framework, to create dynamic, user-friendly front-end interfaces. And you'll learn to integrate Strapi, a flexible, open-source Headless CMS, to efficiently manage and deliver your content. ✏️ Course created by @CodingWithPaulBrats 💻 Code: https://github.com/PaulBratslavsky/freecodecamp-remix-strapi-final ❤️ Try interactive JavaScript courses we love, right in your browser: https://scrimba.com/freeCodeCamp-JavaScript (Made possible by a grant from our friends at Scrimba) ⭐️ Contents ⭐️ (0:03:51) Introduction (0:03:51) Prerequisites (0:04:21) Setting up our project and overview (0:07:03) Root route explained and linking our CSS (0:08:22) Creating your first route and render via outlet (0:10:36) Creating Dynamic Routes in Remix (0:14:12) Setting up contact detail page (0:15:08) Using the loader function to load data (0:20:02) Loading single-user based on id via params (0:24:48) Setting up Strapi, a headless CMS (0:27:56) Strapi Admin overview and creating our first collection type (0:33:20) Fetching all contacts from our Strapi endpoint (0:38:17) Fetching single contact (0:40:17) Adding the ability to add a new contact (0:54:41) Form validation with Zod and Remix (1:03:31) Adding the ability to update contact information (1:16:25) Programmatic navigation using useNavigate hook (1:18:15) Implementing the delete contact functionality (1:25:53) Showing a fallback page when no items are selected (1:27:25) Handling errors in Remix with error boundaries (1:34:04) Implementing mark contact as a favorite (1:37:33) Implementing search with Remix and Strapi filtering (1:58:51) Submitting our form programmatically on input change (2:00:39) Implementing loading state via useNavigation hook (2:05:45) Project review and some improvement (2:06:55) Styling active link in Remix (2:09:17) Using useFetcher hook for form submission (2:11:08) Throwing errors in Remix (2:15:41) Closing thought and where to find hel 🎉 Thanks to our Champion and Sponsor supporters: 👾 davthecoder 👾 jedi-or-sith 👾 南宮千影 👾 Agustín Kussrow 👾 Nattira Maneerat 👾 Heather Wcislo 👾 Serhiy Kalinets 👾 Justin Hual 👾 Otis Morgan 👾 Oscar Rahnama -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news