LIVE: Build a Content Platform with Next.js App Directory, TypeScript, Tailwind and shadcn/ui

foreign lovely time of year this is very very exciting I'm uh I'm gonna do some what am I doing I'll do some application development today I just really fancy it there's a project that I've been wanting to get off the ground for a while that I use to kind of like maintain all my content that I put out because I maintain stuff over a bunch of different platforms like Twitter Youtube LinkedIn and stuff and I really want to actually build it out and give it a UI because mostly currently it just sits as like a database based on markdown files that are just sort of sitting at it hey Marco hey hey hey hey hey how we doing uh let me turn down the gain on this hey signer how's things looking good thank you it's a new look right Emmanuel what's up I'm good I'm good love to have you along whoa okay we got some we got some serious numbers in the chat are we ready for some application development I'm ready I want to jump right in I want to do this I really just want to check out what's been happening kind of in the ecosystem MDX developments maybe maybe um probably not though I kind of uh prefer just uh I'll show you what I prefer in fact love it out for script contents thank you very much uh next auth with TS simple login logout app probably not no sorry I don't do a lot of um kind of next content or even react Focus content really well actually a lot of my recent stuff has been react focused because I've got it's advanced typescript stuff coming out Advanced react stuff coming out greeted from New Jersey what's up let's get going um I want to just let me close down a few Windows here and I want to actually just like take you from scratch like from basically a simple application all the way up to something more relatively complex I really want to check out the app directory I want to just get a feel for it I want to check out shad cnui and I want to just see what's happening there how are we doing in terms of numbers where are we at uh God where are we I know ah 64 of you decent very very decent if the stuff is working at first round that means something is wrong yeah okay that's probably true thank you Gregor let's rock and rolling ATA of you damn all right so you should be able to see my setup look at this beautiful artwork here isn't it so nice how's the audio by the way audio sound good uh right let me open the terminal and let's get going I want to how do we even do this I want to create next app and let me actually just close down everything uh create next app uh npx create next and let me CD into my repos directory uh bump this up a bit let's go for let's make this a proper one let's go TS and let's go yeah let's just go there and we'll go npx create next app at latest you have to do that latest otherwise it tries to do the most recent one the artwork is not AI generator the artwork is by an amazing um person called Michelle holick I prefer the actual like um illustration by someone really I'm going to just call this my digital or content Garden I'll show you why in a minute I would not like to use typescript would I like to use typescript what do you think what do you think I was actually thinking of doing like a JS Dock only stream I think that would be quite funny um oh I should have done pmpm oh I should have done that would like to use the S lint yes yes the term wind CSS I would like to use the source directory and I would like to use the app router I would not like to customize the default alias so let's go oh thank you Anne I don't know how to create mixed up I'm just Googling man I'm allowed to not know things right this is just like normal for people you know as soon as you become an expert or get seen as an expert in something you're not allowed to not know anything obviously no typescript so you're joking come on come on now let's be silly all right let's have a look at this content Garden covalent websites huh let's have a look covalence or covalence like this it doesn't align my site ah good I'm so glad you're happy all right so we got this um right yeah I definitely should have done pnpm install because uh npm is just garbage so let's go pnpm I this will ditch our node modules and install everything with bnbm which is a little bit better oh God yeah I should have pulled out the old keyboard the old keyboard is behind me I could just do that couldn't I it was wizard level absolutely wizard level uh by the way folks um if you're not on my Discord you should get my Discord because there's um Wizards like muxil who just became a wizard today um who are very very cool and respond to lots of people's questions it's at macbook.com forward slash Discord greetings typescript is yeah it's yeah it's in it's recorded Faizon don't worry okay so now we've got the basics set up here and actually let me get this working so that it's half and half here so let's go pmpm run Dev I assume Dev is still the script yep and this should now start our thing on localhost 3000 compiling [Music] compiling okay come on now you're taking a hot second are you hey 12.6 seconds that's unusual uh rysio npm clutter damn right pmpm is just better than npm uh trust me if you do not trust me I do not know why you're here uh let me see um okay so this is good got my basic setup let me just um delete all of this crud got image from next image got layout working let me just make this content Garden description my beautiful content Garden how's the font size for you by the way no turbo pack I guess I could do turbo pack couldn't I should use your terminal within vs code more yeah I love this I love this it's just like right there on hotkey why not man hey typescript is uh right resolution isn't okay turn up the resolution by yourself mate it should be 1080p uh okay so content guard we've got into here um I actually just want to jump in and check out UI go there so I've been hearing a huge amount of great things about this library and about it's not necessarily really even a library it's just sort of something that takes in it's like a recommended set of components that you can use to sort of build out your applications now I'm not interested in Dino at the moment hey Colin glad to see you mate uh all right so yeah chanceian UI looks really really really cool it's uh basically like a project that is sort of like Tailwind UI and What it lets you do is it has all of these sort of you know uh various components here and I'm really just interested in seeing like what it can do for us What it lets you do is basically just oh there you go just like a simple navigation menu oh that's gorgeous just really well put together components that you can just copy and paste into your into your setup does this CLI hmm it's funny that there's no syntax highlighting here I think that's actually by choice because it is doing syntax highlighting it's just like let me do dark here thank you oh I need to toggle light and dark mode because I want a nice dark mode stream uh no I don't I don't think this is Tailwind official this is something separate so we've got tabs here so it looks very nice it's funny I'm in my garden office so like everything's really bright here so actually having dark mode is like kind of messing with me got an input here got default style New York style what the hell so code here so these are just like so what's the concept then that okay I'm just going to try like installing one of these and just see what happens so installation I can just literally run this in my setup shensen latest add inputs I can just run this and it should just do a thing okay to proceed yes please okay thank you Muhammad thank you sudar follow me recently on LinkedIn oops come on oh configuration is missing please run init to create a components Json file so I assume that I can just go init it should just work not tried Ross before nope uh yes I would like to use typescript defaults oh base color um slate please I assume it's app yeah let's try that I do CSS variables for colors what's the default yes or no yes tailwind.config.js components I see I see I see yes okay so it looks like components.json is just like a I can store more components at once cool um thank you all this haircut chat guys very kind so components.json now lives inside here and it looks like I can just um I'm using the source directory right so I think some of these are wrong so yeah so lib utils so there's lib and there's utils ha and it has installed some stuff then so it's installed now CL SX Lucid reacts class variance Authority Tailwind CSS anime Tailwind merge and it's changed a bunch of stuff in here too hey Nate I heard you on um uh Twitter space yesterday glad you're here oh man the the cool thing about this is the it just adds stuff that you don't need to worry about right like all of this stuff I don't need to copy over this really there are two app days oh you're right yeah so yeah it's messed up or rather I've messed up here because I told it the wrong thing to do so yeah so I imagine I can just copy this over into Source app yeah and I just replace it now I need to go to components.json fix my mistake so Source app globals.css I think this is fine yeah no worries Nate it was good I was trying to Ritual this morning as well radio so I should be able to just now add this in in theory and it should just work so I'm adding now the inputs okay oh it's so good so I've now got components and I've now got an input let's don't react forward ref input element H input prompts got me all of that stuff there and there's no time script errors indicating that things are just looking great I'm so impressed I'm so impressed already actually I mean I just think this is really good uh keyboard is keychron Q3 nice marab thank you so much I told CSS wrong path oh yeah I think I think we both got there okay so now then I guess I can just use this input right so I can just say input foreign components UI inputs and in theory wait what was this oh yeah let me pull this back uh content Garden is here I've now just got the bloody input so what props does it take can I take a label wow well I'm extremely impressed so far this is just badass so yeah I can take a label html4 so I can just run this grab the label as well bloody lovely ah good thanks Muhammad components equals UI yeah I wonder whether it's sort of just doing like you know chancy and UI this is where you put the UI stuff I guess maybe sometimes you have different types of components this is great though so I can say label because that's just now in my setup isn't it so label and I guess I want to add um uh name for instance and I can say html4 name input name equals name and there's a form here too right so form field render form item form label form control [Music] this is so cool eh wow let me just check on how that's doing so now I've got a name put my input go hello oh I should probably not this there we go okay wow oh yeah you're probably right forget how the Dom works so cool okay okay don't have chat is shared here maybe if I met Chad in person actually I met him at next conf a while ago this was before like Chad see and UI when he was focusing on Drupal stuff I think just met him by accident now so the thing wow okay so impressed so far with any of these like component libraries though you've got to be thinking you know how to actually compose this together and you when you have these components that you're not familiar with you need to really learn their composition patterns and you need to make sure that you know like okay I need to know that the label goes beside and input I suppose to um nested within it or you know like input nested within the label although I guess it's just sort of behaving as though it's a so it's a standard HTML element hmm okay well very cool so let's I guess I want to start getting the structure of uh do I think Chad CN better than Tailwind UI I have no idea no idea I've not used um I don't own shazian UI oh sorry I don't own Tailwind UI so I can't say whether purchasing it is better than this speed too much size for input not sure what you mean phone components have a lot of components such you don't need to use labels error message cool okay so that's so I guess the form thing is like yeah this is it yeah okay mm-hmm so we're going to form field here form label from control IC so that's it all bundled together basically okay so if I add form then it should just work it's like what you're thinking pretty cool if so um you purchased our UI nice I'm trying out chat CN right now I mean it's composed of things that people have been putting production for yonks so you know Zod Radix Tailwind why wouldn't you okay so what did it add it added form and form here has a bunch of stuff useful wow it's basically giving me like an entire yeah we go form label and then it's exporting that all down the bottom full message okay well let's get to group with forms just for a second then just so we know where we are so now it looks like I can just basically remove the input and label I really like this the fact that when you install something it's just like so easy to remove I can now say I've got a form this form is coming from um components UI form what's going on here children never okay cool cool form field I guess there's some sort of interesting touch group okay it's interesting because there's erroring here Bots uh let's see performance overpowered if uses odd SEMA have it as a resolver error messages yeah okay I don't know if I want to be that in depth it's interesting because I'm not sure in this app how much of this stuff I'm going to be doing well so form field yeah it looks like it's really really linked into react hook form ah hang on yeah yeah yeah right this is the approach then basically use the form hook down yeah pass it in got you so we say cons uh form equals use form and then what happens here we spread this in form provider do we literally just spread it in Yep looks like we do form field control is form dots control yeah then what does it need name uh I imagine I'm probably gonna need to pass some like default values into here so like name String email string thank you copilots let's say name is now name and I need to render this let's just try this funny is a render prop I'm seeing render prop in a while from the label from control from description from message very cool all here and now we grab field so is the theory then this is all going to be like just inferred based on the Zod resolver that I passed to use form so I don't need to actually pass it a label seems I mean so oh yeah okay so you do need to pass it a label you've got your form description in here for message I assume is like an error message so my form fields let's say it's like this form input aha I shouldn't have gotten rid of the inputs so I can just go inputs here and now I can say inputs ah so cool Imports inputs from components yeah from there thank you what did not work oh yes form dot input form dot label don't know this seems fine this Library looks like a set of simple wrappers of standard tags of HTML css2 so Tailwind season to group them for react what are the advantages of using it I think the advantages are they're just really nice like it it means that instead of starting from a base of like these other HTML elements and used to style them themselves you get some just some really nice quality life stuff so like all of these forms and stuff they're all going to be looking nice from the moment you put them on the page and then you can just do tweaks so this then that's going to be field that's just going to be working so I can't resolve the label right just save this what's going on with you eh okay looks like a caching issue so refresh that uh keychron Q3 is my keyboard off uh componentize use field array I don't think I need to at the moment seems like you have to install the all the library for Chad CDN no you don't uh oh I see oh oh okay oh so form in here it's actually relying on the label that's really cool actually so form label actually uses label ha okay well that wasn't caching error then that was just my fault yeah accessible out the box ah client components ah I fit my first client component error lovely make sense though I was assuming this was going to be a client component about not actually writing it okay so we got now our form label let's say it's like uh form label and let's put name inside here um your name stick that there let's actually just wrap this in like a um P6 Max width uh Excel MX Auto yeah lovely next width LG okay so that's cool so that's it that's the setup right Yep this video is saved yeah I need to install label very cool I can't imagine I'll get around to using use field array so all this stuff then this is for it's interesting because all this stuff it assumes you're using react hook form which I guess you want to if you want uh like nice errors and things and hmm hmm but I was thinking wouldn't it be better to just use like a normal form like a form tag not have all of this kind of like you know JavaScript loaded in not even need this to be a use client components this is cool this is cool this is cool this is cool so we're investigating this now but let's actually get down to building the thing that we want to build we have a you know what let's just do some pure CSS so I'm going to go into my layout here I'm going to go up here and underneath my body I'm going to add a nav tag so this should now if I say hello world this should render out there okay cool so let's make this my content Garden let's actually get this looking nice and I'm going to go into the tank a little bit and I'm going to um just can try and style this real nice so let's go P6 just for starters content Garden probably needs to be in H1 and guys feel free to ask questions too um yeah Eastern Hill let's go with um tracking Tita um text Gray 700 and you've got any nice like um would you call them like kind of dashboard sites that's kind of what I want to copy here um so I'm gonna go border B two need that one now that looks pretty gross yeah I'm just gonna go border top four and border to sky have a little bit of blue I want to make this like a sort of bluish theme I think really big touch grip files uh well I use x tape I might use sextape there might be a use case for X8 uh I can't semi bold yeah it makes look a little nicer text like even lighter gray I think and I might actually go um so enter class name let's also add in BG Gray 50. PG Gray 100. bump the text a little bit py4 it's good for a starter I think hmm yeah HTML tag this is basically just rendering the very root of the HTML looks like so I'm inside app layout and there we go there's my literal HTML tag looking good looking very good okay so let's try now using a so there's a menu bar up here hmm man that's so cool look at this stuff man people are saying why use Chad CN just look at it gorgeous navigation menu gorgeous gorgeous gorgeous okay yes I want that please give me that this is vs code I know them M1 MacBook T3 stack I don't need all the bells and whistles I just want um basic nextgs I'm gonna be building something relatively custom as you can see as it will rise as you will see when we get to the back end but most of what I'm doing is very similar to T3 okay yeah tracking title is um making the letters slightly closer together so navigation menu then looks like I can just pull that in blah blah blah blah blah [Music] is this going to be a client component though it probably is yeah so let's go menu.csx um export const menu equals this I've just always used vs code and I just really really like it I think there is something like add all missing Imports look at that you guys see that I can go command dots and I can say add all missing Imports in this file how beautiful is that so now should if I go and use this in the menu and I imagine this needs to be a client component but it might not um probably just do some flex stuff in there but let's just say menu no not Lucid react menu yeah okay inserting component that needs effect so this is going to have to be a use clients which is depressing really okay okay we've got our item one looks pretty crap how do I get it looking like this boom oh this is real fancy navigation menu demo oh I see I see I see okay let's just actually grab all of this crud I'm about to sneeze sorry about that kids so I can copy all this I assume uh go into the menu components icon so and I get the icons give me the icons cooler includes icons if it does ah I'll add those later uh oh yeah icon dot logo fine fine fine fine God this is so cool there so that's all in there navigation menu demo I actually want this just be menu and pull this in again there we go now we've got our getting started our components in our documentation let me wrap the nav in a bit of flex uh items Center and SpaceX okay looking cool that's looking cool oh oh okay okay um I need you to tell me everything that happens in the ashes because I want to be watching it yeah the base one looked pretty crap this looks nice this looks nice I was importing from ratings okay so the add-on missing Imports actually just screwed me over whoa I see rain I'm in my garden office right now I've got stuff hanging up well this is nice prepare to see this Everywhere by the way because this is just too nice not to see everywhere uh okay right so I've now got this menu then and I don't need this logo I don't need this kind of big one at the start so I can just decompose this and I end up with this cool right now then so let's actually just justify that to the end foreign Center justify between there we are looking good yeah chance again looking nice same so that's that looks like I just want to understand that component a little bit more it looks like there yeah components I see so that's doing some mapping there got a trigger and then we've got a list item and this it looks like so if I just comment out this UL ah oh I see so this is doing all the logic for how big that's going to be so that whole grid there I've got a style here CVA class variance Authority I don't know what that's supposed to be doing actually that's cool though huh so that opens a little bit narrow there anyway we'll sort that out later this is just getting a bit of a sense for what's supposed to be on this page so okay all right now we've got a bit of understanding about what's um I looks good eh now we've got an understanding of like what we're supposed to be doing and the sort of basic setup I want to I want to start working on the back end a little bit because I want to actually show you sort of what we're supposed to be doing here and maybe actually just thinking about the back end and sort of discussing it will um bring it a bit clearer to me what the next thing to work on is uh no I plan to use next year still I really like nextgs nextgs is Fab I look handsome thank you Ben the issue is Ben is you always look handsome you've never in not a day in your life has it gone by that Ben Wilson has not looked handsome um so let me go to TL draw and let's actually just draw this out so I want to go for content Garden plan so I have this huge um the coding virtuoso oh lovely thank you very much I have this huge database basically of um stuff essentially and this stuff is grouped into various things there's like I have a big list of things I think are going to be noteworthy that I should post and these noteworthy topics kind of have their own folder right I also keep a list of the things that people find confusing about typescripts so like confusions um actually that list as well if you like so what's in in here there's so much stuff in here so much stuff and what I want to do is I kind of want a UI that helps me manage it a little bit easier so let me see yeah get rid of all that so you can see on the right hand side here there's like so many of these different categories like I even have stuff that's not to do with work in here like planning holidays and um uh there's a bunch of resources that I want to go through and like um look at so that I can you know take their ideas or amplify them further or like it like so I did this with fetblog for instance and everything has a checklist so I did do this with fat blog I did make a Twitter thread of all my favorite articles so didn't excavator get changed until draw I know it's a different different thing it's very good though so there's a bunch of these things and I want to also enable some AI stuff to do them too so we've got like oh look how many noteworthy topics there are by the way there is like 87 at the last count but I added a bunch more today and so every time something interesting happens on Twitter I like add this here so what I want to do is I want to actually maintain the idea of sort of editing a lot of this stuff in vs code because inside here you'll see like this react.fc setup I have a list of things that I need to do whenever I think of a new noteworthy topic so like write a code sample um put it in figma post it to Twitter write an article um blah blah blah sometimes it doesn't make it all the way down here so I don't make YouTube videos about every single idea I have but it does make a difference having this sort of all captured in one place but I would love to do this via a UI as well I want to because I write a lot of articles in here so TS2 slash that's the old stuff old articles yeah here we go so like I keep a lot of notes as well and these notes are written um yeah using uh sort of like typescript code samples I'll write articles in here I'll put all sorts of stuff in here so I want a way to kind of normalize this in a UI and also leverage AI to do this as well because some stuff I do like I have a bunch of AI stuff so what's an article that I've actually written in here whoops article let's see um did a wrong one for us const a rain number no article.md as in map types get Tuple indexes what I thought I did that's cool sporting info figma well maybe I didn't write one for that I did want one for this because I just did this the other day so for instance here what I have is I have a um a setup where I can actually just run like a prompt with um chat gbt and what it's going to do is it's just going to generate me an SEO summary of this article very very quick oh my God that's so long for God's sake that's supposed to be 160 characters but true is kind of crap these days so um where am I prompts prompts.json let's see SEO summary given the article above write a short SEO friendly summary of the article do not use markdown formatting the output must must not exceed that let's try it now uh SEO summary I'm pretty sure that's over 160 characters uh extension I'm using for the file explorer logo I think it's just icons or something necessary to make an interface for every custom object not sure depends on your use case um so what I'm thinking what I kind of want to do is I want to yeah basically be able to run some of this AI llm stuff inside a UI that's kind of talking to a backend so I need to build a back end to this as well and this back end I think is going to need to be like connect via websockets partially via websockets probably so let's start that now so the first thing yeah I want to be able to hmm okay I have a plan you like my cats thank you very much thank you I did it myself it's bloody easy how are we doing in terms of numbers as well let me take a quick check blue blue uh in fact no I can't be able to check I just want to get on with this so the wings is going to work then is I'm going to you think it's a cool idea thank you that's why I think of it like a Content Garden right so I'm just gonna go whip for now it's a kikron Q3 how many times now has someone asked me about my keyboard yep video will be available I need to just do an FAQ or something right a pinned comment down below saying this is a kikron Q3 the video will be available after the Stream let's get this going so I'm actually going to put this inside a CLI because what I want to do is I want to run bin.ts and bin.ts is going to be the kind of entry points here I'm going to install a package which is going to be called pnpn add TSX as a Dev dependency and that is going to basically run this file as a like alongside this Dev script whenever I run it so let me just say um bmpm add the concurrently and this is going to be our next Dev and I'm also going to run CLI Dev which is going to be TSX watch CLI bin.ts now Dev oh no uh ever right oh no no not overwrite what am I doing owl uh Dev is going to be concurrently run those two scripts so yeah see light Dev next Dev and I think I just need to install this again great headshot no that is a genuine photo the one on my Twitter the one on my YouTube did you you had major issues trying to limit Champion to account yeah Ricardo that's pretty deep and quite a strange thing to say to someone uh right okay so let's do it um now what we can do is we can run let's just cancel log hello inside here yeah I like the 1l that's good and let's go PM PM run Dev I can currently command not found have I spelled it wrong yes I've spelled it wrong whoopsie nice ah I can just do this instead and I'll get a cleaner outputs nice okay I'm I'm intrigued to like I haven't pushed that many projects recently I've been just working on learning materials so I'm really Keen to kind of do this to actually get my head more in the game of actually developing apps and working on applications so right so now is it saying hello so next Dev with code 9 bad option watch okie dokie let me just check the documentation for TSX I don't share my prompts actually TSX Docs not GSX TSX npm so it should have a watch mode yeah yeah it's just a bit overkill for this use case turbo repo I mean at TSX watch okay so it's not an option it's just like a sub command oops TSX watch CLI bin JS and now I can run pmpm run Dev and it should just work and then we get so we got our server started on 3000 and it's saying hello with a stupid voice and now if I go back to bin and I change it from Hello to uh wow cool then it's going to run it again and say wow cool great lovely beautiful pnpm is great should just use it and yeah basically a staging error for Content posts exactly uh so it's kind of I have this huge great big uh wall of content that I've been developing and content ideas I have like checklists for each idea that I have that I need to fill out sort of when I have time and I want to build a UI for that so this bin now uh let's just do some stuff inside here because whatever we do in this file now is going to be then reflected in this terminal output and let's align it right so you guys can actually see it uh clementson a panel position right here we go so let's go there now if I say wow cool like that that's going to work nice okay so let's go const um I'm going to install fast glob I think so I'm going to need that immediately pmpm had fast glob so fast Club I'll import that from Fast glob because I'm going to need to find immediately all of the really you need an alias to stop typing to letters pnpm is fine uh so I can say I'm also going to need import path from path uh import FS from FS now what I can do is I can say const um DB path equals it's not process dot could it is pass.join so it's going to be dear name and dear name is going to be up think I'm trying to remember where I put this now written Contents I think so I can just console.log the dbbath that looks right oh no it's going to be up further than that because we're inside the seal aren't we okay so now I can say const files yeah let's try that console.log the files yeah here we go so now you're seeing this 514 markdown files just like well even more than that just hanging out inside there so that's good uh difference between TSX TSC TS node and uh okay so TS node uses uh basically runs allows you to run a file as if it were node I have a feeling it runs TSC which is the native um bundler or rather typescript's kind of own bundler to turn typescript files into JavaScript files so that's TSC TS node runs TSC TSX runs es build which is a lot faster um a lot faster but doesn't do type checking because I don't need type checking on this particular project or for doing this really I just want to run TSX which just lets me it's like node mon but for typescript files and it's super fast and super good um this prompts.json thing is something that I built myself okay okay so we got our files let's actually just get const folders equals FS Dot sync and it's not going to be dissed it's going to be DB path Okay so we've got our folders now let's uh console what are you moaning about foil already oh make this thing whoops uh read the sink whoopsie the daisy uh console.log folders folders lovely okay so now um I need to hey can you love from Oxford I need to filter some of these outs and I need to say f um return F dots so I don't want hey I guess I don't want any to include that and I'll console log this yeah so most of these are good I don't want node modules so I'm going to need like a a white list or uh disallow list here so let's say folders to ignore equals I don't want old in there for reasons don't want node modules uh what's the logic here yeah thank you copilot okay good DIY holidays yeah that's it so these are all of the categories all of the potential things that I uh want to grab here so that's good hmm I'm basically creating a server using node.jscn this is it's a very basic node uh okay so I basically want to create a kind of SDK here um this SDK how am I going to represent this because I might want to test this actually you want a PB you didn't want to leave the stream just just wet yourself just go away yourself you know this SDK how am I going to represent this because I basically just want to create some methods here I kind of want to create export const um I'm using TSX and using TSX watch to show the log without running typescript is just way better than flow it's not even close so I want to say export const uh get folders now this SDK is going to be basically where we have all of the methods for understanding what our sort of database is so we have our get folders here we don't need to pass any stuff here and I'm going to make this uh async because these get folders I'm using this sort of sync stuff because it's cool okay let me declare this inside here because DB path is definitely going to be very important for a lot of the stuff we've got going so naught path path there DB path and get folders now it's going to grab all of this information and stick it there so at first I'm going to need that flow I mean people are people at meta really like it and it's and it's got some cool things to it it's just runs pretty slow in vs code basically that's the reason why I don't like him and I mean I'm too deep now I'm too deep into this so I can return folders and actually hmm so read this sync I can now uh I want to turn this into like a async method because async stuff is easier to easier for node to prioritize basically it gets to take advantage of the event Loop more instead of just making everything sync so I want to do read dear inside here except Red Deer accepts a callback and that's not going to be useful to me because I want to make it behave like an async method so I can actually import this from FS promises instead and Fs promises I can now just await the reader results and I can actually just wrap that yeah and that will work so that now awaits the results of reading the directory and Returns the folders I'm going to add an interface here which is going to be uh get folders results that is going to be folders and I don't want this to be a string I want this to be a path string I want this to have a label string as well and this is going to return a promise of get folders results you're going to be screaming at me and saying why are you like manually annotating this return type here I'm doing this because I in like a file like this which is probably going to be used across a project I actually want to be forced to be made honest here and I want someone to be very easily like really easily be able to see okay this Returns what it's supposed to pretend I have not tried Vim fast glob is basically a globbing tool uh and nginx and Envoy no I haven't I do not have any advice for kubernetes I've never used them so folders yeah folders.map now I need to find some kind of like setup here so I need the I guess I need a absolute path and I need a relative path so absolute path it's going to be that and relative path is going to be that and I need a label so I need to say const transform Dash case to sentence case and this is where copilot I'm just going to be able to just go wam bam bam beautiful you're beautiful that is lovely stuff so label now I can just say transform Dash case to sentence case now finally after all that I can say const folders equals await get folders uh there we go top level away is not with the cgis output format yep yep yep so I'm going to actually just go constant Main I could enable like would you call it top level await here but I just can't be asked so I'm just going to name is this and I could just say Main and I'll catch it if it errors and if it does error I'll log the error and exit the process yeah so I'll go console .log folders and now I should there we go look at that that is what I go to school for look at that now I have my absolute path I have my relative paths I have my labels and all of my all of my stuff coming out so there we go DIY conference appearance confusions all looking good that's really nice microservices like no I haven't I'm not sure that micro front ends is a great idea I've never been convinced but if you have an organizational problem that can't be solved any other way then you know what am I building um sort of like a Content Garden thing uh prism is great yeah prism is really really good um yeah it's really good I mean they're a serious company doing serious work um the people who I've seen work for Prisma seem really really solid uh drizzle I don't know how good it is as an alternative but Prisma is pretty great waiting for the advanced Workshop yeah it's coming on two-thirds of the way through filming is okay so we got this working now now what I want to do is actually let me just take this then because in theory I could just take this SDK and I could use it in the app so I'm tempted actually to move this into the CLI there so now I can do package.json I'll go Source CLI bin and I'll have to restart this because I've changed the location of this yeah prism is good Sam Pellegrino is the best sparkling water I agree drizzle's really good okay cool it's good to know um okay so that's good ah okay okay okay because I've changed the value of that now actually yeah I should probably not be using DNA in here I should probably be using process Dot which is the current working directory because if I change the location of this file it's actually just going to mess things up a lot so now it's about wow cool what's it actually doing here console.log folders this CLI basically goes and grabs a bunch of different categories of things basically this is where I want to manage a bunch of my content you'll see it in a second so now if I go into my app directory and I go into the layouts and I change this now to an async function root layout this is going to if I go const folders equals await get folders from the SDK this stuff then I'm going to be able to pass this into my menu but let me just console.log the folders first so I'll remove that from the CLI now in theory Theory um should be able to basically refresh this page and it's going to go and grab all of that information I think caught 6.9 seconds are you serious there we go so that now get folders from the SDK get folders result I'm going to capture this inside another interface folder like this so that now my menu can actually grab taken up as a prop ER folders folder array that's cool so now I'm going to remove this getting started item where are we actually so this is the oh yeah okay that's the list that's the first item that's the second item so let's say our content types and now this is going to be folders so folders.map or props.folders.net folder so I don't need that actually I just need the title of the folder don't need the ref of the folder I need folder.title folder Dot label yeah and I'll figure this out in a minute but relative path is going to work there cannot read properties of undefined eh oh yeah of course because we're not actually passing it in yet so the layout yeah there we go this is going to grab folders which is going to be folders ah this is folders results oh yeah that's correct there is a URL Library happening and there we go look at this oh okay that's so cool so now this is our back end talking to our front end through the magic of react server components very nice very nice okay so we're getting somewhere let's um fix this menu so they actually pulls over a little bit attempt is actually just to move the navigation menu closer and Dot TSX not justify between just justify normal so now yeah there we go so the theory is here that I'd be able to just jump to like podcast appearance and see all of the okay well let's Implement that I've been coding for well like It's tricky because like I did it when I was a kid but then I took a massive break drop down menu open interaction I like it I like it a lot um oh sorry whack the mic then do you know somehow I can type check AWS cloud formation yaml files CFN lint I've used cdk before which is nice really really good right I've got a call in a minute I'm going to be learning more about effect yeah pop-up came out good it did it's cool to see everything linking together isn't it like having a name fetching stuff from the back end and just seeing it appear on the front end it just always feels like glorious and having that just work out the box is so cool so we've got a little bit of stuff working we've got some stuff set up uh I don't really you you came across my vids voice coaching lessons that's so cool I um yeah we're in a good spot I think I'm Keen to keep doing these videos because I like I like connecting with you guys and I like um building stuff and it doesn't necessarily Advance my my work or anything like that you know it's not like something that I'm doing to you know uh jack up my socials or things like that or like be the YouTube algorithm I just like doing it because it gets me coding and it gets me uh doing stuff I wouldn't usually be doing so I'm gonna keep doing these that's okay and I think I'll see you guys in the next one what am I going to do the next one give me a second I'm just going to close the garden doors typescript God thank you it's very intimidating I'm sure I want to be the typescript god it's just something I sort of found myself kind of doing one day which was slightly surprising especially for logging in prod I don't know I'm not I'm this I imagine that this well hmm I'm not sure what they use in total typescript actually so I'm not sure whether they use anything special for logging I would in general check out what the Epic stack does for that sort of thing so the Epic stack is by Kenzie Dobbs and it's sort of my default recommendation every time I'm not sure what sort of service to use or things like that so the Epic stack what do they use for logging login log I'm not sure you lost anyway all right this has been fun guys I will uh keep this video so you can watch it later if there's anything of value in it for you but thank you so much for hanging out it's been really really fun and not surprising I did voice lessons oh thank you well I did I did voice coaching too oh I see that's what you mean yeah now I did that for six years before I was a Dev which is a long time mate really long time I'm 32 now all right kids won't be the next live I don't know I don't like scheduling stuff it's sort of weird I just like to uh to do things and I like to just have it spur at the moment but I probably should be scheduling these if you want to get a notification when the next time it pops up go to macbook.com forward slash Discord that's the place to go and you can ask questions about the stuff in the meantime and anyway thank you so much for joining along thanks Saina

Channel: Matt Pocock

Views: 25,160

Keywords: typescript, web development, advanced typescript

Id: nHzyoGKo0g4

Length: 70min 0sec (4200 seconds)

Published: Wed Jul 19 2023