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
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
7 ай бұрын
Thank you.
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
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?
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 ❤
Great tutorial. Thanks free code camp and coding after thirty.
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
6 ай бұрын
Thank you. I'm glad that you enjoyed the tutorial.
Wooooo Paul! LETS GOOOOO!!!!
@CodingAfterThirty
7 ай бұрын
Thank you. How have you been. What have you been up to?
@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
Thanks
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.
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!
Can you guys do a course for Ocaml? Haven't found any extensive tutorials yet so I think you guys would be best.
@rishiraj2548
7 ай бұрын
🎉
Noiceeeeeeeeeee 🤩
@CodingAfterThirty
7 ай бұрын
Thank you, you are awesome.
What's the name of extension younare using to show error and logs in vs code
16:17 "typeof" not "tyoeof". Keep up the good work ❤
@CodingAfterThirty
7 ай бұрын
Thanks. Lol, spelling is something that I alway mess up. 🙂
So remix is a react framework Does that mean that it's a framework of a framework?
@soumadip_skyy_banerjee
7 ай бұрын
Kinda 😅
@ree2453
7 ай бұрын
Yeah they're creating useless stuff just for the sake of it, so they could brag "I created this"
@marcossouzajr1711
7 ай бұрын
or react is a library?
@immanuelsuleiman7550
7 ай бұрын
@@marcossouzajr1711 ahh. Got it
@jernejdroljc8858
7 ай бұрын
React is a library, Remix is a framework (like Next.js is a framework as well)
Remix! Thanks!
@CodingAfterThirty
7 ай бұрын
Thank you.
❤
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?
Love the video! Also random question what theme are you using in VS code?
@be3turas
2 ай бұрын
Never mind figured it out
@michaele2826
2 ай бұрын
Which one is it?@@be3turas
Kyle brutha I love you
🎉 please include deployment section
@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
4 ай бұрын
Is there an update on this one? Thanks
A question, this is not same remix that is used for solidity? Im not really good at all this, so dont judge
@CodingAfterThirty
7 ай бұрын
Yes, it is different.
@ST-tf4sq
7 ай бұрын
@@CodingAfterThirtyThanks man
Just finish the video. Not sure if this framework is needed though
@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.
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 } } ] } },
1:03 Its backed by shopify not spotify
16:52 What is that extension that displays the console logged values in the editor? Doesn't look like Quokka.
@yodkwtf
7 ай бұрын
It is Console Ninja
@dmsnm
7 ай бұрын
@@yodkwtf Thanks
@CodingAfterThirty
7 ай бұрын
It is console ninja. I think by the same company.
Hi there 👋
@CodingAfterThirty
7 ай бұрын
Hello.
Shopify or Spotify?
@bambihehe9210
3 ай бұрын
Spotify
First💪
It is backed by Shopify
not a fan of strapi, but remix is nice
@CodingAfterThirty
6 ай бұрын
Just wondering what specific things you don't like about Strapi?
@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
6 ай бұрын
That is understandable. Laravel is really nice too@@mnchabel8402
Yet another framework? How many is too many? It's absurd
@marcossouzajr1711
7 ай бұрын
Remix was created in Sep, 2021
@CodingAfterThirty
7 ай бұрын
Lol. I love variety.
@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
7 ай бұрын
@@milomalaysia7034 Let's revisit this "framework" in a year or two and see where it goes, ok ? :)
@knowledgedose1956
7 ай бұрын
it's not "yet another one", it is mentioned in react docs along with Nextjs.