React foundation template with Vite & Chakra UI: VibeCoding in Cursor AI

Key Takeaways

hey guys you are welcome again to another session of wi coding and today we are going to create the white or the wheat and the chakra based template just by using the cursor AI ID for those who are new to wheat is a really very fast comparatively a very fast react template uh most of theer projects are being developed using the wheat so you have option to create the new pro project using npx Create react app or you can use wheat you have two options but whe is competitively very fast for larger project whe is a very good option chakra UI is a component system which is designed based on Tailwind CSS and various other latest react component so using the chakra UI you have ability to really write way better tag based uh HTML component rather than updating the CSS using the Tailwind design so combining wheat and chakra UI you have best of both world and that is the objective for us to create the template which can be used again and again and again as needed just by using the cursor AI ID so what I have done here here I have just created a new folder called the wheat chakra template there is no content everything here there is literally nothing so if I go to terminal here I can see a we chakra template it's nothing so very first thing I'm using cursor ID agent as you can see I'm using the Cloud 3. 7 Sonet right now sometimes actually what I do is that if you do not know which one to choose use you can use the default default is that way and here default could be a way to go and if you are restarter let's rest start with default then I'm using agent here we have agent or ask so let's use the agent and very first thing I would just say create a react based template application code using wheat and chakra UI okay we have created uh our prompt and we had requested our prompt to be processed at this point you can say it's using the command called npm create wheat which is latest pack package dot is the application name dash dash then dash dash template using react TS so by default it's creating the react template using the typescript if your project is not using T typescript you can actually remove the T typescript here and here you can actually give your project name rather than a DOT here so this is the folder it is going to use so I will just call call it whe chakra template with wi chakra UI that is our application name one thing as you see that when we gave this command this command didn't run rather it's asking me to run this command and that is because if we look into our settings the settings the YOLO mode is not enabled so when the YOLO mode is enabled it really help helps us to run the command by itself but this is not a good way because you should know what is commands are running so you have full understanding of what is happening so we can look into the settings okay so let's go to let's come to cursor settings okay here cursor settings here are our cursor settings if you look into the cursor setting here as there are General I think it's in features okay check and you have enable YOLO mode so that is in the features that's where this run command option is given to us so that we can know what is happening if you say if you enable it then command will keep running so we will run this command run command this is our project name command is running let's look into here as you see with chakra UI project is created we can go inside the V chakra UI we can see this is the code has been created after this code is created now you can see now let install the necessary dependency and package so this code will run inside here install the chakra UI or react package emotion emotion style and frameware motion so let's run this command again and if you click this popup terminal then it will create this another terminal where this code is running so this is the terminal which we are using I I am managing and this is what is terminal which is ran by the cursor okay read me generated so now all that thing now as you could see here there are lots of code has been written under here as you could see it say plus four files that much code has been added updated so one option is that you can say accept all and you will not know what had happened rather than you can come to IDE here you can see that all the files which has been created inside this we chakra UI folder package SRC everything so what you could do is that you can always look into and you can accept file or you can actually review the Cod code and you can say accept in this file there is only one accept so you can look into here what has been added and because we are not creating the typescript code so this code is pure react JavaScript code I can accept it now I can go to review next file I can look into here chakra provider is added into the main I can also accept it I can go next and here the index. CSS has been updated okay if you would want to keep checking you can say accept you can go next you can look into here there's another accept So within the same file multiple changes are there and I'm just accepting everything one by one by one so this is read me okay and why I'm doing this because it might taking the time but if you are a starter you have opportunity to really learn everything what has been added by these AI code editors I can go to review next next file here body has been updated okay we can go I think there are no further update all the updates has been added here we can see everything uh install now we if we want to add update more packages this is the editor terminal window this is our window here we can see what is there if you want to do it by ourself we can do npm install is just install if anything needs to be done or we can just run this command npm run da so we can go npm run Dev this command has just started the server uh react server underneath and now we can go Local Host 5173 we can see the code so we can come here code executions local code 5 173 and here is the template very simple template which has the we and react and if we go look into the code we can see checkra provider has been added here and as you can see here it's suggesting that we should be able to add the theme here okay let's come back to ASP jsx this is what has been used uh main. jsx is created Js Js SX and TSX but we are using the ASX so here the a GSX one this is our code if we you see here that the code has been written using the div it means that this code is not really using the chakra UI as of now so we can look into here and see what is happening so chakra UI provider has been added but the chakra UI theme has not been added here so we can say okay uh looks like chakra UI is not added to the project would you please add the theme also to the so we are asking themes to be added because as you could see that app.jsx whenever we are trying to look into the theme is not added okay so here is the theme we can look into the theme theme has been added here let's see so chakra UI react extend a theme which is coming out from theme config type here are the themes okay we need to install the chakra UI icons package chakra UI ion okay to fix some lter errors okay go ahead run the command we still have to accept those changes which we have done earlier would you like me to add any additional theme customization or make any other Improvement of the templet so before that let's accept the code see what else code changes is really needed okay let's accept this accept this accept this accept this okay this is another and the spacing okay is color mode use color mode so import okay so we can run this code and if there will be an error we can see okay so using brown color is this so icon yeah installed okay okay let's go back look into the run time close it make sure npm install anything if there is any residual then we can go npm run Dave running okay let's see what's this error is so as you could see that the code has been written both the typescript as well as gs6 so I can actually ask and say uh that looks like the code has been written into both react and react JavaScript and tpts the script format uh can you remove all the code related to transcript and keep the Java Script code only okay because that's and why the time it's happening let me just close all these tabs and while these files are being generating uh new files are being generate generated and the old files are there even if you close the tabs that's not a problem because all the new work has been happening here so you can always review the files and you can click them in order to if you would want to check what is going on because this uh particular window is showing all the work has been done based on your very latest prompt given to the ID here is asking us to is deleting the themes we are we can accept it it's deleting the app. TSX we can accept it main. TSX let's accept it okay these are the changes now the code has less we can look into app we can look into app.jsx we can accept this code change we can also accept this code change okay make sure everything is accepted okay we can review next file let's accept this two everything looks good good let's review next accept accept accept looks this one to chakra provider theme theme is there okay so looks like all the files has been updated which needs to be updated okay we need to reload here let's close this run Dev very good now we can come back we run we can actually see here that there are some errors errors are your friend because they let you learn a lot what is going going here so this is the error UI icons no matching export let's take this error from here and you take it you can say you have just dumped all the error I noticed that there is a r chakra dependency so let's fix it so that's the reason I wanted to have the proper packages which is required for us to get chakra UI working because this is the kind of little tricky problem which I have done earlier couple of time that very first pass the chakra UI does not really get implemented correctly so it might take some time for you to just make it happen and once you build one time then you can keep reusing it again and again okay so there were two commands needs to be run I run both of them so now it's fixing the react uh that's exactly how I was expecting because depending on the react dependency and the chakra UI dependency we have to make sure because as you see here now it's moving from Chakra UI version 3 to chakra UI version 2 and that is required because there are some internal dependency issue between three and wheat I have seen so that's a better way to run this thing okay let's reinstall these packages and trust me I have done this thing earlier and this was the better way to go and usually if I'm doing something uh creating the template it it usually takes about half an hour to 1 hour for me and once I have it I can keep really using it so this time I thought that I should create this thing for for you so you can also take the advantage of these AI ID to build your templat great looks like everything is done we can come back let's close this thing and run command open Terminal so we can say open terminal is it is basically going to run command could not read package okay not a problem I we can use that npm uh that is wrong place is running it has to the place it should run so we can say we can actually say exit because we already know what we are doing we can come here we can do npm install in case any residual thing npm runev everything looks good here let's come back there you go everything is working here uh react and checkra UI now we can go look into the code we can see here app. GSX welcome to we react and chra UI that is your template code which is working okay let's me close this that's exactly what we are looking for but we will go and add a little more to it so now what I want to really see here is that here is a box what col stack heading so these are everything coming out from Chakra UI so that's why once you know chakra UI these these tags it becomes fairly easy to write the command or everything the way you would want to write this so once we have this thing we will just enhance this script Just a Little More by adding few more commands so we will say uh please add menu and Sub menu structure also in the project by adding separate files for menus and routes uh as of now just add one main uh two main menus name dashboard and you users the users menu also has two sub menus as profile and settings okay so we are adding the menu structure the code sidebar everything has been generated so that could be our base page okay code has been added accept all will takes care of everything okay now it's one is asking us to install few of these things review next file we can update the code let's start from Top here as you you can see the package.json has been updated with more dependencies as needed let's go to next now you can see that we are working in sidebar so this whole file is just added new for us so we can just accept here we can go next now we can see the dashboard which is a new page is created dashboard is added we can go next this is a profile is with profile for one of our sub menu let's accept it go to next we have also created the settings let's use it accept it all the files has been updated now we can look into and I think all the updates are done there is no further updates available so we can run this uh command let's where we are okay this was okay I have closed it uh npm install so if you look into here npm install where it's running I sometimes suspect it's going to run in wrong place now updating the main app because once the structure was added for the menus and sub menus sidebar everything sidebar comp component Pages has been now the update Main and update has to be updated let's review the changes so in the app.js as you can see all these new components has been imported some design and then changes let's update the changes so app.jsx has been updated this is our new structure has been created which is very ified here would you like to me add additional features not right now we need to do so we have already checked that thing uh we can see npm install if there is anything residual or then after npm run Dev it's running 5173 and as you could see here is a dashboard here is the user profile settings and that's our VAR base so if you would want to have a landing page and from lending page then you are navigating to there you can have or if you would want to just add a very quick login page and then when the login click button happen then you uh render to lend to dashboard that can be done so let's that let's have that the last option and then we can go from there okay so we can say uh would you please add a landing page uh first which has a login button when which has a login menu or login option at the top navigation bar okay when login is clicked open a side panel for user email and their password to be inserted for now uh just create the action to jump dashboard page when anyone clicks the login credential submit button so we have created a design where we need a landing page just a base landing page and in the landing page we at the top we have the N navigation bar in navigation bar we have a login button and then the login when click happen side panel op opens up where the username and password can be inserted and when somebody submit those username and password and for now we are just jumping to the dashboard so let's change accept okay here okay routes are being added and here that's the directly now these navigation to those menus some menu is removed and now everything has been changed to a different okay here we have lending page added new page let's accept that all so landing page has been created and app has been updated accordingly looks like all the things have done now we can go look into our code has been updated let's go back to that is our landing page here is login everything starts and when the login happens side happen so this is a side panel login it opens up the email password and when we login happens we need to put some information here so I think oh it's accepting us to proper email and now we are back to here okay we missed one thing last that we need to add the exit the log out button in the menu at the bottom so we can also ask that so please add the logout option into the menu panel at the bottom and for now when clicked please route the navigation back to landing page so menu has to be updated in order to get what we are looking for and okay let's review the changes to accept accept accept those changes these are happening in sidebar so sidebar where the menu options are okay changes are here okay changes changes you can actually design the button you can whatever you would want you can add a whole new design so that's whole sidebar is updated means all the control related with log out has been done sidebar updated and the log out option is actually here I can click the log out oh I have to move my okay login let's put password okay there you go click perfect and here we can say log out that's where so that's pretty much our code and this whole code is here so I will go ahead and I will package this code and update this code to GitHub uh repo so anybody can use this template so here is the folder AI V chakra UI so 650 AI lab VIP coding here you can get this wheat chakra UI template code this is pretty much the code which we have generated everything thank you so much for your time I do appreciate if you like it if you have something specific you look for uh please write your comment in the video and I will be very happy to facilitated once again thank you so much for your time peace