Just working on a Next.js Side Project

e e e e e e what's up y'all um this is just going to be a chill stream I'm just going to work on the side project and probably uh just chat with people if people have questions and stuff what's up aush from India no I haven't tried Dino yet have not tried it right let me collect myself what am I trying to do here so I'm this side project um my wife's trying to get into like writing a little bit and so I want to make like a a little side project where she can go and create a book maybe add some chapters edit the chapters publish them and stuff um but yeah it's just another thing another learning experience tell me what is your Tech stack um I use nextjs in all of my content sometimes I use Onex for my backend as a service sometimes I just use the things that are built in the nextjs this project is using Shad CN with nextjs and server actions and a bunch of other stuff so what am I trying to do though I wanted to add the ability for deleting a book so I think I don't know if this is the best place to put it oh no right right now project is not open source I need to make a list of what I'm trying to do uh to do actually let me use another side project I'm working on which is Project planner AI so we need to add the ability for deleteing a book that's what we're going to work on so oh also I have like death finder where's death finder why does it still say death finder in the top there we go you try to learn a full separate back in what that question is did you continue with the personal adventures with go um you know I I scratch that itch and I move back to what I'm good with and what I know and what my content is mainly around so I might revisit go in a bit what's up Matthew how will be the infra um I don't know I'm just trying to code the the app right now so I'm trying to do deleting a book and so if we go to here's on my stripe here do I have anything special here um I was trying to add like a settings page on the setting page I want to have a a delete project section so if I go over here we have some tabs and this has some settings so I could potentially add a settings section here go and paste that right in there and we'll pretend that we have a [Music] settings um panel how about that and we'll figure this out go over here export function settings panel and that's going to return hello world for right now let's go over here and import that and go back to our app make sure Hello World shows up which for some reason it's not why is that not showing up did I import this settings sometimes nextjs like I don't know if it's the caching yo am I crazy sometimes you got to restart nextjs change value of tabs trigger chapters ah there you go thank you see people in chat are always smarter than me wait is that not it settings settings if I click on this trigger it should go and open up this content panel why is that not working still okay there we go thank you Peter and I might as well just go ahead and add like a book panel here um this could be you know what let's just focus on the settings so here let's see if we can add a button for deleting the book I'll go ahead and Auto Import this make sure it shows up here we go probably want to give it a variant of destructive there you go but I like to have a modal pop up and Shad Cen it has a a dialogue I might use the alert dialogue because this is what it looks like are you absolutely sure I kind of like that let's go ahead and install it if we don't already have it what happened to goang my ADHD kicked in I went back to focusing on what I should probably focus on which is next JS because that is what my content is mainly centered around but I do like go I'm not going to lie I wish I I wish I could be paid the right go fulltime pretty cool book ID just add some components in here I will name a component delete book dialogue PSX no actually I'm going to call it delete book a button we'll say export function delete book [Music] button and we'll paste in those Imports there copy this stuff over this copy paste programming at its finest ladies and gentlemen but what we want to do here is I think we can just put this button here I always forget where I need to add as child what strategies do you use to brainstorm unique app Concepts honestly I just think about things that I think would I would use or someone else would use and that's it and then just every app has like the same generic things that you're going to need with it like creating resources deleting resources updating resources and sometimes you throw in some special stuff like that tutorial I did with the um like Dev finder I just thought it'd be cool to like be able to find other people to pair program with and also a sponsor reach out for that video so it kind of like steered the direction of what I need to build because I need to build to do uh screen sharing that's how that concept come came about all right anyway I got this delete book button and I'm going to go back to that settings panel now let's use that instead make sure we Auto Import that okay let's just change the wording a little bit on this is it just me or is this text so small my eyes are just getting worse are you absolutely sure are you sure you want to delete your book that's two veros I'll just say are you sure um deleting your book means you will not be able to recover your data in the future and then we'll probably make this one a button go ahead and move that over variant could be destructive okay I go ahead and say delete throw an as child on there uh oh what's going on here this already a button no well that one's interesting alert dialogue action button variant destructive delete I know there's a special way I've done this before I thought you had to add as child here but when you do that it seems to don't wrap it in an alert dialogue action what's the point of the alert dialogue action it probably does some type of behavior behind the scenes to autoc close the modal let me look that up I mean there's using radics behind the scenes so like as don't use button just text you know that's actually a good idea let's try that let's undo and so don't add the button and they're saying I could just add a class name to this and I could do button variants I believe and call it is that what you're trying to say and then I can just give this a I think it's destructive I totally forget how to do this button variants oh I think I need to do like dot hold on I can figure this out I can figure this out guys there we go all right so that's kind of like I guess what you could do as well if you just want to style using the same button stuff but I think I would rather also inside the got the footer here I got the header here there a body do they have like alert body content let's try this out what is content oh it's already in a Content here um yeah you guys can just correct me if I'm doing something wrong but I want to put an input here so I'm going to go ahead and probably bring in um an input like this with a label I want to bring in use form hooks might do that let's try this action is focused by default when you open the dialogue okay that's probably not a good thing right well I guess it doesn't matter because I'm going to add an input where someone has to type in a certain value in order to delete this thing let's see how far we can take this um no I'm not really interested in blockchain although I wish I invested in it years ago because I wouldn't be wasting my time coding and trying to make money do I want to wrap this in a form and just grab this copy paste code from everywhere else CU that's the way um let's go here get the schema where's book schema go back at that here this will just be called delete schema um I'll say confirm will be the [Music] name bring that in we don't really need a schema here but I mean it is going to be required actually I could probably just can I make this match something how do you do like um make sure confirm matches the string please delete okay co-pilot let's see if this works the problem is is that there's not really a submission on this form do I even want to form here am I making this too complicated I feel like I am let me just import some of this stuff the button Act Z literal maybe not make it capital P because that'll probably confuse should I give it a message probably I guess you can't do that that oh but then you can't default it as that okay I'm going to go let's just roll with that um now the issue is that this form and this button for this to do the default submit feel like I have to like pull this form out this is probably not the way to do this whatever this and then what I do that the content that was inside the content I'll just wrap this whole [Music] thing okay I don't need the whole thing let me just do this um I'll get to it guys I'll get this going my brain's not working too fast today let's just make sure this prints out if values dot well technically the confirmation like Zod if we trust Zod it should validate and then like we know we know the user typed in the correct confirm statement to delete so we should probably just like call a delete book action but let's just make sure this works because I feel like we just hacked something together let's delete that I don't think we need a div here anymore we 404 not found let's go delete confirm beautiful does not work um yeah the extension is called it's called to-do highlight yeah to-do highlight right here if I can do type submit then that will kick off okay that kind of worked but the issue is that now this thing is just closing even after submitting almost like I don't even want to do this like I want to overwrite the default action that how you do it maybe let me try this there's no way this is the right way to do this yeah because it's the dialogue close on the Declaration I could ditch it and just use a button I feel like at this point we might as well you need to take control over the open state of alert dialogue create your own open state but I feel like at this point like why are we even using this like why not just use a button and then more importantly I have a loader button but I think it variance to that so that's not going to work I'll come come back and actually fix this but for right now going to make this [Music] terrible how do I type this I need to go to button and find varant and props type of button like making this so complicated it it just use PHP button props button props variant I mean I should probably find a way to like take the actual properties and like merge them into my own and I've done that before multiple times it's just like one of those things that you forget how to do it and then on a live stream with all you guys judging me it's just it makes it so much harder you know type A submit and this is wrapped in a form the form should prevent the default shouldn't it I'm not even using the submit that's probably why forget where I used to have that wasn't it here there like on submit Co pilot give me what I want nice okay that's all I wanted um and now yeah I just need to like say HST is open go ahead and do this whole thing is open that right now I bet you people who don't know react and next like look at this code and they're like dude why is there so much code to make a single input in a single submit button like what's going on here prob I reset the form so form. reset now the beauty of nextjs is to make an [Music] action computer's lagging up now let's go here I'll make an action export async function delete book action that'll probably take in like a book ID which is a stream and then that needs to do something which we'll figure out in a second but and then what I was doing I was actually pulling in like U hand stack query to wrap my mutations so like delete book mutation is equal to use mutation and you guys can tell me if this is stupid to do as well but I'm basically wrapping the action in a mutation and I'm calling it this needs to take in a book ID which I don't think I have so I need to pass in a book ID when this thing is finally done reset the form and then we could probably close this instead of doing it here just do it there and then the reason I'm doing this this might be a dumb reason to to do this is because I can use this mutation and tanat query is going to have an is pending on it already but like down here for my loader button I guess say is loading uh what I call this something delete book mutation is pending every time I look at a react code I'm like this is over engineering at its finest but then I try using like server actions and form actions the typescript ends up becoming terrible and I go back to doing what I'm doing right now I think this is working now but now we got to implement the action and then the action probably has to redirect to a new page so what do we need to do here I need to basically delete the book using the book ID but before that verify the user who is trying to delete the book owns the book which might be we might be able to do that inside the persistence yeah I've tried using use form State and use form status in it's like you end up writing you end up having like do all this weird stuff with your code it just feels gross I don't know like I'm trying to accept like the server side rendering form action stuff but it's just every time I use it I revert back to my old ways of just put everything in a client component because I get more flexibility using that I don't know maybe I just haven't drank in the Kool late enough but like when I have to deal with form data like unyp safe form data it just feels kind of gross but again you can just use Zod to pars it so maybe it's not that big of a deal is pending start yeah I don't know if I want to that just yet what am I doing I'm trying to find okay so the way I have like my code kind of set up is I have use cases here I'm trying to do like a clean architecture type of approach to this but delete book action in order to delete a book you need to make sure that you own the book so I'm going to first get the book do I have a method called get book by ID I do so I'm using my persistence data access method to get the book and I'm going say if the book. user ID is not equal oh wait a second first of all if there is no book just throw an error um and then if the book user ID does does not match the current user who's trying to delete the book which I will have to pass that in probably I'm going to rethink what I'm doing here in a second but and finally we could just delete the book so let's go over the data access I'm going to say export a sync function and delete book book ID let's see if co-pilot can do this right database delete books where y i I can't wait for AI to get better like the suggestions always suck and I always forget drizzle let me just start over database delete does this take in a method takes in books where and I could say EQ I think books. book ID that how you do it oh all right so the action first of all I need to make sure I have the user who's logged in so I can say await get SSR session that's a custom method I added which just gets the next off session basically and then if there's no user we'll throw an error and then we can call that and when this action runs I can either redirect inside the action itself but what I've been doing is just letting the action finish running and then I do the redirection from the front end you all can tell me if that's a bad idea or not but I basically say bring in the router and then finally batter out push we will go actually no I don't want that doesn't need to be in finally that needs to be in a then sry my computer's lagging a little bit and I'm going to go back to the collection page I'm might been using values here so I can delete that do we test it out settings panel delete book button why is this not uh book ID is missing so for book ID settings panel guess I could pass it in as well just prop drill this everywhere I don't think this is an xjs issue this is just react bro like like this if you're using vit with a a single page application this is exactly how you be writing it like what is this all higher gics like I can't even if you're tired and you try reading through all this stuff you're like dude what's going on here but I can't tell if I'm just so used to it that it's like okay it's not that big of a deal you're importing a component that needs server only okay now now this is a nextjs issue and yes nextjs is so bad why is this complaining I think it's because I forgot to put use server at the top of a file and this is why nextjs maybe people who use nextjs are just masochist they they enjoy torturing themselves with this use oh what happened did it delete it did but why did that uh that literally sat there for like 3 seconds maybe this is why people redirect from the action let's try that and I also forget when do you need to use transition stuff that's when you're actually doing like a revalidate path which I might need to do so revalidate path on collection which means now [Music] let's go and get rid of the router but the mutation let's just try this out and see what it looks like because now the action should just force us back and the modal should just like the whole page should just like yeah that that worked a little bit better I think the problem with the redirecting server action is that it triggers an additional render plus queries already waiting to be fixed do not have any problems with the client side red yeah I mean I think the client side redirect worked fine and I like it how my action doesn't know about where it needs to like redirect too CU then I can use this action from any other page but what the moment you start adding like hard code to redirect Logic the action is no longer like generic um at the very least I do need to revalidate the path but then if you read the nextjs docs they talk about a used transition and if you call revalidate Path they recommend that you wrap your action in like a Ed transition or something so like is this it like do I need to do this crap and then like I actually would call this stuff this is gross but I'm pretty sure this is what their docs recommend um let me go to the nextjs docs real quick to improve the user experience we recommend using other react apis like use optimistic and use transition to update the UI before the server action finishes executing on the server or to show a pining State and of course there's no documentation you have to go to the react docs and read through all this to understand what the heck this even means and you read through these little cute little examples you think you understand it but then after you finish reading through it you realize you didn't understand anything you just read and so you skip using it in your application because it's just too confusing if you use use transition you skip use mutation from react query you skip mutation for oh I see what you're saying because that's going to give me the pinning State yeah I don't need it whatever as long as it looks nice when I'm clicking through the UI I think it's fine right well I think revalidating the path on collection might be enough because the page I'm already on is collection slash and ID and correct me if yeah correct me if I'm wrong but I think when you revalidate like a a higher level path doesn't it revalidate everything like it clears the cash for everything this modal I need to actually improve a little bit it just doesn't explain please type please delete to confirm I should make that bold I don't know what they recommend these days is it like WR instead of bold K one probably even blows away that style so it won't matter oh no that's strike through I think strong is like better for accessibility or something oh my computer's lagging I need a better streaming computer maybe I'll put a placeholder there input Place holder please how do other apps do it do they have a placeholder anyway that one's done go ahead and update that on my project planner ai.com side project one of a 100 side projects that I'm working on that'll actually that one's like the one I've gotten the furthest with so I'll give it credit all these other things though I go ahead and commit and say adding the ability to delete book um on the collection page while um after showing a confirmation dialogue I don't remember placeholders on those critical actions I'm trying to think of an an app let me check Railway that's where I have my stuff deployed so like I'm guessing if I go to settings go to the very [Music] bottom okay let me not try that on there I'm going to go to uh here this is another side project I haven't been working on if I click it oh it just straights up it's going to delete it can I undo that what's an app I've used where they have a delete confirmation I know I've used one what's up twitch what am I working on I'm just wasting time with nextjs I'm a backend Dev which wants to start on the front end but if feels like there are five 5,000 opinions on Frameworks react is always changing so you don't know what is new and best practice at the moment do you have advice on how or where to start maybe start with a different framework like spelt instead of next honestly I don't think it matters just pick something and get good at it and just start building something and don't switch if you're looking for a job I'd say learn react because I think it has the biggest um like pull in terms of like who's hiring yeah that's that's it go back to go that's typically what happens I get so frustrated with like nextjs or react I end up just learning go for a little bit learning rust I de-stress with that and I go back to um torturing myself with this stuff GitHub has it when you try to delete the repo oh okay let me try going to GitHub real quick I have this in GitHub have this real quick GitHub okay the the truth of what I'm working on is I'm working on a SAS starter kit that I'm going to try to sell because I saw someone on Twitter saying he's made over $300,000 with a starter kit which blew my mind so I'm going to make a starter kit and try to Market it and see if he's just making that stuff up or if people actually like buying starter kits but let's go and delete this repository yeah this isn't asking for a confirmation it's probably going to ask me to like type in a nothing in my phone whatever it's fine I'll just get rid of the placeholder thank you Tommy Rodriguez delete project and versell just checked no placeholders yeah I would say do what versell does because their user experience is pretty pretty based what IDE are am I on vs code resource deletion uses this platform or sorry pattern iub get cell um this one's actually just using nextjs on any like real product I'd probably actually use convex um but I'm just using xjs because I'm trying to make like a starter kit and I don't think people whenever you mention Party Services people just get so angry for some reason yeah I'm using next off for this application did you use pocket base no I have never used pocket base before yeah I love comx it's like I don't know it's just so much easier your data just updates automatically data else use it compation clicking links on a [Music] stream um have you ever considered making online courses for full stack Dev I have one that use a T3 stack I do plan to make another course at some point but I want to make sure that like the stuff I'm teaching is actually like correct as you saw I just struggled trying to make like a a model with a confirmation input I want to make sure like I have that stuff down packed and I know the ways that I like to build applications I'm still not convinced with the server side rendering form action use form State use form status stuff I'm trying to I try it out every time I do I revert back to like my old ways let's see removing placeholder on delete confirmation all right what else can we work on do I use OBS for screen recording I do where do you get ideas for SAS products I've been building e-commerce sites for work I'm having a hard time getting my mind to switch Yeah I mean just build something like I would say find a client find a user that client could be yourself and build something that solves their problem and the more people you find that have that same problem I think the more valuable what your building would be but I'm not like a I wouldn't call myself like an entrepreneur I'm a want wantrepreneur I'm trying to build something that people want but obviously when you just work for other people and like build what they want it's it's a different realm yeah Brandon I'm glad uh it just feels more natural like [Music] using uh use whatever it's called hook formia convex is a backend as a service I've done a couple of sponsored videos on my channel I'm building a side project that uses convex basically they take care of all your backend endpoints your data they have file storage everything that you do um automatically updates like when whenever your data changes anything any user who's like subscribed to that data it automatically just updates on them so another project that I'm working on go here so I'm working on this with another person when they update data my dashboard will just automatically update for me so it's just like live data everywhere what else am I supposed to be doing on this stripe single payment Flow Mobile friendly unit testing play right testing do I actually want to build a starter kit I feel like I'm just wasting time n not a solar preneur I mean I am trying to be a solar preneur but I feel like I'm more of like a isn't it called like a wantrepreneur like like you you're a wannabe you haven't actually achieved it yet uh drizzle is an omm I think it's pretty nice I was using Prisma for a while before I used drizzle um drizzle feels like it's a little bit lower level in terms of the abstraction you're like doing more like raw sequel statements at times they're both good the main reason I got off of Prisma is because they had like this weird rust oh no I do they this like weird weird rust binary under the hood that's supposed to make stuff faster but then it makes deploying to a service environment so much more complicated um I think they fixed it by now but I'm just I got kind of got over it when I was trying to deploy a simple application us a Prisma toless look at the UI what do we got here so continue writing I want to make chapters somehow so I I added okay well let me go back I need to make this look nicer and the way that GitHub does it I go and look at the settings here got like a danger zone so maybe we can kind of copy that let's go and find where we have the settings panel we're going to say h to Danger Zone like a div here let me look at what it is for danger zone again yeah they got the text the 2XL and then they have a div like a type class name border border red uh let's do 500 let's put that in there and then we'll do oh let just do some co-pilot let's just let that [Music] happen delete this book once you delete the book There's No Going Back certain so this could be a um Flex and then we could just put this here and I think if we go back and look at what it looks like in our app looks bad looks pretty bad um let's your book why is this text so dark all right so that I'm going to add a little bit of Gap to the flex so gap of four this what is this thing doing that adding a four here let's see what happens not too bad uh let's rounded go I might even give this a padding of like six and give this a gap of eight and then between these two things I know people say don't use margin but I don't care just go ahead and margin that of a four and um yeah feel like we should put some space between these things like underneath the um AG are we on the TBL list I think this needs to have some margin in the bottom of it maybe not that much why is everyone using typescript over JavaScript because typescript is better I used JavaScript for the longest time I thought it was so nice to use JavaScript and then I finally convinced myself after watching a couple of Theo's videos that typescript was better and then I Ed typescript I fought through the pain of learning it and then I realized I'm so much more proficient using typescript with the intellisense and the type hints and then yeah I just I can't argue for using JavaScript anymore it's just use a type language they're much better especially when your team is large J when stuff gets really hard because you have a ton of code that's changing all the time and JavaScript Mak basically unless you have Js docs which is is kind of like a crutch in my opinion hello from Ireland what is up feeling is part of the developer experience I kind of wish I just stuck with using TP cn3 Pages router instead of ser actions but I'm too deep with my project to refactor it yeah I really like the T3 stack honestly I think server actions basically replace the need for trpc because you can just call your back and in points like like it was trpc um but other than that I mean I wouldn't buy too much into like using form actions and stuff how much RAM do you have in your MacBook I think I have 16 gabes is the M1 air how are you doing your styling I'm using Tailwind CSS hey how did you overcome impostor syndrome starting as a web dev for a big client or company this that's a hard question because everyone has like different ideas of what impostor syndrome is I don't feel like I ever have had impostor syndrome I just acknowledged that I sucked and so when I got hired at my company like I realized that I didn't know what the heck I was doing and I didn't feel like an imposter because I knew I sucked impostor syndrome usually if you look at the term it's used for people who have been in the industry for years like 10 15 years and they still feel like they don't deserve the accomplishments that they've been granted um I think people kind of overuse the term impostor syndrome for low confidence and low skill sorry if that offends you uh can I ask for you an opinion yeah you can ask your opinions do you really want to build a file storage so you're a solar preneur no I work full-time I'm not a Sol solopreneur I work fulltime I just do stuff on the side for fun you really want to build a file storage I'm not building a file storage you're starting again how would you go about learning webd again what would you start learning first um yeah that's a hard question probably I always recommend just like trying to build something large like build a large scale project and just keep on willing at it but personally me I'd probably like watch a couple of tutorials I'd watch maybe buy one course and go through it and be serious about going through it um and then just start building stuff that's the way I like to learn I just like to build stuff you work full-time as a full stack front in or back in uh yeah i' say full stack and then also I do devop stuff as well like I just spent three weeks refactoring some terraform code with a coworker trying to make our system a little cleaner with all the terraform code we have for spinning up our AWS resources I feel like we should have a list of chapters so the idea is like in this app you can create a book and every book would have chapters in it so I kind of wonder if I should have like a list of chapters with titles here um yeah let me go back and add it to do so don't forget ability to add chapters book as a user I should be able to add new chapters to a book I'm trying to write how would I do chapters How would I do chapters so first of all let's go to the schema and I feel like a book should have chapters and I I'll keep the user ID attached to the chapter I'll keep a uid for the ID but I'm also going to add a book ID here so I'm going to add book ID references books on delete Cascade that's cool and then here we have the title of the chapter and then we could have the actual text content yes let's call it content double check ID and and let's call that chapter all right so we just added a new table to our schema let's go over here mpm run DB push I should apply and it crashed crashing I will say there's some stuff about Prisma I miss I feel like the migration path was much better in Prisma than it was in drizzle e columns book idid and ID are incompatible types text and uid I mean this is probably just a me issue honestly I shouldn't be call I shouldn't be blaming R for anything is because that's a uid hold on that's a uid which means this needs to be a uid user IDE is some random piece of text let's try running that you need to specify using book ID U ID the column book ID cannot be cast automatically to the type uid so I think what happened is the first migration failed and so it probably created here's another thing I don't like about drizzle is that they have drizzle Studio when you run a migration you have to stop it restart it that sucks I mean chrisma had that same issue so I shouldn't complain too much about that um and now you'll see book shows up oh sorry chapter shows up but there's no way to like run a SQL statement to delete this I just want to drop the table and recreate it um and I don't think I can do that delete table and then I want to delete after error at or near table or is it dropped table anyway so I can't use the studio to do that so now I have to go over here and find [Music] um where I had one post crash SQL explore here we go so I need to go to oh it did delete it okay so it deleted it but it for some reason it's still showing up here because again I have to go and like restart Studio no it's still there am I crazy it's probably because I need to go here and refresh then I have to do a new query drop table chapter or is it delete where is drop table run query okay I that dropped it of course I have to manually refresh this because writing software that automatically refreshes is hard to do probably restart dzal Studio sorry I should stop complaining I'm trying to not complain as much let's try rerunning this migration ches applied and it's working now we have a chapters um yeah so the idea was I wanted to instead of like having previous chapter next chapter I might do something similar to that add book component great book button I'm going to copy this whole thing and I'm going to put that in components and we'll call it create chapter and the that actually hold on let's um figure out what I need to do yeah I probably should just install a database editor it's nice using things that are built in the vs code though but yeah you're right I'm I'm just making myself worse by doing that what database editor would you recommend A Plus data grip data grip we got two for data grip one for data Plus or table plus create a chapter I think this thing needs a book ID though so I'm going to go ahead and just give it a book ID like this at chapter I don't think we need a description here so I'm going to get rid of the description field that is there a specific reason why you're keeping the user ID on the chapter um yeah so when people want to delete their account and you want to wipe out all their data you know what I don't have a reason I'm using post Crest so it's going to delete Cascade and do that for me so yeah there's not really a good reason to do that um unless it's for like authorization reasons like if a user tries to do an action to edit a chapter or delete a chapter I'd have to then look up okay what book does the chapter belong to and then look up okay what user does this book belong to so it like just adds a little bit of extra quering for authorization I believe but yeah I could probably just get rid of it if you guys think that's a better idea I'm going to rename this to actions because I'm going to store multiple actions in here and that they probably abstract this to a helper function like authentication helper um add chapter [Music] book use case and we want to that I could make this a a chapters file I might just keep it here though let do this and um get the book insert into chapters we want to add the values of book ID title probably need user ID don't we now anyone who uses um drizzle help me out here so basically I want to returning everything and I have to like do this just feels kind of gross I have to like do the zeroth index here I might wrap this into an object I'll call it uh chapter chapter I'm GNA go ahead and just do this structure it yeah that works too yeah that's one thing I'm like starting to see as I'm using drizzle it's like I kind of miss Prisma cuz it's like why why is there not like a just give me the first why do you not have a helper function that just does this for me but it's whatever um so add chapter to book use case what that needs to do is get the book you got to make sure that the person trying to do this has access to the book yeah this whole stuff I need to like write some utility helpers here but whatever ain't no one going to use this app anyway so await add chapter book all of that stuff import that and I may also refactor this to be new chapter do I even yeah I do need to get the book um [Music] all right now what I need to do is let co-pilot write all the code for me I'm okay with keeping those as two separate props I guess it's fine but now when we call this action which great chapter button I think before I was calling create book action let's call that function why is this book ID title is it because it needs an object hold on I claim I'm going to quit nextjs every every month or so just me venting my frustrations I'm not actually going to quit nextjs are you kidding me you think I'm going to switch to remix or something so after we create the chapter honestly we don't need to go anywhere we just need to close the modal ittle is not for book ID I need the book ID which comes in somewhere here and that's just structured so I should be able to say book ID and then also values that should make that happy we should get back the chapter here which honestly we don't need to do anything I could do a toast yeah chap chapter created your new chapter has been created e yeah I mean I tried using remix and like the idea that there's only like one top level action and inside the action you have to like write your own if statements and switch statements to figure out what form did the post and then you have to like hide [Music] hidden Fields inside your form to know what type of post request was happening it just felt like I was getting back to like JavaScript coding of like normal like old school HTML and I just didn't like it I like nextjs server actions this is the one thing I really like about xjs I think it does make the user experience or sorry the developer experience a lot better there's a lot of stuff around that though that I just don't like if my computer wouldn't struggle so hard to just stream and code chter created there's a chapter now I just need to like display it um I thought I made a chapters maybe I didn't um let's just do a chapters panel real quick e this over here let import this book ID book I set that [Music] correctly yes I did not Auto Import that do that um yeah my m1's actually kind of warm right now and that's why my streaming starts to slow down because it like starts throttling e think there's some authentic authorization I need to add to these that I've been kind of forgetting about but go here did co-pilot just get that right query chat I'm anywhere I don't feel like that that's correct but it might be is super Maven like a new co-pilot keep hearing about it computer do this CHS has implicit type any am I not returning correctly from here probably not I'm not I didn't finish this method you know how it builds up the context I mean I read from um Co pilot it like looks at your open tabs and it figures out it like uses the code from your open tabs for your context window but I don't know if that actually does that because I've found that it seems like it sucks I'm wondering what super Maven does that's a little bit different I would love it if whatever vs code AI system have I could just like get a bunch of Snippets of like this is how a query looks like describe the code paste it in and then automatically just have that context automatically just like pasted when it tries to give me code suggestions instead of it trying to be smart and like trying to figure out like what I want I rather just feed it like this is like what a a repo uh class might look like for all the crud methods uh get chapters from book use case book ID something is crashing something is not a function what am I calling chapters for book Cas I'm exporting it calling this I'm R turning the [Music] chapters something crashing whenn and doubt restart nextjs about that sometimes it works yeah I think I actually have cursor on my I have cursor I played around with it I'm just not impressed with most of these AI tools honestly like I think they do give you an edge and help you like write code a little bit faster but I just expect more I'm going to pay like 10 bucks a month I expect am I doing why is this open there it is so last thing I'm missing is I have to in the action revalidate path here we go [Music] election and we should probably revalidate the book ID right that chapter to book where's my book after book ID I forgot how you do revalidate path with like a slug is this how you do it or do I actually need to put like feels weird no I mean YouTube does I get paid from YouTube and I get money from sponsor videos but it's not like my full-time job so I'm not making my living from YouTube here we go I guess this is how you do it I call that coding with faith you just try something and when it works you don't need to go to the docks now the chapters do look bad though so like chapters people we should style this a little bit um I just want a list right so I could convert this potentially to like an unordered list and at some point I want I want to add in like drag and drop so I can reorder the chapters maybe um but go over here last name we'll give this a flex Flex call border border Ray 50 rounded let's see how this looks all the way over here for some reason add chapter okay so first of all I want this crate chapter button to be on the right let's move it down and then I want this Flex grow is that how you do it okay I want this gap of 12 some of the stuff I added to the wrong thing I added this I wanted to add it here last name border border white rounded there's your chapters they're draggable I might do this I might say chapter no I'll do index here DX idx + one chapter chapter one and here is your title which I remember in high school supposed to like italicize a title or something now if I only name those better Battle of JavaScript your chapter it's coming along coming along not the best I go back and haven't seen twitch M1 yeah I'm on M1 ER what's up Dev welcome I don't know if you're still here though but welcome why did I stop using Prisma um because they didn't really have the best support on serverless deployments but I think they fixed that by now but I've already switched over to drizzle so Brazil mentioned what is up how's your job uh searching going if you don't mind me asking if you do mind me asking then I wish you luck yeah I've tried source source graph Cody as well again I got mediocre results coolify I I think kify is pretty cool I was actually thinking about rinting a VPS and just like playing more around with it instead of using like digital ocean I was going to get like a Herer how do you pronounce that eisener anyway but then they like needed me to like verify my ID and like send in my passport photos and I like you know what I'm not going to do that I'm not going to send my identification to some random Germany company some random company in Germany even though they are like well known do both collection slug or the literal path yeah I probably do the literal path because it's only being changed on that specific book book I think you can use layout to revalidate the child routes I think you should be making 40K a month minimum I wish like a fine line cuz like you don't want to do too many sponsor videos cuz then your channel just becomes like a giant sponsor video channel but at the same same time I feel like everyone's YouTube channel is Time boxed and at some point people will stop watching me and they move on to someone else I like I gotta ride ride my um my current successes try to make money off it while I can because I've seen people with millions of subscribers and they get like 2,000 views on videos now like what's what's that guy's name um if I don't want to name anybody but I've seen some big channels that just like their view count just like is abysmal now and I don't know if it's because of the content they're making or like people just get tired of seeing their Channel and so like there's don't watch your stuff but I feel like the YouTube algorithm can just like drop you off whenever it wants to yeah I'm using tail and CSS are you ever not going to use nextjs I don't know I still feel like it's like the the largest ecosystem I've tried VI and I've tried spelt I've tried spel kit in N I just can't stand the single file component approach to both of those and so I go back to react and nextjs I think PR could spread out to one I'm not sure about that what do you do for your current job uh I work excuse me I work as a full stack engineer um and doing some devop stuff as well they use convex yeah I we are still using convex for this other project that we work on um project planner ai.com go check it out if you guys are interested the start off is a simple project and now it's turning into more like a project management tool which I'm actually using for all my side projects so little plug and you guys are welcome to give feedback if you go up here and click on uh there's like a feedback button that my head's hiding but you can give us some feedback if you use this at all at the very least it's a really nice app that I can put on my resume and we do have some users who are subscribed to it so I'm I'm excited about that yeah I I haven't really tried solid too much I'm not sure if I I like signals feel like they're more confusing CU now like you have this like thing you can pass around but some sometimes you can't destructure it and stuff I don't know much about it so let me not talk about it but I hear solid is very very fast okay I might I might check out hetar again all R chatting yeah pretty crazy very off topic any experience with spelt company I work for is switching to spelt from react and doing a rebuild um I've played around with spelt I personally like it I think the code you write is much more concise same with view I think spelt and view are like really nice to work with in terms of comparing it to like react and react State Management I like the way that they use like references and just like you just modify variables and your components reer versus like the immutable approach react took not a fan of it yeah I think Felts good oh I see what you mean top J Top G yeah I I plan to work on a course soon um I just need to do it I guess my heart is more in like I want to build like a real SAS product versus I want to build courses I feel like that's that's a path you end up taking with content creation and YouTube is like you end up having to sell something and most people sell courses and I rather like Market SAS products that I'm actually building because I get more reward from that I get less money obviously but I feel like it's just it's more rewarding to know that people are actually using a service that you built that's a personal issue to though because I mean it's rewarding to know that you've taught a bunch of people how to code applications too so sorry I'm just like talking now uh snazzy Labs is turning into a sponsor video swamp I don't think I watch snazzy Labs some channels literally every video you watch it's like a sponsored video you see in the top right it says like sponsored by or whatever or the top left it's like okay spread it out a little bit every video you publish doesn't need to be sponsored like make some just normal content so I think in this comment Joseph I think there's a lot of benefits for using like a meta framework such as nextjs or n with the server side rendering and the search engine optimiz a and stuff and I think that's why personally I wouldn't go back to a single page application even the router alone is enough to use nextjs like I've built applications where I click back on the browser back button and like the entire application takes you to some weird page that you wouldn't intuitively think it should have taken you to because like it's just harder to make the back button work properly in a single page application than it is with a real like I shouldn't have real with with a a serers side rendered application have I tried Zed is that an editor I've heard about that have not tried it Astro uh I've tried Astro again like I'm not it's fun to learn new things but at some point you have to have like a true north Tech stack that you just always go back to which is why like you see me make videos about go and rust and like dabble and View and next or sorry View and um felt sometimes but then I just go back to nextjs because if I have five projects and they're all written in different Frameworks in different languages realistically I can't context switch like that I'm just kind of all in on a certain stack and I'm making every I'm making sure every single side project uses that stack so that after work when I only have 30 minutes for an hour to work on something I don't have the context switch at all and that's what works for me but yeah that's a good that's a good thought I mean if I made a course what first of all a would you guys want to buy it and secondly what would the course need to be on because I don't even know my my subscribers at this point I don't know their skill level most of them say that they know how to code and they're like decent at coding so it's like what would what type of course would you find beneficial if you already know how to code full stack applications yeah you can't you can't really trust anything on Twitter are you like my only person on Twitch watching me right now I don't even check I have seven viewers on Twitch I mean if you're the only only person commenting on Twitch it make it easier but I might actually wrap up the stream soon anyway I've been going for like an hour and 40 minutes um and I see your unit tests oh you're funny I do plan on adding tests to this because it is supposed to be like a a SAS launch kit and I do want to add playright testing and I do want to add some type of vest um testing over it just so that when you like start up your project you do also see how you could potentially test your project but we'll see if I actually get to that front and Frameworks is choosing your starter Pokemon starter Pokemon yeah yeah this video should be published usually it takes like a couple hours for it to like be visible but when the stream ends it'll be published what framework do you use to create in points I mean I just use I'm using server action so I don't even have to create in points but I would just use the built-in API that nextjs provides um just because it's just easier to have everything in one location I'm struggling to get that true north Tech stack currently I'm using react router implementing the features of V6 like loaders but the type safety is terrible I found the same issues with remix yeah I found I think that's a good indicator if you found a good True North Tech stack is the type safety should be really good and even the type safety with nextjs I mean like there's some stuff that's missing like I kind of wish this would tell you like what your properties are on your pages I'm sure there's a way to type this like is there a way to say like next page or something because like right now I don't know what this stuff is I have to go and like refresh my memory about like what prams are what are query prams what are short shch prams like nextjs could use a little help with some type safety when it comes to the routes too tog top G is trying to get me Rich huh it'd be like 40K the first month and then the next month would be like 4,000 I I've seen how like when you launch a course or a product you have to spend a lot of time hyping it up and marketing it getting that newsletter going reminding people that it's going to launch a certain date and then the day it launches is when you make all your money and then every day following that it just like exponentially drops off but if I make a course I'll let you guys know how it does course on AWS oh God I don't know I don't know if I would want to do that I know Adam says he's making a course on AWS I feel like like I just know like enough of AWS to be dangerous but not enough to like make a course on it and I don't have enough drive to really become like a what do they call those ads people Those ads Heroes I don't have enough drive to like get certificates and become like a real ad hero I'm not that interested in it but I'm sure it could make us some money do you think it is logical that I use sell for Dev and BPS for production is it reasonable approach for saving costs I think yeah I mean I don't know how much verell charges like on a a low bandwidth app probably not that much I just got scarred from that dos attack so now I just moved everything to a VPS and put behind Cloud flare because I think it's just safer um but if you can get guarantees that versel will refund you on a DS attack and you don't have like a $5,000 bill du to bandwidth I think versel is fine I'm just weary about serverless or pay peruse Services now after that attack um but again since I'm on YouTube I'm I'm a bigger Target I probably said something that made someone mad like I I talked poorly about nextjs cashing and someone's like oh we'll show you and then they just probably did their thing you make a course on how to make a course would you make a course for devop related stuff terraform k8s uh I definitely couldn't make one on k8s because I don't use that in production what do teams actually look for when asking for X years of experience in a us I don't think people really know I these recruiters and people who make these job descriptions literally just put random stuff and help people apply like I think at a at a position our job we set experience with elastic search literally no one knows how to use elastic search like out of all the people we interview not a single person knows elastic search I don't know what they're really looking for I think someone just who's not intimidated by the AWS dashboard and can like at least explain some of the services there like lambdas sqs SNS sces API gateways rout 53 Cloud front that type of stuff all right I've been streaming for an hour and 47 minutes I'm going to wrap this up hope you guys enjoyed maybe I'll stream tomorrow maybe I won't um but if I do it'll be in the morning 9:10 a.m. eastern so yeah join my Discord

Channel: Web Dev Cody

Views: 5,994

Keywords:

Id: DER0t4iQK3M

Length: 107min 41sec (6461 seconds)

Published: Sun Apr 14 2024