🔴 Learning TanStack

Black. Hey. Hey. Yeah. Ah. One, one, hey, what's up beautiful PHP people? How everyone is feeling today? Excited to do another live stream today and today will be a learning live stream. We are going to dive into the 10 stack which is something I've been you know I haven't actually tried this thing. You know there's a lot of buzz on social media about this 10 stack situation but excited about this. Damasur is saying hello from UTC plus 8. Where are you from dude? Veltics official. What's up dude? Nice to see you. Alexandra what's up dude? Nice to see you. What's up everyone? It's Friday. Beautiful weekend ahead of us. Beautiful weekend family and hopefully you guys are going to have a good time during the weekend. But yeah today I'm going to dive into the 10 stock. I'm very excited about today's live stream chat. Like actually insanely excited. So this is this is a thing that a lot of people talk about like on social media about how good is a tent stack and blah blah blah blah blah blah. I have no idea what a tan stack is. I don't know if it's like a full stack framework for example. You know I don't know if it'll give me access to things like caching databases you know kind of all this deal that Laravel does for example. I don't know where where where and how do I deploy even a tenstack application. So, you know, I will be discovering pretty much everything you with you guys today. Okay. So, what do I have right here? I have my Twitter profile account. By the way, we just released POW PHP. Okay, that's out and hopefully you guys are going to try it out uh when you have the time. It's basically agent optimized output for PHP testing tools. It It is really awesome. Okay, so if you guys haven't checked it out, go check that out like instantly. That's the video, by the way. I have a video just talking about this situation. Here we go. Here we go. Here we go. going to send you the link and just make sure you check this out. All right, this is absolutely awesome. Long time no see. What's up, dude? How you doing, Maltroy? Nice to see you. Okay, so what we have and today today's live stream will be basically about the 10 stack. So, let's start with understanding a little bit. How many of you have tried the tent stack? Does any of you have tried the ten stack? Type yes if you have tried the ten stack before. Type no if you haven't. I know it's popular. I know a lot of people are using it. I can already see by the way by just looking at this that a lot of this stuff is still on alpha. It's still like in beta you know so I don't know who is maintaining this stuff. I don't know how popular it is. I don't have no idea. A lot of partners though a lot of companies like Code Rabbit Cloudflare like supporting this work. Um but uh but yeah. All right let's see what we have. UN PT is saying hello Nuno. How you doing? John Sugar is saying Nuno what's up dude? Nice to see you on PT. No no no no no no. A lot of nos everywhere literally which is good. Veltics officially say I I tried 10 stack table with inertia GS. Okay. Well, that's interesting. So, meaning that you can combine uh ten stack with inertia or even with Laravel. I thought it would be a that's something we need to understand today literally like if this is like a full stack framework or it's just a React components. I don't even know if it's a React thing. So, we're going to dive into all of that. All right. Let's actually go to Cloud Code and let's open this project. I have like literally an empty an empty folder here like literally nothing. I'm going to open this with cloth code and um you know let's literally try to understand uh or learn tan stack with cloth code. Okay, I always forget the flag thing. Skip dangerous permissions. Here we go. Let's actually run this real quick. Okay, explain me. Explain me what uh the t How do I even type this? I don't even know. Oh, here we go. Okay. Is uh for Laravel developer for for someone who knows what is Laravel and um have worked with inertia and react. Okay. So, I'm going to just literally ask cloth code to tell me what is tenstack for you know for a lot of perspective dude. You know what I mean? Let's read the chat a little bit. Uh John Sugar is saying the following. Nuno, did you prepare yourself for the mi for the misery of using JavaScript today? You know, JavaScript is also good. You know, there is a lot of people, you know, especially us that are biased a little bit uh by having a very good ecosystem, which is Lafell. Um you know, pretty sure they're also good in their own thinking. You know, Chris is saying the following. Let's see something I've never used. Oh yeah, baby. Oh yeah, Veltics officially is saying the following. Um they offer React in Chhatzienne. Nice, nice, nice, nice, nice, nice. Stream on bank day. Oh, thank you. Thank you. Yeah, I don't actually take the day off. Uh you know in Portugal uh you don't work this Friday, but I actually work on this Friday. I worked and I and I'm streaming right now. Okay, let's try to see what cloud code is telling us. Tenstack is a collection of Atlas framework agnostic libraries for building modern UIs. This is what matters to you. Tentax query. 10stack query is a formally react query. This is a big one. Uh think of it as a smarter way of handling server state in react. Uh what you currently do with inertia is use form in use page and manual fetch calls. Oh are you telling me that 10 stack query it's literally the version our own version of inertia with use form and use page and etc. So with inertia your flow is lavl controller then you just call inertia render and the inertia render you just pass your react props. Yeah that's just expected exactly what I do with ten stack query your react components fetch data themselves. So react component that does that triggers a API request uh which goes to a lot of LGS endpoint and you just basically uh get the cached result. It gives you automatic caching, background refing, stale with uh while uh revalidating, optimistic updates and retry logic. All that stuff you have to do manually if you ever moved beyond inertia paste model. Oh, I feel you. Okay. It's like a smart HTTP client on the front end that behaves like Laval's caching layer. It store responses, knows when the data is stale and refreshes with and behind the scenes. Okay, so that's 10 stack query. We also have the ten stack router which is a client signed router with type- safe routes building data loading and search param validation. Okay. Okay. Meaning that lavl would become pure API no inertia render whatsoever. Interesting. Okay. Yeah. I'm kind of hoping that we can build a tenstack app and without having to just build a laval behind the scenes, you know. Let's see if we can do that today cuz we have 10 stack router meaning that potentially from here we can just do everything. You know what I mean? You know what I mean? GTC. Hey dude, how you doing? Nice to see you. Nice to see you. Jen Sugar is saying the following. I am inertia view enjoyer. So just kidding. I know dude. I'm also like inertia react dude you know. So probably a lot of the stuff we are going to learn today doesn't even make any sense to learn if I'm honest. Okay by the way shut if you just arrived. My name is Nuno PHP and Laravel developer streaming pretty much every Monday, Wednesday and Friday. If you enjoy my work, go all the way down, subscribe my channel, blah blah blah blah blah. Let's also say thanks to our sponsors, Redberry International for being the best digital agency to work with Laravel and V.JS. They're absolutely awesome. Check them out. Redberry. International. We also are supported by SER API, which is literally Google search as API. So, if you basically want to have or use Google and you have this JSON API endpoint, they're absolutely awesome. Check them out. serapi.com, Mailtrap, of course, they used to be this local email solution, but now they also support deliver emails in production. Check them out if you haven't checked already. Mailtrap.io. Jet Brains, the company behind the best editor in the world, PHPtorm. They also have developed recently this thing called a Jet Brains Air, which is literally the Aentic development editor. They're absolutely awesome as well. Jet Brains is dope, and I'm going to actually be the host of PHP verse coming uh soon this year. Titan.com, a company who builds and rescue web apps in development teams. They're awesome with Laravel React and more. They also wrote this book, Laravel up and running, which is absolutely awesome. Check them out. Red code rabbit.ai if you want to have some nice code reviews through AI and you have this nice pull request with nice sequence diagrams. Check them out. They're awesome. Code rabbit.ai. And finally, that's it. Huge thanks to our sponsors. Everyone typing W sponsors. Yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes. Devilly jet brains. Oh yeah, baby. Check the Axis. Uh yeah, I I saw the Axis drama and it's absolutely crazy. The way the the core maintainer got act is even more insane, by the way. Okay, chat. Uh I want to kind of understand the following. Can I create a 10 stack application without Laravel? like just a blog for example. Okay, let's just ask this. Okay, cuz the goal absolutely you can use a 10 stack start. Okay, 10 stack start. Okay, let's see what this is. This is their full stack framework. Okay, without any backend framework how it works. You just basically combine 10 stack router, server functions and SSR uh all in. Okay, cool, cool, cool. Good stuff. I want to kind of go to the documentation to see if there is any create project kind of thing. Okay. So, let's go here into where do we Oh, it's literally the first one. 10 stack start full stack framework powered by 10 stack blah blah blah blah blah blah blah blah blah blah. Try it in 60 seconds. Yeah, let's do it. npx 10 stack latest create. Okay, this is the first thing we have to do. [ __ ] Okay. Okay. So, let's go to the terminal. Let's actually open a new tab. Let's go back and let's just type uh npx 10stack client latest create and then the app name will be called my to-do app. Well, actually let's build a blog. My blog. Okay. Something truly simple. Uh so this will install the 10 stack CLI. Yes. Yes. Yes. Yes. Yes. I want the 10 stack CLI. Yes. Yes. Noo. Have you ever tried codeex? Um I have tried codeex outside of a cloud code. So I've tried it directly using um the codeex CLI. I think they have one. So that was it. That was it. Why not try spvelt or angular? So angular I will I don't think I will ever try angular again in my life. I am too traumat traumatized by the past. Uh spelt I have given it a try. The market is not there at the minute you know like people do react stuff notelt stuff. Okay so I just have to dive into my blog. All right cool stuff. And then I just have to type npm rundev. Okay, it's serving. It's running. And I think I just have to click on this link right here. So let's just copy this and just open it. Nice, nice, nice, nice, nice, nice. So here we have an app. By the way, I just noticed that this is using the old version of VIT. This is VIT 7 and we are already on VIT 8, I think. Void Zero has launched a new void framework to build uh full stack apps. Looks awesome. Uh where is that by the way? Can you send me the link or tell me where to search for that? Oh, there is a plugin to use codecs uh on cloud CLI. Awesome. Which browser? That's Safari, dude. How you doing, Matos? Nice to see you here. Nice to see you here. Shout this Friday, man. I'm so happy. Honestly, today I have a very productive day at work. Do you guys want to know what I'm working on at the minute? It might not actually end up being anything. So, you know, don't actually believe on me when I'm telling you this, but I'm currently working on this thing called it uh past plugin AI. So, I'm working on it like on this part on this thing I call at we have something called it Friday frontier which basically explores stuff and today I've explored this thing called it pass plugin AI and potentially will be awesome. I don't know yet, but what allows you to do is like use bronzer testing behind the scenes automatically through AI and it will be awesome. Okay, hopefully hopefully hopefully hopefully I don't know yet. I don't know yet, but it's what I have done today. What do you guys have? What do you guys have done this week? Does any of you got productive today? Let me know in the chat. What are you guys working on at the minute? Will you try Adonis GS at some point? I don't think I will, dude. You know, in order to have what I what I have with Adonis GS, I just keep using Laravel. You know what I mean? Doesn't make any sense. At least for me, you know what I mean? Why did you actually use Adonis Adonisjs? It doesn't make sense for me. You know what I mean? Because I can literally have all of that in Laravel and keep using PHP. You know what you working on? What you working on, dude? I'm learning ten stack. You know, we literally just uh started from a template. So, this is like the the template thing. So to quick start just edit the the routes index.ts to customize the homepage update the source components adder.txt in the footer blah blah blah blah. Okay. Okay. So if I go here, let's actually open this on Sublime Text real quick. Let's do this. Let's actually We can close this off already. Bam. We don't need this. Uh what do I need to do? I need to do this. I want to open this on Sublime Text real quick. Okay, what do we have? We have a 10 stack. We have a VS Code. We have node modules. We have a public folder. We have source. And this is like the React the the router.tx uh stuff. Okay. What else we have? Hey family. How you doing? Native PHP. Why don't you use the Z editor chat? That's it. Today we are trying the Z editor for the win. here. I'm tireding of you guys telling me that [ __ ] So, we are going to [ __ ] use this today. That's it. Z editor downloading. Yes, sir. It's time to try it out. It's time to try Z editor. Honestly, you guys keep talking to me about that. So, that's it. Z editor for the win. Where do I have that? Download it. Yes. Open it. Let's do it. Let's do it. Yes, I agree the terms of services. Yes. Yes. Install virus. Yeah. Let's go. Oh yeah. Moving on. Bam. It's done. Open it. Open it. Open it. Where do I where I Oh, here. Right. Right here. Okay. Open it. And now I'm going to share the screen again. One second. One second. One second. On boarding. Let me just open the project. Uh work project stream. Almost almost chat. I'm almost ready. My blog. Yes. Okay. Let's share the screen again. Chad Zeta is better. We're about to see if Zed is better, dude. You know, you know what I mean? All right. So, I want to open the Z editor. Where is that? Here we go. So, we are on Z chat. Here we go. We are on Zed. Okay. First of all, I don't like this this style. Okay. We need to just tweak things a little bit. Select theme. OH. OH, WE HAVE A few themed stuff here. Nice stuff. What else we have? Can you customize like the font and [ __ ] Cuz that's what I want to customize. Open settings editor. I want to customize the font chat. You know what I mean? I'm losing the nice teams. Oh yeah, baby. Nice teams. We need to customize the font, chat. I need to make the font like a thousand times bigger. Maybe I just have to do this. One second. Oh, yeah. I just have to type command plus. That's it. All right, cool. And everything else is just big. Okay, nice. Uh, what do we think about this font, chat? Is this font okay for the stream? Type yes if the font is okay. Type no if the font sucks balls. I think the font is not okay. But um, where is the font situation? Oh, font family. Here we go. Okay, so I want to use Jet Brains Mono. That's my font nerd situation stuff. Here we go. Much better. Comic sense. No, I don't like comic sense. You love the font. Okay. What are we doing, Shad? Font. Okay. Okay. Well, font. Okay. Let's keep the font. You have You have search there. I don't like search. I don't I'm not I'm not a search guy. [ __ ] Today, by the way. I'm I'm so tired of my day that I just say [ __ ] That's That's what happens when I get tired. Okay, let's see what do we have. Let's actually just close this off again. Bam, bam, bam. So, we have Zed. We have uh the app themselves. So, the app is here. Uh let's just close this off again. Bam. Zed again. So, we have the about page. Does that mean that I have an about page if I do this? Oh, it does mean that actually is Monday. Is what happens if I want to just copy this? That's a real good question. Like if I copy this file and I just put it here and I call this contacts for example. Does it instantly Wait, did you guys saw that? So I basically came here. I renamed this to Nuno. I'm going to rename this to Nuno right now. Check. Look at this. Look closely at this. Ah, you see we have some Jet Brains editor stuff here. Nice. Good stuff. Good, good, good stuff. So let's go back to context. What happens if I just go now to context? Do I get that stuff automatically? I do. Let me just type something out here real quick. Just context situation real quick to see if I have that. And I do contacts. By the way, Shad, I'm going to tell you something. Filebased routing is probably the best thing that should come for Laravel in the last decade. Okay? I don't know why we are [ __ ] sleeping on this. Filebased routing is the most powerful thing in the entire planet. Everyone is doing that except us. Why? Like come on Chad, you guys are Laravel people too. Like why don't we have filebased routing in Laravel? Unacceptable. Honestly, we are in 2026 still with a web.php file. Jesus Christ. Like every every framework is now filebased routing except us. What is root? Okay, I don't know what is root. Oh, it's like the the main layout thing, I think. So, basically, we have about page which relies on the root as main layout for the HTML tag. H tag. Okay, cool. Tua is saying I prefer it actually. What? What? Wait, wait, wait, wait. What do you prefer? Let's do the Let's do it. Let's do a poll here. If you guys prefer file-based routing, just type file routing. Okay? If you guys prefer web PHP, just type web PHP. We need to make like a audience votation here. We need to understand this. Okay. So, we have routes, we have pages, and then we have the layout which lives under uh underscore root. Okay. Okay. And we have components that are reusable across all the pages. So for example, if I go to root, I see a other component which is literally under the components folder. Okay, that's clear to me. That's in that's very very very clear. Okay, and then I can use the link component to go to a different place on my app and that will use the router automatically. Okay, so we have a lot of people saying webph PHP expected and people expecting also annotations and like literally just one person saying file. Jesus Christ, I'm feeling I don't know if I'm feeling old or I'm feeling like too new. I don't even know. I don't know anymore, chat. I don't know anymore. By the way, chat, if you guys are watching this live stream and you're having fun, don't forget, insanely important, subscribe my beautiful YouTube channel. Okay, it's very, very, very, very important that you subscribe my channel. What's up, fabric dev? How you doing? Okay, so what do we have? We have components which can be reused across the various, you know, the various route pages we have. And that's it. We have styles. So we don't have so we have styles but we also have tailwind I assume yes that's good tailwind CSS for the win by default we have tailwind CSS we have react so the starter comes with tin CSS react and vit in vit it's literally using the vit 7 instead of vit 8 which is not you know it's kind of okayish we have v test for testing which is good and positive do you have any styling libraries So do you have any styling libraries I can use? No. So we have just dev build preview test as a script and I assume I can have some terminal situation here. Where do I open the terminal on Z chat terminal panel just below. Nice nice. So I can type npm run linked. No what I'm saying npm run test to run v test which will run the test suite. No tests found so far. Okay. No, it's okay. It's we we good. We good, chat. We good. We absolutely good. Okay. We absolutely very very very good. Let's open cloud code real quick. And I'm going to say the following. I'm going to say the following. Okay. I am a Laravel developer. Developer learning tan stack. So we are building a blog today. Your goal is build this build this with me but step by step super slow because I want to learn this framework. Go super slow and explain me the stuff like I am learning this stuff for the first time. Okay, okay, okay, okay. Catching raw routing convention just makes me want to cry. Blah blah blah blah blah blah blah. I worked with XGS for a few years filebased routing and it was a nightmare. Thank you god to a lot of them. Go super slow. Oh yeah, baby. We are learning 10 stack today. Shad, we are learning 10 stack. This will be awesome. Okay, so we're using the 10 stack V0 situation. Okay, we the the 10 stack um starter. Okay, impatient. Yes, I'm impatient. Very, very impatient. We have a few examples with O and everything. So, we don't need O. I think this is like the deploying stuff. Okay. Okay. Okay. One thing interesting though is that they have a bunch of reusable components which is kind of interesting you know like router query table DB AI AI what is AI oh it's just an AI client okay it's just an AI client so basically you can just interact with entropic openai through JavaScript kind of expected you know what I mean did you ever try cloud code learning mode I have never tried that what is that I just know plan mode and just go mode you know love love 10 stack table. So what is a 10stack table in like why everyone keeps talking about it. Well you know what we are going to ask for a table at some point. So that should be enough to learn. Okay what do we have here? Uh okay so we just understand that the d- route situation is for layouts. It's basically my app.php master layout thing. We have the index. We have the about uh which is basically two routes and something interesting is that because it's filebased routing it's basically webph plus blade.php compile in the same file okay okay route.txt txe it's basically my route service provider allows me to configure a few things on the router we have the style CSS which is my app CSS and we have components which are blade components big idea 10ark blah blah blah blah blah blah step number one understand the single route file create a route oh right so that was kind of obvious for me so basically I go to the webt about txx and I can create a route file just by doing this and I'm going to say this component will be served when I go through this route right here which is interesting. Oh wait, maybe it's not that much file-based route because I can customize if I want to. Well, you know, and then I have the component and this is like the the scope that will be inserted in the middle of the page. Yeah, that was clear for me. You don't have to explain me that. That was clear. Just hardcode some blog post data and render it. Okay, this actually a very good exercise. This is this is actually a very good exercise. Yes. Yes. So, basically we are just hardcode some blog post data and render it. Okay, cool. So, I'm going to just delete this context page. We don't need this anymore. And we also don't need this about page either. And I'm going to just say yes, do it. Okay. Okay. So what I expect to happen right now is that it will literally create um how to install Laravel kind of page and literally put it here with static data on it. Okay. What is tenstack? That's a very good question. We are learning it today. It's basically a a JavaScript framework. Um you know I'm trying to understand how much full stack actually is. Uh people call these things full stack when in reality they're not really full stack. But I'm trying to understand what this is and what it does and how can I use this within my Laravel world potentially if I can combine them both. You know what I mean? Um, so this is what we are doing today. You know what I mean? Instead of writing all the code for you, cloud works uh with you to tackle problems. Oh, that's nice. Oh, you mean the cloud code learning mode? Oh, that's interesting. Yeah. I don't think I want to type the code like entirely. I kind of want to understand. Okay. Okay. So let's see what he did. Uh so in data in Laravel you would just create static data like this and you would basically serve that. Uh wait what did he created actually the file he did? Yes he did. The question is where it did directly on the index.txt. That's Okay. Okay, so an array of posts just like this and then it just serve those posts directly within the the HTML tag. So all of this is expected. I'm very curious to understand like when this array of posts becomes dynamic, what exactly will end up happening? You know how exactly because in Laravel I'm going to tell you in Laravel how this would work. In Lavl if you would have inertia you would have literally an array of posts here. This is how this would work in Lavel. So all this stuff would live on the controller and you would render that prop directly to the component like that. You know what I mean? However, with tent stack apparently both the view plus the controller work leaving the same place. So I'm kind of curious to understand how this will play out when it becomes dynamic. You know are we going to Tokyo next month? Oh yeah, baby. I'm going to four different different continents in the next two months. So, all right, hear me out. Do we have anyone from Brazil here? Type Brazil or whatever if you are from Brazil because I'm going to S. Paulo on the 6 and 7 because then it will be an event. That's the only thing I'm can I can tell you so far. We are working on it. Not Laravel. It's basically community event, but we're working on it. So we have that plus I'm going to Tokyo obviously Laval Live Japan and obviously I'm going as well to Lakon US Boston and I'm going as well to Canada real soon as well. Well Shiver is making this the same Shiver is making this question. Does this [ __ ] back end does this [ __ ] back end and front end at the same time? Dude, welcome to JavaScript, man. Welcome to JavaScript frameworks. Yes, they kind of put everything together. Welcome, dude. Hilarious. Okay, so now we have a list of blogs being rendered. We should be able to see it already. So, if we go here, uh, we see latest post with all the blog situation. Nice. Good stuff. Good stuff. That is very cool stuff. I think like um I want to understand how uh this list of posts can be dynamic can be dynamic. Uh can you create like maybe a folder with MD files MD files and load them um and load them to that index component? There is no back end or front end only the middle. Exactly. Exactly. All right. Let's try to understand how um how cloud will solve this. So basically create a content folder with a bunch of fake articles. Okay. Now I want to understand how this MD files will be loaded directly within this index component. But obviously it needs to be a sync. It needs to be actually backend work because it will re will read from my file system. So I'm very interested to see how this solve that problem. So it's basically installing a package which will read markdown files in a structured way um on front matter kind of expected. Now we have a source server.posts.ts. So maybe I'm fully incorrect and they don't mix both things together. Okay. I kind of want to understand that. I'm also going quickly to the to the examples they had. So, within this file, is my internet down? No, we're good. Uh, I kind of want to understand real quick uh a few examples here. So, I'm going to go into maybe this one with super base. Do they have like server as well? They don't. Okay. Well, let's see. Boom. No, it's also serving the server.js. Oh, this is not this cannot be true. Wait a wait, wait a second. Wait a second. Wait a second. Wait a second. Let's go into the Verscel skill situation and load um and load like um a 10 stack skill. Uh uh uh uh uh uh uh agent skills. How is it called the agent directly? One second. Agent skills directory. Where is that? Here we go. So, I'm going to search for ten stack. Here we go. 10 stock best practices. Let's actually use this one. Okay. I'm going to go back. I'm going to close this off. I'm going to click on clear. I'm going to load this 10 stack skill. I'm going to copy it if I can. If this allow me to do that. Here we go. 10 stack best practices. Yes, I want to do this. Cloning repo. Additional agents. Yeah, I just want to use claw. That's it. Uh, I'm going to install this on this project. Uh, installation method. Uh, sim link. Yes, it's safe. Zero alerts. Do it. Bam. I'm going to actually continue from my previous work. Continue is really the server situation expected. I have just loaded a skill that has 10 stack best practices. Can you check it out? Check it out. what we are trying to achieve tonight. Chad, today we are learning tan stack. That's exactly what we're going to do. I literally just saw cloud code going in the route that I don't think it's actually a good one. So I literally just loaded this tent stack started best practices which literally just should should tell me like or should tell cloud code the best practices when it comes to um to working with tenstack. Okay, it's already removing the the server that previously created. So that's exactly what I would expect. Okay, so the goal again, we were loading a static array of posts and we asked health code to load this AMD files instead so we can see some backend work. Okay, we're about to see that in practices. Puya, hi hello, how you doing? Mixie Viper is saying the following. You need to create a create server function to serve from the server. That's exactly what cloud load did. But I'm kind of surprising. Um, you know, I kind of want to see that in practice. Okay, it's done. Let's read this a little bit. Okay, let's read this to understand what's happening. Okay. Okay. So, we have a source leave. So, for the back end again the front end apparently lives within within routes. Okay, our backend lives apparently within source leave directory and then we have a post.ts with only the types. So if we go to post.ts right here, we see only the types and these are the types that can and should be reused with on the front end but also on the back end. Okay. Then we also see post.server.ts. This is server only. So if you need to do any back-end work like reaching the database going to caching whatever you do directly from this post.server.ts. Good stuff. Good stuff. Okay. Good stuff. So if I go to this post.server.ts we see backend work being done. Okay. Things like going to the file system kind of expected. So basically here just use node to go to the back end read the directory just fetch all the files winning with MD and then just waited for all of them to be resolved and this will be under posts okay it just already uh returning back with a expected structure okay and now what I do expect by the way is this post.server.ts to be used within postfunction.ts TS exactly. So we have a server function call it get all posts. In that get all posts what is doing is just fetch all post from disk. Now a very important question is how this is being used within our index.txt route which is not yet being used. I assume that at some point it will just be used. Yep. Yep. Yep. Yep. Uh, one question on the index.txe, we are still using a static array of posts. Shouldn't you be using the server function there? So this is just a question because the my component that is literally serving all the posts is still using I think no it's not oh it's already like loading the data from the router. Okay. I was basically visualizing a old file. All right. So I'm going to just delete this. So we still have our export const route create route file serving at base level. Then we have this loader crap which will basically load into the posts our server function. This will return the posts that then can be used within the component like this. Jesus Christ this is a lot to sink in. I have so many questions already. You know, 10 dead sucks sucks. I have so many questions already. Like one of the main questions I have already is how the hell this will scale. Like you see this backend organization like I don't see you know in lot of val you see things like controllers models form requests you know that is like a place for literally everything you know in here they just put it like types [ __ ] functions and the server like everything is in the same place you know and maybe I can organize this a little bit better I'm going to tell you what I would do here I think I would have you know if live is the place where my back end will live at some point. Uh I think I would I'm going to try to let a little bit this. Okay, I'm going to try to let a little bit this. So let's create a folder call it types and let's move the post.ts inside. Okay, then we have functions which almost looks like my models on on the back end. So I think I'm going to create a new folder with the name models. Should this be models? But I think it should be models because I'm literally doing stuff like get all posts and [ __ ] like that. Okay, I'm going to call this repository for now or repositories for now. Okay, repositories. I'm going to move these functions inside. Okay. Um, what is this? Uh, this is almost support I guess, but I don't know. I don't know. I don't know. I don't know. I don't know. I don't know. I don't know. All right, let's take a moment to read the chat. By the way, a lot of first-time comers to the to the audience here, which is good. Which is good. Uh Max Vert is saying the following. If you treat server functions like actions, it would be easier uh to comport monetize. That's a good point. That's a good point. Let's call this actions for now. That's a good point. Let's call this actions. Actions. Good stuff. Okay. So, we have actions. One of the actions is getting all the posts. Okay. Well, I can I can I can see it that way. Let's let's let's just do that. Okay. Let's just do that. Uh, okay. Okay. Okay. Okay. Okay. We're back. And you know, so we have actions and one of those actions is getting all the posts. Okay. We good. We good, chat. We good. And this and this is like literally the place where we fetch stuff from the back end. Okay. So, I'm going to just sh uh shovel this uh I'm going to create a new folder, call it uh repositories, I guess. And uh this stuff goes inside posts.server.ts. Again, this goes to the file system fetching MDs. Right. Right. Correct. So, I'm going to just keep it that way. Get post from disk will be under repositories. Okay, I'm going to ask cloud code what he thinks about this. So, I have just organized organized a little bit better. the lieb folder can you check it and let me know what do you think? Because honestly, like if in the future, let's just think a little bit. If we are going to have a bunch of functions like articles, you know, users and blah blah blah blah, it cannot be everything at root level. That will [ __ ] me over a little bit. You know, I can see your Laval brain at work organized into actions, repositories, and types. That's very Laravel like structure. I like the intent, but there is two issues. Imports are broken. Oh, I thought you were supposed to fix those imports, but instead of being me myself doing it, I'm going to say I like my current style. Uh, can you fix the imports for me? Maybe this way. Leave posts. Um, I don't know, man. I I like to organize things by types, you know, like if there is functions, all of the functions will be in the same place. That's it. Let of stack 10 stack for real. This is how this should be called. Okay, I think we're good. Okay, it's a little bit better. Let's just think a little bit all together. So we have live actions and the actions will be basically get all posts, save post, you know, edit post and then this will you know within this thing is exactly where the stuff is happening. I almost I'm going to be honest with you I almost think we don't need this like as a separate function but you know anyways but we're doing this here. Okay. And this is then being used on my route directly. Okay, so we have the loather situation. This stuff bugs me a little bit. Like, tell me something, Shad. Tell me something. Something I would do here is that I would just do this, you know? I would just do this. Like, so we don't have to do this. Can you guys agree with me on that one at least? Come on, chat. Type yes on the chat if you agree with me. This is something I would do already instead of doing this crap right here. I would just inject posts directly on as an argument of this component. I don't know what you guys think about this. is I think it would be just better. But yeah, type yes if you agree with me. Please, please, please, please, please, please, please, please. Oh, loader is to load data on the first render. Oh, interesting. Right. Right. So, I get the loader situation. Just by the way, I get the loader situation. I just don't get why we need to call this route use loader data. That's the only thing. Okay. Anyways, let's go to the homepage and see if this is working as expected. Even it's not working as expected. Okay. I see this date uh local compare is not a function. This error page sucks balls. Okay. Type ws if you agree because this error page sucks very bad. Okay. They could they could have done a thousand times better than this. Okay. Okay. Like I don't see where this is. Literally I cannot see where this error is is happening. Like there is no GS file. There is no line. I have no idea. Exactly. The big balls you know just for real like I don't I have no idea. Like I see this error on the UI. Uh why? Okay, let's just do that. Error page is not great for real. You can customize it though. What do you mean? Why do I would want to customize a error page? It should just work. It should just give me a nice debug situation. It should show the full error page on the console. Oh, you mean here? Well, I don't see it, I think. Oh, I do. Do I? No, I don't see uh Well, there's a bunch of stuff here, so I have no idea, honestly, at this point. So, I'm going to just keep it open. I'm going to just ignore it for now. Is cloud code already done with this thing? Yes, it is. Okay, cloud code just, you know, handle it a little bit. So, we now see the dynamic information from our back end being rendered on the front end, which is good. Uh, we still see about here, which is weird. The about page is gone. I think if it's not gone, we can remove it by going to dash dash route. And here we should have an about, I think. Nope. Uh, where do I customize this? Like, what the [ __ ] Like, what the [ __ ] Can I global search? Yes. Nice. Good stuff. what is this? Oh, it's within the other component. Makes sense. So, other component, we have an about page. Let's remove the about page. Let's also remove the docs page. We don't need any of this. Nice. We can have light mode, dark mode. Nice, nice, nice. Then stack, latest post. Okay, this is good. Okay, now we know how to load. Let's just recap a little bit. Okay. Sh today we are learning the 10 stack which is literally a full stack framework and we are learning this for the first time. What do we know so far? We have used something called the ten stack starter which is something that comes with a bunch of stuff comes with t stack itself a bunch of components comes with vit comes with tels comes with uh you know all that stuff. Okay. We also know that this scaffold at least comes with this thing called it routes which is filebased routing and with basically uh this filebased routing is web.php plus blade views like all smashed and combined. So we have like all the HTML here plus we have the way that uh where can we define this routing basically. Okay. So here I say on the homepage like on the slash page like homepage. Okay. Fetch the posts we need using this thing right here. And then just load them like that. Okay. So this leaves under routes. Okay. And then we also have our backend which lives under lib. Under lib we have a couple things. We have types which are used against the front end and back end. But we also have this thing called it server functions. Okay server functions is basically the way of communicate the front end with our back end. So again the front end we have this loader situation and within the loader we can use backend functions and this is one of them. Okay and then here I can do whatever I want with my nodes backend. Uh okay so this is what we know so far. Now the $1 million question is how do I get off on this stuff? Okay. And honestly, if if Hoth O is complicated, like more complicated than three files, I'm done. I won't I won't do O today. Okay. Um, so I'm going to kind of dive a little bit into that as well. Okay. So, I'm going to say the following. I'm going to go to cloth code. I'm going to say the following. I need O, you know. So, basically, I want to have a login page, and I'm going to keep it stupidly simple. I'm going to say the following. Ignore the register, forget password, like all that [ __ ] Just a login page with a static login. So I have access to a dashboard where I will be able to write blog posts. Okay. What is the best solution for this on the 10 stack? Honestly, if this is like more than three files, I'm done. Like over, you know, that's it. Nitton Dunn is saying the following uh error page is not great. You can customize it though. I wasn't justified. Is providing a way out. Oh yeah, that's a bad that's a bad uh welcome. That's a bad error page for sure. People using tenstack never make errors. Oh, they do. Okay, let's see what we have. Let's see what do we have. Great news. Tenstack starter have a built-in session system called it use session. Here's the plan in Laravel terms. Session storage use session encrypted cookie. Okay. And then you can use before load blah blah blah blah blah to check the login. So this is like the middleware situation. Then you can have protected routes by simply having a dash on authenticated um file um on the layout level. And to the login you create a new server function with method post. Server function with method post. Right? because this this server function has the method get automatically that's interesting create server function create server function I can provide the method and if I don't it will be just get by default that's interesting okay cool does that mean like interesting so does that mean if I go here and if I do this does it came from does it come from the server side like how do I delete this here we Uh uh uh uh uh uh uh uh uh. It did. It did came from the server side, but if I were to jump again sections, probably will just refetch the data, which is interesting. Like inertia. Good inertia stuff, huh? Good. Very good inertia stuff here. It's probably authentification is probably a paid service on a GS land. No. No way. No way. Shad, did you guys went to the gym today? Very, very important. Very, very important. Why did you choose Safari? Like, why not, dude? You know, uh, underscore means the path the pathless layout. It doesn't add anything to our URL every route in within underscore authentificated folder automatically in its o check. Oh, that's interesting chat. So apparently if I have if I have a route that lives under underscore authentificated automatically will apply the O middleware. That's good. Come on chat. That's good. So if I have well let me just confirm this. I'm going to say can you I'm going to I'm going to actually do the following. Okay. Okay. Let's recap a little bit. I'm going to do the following. I'm going to open my g UI so we can actually review the changes to have authentification on this. Okay. So I'm going to just open uh quickly this project. Let's actually just type kit init. One second chat. I'm I will be with you guys in a second. Okay. Git init blah blah blah blah. I'm going to open this with my beautiful GitHub UI. Where do why do I have that? Here we go. Streams todo app. Oh [ __ ] It's not to-do app. It's my blog. Yes. Yes. Add repo. Okay. A bunch of [ __ ] Okay, that's good. That's good. Let me just put this all the way up. Nice. I'm going to type git-m whip. Okay, I just whip it. Okay, all gone. And now we can just share the screen again. Let's do that. GWI here we go. So we have this stuff where we can analyze all the changes just for adding that small piece of O. So I'm going to say the following. Uh do it. Okay. I'm going to say do it. Okay. Just merge it. Just do it. And then we are going to analyze the changes on GitHub UI. Okay. She how you doing? I'm doing fantastic dude. The question is how you doing man? That's the question man. That's the real real question. Need to do saying the following. I know this is a PHP stream normally, but the chat is no snarky towards GS. No, no, no, no. Okay. Okay. Let me just um let me rephrase my opinion about JavaScript. Okay. I love JavaScript. I am very confident that the people on the JavaScript ecosystem, they think their stack is the best one in the world. And the reason is that because they don't know anything else. And same goes with me. You know, I I love Laravel. I think Laravel is the best thing in the planet but probably I think Laravel is very good because I haven't seen anything else either. Uh to be realistic I have seen a lot already like I have seen a bunch of stuff in my days. I have been a JavaScript developer. I have been you know a Python developer etc. Uh but yeah you know everyone thinks their own land is the best one and everything else sucks. I don't think 10 stack sucks at all. I think it's a good stuff and we are discovering it today. So, I apologize if that cames came to you. Quick question, Nuno. Why here the golf club's children is size? Can you elaborate in your question, dude? Okay, so it's basically done. Let's go back into uh my GitHub UI and understand exactly what it suggested. Okay, so we have a new routes login page. Okay, this is just expected. So under / login, we are going to serve the component lo the component login page. And this is basically normal react code. So we have state for the email, we have state for the password and we have state for the error. And then we have the navigate as well. All expected. Okay, this is like almost like inertia. Then we have HTML with a login page all the way top. We have a space to display the error but we also have an input for everything else. I assume all the way down we have a login button where if I click on it this will submit and by submit I should see this onsubmit thing. Yeah, all expected. All expected. And if I submit I'm going to prevent default. I'm going to say there is no errors whatsoever. And then I'm going to call login with this data. Is login a server function? Yes, it is. So this is kind of the layer of communication. Did did you also see with inertia you know okay so there is no fetch there is no HTTP clients there is no nothing like that from this point we are using a server function called it login. Okay that server function was imported all the way top and is now under actions because we have organized ten stack a little bit better. Okay all clear for everyone if it's clear type wle. Okay everyone typing w clear if things are clear so far. Again, we have a login component and the login component is a regular inertia thing just calling a server function. Okay. Okay. WWW. Okay. Cool. Cool stuff. Uh thank you Nathan. I appreciate appreciate Veltic saying W. Good. Good. Good. Good. Good. Everyone everyone clear as well? Let me know. Let me know. Shad. Insanely important to have your feedback so far. Insanely important. We want to go slowly but surely. Okay. W clear everyone. If it's clear type W on the chat. So HTML server function call it login which should live under actions. Okay. So now we are visualizing we are visualizing the action itself which is executed on the back end. First thing we do is declare how this can be served and it can be served through the method post. We just learned by looking at this thing that if you don't specify the method, this will be get by default. All clear so far. Okay, we have a dot validator set. Now this is good. Okay, this is actually very good. So if you want to validate the data coming from the front end in your server function, you just call dovalidator and you can validate the stuff right here. Okay, so the email needs to be a string. The password needs to be a string as well. Now I have a lot of questions already including what what happens if we need a little bit more than this? Like how do we validate if the given email is actually a good email? You know what I mean? So it seems to me that we don't have enough here. I'm going to actually ask that. Okay, I'm going to go to cloth code real This validation does not seem a lot. Can we do more like if is a valid email whatever what would I use I'm I'm trying to understand if that validator situation gives me something that Laravel would give me here we go here we go create instant in Laravel you would use required email max blah blah blah blah blah in JavaScript you use zod zod is not installed Okay, everyone in the chat is saying use Zod. Use Zod. So why Zod is not there already? You know, like if everyone generally agrees that we should use Zod like why Zod is just not there already like why it's why do I have to require it now? You know, that's something I would probably, you know, do it. So, I'm going to say the following. I'm going to say I'm going to say yes so we can see how does it feel with Zar. But but now we know we need to use Zar to have the same level of of validation um on the validator situation. Okay. Oh wait wait wait wait wait wait wait someone is saying there is no validation on that code it's just a TypeScript type I don't think so though I think well I mean I hope so login schema where is my login schema now oh the way down maybe types of oh it's creating it I I think oh no no no this is not TypeScript types it's literally valid runtime validation okay okay so my login schema is a string an email and I'm like with this message meaning that if I don't well we can actually see this in action like we can go here chat we can actually go here well now we have this beautiful error message okay this beautiful error message telling me exactly what's what is wrong. Oh my god. Okay. What's happening? Let's go again. Jesus Christ. Okay. Validator is not a function. This is my problem at the minute having this issue. This is not a good wearer page by the way. Like you guys need really need to work on this. The 10 stack people really need to work on this. Like this should be priority number one. Like if I were part of the board of directors of the 10 stack situation, this would be my number one priority. Like you have a beautiful website, but your error page double balls, you know, like it's bad. This can be a thousand times better. I don't care if it's a vit error. Like I don't care if this is a PHP error. I don't know if I don't know if it's OS error. This page needs to be beautiful no matter what. Like literally needs to literally point me to the to the spot itself so I can fix it. That's it. Okay, it's working now. So now we can go to /lo I think. Yes. And if I do something like this. wait. What? Uh, so I have this login schema which I'm returning it. And why do I see this instead of just this? Joanito, what's up, dude? How you doing? Like, okay, I have a qu. So, okay, let's go to cloth code again. One question. So, I have this validation But I see this on the UI. Why? Just for FYI, I would just expect to see please enter a valid email. That's it. That's just a validation error being thrown as it is a raw JSON array instead of friendly error message. So, I need to do this crap. That's insane. Like, why the back end doesn't literally return me the thing like ready to go on the front end? Jesus Christ. Okay, let's go again. Okay, now it's working. But I need So, basically my e-lo.xe XC have a try catch. Yeah, you know, it would be kind of cool that I just don't have to do any of But yeah. Okay. Okay. Let's go back. So basically like we catch the error which is a regular JSON. We parse that JSON and then we fetch the message from that JSON to literally set the error right there. Okay. Now at least we understand what's happening. Okay. Yeah. It would be kind of cool if we don't have to do any of this. I'm going to be honest with you, you know. But uh but yeah. All right. Um, good stuff. Let's go back to the server function. I kind of want to understand a little bit where we were. Okay, so we have an input validator with a login schema. So now we have proper validation in place. If the given request is valid, so if I just introduce something that makes sense like nunlaval.com and I'm going to do the same password. Um, then I go into this section. Okay. Now if the email doesn't equally restrict the static email we talked about which is this one then we bail otherwise we bail. So let's actually just try to bail. If I do this invalid credentials okay cool stuff. So this is also a JSON and also enters on that try catch we just developed. Meaning that if I go to the front end real quick. Let's go back into my login component. If I remove the try catch, if I remove this, will I see like a JSON again? Oops. I think I screw I [ __ ] it over, I think. One second, chat. Object cannot be found here. Okay. Let me see how this was before. Oh, okay. So, this was just this. Yeah, this is what we had. The [ __ ] Evaluating post maps. What the [ __ ] Um, okay. Log in. No. No. No, I don't. That's so interesting. So, we we only need this because we are using zed basically or zod, but for the other ones, we don't need that. Like throwing a regular error allows me to not have to do any of this. Interesting. Let's go back to the login server action thing right here. Yep. And continue to work from this. If I throw an error like this, I don't need to do any of that JSON crap. However, because we are using Zod for this type of errors, we do need that crap. We do need this try catch situation, which is interesting. By the way, chat, if you enjoying today's live stream, don't forget go all the way down. We have couple we have almost 100 people watching the live stream, which is very good. If you enjoying the live stream, type w W stream on the chat and don't forget go all the way down, subscribe to the channel, um like the video and all that stuff. You got it little wrong. What do you mean? What do you mean? I mean, I'm seeing invalid credentials that's coming from here. So, I think I got it right. So, if I throw an error, it will just work. Like for example, if I do this, I will just see it, I think. Yep. Multiple validation errors from the back end. Huh. Yeah, yeah, yeah, yeah, yeah, yeah, yeah, yeah, yeah. Oh, you mean that potent? Wait, what? Well, not only that, also that those errors are mapped within the message situation. We can actually console log all of this to see. Let's actually do that. Okay. Um, let's go here. Let's just type this console log error. Inspect element. I don't want to spend too much time on this, but but yeah, it's kind of interesting as well. Let me just close all of this. Oop, I do need to provide like an invalid email. Let's do this. Yeah, you see you get a full JSON response back basically. I just closed it. [ __ ] Oh, here we go. It's right here. You get a full JSON response instead of having just the error. Okay. Anyways, let's move forward, chat. All right. So, let's move forward. Let's go back to the authentification real quick. Here we go. We have a handler. If it's the if the email is correct in the password, it's correct. We move forward. Then, we get the session and we just update the email on the session. That's the only thing we do for authentification. Okay? meaning the following. If I provide this as login admin and password now I will be logged in. I think nothing is happening. Redirect to dashboard. Oh, we don't have a dashboard. I I think yet at least. Yeah, we don't have a dashboard. That's why nothing is happening. All right, cool. Let's actually do that then. Do we have a dashboard? If not, can you create a simple one? Although the redirect situation, it's kind of lavalish if I'm honest. We throw a redirect. So you they use exceptions to do redirects. That's insane. So we redirect to the dashboard. Nice. Good stuff. Good stuff. Throw redirect. That's a little bit weird. Yeah. Maxi Viper is saying the following. The input validator accepts a callback function where in the body you check and throw um in there if you weren't using Zar. Oh, feel you. I feel you. I just feel like it would be kind of cool to just have all of that working without having to do having to even include Zod basically, you know. Plus, you know, I would kind of expect the front end to also work automatically and not have to do that, you know, that try catch situation. Okay. So, do we have a dashboard page already? The dashboard now will show welcome other with a email and login button. Nice. Meaning that if I go here, is the dashboard at dashboard level? Yes, it is. So, we see welcome back. I can log out. Why nothing is happening? Jesus [ __ ] Christ. Literally nothing is happening. Okay. What does my logout does? log out is a fun is a server function as well method post it will just get the session clear the session and redirect back to this okay we don't have any of that happening why so if I click on the log out nothing happens but also on the login nothing happens either I think another question as well I have is I'm able to go to the login even if I'm logged in which is not a good thing. Let me try again the dashboard. So dashboard is not working and that's because I am I have placed the dashboard under and yeah under uh underscore authenticated that's good. So as we talked about like underscore authentificated literally protects these routes from guests basically. Okay. It would be kind of cool, I'm going to be honest, would be kind of cool to have a folder which is the opposite of authentificated. like a folder where a few login routes or a few authenticated routes are not let me let me explain this better. So we have underscore authentificated which is for authenticated users. Now I want to have routes just for guests basically would that be possible like the login for example if I'm logged in already I don't want to display it you know so right now if I do uh admin blog or whatever my login is let me just confirm u I'm going to go to o adminblog.com. Here we go. If I do this, I type enter. Nice. I get redirected to dashboard, but I can go back to the login, I think. Yeah, this doesn't make any sense because I'm logged in already. So, I'm wondering if there is any sort of guest uh folder. Is there any underscore guests like login? Doesn't make sense to be visited if I am locked in already. You know what I mean? Chat, great thinking. Yes, 10 stack supports exactly the same pattern. You can create a G underscore guest. Oh, nice. Oh, that's cool. Guest page. Nice, nice, nice, nice. Okay, now we have a guest folder and we have a login inside. And I hope that if I go to login, I cannot even go there. Okay, let's do that. Let's do this. Here we go. Cool stuff. So, all of this makes sense. I can log out. I can log in as well. in a in by logging in I can no longer go to the login page. Okay, so all of that is working as expected. Did we miss anything while learning all of this? So we have an underscore guest authentificated, we have under o functions, we have the login, we have the log out and we have the get current user which can be used anywhere really. And by doing get current user I'm just going to the the session and fetching that user email. That's kind of cool that we can control exactly what goes through the session. I'm going to be honest. I'm going to be honest with you, Jetta. Ideally, you should use use form uh for form handling, but it's very verbose. Really? I don't think they use form is verbose. I like use form. I'm used to use form in Laravel. So, I'm curious to know how much your Laravel brain will enjoy the void from Vit. But when that came out, like the void framework, is that new? cuz that seems to be a new repo. Wait, what? I am on the correct place. I don't think I'm on the correct repo even. Yeah, I'm not in the correct repo. Void zero. Yeah, I am aware of void cloud but uh you guys are talking about a framework. I'm aware of void cloud but I'm Weren't you guys talking about like an actual framework like things with routing and everything or is that vit or whatever? Void is a framework. What do you mean? Does it have DB cache authentification a skeleton a starter kit? Can I actually do void new and have a [ __ ] blog appearing on the page? Uh, interesting. I love that. Okay, I need to try it out. Yep. Okay, so all of this stuff is kind of expected. Um, I think let's just analyze all all of it on GitHub UI again. The only thing I would change is I would move the schemas the types that are schemas. I would move them to form requests. You guys see this o types. So you see this login schema. I would move this to sche to a schemas folder basically. So I can just have all of them right there. That's the only thing I would change here. I think now we have o functions which is kind of weird as well. This almost seems to me that this should be called sessions. Session functions basically. Void is a framework in a deployment framework. Oh, that's interesting. Okay. Void is V plus Cloudflare services to give you a framework. All right, cool stuff. Moving forward, I want to try out the 10 stack table thing. Couple questions. What is that and why would I use it? So, it's time to move to the 10 stack table. We have literally a bunch of posts here. So, I wonder if a first of all, I kind of want to understand if a 10 stack table is actually a table, you know, in terms of UI cuz maybe it's not even a table and I'm thinking it's a table. Okay, that's the first thing I want to ensure. Okay, it's a table like a data grid. Okay, apparently. So, I want to understand like why would I use this ever? Basically, take it for a spin. Oh, nice. They literally have a thing here. Nice. I believe it's adless. Oh, that's positive. Meaning I can have my own styles on it. Nice. Good stuff. Mateos is saying, "Anyone has uh know a folder structure for front-end projects? That flat structure becomes awful." You know, it's exactly what I was thinking like when I was seeing like the when I first created this, the first thing he did was like having a post type, a post server function, a post uh server like everything is was in the same folder like live and for me I'm used to have some or I'm used to have some organization like a models folder from requests folder, a console commands folder like I typically have this all this foldering that comes by default in Laravel which allows me to organize myself even conventions you know I'm used to have this cruy controllers like article post article update article index and here I have like almost random stuff like log in and you know like log out I would expect to see session create session destroy it's just you know I need to understand this a little bit like a modular structure uh h how do you do dynamic routes there uh what do you like here dynamic routes. This is filebased routing. So we can just basically come here apparently uh we just go to this route thing. We just create files here basically. Now one interesting thing chat is that I don't know if you guys can see because this this sidebar is actually too small but apparently like you have this underscore guest to define the middleware that goes into the underscore guest folder and you also have this underscore authentificated to define the middleware that goes into this authentificated folder. Okay. So for example, if I go to the underscoreget, I see that before loading any file under underscore guest, you need to fetch the current authentificated user from the back end. And if the guy is not logged in or better, if the guy is logged in already, you just redirect them to the dashboard. Oh, for the dynamic ID, you just use brackets ID. Yeah, just like folio basically now all expected. Yes. All right. [ __ ] Uh let's see what cloud code tells me about the 10 stack table situation. So it's a headless li data table library in Laravel. Uh you might use you might used to use things like livewire tables or data tables.gs. Cool stuff. 10 stack table gives you the same thing but is addless. So I can have my own um styling, but it handles all of the logic like sorting, filtering, pagionation, column residing, blah blah blah blah blah blah blah. All right, cool. Uh cool. Can you use it on the dashboard on that list of posts? So I assume shad that once cloud code is done implementing 10 stack table on that list of posts we have on our back end which this one. I will be able to automatically sort search like it will just give me all of this. You know what I mean? Uh that's what I would expect from this 10 stack table situation. Throw redirect. That's a very good interesting thing indeed. Feels almost weird. You know you need to understand that they don't actually have on the JavaScript ecosystem. They cannot do things like instance off. You know in Laravel it can return different types like you can return a VC type can return a string you can return an array because on the back end we can do is this object like this type of object you know and it really just works on the JavaScript ecosystem they don't have that you know when you return an object it's is literally like a literal object you don't you don't have instances of you don't they don't have interfaces either so maybe like the throw is like the workar around they found for redirects Oh, here we go. We just got the table. I think it's done. That was kind That was not a lot of code, by the way. I'm kind of curious to see the code. I was into So, if I go into routes index, not this one underificated. Here we go. So first of all we import all these little things like create column helper flex render get core row model get sorted row model get filter row model like a bunch of little things. Okay. And then at some point we just type use react table. We provide the data. We provide the columns we want which I assume they are specified somewhere. Here we go. like how exactly we want the columns to be. Yep. Yep. Yep. Yep. Yep. All expected. We can specify the current state of sorting, the current state of global filter. And how do I use this even? Oh, nice. Can I search for what? Nice. This is front end searching, by the way, I assume. Yeah. All front end searching. So it doesn't go to the back end. Probably I can customize that. Yep. Yep. Yep. Yep. Yeah. Not bad. Although you may don't think that actually um tables is very is a very complicated thing. Like actually having tables working as expected with sorting, filtering, like all that stuff, it's actually very difficult to accomplish. So maybe they got that right. That's why this component is so popular. Shiva is saying I want to throw an exception in Go. But yeah, Go doesn't have that uh exception handling that lot PHP provides and JavaScript provides. So you have the TPLE thing, right? you need to every time you have an error, you need to return return the result plus the the error situation. So yeah, that's you know that sucks a little bit. I don't know if it sucks. A lot of people say that's that's a positive thing that you cannot have global exceptions but you know okay uh let's actually just recap a little bit. I want to kind of understand this a little bit better. So then we have the table markup. This is how can you can you basically put classes and customize it in the way that you want it and this is basically give all those functionalities to the table. So this is the let's just recap. This is a table component of tenstack. We saw the routing component which is this one. We saw server functions which is this ones. Did we miss any component that people talked about? Let me just go there again. So we saw the start, we saw the router with this is the query. Everyone talks about this one. Oh, is this a use form thing from inertia? Yeah, this is literally the inertia thing. This is literally the inertia, the use form of inertia. You have these spanning, you have errors, you have data. Yeah, pretty much that. Wait, let me just confirm this with um with cloud code real quick. I was just checking the use query component, but it seems to be very very very equal to the use form in inertia. Can you compare them? Hey, by the way, is the stream okay? Everyone typing Wshhat if the stream is okay. W stream. Everyone type W stream if the stream is okay. It's insanely important. Okay. Everyone typing W stream if the stream is okay. Seems okay though. Wream. Okay. That was only for you Shiver I think. Nice. Nice. Nice. Okay. Let's read this a little bit. Great comparison to make. You are right. They solve the similar problem. Let's break it down. Use form from inertia versus use state. No, no, no, no, no, no, no, no, no, no, no, no. I'm talking about the uh 10 stack query component versus use form of inertia. Yeah, the stream is okay for everyone. It was only you shiver John Sugar is saying the following off topic. I made an artic routes bronze command using the new Laravel prompt uh table component fully searchable by method action. Oh, that's good dude. You should you should literally just uh probably uh send that to the framework as replacement to route list. Ah 10 stock query that's a completely different thing that I was comparing. Let me correct my myself what they actually do. So inertia use form is for submit forms manage form state. Okay query is for cache sync server data fetch data cache it and keep it fresh. Okay they're not actually solving the same problem. Here's a lot of analogy. Inertia use form is a form that dispose to a controller is about writing data. Cool. Tenstack query is an adjax layer to get data, cache it in our refreshes in stale. It's about reading data smartly. Okay. So if I have a bunch of posts to display, I can use 10 stack query. That's my understanding. Okay. So I'm going to say the following. Okay. That's interesting. Let's say thank you. You are saying that I can use um use query from the query component to load all my posts on my dashboard. No, all my posts on my index route. Yes, you could, but you shouldn't for this case. Here is why. Your current loaded approach is actually better for index page because it's SSR. The loader runs on the server before the HTML is sent to the browser. So, the user sees the post immediately. No loading spin, no layout shift. Great for SEO purposes. Okay. Tack query with use query runs on the client side after the page loads. So, the user would see an empty page on the first spinner and then the pop the post will pop in. bad for blogging because Google needs to see your content. Okay, I'm going to say the following chat. Okay, but I still want to use uh use query for learning purposes. Can you do it? Let's actually commit everything because I want to see like all the full diff. I'm going to type git add-p. I'm going to type git commit whip and I'm going to ask him to do it. Tenquery is like axios. Oh, okay. Hope he doesn't get acted, though. Oh my god, chat, you're absolutely awesome. We have a bunch, we have about 100 people watching the live stream. You're absolutely awesome. Don't forget, go all the way down, click like on this video. Also, subscribe to the channel. Insanely important. Very, very, very important, chat. So what do I think the use query thing is? It's basically like the use form of inertia, but instead of doing posts, you are doing gets, but you also have access to things like pending errors and you have access to specify the amount of time that cases should be that data should be or should remain on the front end before you go into the back end. Okay, let's open the GitHub UI to see it. All right. So instead of the loader, previously we were using the loader with a server function which is was uh being executed here. Instead of doing this, we don't do this anymore. We fetch the data directly within the component using use query. Okay. All expected. All expected so far. Okay. So we type usequery again instead of doing this which leverage serverside rendering we do everything directly on the front end on the component itself by using use query. Okay, when we type use query, we can specify we can specify uh the query key. Okay, which I I assume this is the cache key. By the way, let me just confirm. Yes, it's the cache key. Okay. Okay, the query key is the cache key. And then I specify the query function which I which I specify the server function. Okay, so get all posts is a server function and I just do it right there. So all expected from this I get the data itself I get the is pending which I can use for the loader and I get the is error which I can use if the my back end is not available for example and I can also use the error to actually have access to the error if any okay then just below I adjust my front end so when it's loading I just display a loading post so the traveling is happening to the back end as we speak right here if these error. I display this. This is actually super easy to use. Shad, can we just agree on that? Type W. Let's type all W tanstack because this query component is actually stupidly easy to use. Okay, everyone typing W10 stack because this is this is actually [ __ ] easy to use. This is actually very nice chat. Don't you guys think W10 stack for real like this is probably the most easiest thing I have ever used from today is learning with Tenstack this use query situation stupidly easy honestly you can use it with inertia apps as well oh that's cool well what do you mean exactly will inertia instantly understand this? You know what I mean? I don't know if inertia will instantly understand this. Like will this work with inertia render and [ __ ] like that? I don't think it will. It is cool though. I must I must be honest. Like okay. So I assume I just come here and I will see a loader. If I go to the main page, you see the loader right here. You see this loading post situation? There's a loading post happening right And also like if I open the network, I probably will see it now. Oh, here we go. It's like offuscated though. probably is optimized honestly. Oh wow. Do you guys know like why this is why this stuff is coming like on this format. You call a server function from the front end. Yes, we call uh that's that's the way this this goes. One thing though is like this all this call is like offiscated. I cannot even understand it. I think inertia uses use HTTP which is very similar. Oh, nice. All right. So, we what what did we saw today? We saw the start component. We saw the router component. We saw the query one. We saw the table one. Are this ones like the main ones? The form I assume it's like literally equally to it's like the same stuff as Laravely. Yeah. Use form and what are the default values? What is the initial data? And what do you do on submit? Yeah, this is like exactly like Laval Inertia. Yeah, I think we saw the main ones. Uh most of the most of the the other ones are like um in alpha, so I don't even know if they are stable. We see this DB one, which I assume is um I want to double check it real quick. Wait, can I have this on my front end? You should try the odd keys as well. It's even for shortcuts. You mean like actual keyboard shortcuts? What are you talking about? Oh, it's actually keyboard shortcuts. It's actually cool. Oh my god. Yeah, I think um if I had time today, probably the next one I would double check is the DB one because apparently there's a cool there is some cool stuff I can have a live query. I'm very interested to see what this is about. Yeah, we don't have time today, but I would probably double check this one if I if I had the time. Okay. All right. [ __ ] Let's just you know try to give like a classification from 1 to 10 from everything we have learned today. So my my opinion about tenstack, it's obviously done by very smart people. You know, it's kind of powerful to be able to have this front-end code uh which lives right here, for example, and I'm able to literally access my server automatically by just typing a weight. You know, this is kind of crazy though. Like if you compare this stuff with what we had back in the days of being able to access, you know, server functions just like this, you know, this is kind of crazy though, you know. So I kind of we need to realize that this stuff is actually kind of powerful. Um routing is very easy to understand, you know. Uh this file-based routing and this file-based definition is actually kind kind of easy to use. ify you know the route and the component being served. I like the fact that uh we have this loyalty uh also very easy to understand and to organize. So routing is is cool. Uh what else we saw? We saw the query component which is probably my favorite so far from everything I have seen. The table component is equally powerful. I don't do a bunch of tables if I'm honest but I looked very powerful. Uh you know kind of easy to use just a bunch of helpers and they are adless you know. So um so you don't have to actually be you are not forced to use a certain style which is very positive. Um Tinard Lelay saying ask me your questions. Are you familiar with the tenstack? That…

Transcript truncated. Watch the full video for the complete content.