Hi everyone! Unfortunately the ghibli API that we use in this tutorial is no longer hosted for free on heroku (since they started charging) and has been taken down. I’ll link the repo here if you want to spin it up yourself. Otherwise hope you still learn a lot from this video. I’ll make another example app at another time 🙂 github.com/janaipakos/ghibliapi
The routing system was not clicking for me until i saw your video, even the official reps did not do as good a job as you did here so kudos to you sir! 32 minutes in and my brain is full for now lol I'll be back - thank you again!
@@mariusespejo for real, other youtubers all did the jokes demo project that remix made them selves and im sure that its a great tutorial but its kinda lame and overdone. This is a far more interesting cause you came with a new project. You also explained everything very well showing many of the features and strengths of the framework, the Remix team is lucky with to have you putting this out there.
Awesome tutorial man. This just made me realize how incredible and powerful Remix can get. Will look to try it for my own projects. Thanks a million man. Perhaps have another tutorial explaining how to leverage it's server capabilities i.e. db, models, middlewares etc. Thank you sooo much man
This is honestly the MOST informational video (period). So much great information and was really helpful as one of the first Remix videos I found. Keep up the good work @Marius!
Hey bro, it has been 3 weeks without new videos :( Please keep us updated. Your content is the best tbh . You dont know the happiness I get when I get notification that you released new material :)
I appreciate you looking for my posts! I am actually recording today. In general though I only really do this on spare time and don’t have a set schedule yet, but I am looking to produce more consistently
thank you for making it easy for me to understand some of the aspects of Remix that was difficult to wrap my head around before (e.g. nested layout routes).
Subscribed...please continue teaching things like this one... you're incredible..so easy to digest things 💗 Shared it on twitter with official remix and creators 😍
I’ll try when I get a chance but if you think about it, page and filters are really just params to your api request, the same way that the search term is. Meaning you just need to update the url params with those values.. now how you actually filter and paginate server side, once your loader gets that quest, depends on your database solution
I was taking a training on NextJS but I found it really boring (not sure if it was the framework or the teacher) and I found this gem and now I'm a Remix fanboy, thanks to the wonderful teaching skills of mr Espejo
One of the best tutorials I've ever seen. Thank you very much!! I'd like to take a chance to ask you something: If I Have some layout on my root.tsx (e.g. Header), that I placed there so my app/index.tsx would have this header and all their siblings. But if I want some Route to not have this Header? Since app/index.tsx could not use to render the header to the siblings, how can I opt out of the Header on a route without having to remove Header from root.tsx and render Header on each first level route?
Well I assume you could determine from the url if the header should be shown or not? In that case you could maybe create an exception list which prevents the header from being rendered while still being in layout for all descendants. Alternatively you could utilize “flat files” with the “.” in the filename, which is typically how you’d prevent a route from being wrapped by a layout route, although not sure if you can do that with the root
Hey Marius. Great video as per usual! Do you have a discord channel or any other means to connect with you or members of the community? I'd like to have a platform where I could ask questions that I get after watching your vids. Cheers!
Thanks! I don’t currently but a couple folks have asked, I’ll think about it. Feel free to post questions in the comments here for now though, I try my best to respond
Great! Do you respond to comments on your older vids? If yes, I'll go ahead and comment there. I have some questions with regards to Nestjs Interceptors and how they're supposed to be used. Thanks!
Ideally yes, it is a framework for React. I would suggest learning react fundamentals first, have a good understanding of components, hooks, jsx, state and props, at minimum
I suggest sticking with just react until you have enough experience. If you’re building production apps at work, for most people at the moment next is probably the choice, it’s mature and well documented. Remix is definitely great but it’s still very young
Hi Marius. The whole DOM is re-painted on the search. I suppose when only the Films components is wrapped in a layout component , will ensure the whole DOM is not re-painted on every search.Right?
not sure that it necessarily repaints the whole DOM… remember we’re still using react on the client side whose job is to optimize that sort of thing on top of remix’s own optimizations
I would if I knew more about it haha perhaps one day, tbh though I don’t have much time to learn a new language unless it’s something I’d encounter at work
Thank you for your great explanation Marius. I have followed your tutorial, but I got the worst performance when redirecting / going back to another path, the redirection can take about 3 seconds to show page. Do you also have this problem when using the loader with the external API?
I didn’t have that problem but if you are using an external API, the performance will depend on that API’s response time to your own location. Are you using the same ghibli API?
@@mariusespejo Yes, I use the same ghibli API, but when I hit the API from the postman or browser, it's just take around 1 second, the redirection which take the long time, when I click back on the detail movie, it's like stuck on the detail movie around 3 seconds, before it can redirect to the movie list page. I also have followed the remix jokes tutorial, if I use prisma and sqlite, there is no issue
You definitely won’t see an issue with sqlite since that’s local to you, it’s a file on your machine. It honestly sounds like the ghibli api just isn’t performant to your location
Hello. Thanks for this tutorial. It really helps a lot. You make everything too easy 🥳. With that you gain 1 subscriber 🥰. Also, I would like to know which extension are you using for the auto importer and auto suggest? @30:26
No extension! That’s all just typescript and vs code’s support for it. Take a look at tsconfig when you make s typescript remix app and notice the alias paths are defined there
@@mariusespejo Thanks for the reply. Quick question tho. I actually downloaded your code and use it as a template. I used firestore as a db. When I tried to console.log the data it keeps going to terminal. I wanted it to appear in the chrome console tho. Is there any missing settings I need to check?
Well it depends where and when you’re logging, if you’re logging in the loader function that only executes on the server so logs there won’t be on the browser.. remix also I think sever-renders the first load of your app and then it sort of turns into an SPA, at which point logs within components likely will show on the browser. So it’s not a setting, you have to fundamentally understand where your code is actually running
The tailwindcss part is not working for me (gap-4 grid col-4 and all the other basic editing) it gives me No routes matched location /styles error . Can you please help me on how I could move ahead? (I already reinstalled tailwind again)
You can double check against official docs: tailwindcss.com/docs/guides/remix Note that you don’t have to use tailwind, you can use whatever styling solution you want, even just plain old css
@@mariusespejo Thanks for your reply! I looked at the instructions and now realise that it is not tailwind css that is not working but the LinksFunction which gives problem when href: styles, I fixed it !! The video is highly informative and so easy to follow, Thank you so much !!
@@mariusespejo I just realised that the error was not in fact any of the above but the Links Function itself which causes it give routing errors and keeps saying No route styles found and the same happens when I try to get the film title when you click on any of the film , so I am assuming it has to do with remix , any ideas would help ? Thanks again
It looks like remix added built-in support for tailwind (wasn’t there at the time of this video). I suggest following their suggested setup here: remix.run/docs/en/main/guides/styling#tailwind-css
@@mariusespejo Well I really like project based tutorials to update my portfolio like the teamseas clone. Can you make some advanced project with remix? With authentication & authorization. Maybe an e-commerce project or anything better :) Again, Thanks so much for your efforts! Really great teacher
That’s comparing apples to oranges, I’d say if you’re trying to make a traditional rest/graphql api that’s what nest would be for. Remix is specifically a react ssr solution. Perhaps you meant to ask NEXTjs vs remix? That would make a little more sense
Tailwindcss was not working for me. Finally after 2 hour I was able figure it out. If you've install tailwind as devDependencies, add `npx` before your tailwindcss cmd in your build:css & dev:css. E.g. "build:css": "npx tailwindcss -o ./app/tailwind.css" same for the other one.
That doesn’t sound right to me, pay attention to the error logs when it fails, it will give you a clue. But using npx in your script is not the correct solution, that means you’re not using your locally installed version of tailwind which could lead to bigger problems down the road
Hi everyone! Unfortunately the ghibli API that we use in this tutorial is no longer hosted for free on heroku (since they started charging) and has been taken down. I’ll link the repo here if you want to spin it up yourself. Otherwise hope you still learn a lot from this video. I’ll make another example app at another time 🙂
github.com/janaipakos/ghibliapi
The routing system was not clicking for me until i saw your video, even the official reps did not do as good a job as you did here so kudos to you sir! 32 minutes in and my brain is full for now lol I'll be back - thank you again!
Glad to hear! Yeah docs could use some improvement lol
Def contact the remix team, this is one of the best promotion tutorials for them, guaranteed :D
Haha thank you 😄
@@mariusespejo for real, other youtubers all did the jokes demo project that remix made them selves and im sure that its a great tutorial but its kinda lame and overdone. This is a far more interesting cause you came with a new project. You also explained everything very well showing many of the features and strengths of the framework, the Remix team is lucky with to have you putting this out there.
Remix team should add this video to a resources or tutorials section in the official Docs!😀
Awesome tutorial man. This just made me realize how incredible and powerful Remix can get. Will look to try it for my own projects. Thanks a million man. Perhaps have another tutorial explaining how to leverage it's server capabilities i.e. db, models, middlewares etc. Thank you sooo much man
Thanks! Glad you like it, definitely hoping to post more about it as I learn more myself
This is honestly the MOST informational video (period). So much great information and was really helpful as one of the first Remix videos I found. Keep up the good work @Marius!
Thanks for stopping by to comment Evan! Remix is super cool, hoping to learn more
Really nice job, you saved me a lot of time learning remix from docs.
Thanks, the docs could be organized better honestly, hoping it improves over time
I'm using this tutorial to learn Remix. Trying it out for my first web3 project.
Cool, hope it goes well!
Hey bro, it has been 3 weeks without new videos :(
Please keep us updated. Your content is the best tbh . You dont know the happiness I get when I get notification that you released new material :)
I appreciate you looking for my posts! I am actually recording today. In general though I only really do this on spare time and don’t have a set schedule yet, but I am looking to produce more consistently
thank you for making it easy for me to understand some of the aspects of Remix that was difficult to wrap my head around before (e.g. nested layout routes).
You’re welcome! Glad to help
and it transitioned into tailwindcss tutorial which I liked
Subscribed...please continue teaching things like this one... you're incredible..so easy to digest things 💗
Shared it on twitter with official remix and creators 😍
Thank you 🙏
Great crash course, I would love to see a full length tutorial on remix, since its 'new' now that it's free more and more devs will use it.
great Remix tutorial - pacing, vibe, timestamps + code repo.. well done!
Thank you!
Thank you Marius!!! This is perfect -- pacing, info, focus, results -- super digestible but also practical. Taking this and taking off 🌌🛸🙏. Cheers!
Thank you so much for feedback, glad you like it!!
Thank you so much for this tutorial, i really dedicated some time to watch, learn and practice. thanks
You're very welcome! Remix is fantastic, I'm excited to learn more myself
Thank you so much for this tutorial ! Can't w8 to try it out myself.
Thank you sooo much for your great explanation Marius
Can you please do a video on pagination with filters?
I’ll try when I get a chance but if you think about it, page and filters are really just params to your api request, the same way that the search term is. Meaning you just need to update the url params with those values.. now how you actually filter and paginate server side, once your loader gets that quest, depends on your database solution
Awesome! Thank you for great video.
Keep it on going, bro!
🙌
thank you so much bro.
I was taking a training on NextJS but I found it really boring (not sure if it was the framework or the teacher) and I found this gem and now I'm a Remix fanboy, thanks to the wonderful teaching skills of mr Espejo
Next is actually also introducing a lot of the same features as remix so it’ll be interesting to compare the two in the future
@@mariusespejo Looking forward to this!
I did actually recently make a video comparison between next 13’s new nested layouts! Although more things could probably be compared
@@mariusespejo I Loved it! Thank man for your contribution to the dev community.
thanks for your video
Thank you so much for this!!
You’re welcome!
Awesome, thanks!
Can you make Svelte and react-native tutorials?
Definitely when I get a chance!
dont forget Svelte-Native too :)
Thanks for this. BTW what theme do you use ?
Really like your tutorial, thank you. ;)
Thanks!!
thank you Marius because of your explanations , can you make a video about how to implement access token and refresh token with JWT?
Yeah auth with remix is something I’d like to explore, definitely
One of the best tutorials I've ever seen. Thank you very much!!
I'd like to take a chance to ask you something:
If I Have some layout on my root.tsx (e.g. Header), that I placed there so my app/index.tsx would have this header and all their siblings.
But if I want some Route to not have this Header?
Since app/index.tsx could not use to render the header to the siblings,
how can I opt out of the Header on a route without having to remove Header from root.tsx and render Header on each first level route?
Well I assume you could determine from the url if the header should be shown or not? In that case you could maybe create an exception list which prevents the header from being rendered while still being in layout for all descendants. Alternatively you could utilize “flat files” with the “.” in the filename, which is typically how you’d prevent a route from being wrapped by a layout route, although not sure if you can do that with the root
Nice video!. Are you going to try out Remix v2 pre-release? They just announced it on 29th August
I haven’t had a chance to look into it, thanks for the reminder!
🔥
🔥 🔥
U deserve more subs man
Thanks! Well I hope more subs over time but I’m happy with the growth so far
@@mariusespejo I'm rooting for you, if you made a tutorial comparing Next with Remix that would be lit !
Hey man I love your tutorial. What is your theme in vscode?
Hey Marius. Great video as per usual! Do you have a discord channel or any other means to connect with you or members of the community? I'd like to have a platform where I could ask questions that I get after watching your vids. Cheers!
Thanks! I don’t currently but a couple folks have asked, I’ll think about it. Feel free to post questions in the comments here for now though, I try my best to respond
Great! Do you respond to comments on your older vids? If yes, I'll go ahead and comment there. I have some questions with regards to Nestjs Interceptors and how they're supposed to be used. Thanks!
Yeah absolutely! I get notified on comments for all videos
Great tutorial! - What font are you using in vscode?
Thanks! I’m not sure if I used it in this video but currently I use Cascadia Mono, it’s free!
Thanks for this truly amazing crash course!!
I have a question: do I need to know react js already to use it?
Ideally yes, it is a framework for React. I would suggest learning react fundamentals first, have a good understanding of components, hooks, jsx, state and props, at minimum
Hi, what is your theme in vs code, it's beautiful :D
I believe I was using night owl here
I learned React Js , now what's next ??
Remix or Next js ?
I suggest sticking with just react until you have enough experience. If you’re building production apps at work, for most people at the moment next is probably the choice, it’s mature and well documented. Remix is definitely great but it’s still very young
Nice tutorial! Still learning new things about vscode. Can you share the autocomplete extensions you use to import, etc?
You don’t need extensions for that, Vs code does that on its own. Although it works best when you’re writing in TS
@@mariusespejo awesome ty!! 😎 👍
Hi Marius what country you live? Thanks for your awesome work 🙌🏼🔥
Hi there! I’m am currently in the US, how about you?? 😄
@@mariusespejo nice same here Texas 🤠
Hi Marius. The whole DOM is re-painted on the search. I suppose when only the Films components is wrapped in a layout component , will ensure the whole DOM is not re-painted on every search.Right?
not sure that it necessarily repaints the whole DOM… remember we’re still using react on the client side whose job is to optimize that sort of thing on top of remix’s own optimizations
Can you please consider doing some react testing tutorials?
I did actually, check the channel
I really like your VsCode theme. Can you share what theme or settings you are using?
It’s one of the night owl variations, I think night owl dark/black
What extension added the 'red' square next to text-red-500 tailwind class?
If you search for tailwind in the extensions it should be the first and most popular one
Sir how to fetch multiple APIs URLs in the loader function on a single page?
Within the loader itself you should be able to fetch however much data/API you want
Ik that this channel is for js. But can you do some golang videos? I really want to learn it but good quality tutorials are very limited
I would if I knew more about it haha perhaps one day, tbh though I don’t have much time to learn a new language unless it’s something I’d encounter at work
Unfortunately, the Ghibli api on heroku is not longer exists now 😭
Oh man… thanks for the heads up! I’ll make a pinned comment about it
Themes name are u use for vscode please
which is the theme you are using on your editor?
It’s one of the night owl variations I believe night owl dark/black
how can we clear the validation error on input change ?
In react you can always attach an onChange on the input to adjust the behavior while the user is typing
thanks a lot Marius it's really helpful 👌
Thank you for your great explanation Marius. I have followed your tutorial, but I got the worst performance when redirecting / going back to another path, the redirection can take about 3 seconds to show page. Do you also have this problem when using the loader with the external API?
I didn’t have that problem but if you are using an external API, the performance will depend on that API’s response time to your own location. Are you using the same ghibli API?
@@mariusespejo Yes, I use the same ghibli API, but when I hit the API from the postman or browser, it's just take around 1 second, the redirection which take the long time, when I click back on the detail movie, it's like stuck on the detail movie around 3 seconds, before it can redirect to the movie list page. I also have followed the remix jokes tutorial, if I use prisma and sqlite, there is no issue
You definitely won’t see an issue with sqlite since that’s local to you, it’s a file on your machine. It honestly sounds like the ghibli api just isn’t performant to your location
@@mariusespejo It makes sense, thank you for the explanation
Can you make a tutorial for a login page and storing sessions in remix?
I’ll consider it when I get a chance. I know there’s a remix-auth project similar to passport if it’s something you want to explore
Hello. Thanks for this tutorial. It really helps a lot. You make everything too easy 🥳. With that you gain 1 subscriber 🥰. Also, I would like to know which extension are you using for the auto importer and auto suggest? @30:26
No extension! That’s all just typescript and vs code’s support for it. Take a look at tsconfig when you make s typescript remix app and notice the alias paths are defined there
@@mariusespejo Thanks for the reply. Quick question tho. I actually downloaded your code and use it as a template. I used firestore as a db. When I tried to console.log the data it keeps going to terminal. I wanted it to appear in the chrome console tho. Is there any missing settings I need to check?
Well it depends where and when you’re logging, if you’re logging in the loader function that only executes on the server so logs there won’t be on the browser.. remix also I think sever-renders the first load of your app and then it sort of turns into an SPA, at which point logs within components likely will show on the browser. So it’s not a setting, you have to fundamentally understand where your code is actually running
@@mariusespejo Cool. It make sense now. I used to it when you can log the data in the chrome console. Its really on the framework huh. Thanks. 🥳👌
Execelente, gracias por el aporte, una consulta el themee of vscode?
Night owl dark/black
it kinda reminds me like ruby on rails
The tailwindcss part is not working for me (gap-4 grid col-4 and all the other basic editing) it gives me No routes matched location /styles error . Can you please help me on how I could move ahead? (I already reinstalled tailwind again)
You can double check against official docs: tailwindcss.com/docs/guides/remix
Note that you don’t have to use tailwind, you can use whatever styling solution you want, even just plain old css
@@mariusespejo Thanks for your reply! I looked at the instructions and now realise that it is not tailwind css that is not working but the LinksFunction which gives problem when href: styles, I fixed it !!
The video is highly informative and so easy to follow, Thank you so much !!
Glad you figured it out!
@@mariusespejo I just realised that the error was not in fact any of the above but the Links Function itself which causes it give routing errors and keeps saying No route styles found and the same happens when I try to get the film title when you click on any of the film , so I am assuming it has to do with remix , any ideas would help ?
Thanks again
It looks like remix added built-in support for tailwind (wasn’t there at the time of this video). I suggest following their suggested setup here: remix.run/docs/en/main/guides/styling#tailwind-css
Can you make videos more frequently? 😃
Haha I’m trying to! What sorts of topics are you liking from the channel? Any topic suggestions?
@@mariusespejo Well I really like project based tutorials to update my portfolio like the teamseas clone.
Can you make some advanced project with remix? With authentication & authorization. Maybe an e-commerce project or anything better :)
Again, Thanks so much for your efforts! Really great teacher
Nestjs vs Remix?
That’s comparing apples to oranges, I’d say if you’re trying to make a traditional rest/graphql api that’s what nest would be for. Remix is specifically a react ssr solution. Perhaps you meant to ask NEXTjs vs remix? That would make a little more sense
59:00
Tailwindcss was not working for me. Finally after 2 hour I was able figure it out. If you've install tailwind as devDependencies, add `npx` before your tailwindcss cmd in your build:css & dev:css. E.g. "build:css": "npx tailwindcss -o ./app/tailwind.css" same for the other one.
That doesn’t sound right to me, pay attention to the error logs when it fails, it will give you a clue. But using npx in your script is not the correct solution, that means you’re not using your locally installed version of tailwind which could lead to bigger problems down the road
@@mariusespejo yeah I just found out I npm installed tailwind instead of tailwindcss
Cool, glad you figured it out!