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 ‪@CodingAfterThirty‬
💻 Code: github.com/PaulBratslavsky/fr...
⭐️ 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: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

Пікірлер: 68

  • @tahbibmanzoor9391
    @tahbibmanzoor93917 ай бұрын

    You have no idea how much life you’re saving ❤️ stay blessed man! I learned a lot from you and looking forward to learn more!

  • @CodingAfterThirty

    @CodingAfterThirty

    7 ай бұрын

    Thank you.

  • @CodingAfterThirty
    @CodingAfterThirty7 ай бұрын

    Thank you Free Code Camp for the amazing opportunity. Hope you enjoy the lesson. If you have any questions feel free to add them as an issue here github.com/PaulBratslavsky/freecodecamp-remix-strapi-final/issues. Or you can ask questions are response to this comment. Thank you all again for the love and support.

  • @knowledgedose1956

    @knowledgedose1956

    7 ай бұрын

    hello, thank you for this big tutorial, it's really helpful. i have question though, is it possible to achieve a trpc-like experience in remix, there are 2 packages trpc-remix and remix-trpc, what do you think of them?

  • @bgmieditscy
    @bgmieditscy2 ай бұрын

    Free code camp has been part of my journey & helped in me in my every struggle from learning basics of html to currently struggling with next js & coming here to learn remix. I make a good living now with react & react native but next js was real struggle for me. Now i feel remix is a thing of mine. thank you ❤

  • @mystupidbrain5299
    @mystupidbrain52997 ай бұрын

    Great tutorial. Thanks free code camp and coding after thirty.

  • @jernejdroljc8858
    @jernejdroljc88587 ай бұрын

    Man, I am half-way in - this is a great video! Thanks for producing such content :) Strapi is amazing & Remix way of using native WEB API's is very interesting. Since Shopify is using this as preferred way to built custom storefronts with Hydrogen, it's defo a worthwhile to have Strapi as a CMS then.

  • @CodingAfterThirty

    @CodingAfterThirty

    6 ай бұрын

    Thank you. I'm glad that you enjoyed the tutorial.

  • @endepointe
    @endepointe7 ай бұрын

    Wooooo Paul! LETS GOOOOO!!!!

  • @CodingAfterThirty

    @CodingAfterThirty

    7 ай бұрын

    Thank you. How have you been. What have you been up to?

  • @endepointe

    @endepointe

    7 ай бұрын

    @@CodingAfterThirty building a log collection service atm with a team. its interesting. Using everything from Go, Rust, Svelte, and AWS so its pretty awesome

  • @hardwired89
    @hardwired897 ай бұрын

    Thanks

  • @ricksnackers7283
    @ricksnackers72833 ай бұрын

    Absolutely amazing tutorial! Learned a lot! Thanks Paul @CodingAfterThirty (love all your YT content) and FreeCodeCamp. May I suggest something for a next tutorial? I'd like to know more about database-relations. Most tutorials only use a single database, but using multiple db's remains a bit unknown territory for me (I mainly focussed on frontend development in my career up until now). I'm TRYING to build a booking app for a client (drawing class) where people get assigned to a class (1 each week). If they are unable to get to class they should be able to reschedule their spot (if there is a spot available in another class). Would really like to build it in Strapi/Remix. Dealing with a calendar, dates, multiple db's (students, lessons)... I'm not feeling confident yet.

  • @asadkhantahir2737
    @asadkhantahir27377 ай бұрын

    Hi there, I have a question can you make a tutorial on how to create a website or editing tool like Figma. Can you please tell me what are the logics behind the figma editing buttons? I mean there are customisation options how these are working or we can use a library for that purpose? Looking forward to your reply Thank you!

  • @nicos9937
    @nicos99377 ай бұрын

    Can you guys do a course for Ocaml? Haven't found any extensive tutorials yet so I think you guys would be best.

  • @rishiraj2548

    @rishiraj2548

    7 ай бұрын

    🎉

  • @mecreature
    @mecreature7 ай бұрын

    Noiceeeeeeeeeee 🤩

  • @CodingAfterThirty

    @CodingAfterThirty

    7 ай бұрын

    Thank you, you are awesome.

  • @samiullahsheikh5015
    @samiullahsheikh50153 ай бұрын

    What's the name of extension younare using to show error and logs in vs code

  • @koukiadem
    @koukiadem7 ай бұрын

    16:17 "typeof" not "tyoeof". Keep up the good work ❤

  • @CodingAfterThirty

    @CodingAfterThirty

    7 ай бұрын

    Thanks. Lol, spelling is something that I alway mess up. 🙂

  • @immanuelsuleiman7550
    @immanuelsuleiman75507 ай бұрын

    So remix is a react framework Does that mean that it's a framework of a framework?

  • @soumadip_skyy_banerjee

    @soumadip_skyy_banerjee

    7 ай бұрын

    Kinda 😅

  • @ree2453

    @ree2453

    7 ай бұрын

    Yeah they're creating useless stuff just for the sake of it, so they could brag "I created this"

  • @marcossouzajr1711

    @marcossouzajr1711

    7 ай бұрын

    or react is a library?

  • @immanuelsuleiman7550

    @immanuelsuleiman7550

    7 ай бұрын

    @@marcossouzajr1711 ahh. Got it

  • @jernejdroljc8858

    @jernejdroljc8858

    7 ай бұрын

    React is a library, Remix is a framework (like Next.js is a framework as well)

  • @eleah2665
    @eleah26657 ай бұрын

    Remix! Thanks!

  • @CodingAfterThirty

    @CodingAfterThirty

    7 ай бұрын

    Thank you.

  • @soumadip_skyy_banerjee
    @soumadip_skyy_banerjee7 ай бұрын

  • @teodorazhelyazkova7586
    @teodorazhelyazkova75862 ай бұрын

    I have an issue with console.log from a component. Logs are not displayed in the browser but in the terminal where the server runs. Why is that? I read that in Remix, functions like action run on the server-side and not in the browser but in my case I am trying to log in a component (e.g. ), so why I'm able to see the logged output in the server terminal?

  • @be3turas
    @be3turas2 ай бұрын

    Love the video! Also random question what theme are you using in VS code?

  • @be3turas

    @be3turas

    2 ай бұрын

    Never mind figured it out

  • @michaele2826

    @michaele2826

    2 ай бұрын

    Which one is it?@@be3turas

  • @hellokevin_133
    @hellokevin_1337 ай бұрын

    Kyle brutha I love you

  • @user-qb5ru9pk3i
    @user-qb5ru9pk3i7 ай бұрын

    🎉 please include deployment section

  • @CodingAfterThirty

    @CodingAfterThirty

    7 ай бұрын

    That is a great idea. I will create a follow up and share on my channel. The beauty is that you can host Remix and Strapi pretty much anywhere. I typically use Digital Ocean or Render.

  • @borsaniasushant1

    @borsaniasushant1

    4 ай бұрын

    Is there an update on this one? Thanks

  • @ST-tf4sq
    @ST-tf4sq7 ай бұрын

    A question, this is not same remix that is used for solidity? Im not really good at all this, so dont judge

  • @CodingAfterThirty

    @CodingAfterThirty

    7 ай бұрын

    Yes, it is different.

  • @ST-tf4sq

    @ST-tf4sq

    7 ай бұрын

    ​@@CodingAfterThirtyThanks man

  • @JirayuVijjakajohn
    @JirayuVijjakajohn7 ай бұрын

    Just finish the video. Not sure if this framework is needed though

  • @CodingAfterThirty

    @CodingAfterThirty

    7 ай бұрын

    I think it is good to have options. I like the fact that it is less bloated compared to others. But at the end of the day. I love React. So anything React I approve.

  • @PitchBlackAlex
    @PitchBlackAlex3 ай бұрын

    Hi, sorry for spamming you, but can't find proper content for my question. I have the following scenario: Collection Type called Articles. Each Article has dynamic zone whit repeatable Components (RichText, Accordion and etc.) Each of the components has description field. In the CMS Articles findMany how the filtering should look like to access the Dynamic Zone components? I tried different combinations like: { content: { ["$or"]: [ { description: { "$containsi": searchTerm } }, { components: { [operator]: [ { description: { "$containsi": searchTerm } } ] } },

  • @kishanbsh
    @kishanbsh8 күн бұрын

    1:03 Its backed by shopify not spotify

  • @dmsnm
    @dmsnm7 ай бұрын

    16:52 What is that extension that displays the console logged values in the editor? Doesn't look like Quokka.

  • @yodkwtf

    @yodkwtf

    7 ай бұрын

    It is Console Ninja

  • @dmsnm

    @dmsnm

    7 ай бұрын

    @@yodkwtf Thanks

  • @CodingAfterThirty

    @CodingAfterThirty

    7 ай бұрын

    It is console ninja. I think by the same company.

  • @fifamontage30
    @fifamontage307 ай бұрын

    Hi there 👋

  • @CodingAfterThirty

    @CodingAfterThirty

    7 ай бұрын

    Hello.

  • @jericmontana
    @jericmontana5 ай бұрын

    Shopify or Spotify?

  • @bambihehe9210

    @bambihehe9210

    3 ай бұрын

    Spotify

  • @TTH5972
    @TTH59727 ай бұрын

    First💪

  • @baltaza
    @baltazaАй бұрын

    It is backed by Shopify

  • @mnchabel8402
    @mnchabel84026 ай бұрын

    not a fan of strapi, but remix is nice

  • @CodingAfterThirty

    @CodingAfterThirty

    6 ай бұрын

    Just wondering what specific things you don't like about Strapi?

  • @mnchabel8402

    @mnchabel8402

    6 ай бұрын

    Strapi is a nice cms, I've used it in the past but I prefer to use laravel for backend, so my opinion mainly comes from lack of experience in strapi, nothing personal.

  • @CodingAfterThirty

    @CodingAfterThirty

    6 ай бұрын

    That is understandable. Laravel is really nice too@@mnchabel8402

  • @ree2453
    @ree24537 ай бұрын

    Yet another framework? How many is too many? It's absurd

  • @marcossouzajr1711

    @marcossouzajr1711

    7 ай бұрын

    Remix was created in Sep, 2021

  • @CodingAfterThirty

    @CodingAfterThirty

    7 ай бұрын

    Lol. I love variety.

  • @milomalaysia7034

    @milomalaysia7034

    7 ай бұрын

    I am not saying this to insult you, once a programmer think it is too fast of the evolution of technologies, it is times he or she should consider retirement.

  • @ree2453

    @ree2453

    7 ай бұрын

    @@milomalaysia7034 Let's revisit this "framework" in a year or two and see where it goes, ok ? :)

  • @knowledgedose1956

    @knowledgedose1956

    7 ай бұрын

    it's not "yet another one", it is mentioned in react docs along with Nextjs.

Келесі