Remix and Strapi Crash Course - Full Stack Development
Вставка
- Опубліковано 30 вер 2024
- 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/Pau...
⭐️ 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.freecodeca...
Read hundreds of articles on programming: freecodecamp.o...
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!
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.
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?
1:03 Its backed by shopify not spotify
So remix is a react framework
Does that mean that it's a framework of a framework?
Kinda 😅
Yeah they're creating useless stuff just for the sake of it, so they could brag "I created this"
or react is a library?
@@marcossouzajr1711 ahh. Got it
React is a library, Remix is a framework (like Next.js is a framework as well)
❤
Can you guys do a course for Ocaml? Haven't found any extensive tutorials yet so I think you guys would be best.
🎉
It is backed by Shopify
What's the name of extension younare using to show error and logs in vs code
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.
Thank you. I'm glad that you enjoyed the tutorial.
🎉 please include deployment section
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.
Is there an update on this one? Thanks
Hi there 👋
Hello.
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!
Noiceeeeeeeeeee 🤩
Thank you, you are awesome.
Shopify or Spotify?
Spotify
Thanks
Looks likebits a strapi sponsored strapi tutorial
Great tutorial. Thanks free code camp and coding after thirty.
First💪
wher is ecommerce shop with remix and strapi
Just finish the video. Not sure if this framework is needed though
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.
Kyle brutha I love you
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.
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?
A question, this is not same remix that is used for solidity? Im not really good at all this, so dont judge
Yes, it is different.
@@CodingAfterThirtyThanks man
16:17 "typeof" not "tyoeof". Keep up the good work ❤
Thanks. Lol, spelling is something that I alway mess up. 🙂
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 ❤
Remix! Thanks!
Thank you.
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
}
}
]
}
},
Yet another framework? How many is too many? It's absurd
Remix was created in Sep, 2021
Lol. I love variety.
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.
@@milomalaysia7034 Let's revisit this "framework" in a year or two and see where it goes, ok ? :)
it's not "yet another one", it is mentioned in react docs along with Nextjs.
Wooooo Paul! LETS GOOOOO!!!!
Thank you. How have you been. What have you been up to?
@@CodingAfterThirty building a log collection service atm with a team. its interesting. Using everything from Go, Rust, Svelte, and AWS so its pretty awesome
Love the video! Also random question what theme are you using in VS code?
Never mind figured it out
Which one is it?@@be3turas
not a fan of strapi, but remix is nice
Just wondering what specific things you don't like about Strapi?
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.
That is understandable. Laravel is really nice too@@mnchabel8402
16:52 What is that extension that displays the console logged values in the editor? Doesn't look like Quokka.
It is Console Ninja
@@yodkwtf Thanks
It is console ninja. I think by the same company.