Use ChatGPT to Code a Full Stack App – Full Course

learn how to build a full stack application using chat GPT in this course you'll learn how to Leverage The Power of chat GPT to accelerate your development process and make programming smoother Judy is a full stack developer and teacher in this course she'll demonstrate how to build an educational application using chat GPT to ask questions about coding syntax troubleshooting and learning best practices you'll also discover how to use chat GPT to build various features including authentication browsing courses and creating categories so let's get started and see how chat GPT can help you build amazing applications with minimal manual coding hello everyone this is Judy and in this video I'll show you how to use chat GPT on every step of the way for full stack development one of the benefits of chat GPT is its abilities of accelerating development and making programming or learning process much smoother during this one walkthrough will build an educational application and you're going to see that minimal manual coding is done but don't take my word for it watch the tutorial examples of questions we will ask chat GPT include coding syntax troubleshooting learning best practices and receiving guidance on picking the right tools and platform for your project also using it into our application will build various features such as authentication browsing courses its categories and many more I'm thrilled to present various prompts I have explored and demonstrate how you can make most of charge GPT so without further delay let's dive right into it when using chatgpt as a coding assistant it's important to provide the right context the model has been trained on various kinds of data and its default answers can be quite generic however by providing more specific information we can achieve better results with that in mind I'm gonna ask it to act as a developer so I'll say I want you to act as a software developer I will provide some specific information and this is where we give it indications as to what its mission is throughout this conversation which is to come up with an architecture for developing easy to use course app so far this description contains very general information the goal of this app is to allow users to take online courses on different subjects and Below let's list uh features we want the app to include which is going to be authentication courses and their categories we also want course search payments and functionality of saving courses as an answer chai GPT proposes an architecture and provides a division of the stack it offers as you can see sections for both front-end and back-end development with suggestions for tools and approaches within each section let's review the list and furthermore you can reuse this template the description May differ depending on the situation but still could be useful reference for your future projects and if you want more comprehensive guidelines on building full stack apps check out my notion template for full stack roadmap I have included all the parts of the stack as well as the topics and resources you would need to build applications and yeah check the link in the description if you're interested all right let's go over the list now we have user interface developer responsive user-friendly UI using modern Technologies such as react and angular to provide an intuitive and engaging user experience so for the authentication a scalable solution and it provided us with options of os JWT and open ID connect these are indeed I would say one of the most popular authenticate ways of authenticating users then we have course listings display in user-friendly allow users to browse and search Implement filters and sorting options for enhanced visibility okay most of the searches do have indeed filters and different options so for sorting that's good payments are processed through two common Solutions stripe and PayPal and additionally we have course details course progress tracking and the ability to save progress to your profile let's take a look at the back end what components do we need first we need an API so that the data can be communicated between the backend and the front end using a back-end framework such as node.js Django or laravel once we have that we can focus on the database chat GPT answer mentions mongodb in MySQL and postgresql as examples but these are very different solutions and to get started let's pick one database and gather as many details as possible about it so I'm gonna say let's start with database how would you structure it and would you pick relational over non-relational here if you don't know the differences between the two you can also ask what kind of databases are there in general so it would give return list of like descriptions and differences and it does suggest to our question to use both and let's understand what's the reasoning behind it so consistency and Clarity are crucial when defining relationships between entities such as profiles and courses well it's straightforward to determine whether a user is enrolled in a course or not tracking course progress can vary significantly between user and courses therefore doesn't require strict consistency and I agree with the statement uh we do not need like a very structured data for progress but we do uh need a more clear definitions for courses and the profiles entities itself let's dive into the courses table and I would say how would you structure courses and charge GPT returns fields for the table but we can also ask it to print the output in a tableer format for better with visualization so that's another prompt to remember and this is the stage where you you can request notifications and iterations before jumping into building the app since this would drive the core functionalities I would recommend taking enough time to think about it however don't spend too much time on it not to delay the start of the project and when it comes to getting assistance from chai GPT it's good to have this like step-by-step approach so for example I don't want to add the metadata so I'm going to ask can you remove metadata from the table and it should uh output a new table without it and now we can start thinking how can this table can be translated into a code so I'm going to ask it to generate a Prisma file that is where we Define a schema for our database so it's good that it also marks for example course ID that can be used as a primary key and it also gives us explanation because this is the first time we're using Prisma in this conversation so it would Define the prism as a modern database toolkit that provides typesafe and then intuitive way to define data models and interact with databases in various programming languages and to note even though this is created in Prisma it depends on what kind of language or database you're using it with and this is also indication where we can give it more details also if let's say you already have used Prisma and you don't want extra explanations we can just use this prompt code only and it will be faster if you're generating a big code and want it quicker okay so now my next question would be how can I use this with the backend that I have picked and this will give us what Super Bass is which is an open source alternative to the Firebase and let's see what else it tells us about it uh here's how you can set up prismap for Super Bass suppose uses postgresql and it's also providing us with the information that this is relational type of database so I'm going to list all the parts of the stack that I'm planning to use and instead of me going into for example three different documentations because I want to use actually a super bass and Tailwind the charge Deputy should give me all the steps so I don't have to like go look for it and on top of that if any of the two technologies uh that I will be using are not compatible for example charger PT should also point that out and once it's done printing I'm gonna follow the steps uh here with some modifications first step is to run the command to create next app and for that I'm gonna open up a terminal and paste the command here as and select the configurations for my next this app I do see that it says that the next step to install Prisma but I think Super Bass should have its own client and we can check that with chatgpt the answer that we got is that we do need a client module which is super based JS and it also provided a install command and an example how to use it with the courses table so going back to the terminal going to I think it named it my web app and then inside here copy code while this is installing um another thing that was mentioned here is how to set up Super Bass so that would include creating a new project and obtain connection URL for your super based database and you'll need this URL to connect your next.js app to Super Bass so let's go and do that I'm going to open this up I already have an account and so I'm gonna sign in create a new project I'll name it course app for password I'm going to let it generate and then copy press create now we need to get the connection URL that was mentioned here let's ask um tell Chad GPT what it thinks is the best choice for ID for this project I do use vs code and I think you also suggest us to use that and when starting a project with a new stack it's also helpful to check what extensions are available to use with it they can assist you in your development process especially when it comes to different kinds of files and syntax highlighting error handling this is what some of the things that extensions can provide so asking what extensions would you recommend to install for this Tech stack okay and now it's listing them arranged into like categories and you can install I think I have most of this already um this extensions so to continue working on the project I'm going back to the instructions that it gave us it didn't specify which file to write this code so I'm going to ask it I also want the whole application to have access to the Super Bass client which file should I implement this and how can I use that implementation of in-app file that's great all right let's do this let's create inside our source new file and yeah that is a cleaner way of separating the initiation of an instance of the service let's copy this code I'm going to paste it and let's ask how we can add environment variables it's going to tell us to create a new EnV local file and make sure to add that in so it's a good thing that it tells us it should be ignored to prevent it from being committed in a Version Control I've seen a lot of developers make a mistake of accidentally committing their API Keys which is like very sensitive information um and end up getting like a crazy high bill from their providers so to prevent that let's um add those configurations in copy the code and paste it here so that's our first this goes in yeah okay so then it even gives us the format of how it should look like and let's copy this from our project so I'm trying to see where did the oh here it is so yeah it probably got example from here and I'm gonna copy this replace it with it and super bass key then that's the key okay now I'm Gonna Save my changes also for the super super bass file and let's open up the terminal and run the command and then render so we can start our development instance and navigate to localhost to result in where our next GS app should show up now the next piece is that so what we did with basis basically we connected our app to our project in the Super Bass and now let's ask T what it thinks about like writing the schema I did ask it already scheme in Prisma but there's an option to do that also without a prism on so let's see what it says so push my schema to newly created supervised project and do you recommend using Prisma for this course app or just super based client yeah so it gave us this Prisma setting up Prisma steps but I want to know what it says about just defining as for whether to use Prisma or super based client it depends on your specific requirements and preferences a powerful way to interact including Super Bass it offers Advanced features Etc so it does say that just going with Super Bass and it is more suitable for smaller projects or when you prefer more lightweight approach without the advanced features a limited choice so okay let's say if it's we did do Peak the smaller model more lightweight approach what it's gonna propose instead foreign the first thing that I want to do is I want to add the course table so how can I push that to the Super Bass and it does give me the code that it already printed out but once you have crude operations okay but this is just the functions on the clients that we actually need to add the table here so we can do that also by doing manually but since we're using chat GPT let's figure out a way how can we get that from the script so let's see can you write a script for a SQL editor in Super Bass maybe you'll understand that one table for the project here's okay great now let's copy this one you can execute this on the SQL query or any SQL editor that is connected to your projects to create courses table let's see let's just select table and I'm gonna select all of this paste this in and click run where's this here success no rows return now next part after creating schema is sitting the database can you as first in Saving the database what script can I run to add some rows to course table and this should generate Us by like some sample courses that it will come up with so for example we have and it follows like the structure so it will create some dummy data names descriptions Etc and let's copy the code and run it into here let's go to the table see if the have been the data has been added here great so now we are we have the data so we're ready to copy the this code that it wrote for us on the client side inside the app we can display the data so it created some functions so crude operations okay perfect but before we go to the crude let's just display the data and as I remember it created this font okay like get function here now I'm gonna ask it to create a component that lists all the courses yeah so it also takes in the context that it told us to add this Super Bass file in the loop folder so that's great though it doesn't show how to set up in the beginning and now I'm gonna copy the code and let's see where it tells us to save this file okay let's just create a new folder for components and of course with jsx we can paste it in here first add that into the main page which is index.js so I'm gonna remove all this extra code here oops let's do import what kind of export default okay import course list from and this is components okay assuming I imported that correctly await Super Bass from okay so we need to update let's see export default super piece okay so what it did mistake is the import statement is I should be asked for default and here we get the list of courses The Next Step would be as we start creating more components and we're gonna have more files asking it about file structure best practices is also naming conventions of these files to recommend the file structure for an xjs using Super Bass and Tailwind should be following okay so and then it took into the considerations that we have several features and divided the page into the features so in xjs if you're not already familiar the way you create a page and the new link is by creating files inside of pages folder so it created login sign up dashboard um page for us and also in courses we have the list of the courses course ID and the new creation codes which is pretty impressive as for components layout is what we use like reasonable things in the layout for example header footer Etc it did create all of those and I guess the course card the component for displaying a course card okay interesting and then we have a setup for Super Bass and tailwind and some styling usually we don't have much in the global assistance and the entailing file any custom code that you update to the Tailwind or like setting a thing goes there and let's see the explanation so you just go through uh what I mentioned and for naming conventions it's recommended to use descriptive so it offers us two cases camel case and a kebab case so let's see which one it went for of course you can name files related to course with course as a prefix okay so course list that we already have that and then detail similarly you can follow similar conventions and let's see how it named the components with yeah the capitalize first okay now let's ask it to create course card for to rewrite course list using the course card and let's also ask it to do the styling like of how we want so for courses let's display them in Grid and also let's ask it to create card with some like Shadows borders Etc so we can all describe it to it and let's see what kind of how exactly does The Styling um foreign will actually do that but we don't have images at the moment and since this is just such a UI it won't be able to generate the images but we can ask it to create like something that looks like a thumbnail using using the styling I don't know something like that all right so I'm going to stop January because it gave a sample course Theta when it should uh take the course data from the super base and maybe because we asked it to do the colors okay can you use get course function from supervised that is why it's good to be as detailed as possible let's see if it's okay Pages courses and then it added some classes for The Styling make sure to import and if we say continue it should continue because we also ask for the course card yeah here it is yeah if you ever see or sometimes it cuts off in the middle of the word because it hits character limits so just say continue generate background color oh interesting so it actually did a colorful and text loss based on course title okay let's get to components course card and I don't think I updated this one but Pages courses let's create courses folder not the file in the localhost we can navigate two courses can't result prop types you can ask it to remove or we can just remove it ourselves and just let it know that next time don't add prop types so that was in course card or we also install it depends on the preferences okay class names so let's install the class name since npm install s so it is a good library to use like when defining when making conditional statements in Tailwind so okay courses what about components can I read properties of undefined okay so it messed up the import statement of Super Bass so if we ask it to next time let's see what it says yes default settings okay then it'll go as a data version and we do have courses okay so there's no price just the title and the description background white so this is supposed to be the image and text font interesting background I PJ yeah those are definitely not the Colors Let's just set this to Gray and this one as well now let's move on to authentication and see how we can Implement that using charge repeating we want to use super bass oath and we want to ask how to create Pages or how to protect our pages so which pages are going to be for authenticated users and Etc it's going to tell us how to set that will tell we are setting location after courses page let's see if we have super bass UI might not be installed so I'm going to copy that and display oh it does come with UI so we don't have to create a separate and now protectors and Pages it's going to show us how to have like courses display only on four authorized users let's see if we don't it by default selected Google for us providers we'll have to configure Google so let's see if we can give us authentication only by you username and password okay so this credentials is what's gonna add end options custom DIY change your email to your desired username field okay yeah we don't want to use the custom methods just okay it's just showing us now let's check if one thing is users can actually sign in and sign up but another is creating user table so let's see if this is actually gonna create a user table that we can get information like email of users from because in Firebase for example we have to create a separate like table where we can reference user ID in firestore so let's see because if not then we can also ask to create a custom signup function where we do that a little crazy those table okay so just important questions that's great and now it's giving us the function when we can fetch courses that users take Taking later on we can also ask once we have the users created for us to map some courses to it but first okay let's get started with this installing the UI piece first npm install UI this we already have a layout if we don't I think let's reference the file structure that it proposed which is here and in components we can create layout Js we still want to check Imports if it looks correct import Tailwind so we don't need to import Tailwind I'm gonna remove that render authentication UI render the last of the layout okay and then children go here perfect now we can take this layout and add it to our either index page or courses page let's add it to the courses page so and then this is export default and I'm gonna wrap the rest of the components inside the layout here and resolve what is that oh it's inside components Super Bass is not defined it would be nice to like have a list of few things that we want to remind it every time because I think it did uh they actually didn't import super bass at all okay that's not working well Google we don't have the configured let's do credentials okay oh and the next year is documentation so I'm gonna follow that instead since we're getting errors and apparently there's a helper's library for next year we had the one for react but probably this one is more suitable so let's I'm gonna go ahead install it and also follow the directions here additionally install for react components and hooks so we do already have that one installed and setting up environment retrieve your project URL for API settings we did already set the environment variables we since we connected to Super Bass but we should check because it's probably using this very specific names like this helper function so I should probably check if our names are matching that would be in the in re variable so yeah here it's using a non-key instead of the key and public public supervisor see ya Let's update this one save it and also let's update it was used in only in Super Bass files so yep so we need to change it and once we update the environment variables let's rerun the application after that there's like a basic setup code that's provided to us that's in pages app.js and going to that I'm gonna copy this and let's leave the Styles declaration everything else we should have that and I think this should be export default yeah exports default okay cool Super Bass is not defined because oops reading dark okay let's double check the documentation for auth UI so we have UI react and also I shared so this one is coming from theme is coming from author I shared so actually this code that we got from Chad GPT is incorrect so I'm gonna go ahead and install this package I think that should be it for setup or we don't really need to use like a dark theme so let's remove this and follow this one here maybe yeah we can also try create client or super based clients just passing the one we already have instead of this function but let's see if it's gonna work oh okay so we got the login page it looks great and now what we can do is this is inside layout okay so let's change the logic if the session is not there then display the auth and if it's there we can show the children [Music] I'll perform just the code for the container and it's class names responsive let's say full with on mobile so height Flex item Center justify content Etc and then we have another uh that so this is how you can also utilize to create responsive Styles because sometimes it's tedious to Define separate cells for mobile desktop then we have other breakpoints like tablet and what this is this is doing is like it's by mobile first design and it followed when I asked not to create like form itself we just named it children so I'm gonna copy this and where's our off so we already have Flex Flex column minimum height screen Stuff Plus but okay okay and then it's response let's see on mobile okay it does expand to the full width grade now I'm gonna create an account to my email I see this link which I'm going to press and it takes us to the application which means I'm already logged in update index page so it goes to like courses automatically if the user is logged in and also we can ask it to create a header and the footer so we can put those in the layout so I'm gonna head over here and header should include some kind of like navigation and the sign out sign in button so I'm going to ask links to let's do courses categories and account we're using user can go in and make changes to the account page and then the sign out just in case so it doesn't use any other stack and what I want is that it to check if user is logged in then display sign out and Etc and it should also give us the functions as in from Super Bass like sign out function and sign in and let's see if it okay so it creates links and those links are next links which is great it also created a class first session and loading so if we have a session we're going to get account href or sign out API okay I don't know if that's oh maybe because we are the helper yeah we're gonna check out and sign in so in this example we're using use session hook that's correct and then it's showing us how we can use the header so let's go ahead other j6 basically one more thing to see if all the Imports look correct all right I'm gonna import this here I believe it was probably a default import ant not we should get in there and oh yeah navigation here we have already closed that it has created so let's just place it here or you can also replace probably this contains nav information okay yeah so we don't need this anymore I can go to either is not a function or its return is not iterable so use session do you have okay let's see if we have used session wait this is coming from header okay so we're already using you session in the layout okay so the import is actually wrong it should have done this it's not iterable so okay we can just have session how about this I'm gonna update this with P okay let's see sign out what actual word this page is not found getting so instead I would suggest because we haven't created this API I would ask maybe is there a function we can use okay that is what we want inside I know JS you can Implement okay so it gave us a function create a new file in so we don't need to create an API endpoint but let's see if that's the only option so just update your header component to use a API endpoint okay I think I'm just gonna directly use the super base sign out so I'm gonna copy that one and so here the same way we have the client in the layout I'm gonna do the same thing in here let's turn this into a button so this has to go and let's pass a Zuck callback function oh not this one all right let's see how that looks going back to curse courses oh we need to import client sign out super getting any errors in here did you mean on click all yep did you mean on click and I'm gonna also do the same for the signing we'll turn the link into uh button okay now let's build a search input for our courses page so I'm gonna ask it two generators like the input like UI element itself also the state because as user starts typing we also want the search functionality to happen and the search will be based on we can do title and the description and finally we can there's two options we can search when user presses the search itself or when they start typing let's try first with the button so given that will check matches against course was it label or title okay we're not displaying let's say you can also check inside the tables on What fields we have the title description okay foreign Shadow to the box and rounded borders container not sure if you'll do that but maybe something close here's an updated version of courses page code so it added that the search term State patch courses created at yeah we didn't ask the order but I guess did it handle search from courses oh interesting okay so this is how it's doing hmm so it's using or statement title like search item I'm just not sure where it's passing the search items like courses data and help handle as user starts typing it's probably using this function to update the state and let's see the updated input itself render any other components or links here so I'm going to copy this this would be the only new piece that we're getting so this goes after courses title let's grab our functions and you can also ask a questions or see if you're already described how this is happening so set courses and search term that trigger symbol search okay interesting so let's say if I do web and then press enter okay it filtered out interesting and on update it returns all well that's impressive now instead oops let's see if we can update that as user is typing and instead of the search the text itself we're gonna want to display like a lookup icon I don't know if that's the right name as user is let's see if it's gonna generate SVG for that or suggest like a library okay it did add a library we can also go ahead install it before it finishes writing the code yeah and install oops what is it cops look all right some hmm so I don't believe this is oh maybe we can just add react icons okay yeah I was gonna just ask but so I did that and it also probably updated the functions so handle search set search term maybe in use effect this updated version we replaced okay so it did ignore you just replaced it but as user is typing the search function that happens as the user types all right now I'll be more specific but first let's update this icon today search term that's the name of the stage foreign [Music] to trigger search button okay I can update that so the update would be simple we can just trigger handle search after the set search item but there might be a caveat to it that update is delayed because when handle search is triggered maybe the search search term hasn't finished updating but so data crap so it'll be more noticeable in like for example now I deleted all of them and it's not giving all the results but yeah definitely not as I'm typing but it's more noticeable on bigger applications so if I was working on this this would be one of the things that always improve as to make you like a production ready application but we can also ask what it thinks to how to trigger maybe this will work search and use your cards typing automatically okay maybe that was the key word that I was missing uh call handle search on input change yep it's doing the same thing like I did it added the handle search here but with the update okay search infuser clears foreign let's see if it has solution for not updating like updates being late to call condition only when the input is not empty okay yeah this is kind of like a hacky solution but let's do that let's try if it fudge course also this is not going to work because fetch courses is defined inside use effect but basically how I would resolve this is I will trigger handle search inside use effect so this use effect triggers when the page mounts right and then here we pass search term as a dependency and then let's pass handle search data okay now it's getting updated as we delete it as well perfect moving on to the categories we do already have the link at the top but we don't actually have a page for it nor do we have categories in the database so let's first ask it to create categories table and maybe also in the script to link our courses to categories write a script or SQL editor in please you'll create because right now if we go to courses it does have a category but this is not actually a relationship the type of this as we can see from Super Bass is like a variable and then this is kind of like should be like okay character type so it's not linked to anything there's no relationship and let's see if okay so we have our script create categories table first things first we have to do the do that then create category Junction table and add a unit constraint to prevent duplicate links okay so this is for relationship we create categories with table ID and the name okay can you also add here okay it's also going to insert all right let's run this one first and then update the relationship so where's our SQL editor create a table oops [Music] and let's double check that it was created my son's history perfect and then is there a way to just new query okay yeah I don't want to select the category every time okay now we're gonna create a junction table command enter so failed to run SQL query frankly constraint cannot be implemented all right oh that doesn't exist in courses table Yeah I was going to ask to update courses but maybe provide us no okay I should have been more specific because it just showed us how to update the table the two resolve this issue make sure courses table names match okay foreign so it's gonna update course table to remove any courses that do not have corresponding categories okay so I ended up finding the issue and then I ran this query it worked the issue was that it was marking the type was wrong in here so it was marking course ID also as integer and then I checked the tables to get the types and I'm just gonna name the query create relation oops rename okay now I'll ask it to in the existing if we can update existing courses and add categories to it but you won't know the ID so we might have to do that just from the table let's select courses we should be able to directly add the reference from here can we browse see insert row select record perfect and I'm just gonna randomly as a foreign key relationship so I don't think we can have duplicates but let's see python for data science okay that should be all courses now I'm gonna ask it when we are getting the course if it can update the function so we are also getting our categories with it so that would be inside course list and as you can see the more we're building out the application we have more context and it's getting harder to every time sometimes it remembers the com context sometimes it doesn't relate to it so every time passing all this information when it's just one search input it's becoming a little bit redundant and that's why it is a better it still can be done so far with this level of complexity because we're still not in we don't have a lot of elements but as we go into more complex it's harder to manage and let's without further explanation I'm gonna tell it that this is what we're using and say we ran and modify the course card so it includes category as so let's do a pill tag so it fetches all the categories initially which I don't know if we actually need the categories maybe like this one when we're fetching courses we can also fetch the relation and let's see how it's using this field set courses okay fetch categories filter oh this is it added for filtering interesting no why the colors keep changing but okay then we have the layout let's see where it uh the filters or I don't know what this svgs for oh I said I think it's the search one but we're using the icon from the library already for that and oh it updated it even filtered the courses without asking I just don't know where do the filtered categories where is this getting updated so it should be okay let's try I think course card mm-hmm so it wrote the code with slight modification so I'm just gonna copy what it updated first thing is this array I mean state and I believe this search term we have inside course page yeah yeah so let's add that in here same for patching and the function not this one but there's also this we for fetch courses we have that inside the use effects I'm going to add the categories and use effect as well for filtered courses and we can also oops ask it to continue while encoding that so it can explain what it did and where we can use this filter courses anyways and they'll search I'm gonna add this in the end oh and then we are zipper up it also to update course page let's add that mapping instead of we don't have the class for filtered courses that is the oh it does it afterwards okay so we're just passing courses of course and we can add another props but I'm not just gonna like directly copy it since then we would have to change course card a lot as well and we'll just copy this one [Music] okay course and category here courses page patch courses we don't need two fat courses one more time but okay we have filter search term SVG okay that loading screen um course card and continue one more time because it stopped here okay so after continue it's giving us the updated course code for course card I don't know if you picked up some different data sets because right now it's giving us more improved code with more functionalities without even asking for it so for example like ID it knows that it has that we're going to create or we would need to create like a separate link for each of the cores it also even provided like images even though there's no image of this like on the and split and splash is good to have just this like link with like you know added classes Etc it's pretty impressive I would say and then it added pill for category price which it didn't do it before and I haven't even asked for it and even we have a button for enroll well I would say that is really impressive let's see if it actually works though okay so I'm gonna close the sides out here we are on the course card the difference is that it destructs your category from here but I passed it separately and let's import link from next link and wrap forward save inside a link okay courses and for ID we're gonna have or we can get ID from here next up I'm Gonna Leave The Styling that we have right now and just going to add this one after so the title so like that it updated the title to be H2 font bold text large okay let's leave that one let's add description oh wait we have this actually goes oh yeah we already had category I'm gonna remove this that was like the hard-coded the one that we had in the database and that hardcore River was not referred to actual table and then after let's say that title we put description then we want to add price and the bottom or ask it next to also add the functionality for the button but first let's check if the categories are actually getting loaded can can declare variable defined with category interesting constant reassign oh we already have one that is true yeah let's remove that in here okay yes unrecognized though to fix the categories not being mapped properly issue I'm gonna go to courses table and I will add a column here let's name this categories ID and here the key is to add the foreign key relationship and inside here we can select the relationship to the categories and select the column from public categories to reference to yeah we're gonna identify it using the ID and actually needed no action uh their records existing let's do Cascade and save so I'm not moving this about the saving this one as well so it's successful credit categories ID let's populate it right now so and then here we can see this link so that means it's linked let's see if it's gonna let me select okay so we can just select directly from here I'll just pick one randomly and now how can we get this data on our site the client-side query so here we have API docs that we can look at to make sure our queries look good and we're going to take a look at it's also categorized so for the courses we already have a Super Bass from courses where we select everything but let's see how we can select the nested relationship and that would be redrows filtering from courses select categories so we can just directly oh one more thing we have so we don't need this category anymore now that we have the link so I'm gonna do this and do like directly delete from here and going back to the API Docs courses let's say ID oh so we can do from courses select categories ID and let's see how we can just directly access the categories table from there okay let's see if this is gonna work I'm gonna update from quotes let's do this and let's select everything that's related for courses and here let's have and inside here we can grab ID and name that's the only two Fields anyway so we can also use like asterisks save it and if we reload the page right now and open the inspector we should see that the categories comes in as a like a object and courses page once again State and here we have the data objects for the question and it does include categories now what we can do is the reason it says unrecognized is because we're passing in the object so we should say we just want to get the name that would be inside course card oh wait we don't need the list oh actually yeah it is getting the oh categories comes in as an object so okay [Music] but name then if this exists then it would be the name is that how it is yes okay let's save this and if we reload right now we get the names as well let's quickly fix also the color of this one introduction okay so this would be inside course card wherever we have title I'm just gonna set it same color or maybe like one shade darker as the description okay that looks better so even though we have authentication and we're able to sign up users and let them also log in we still don't have users table where we can add other informations about user for example saved courses and Etc in the database so in in this prompt we are gonna see how we can create that table and accommodate those courses list okay foreign so giving context that we have authentication working and we need a script that will create this profiles table and I would connect it to currently existing auth users and what it is doing is actually it's referencing it's still generating user ID which is going to be a unique ID but it is referencing it from of the users that is how we access this like users from our authentication feature and username is unique full okay it added some other fields which I didn't ask to bio Avatar time set Etc and alter tables profile it also ended gender and birth date this creates okay the user ID is set up as a foreign key to the ID okay now that we have the unit constraint to ensure that usernames are unique with the profiles tab once you've created profiles you can create a new profile Furniture when they first sign up or log in so this is kind of like manual approach we can improve that but for now let's follow the manual one first our SQL editor let's run a new query no rose returned I'm gonna also rename this and let's check if we have table profiles here and let's insert row so for ID it could be generated this would be also automatic and user ID let's select record we should only have one record where I come from the email yeah that's that one username [Music] else name bio I'm not gonna set those and see hopefully none of them were required okay so that's that we have this user and now let's ask it to create an accounts page so we'll start building out accounts page where user first we wanna see user that we're logged in with and then afterwards we want to let them change their information this should be in the format of a form and once they click save they their information should be sent to the database and uh what else is there afterwards we do that then we're gonna start building out relationship to the courses so saving saved courses and then we're going to list that on the account page as well but first let's get this done I am going to Let's this code fetches profile from and then this is the fields then it created a handle update profile function now the this assumes so it's giving us a warning that we should have this if now you'll create the tables before using this code perfect oh and I think it was giving us code but that script we already ran but let's just in case is this the same one yeah I think it's the same one okay I'm just gonna copy the first version it's giving us inside we don't have Pages created I can't just create it so I'm going to create a new file dot Js actually I'll create like folder instead and then in here your file indexed let's copy this ex make sure everything looks good except the Super Bass is an import default we don't have use user from auth Oh see now it's giving us a different let's ask it so for this link create certainly all just file would typically be so it's created sign in sign up etc those files functions which we don't need since we're using the wrapper and update profile but I'm not seeing use user will be used in the uses or hook okay so here wherever we have use user there's nothing that's or maybe it returns and user but I doubt that I think we can get session from however we're getting in the header maybe this one has session [Music] yeah Super Bass off and we only need user ID so Russia oops so still we're gonna remove this too if session let's do obsession ID we're gonna find the user in our profile table using that ID and then we can set it I'm going to remove this console log here and then handle profile okay this should look good we only have two forums and user profile so if not here then we can just display that it's loading so all right Super Bass is not defined yes because the function let's Library yes here we have name as as you guys remember that's what I put in and then bio we can update the profile let me real quick add the container here just so it's like equals Flex justify Center items Center and then another one oops gonna come after our logic so and let me set the width two [Music] so this is not Oh by default just if I can't that should be you'd be like okay by default the container does not have margin Auto also we need to add like the header at the top because layout we have we can extract that anyways let's see if it updates bio user is not defined okay so that's really also need to update the Handler profile function that would be session user ID updated successfully okay let's move on to the saved courses and ask how we can handle that so first we need to update tables at most likely a column for the courses and a relationship instead it did create user saved courses table and it added references to both both users and courses okay and add a unique constraint to prevent duplicates saved that's good alter table courses and add save count interesting so we know how many times the course has been saved create or replace function increment update user set cost to increment oh every time there's a new one it will automatically update we don't have to actually do it from the query which is nice Implement saved count trigger update to decrement so that took that into consideration and the script questioning table with my main relationship between users and courses at the union constraint to prevent duplicate um triggers okay now let's see how we can take a relationship and put it into the database so that would be for function in Rolling course and that's gonna take the session from Super Bass okay I guess that's another way of accessing session and insert user ID course ID single there are okay the next I'll fetch how I'll ask how we can fetch the saved courses so let's hopefully this script works because last time that we created a relationship they're not really workouts you query Princess where okay auth users hmm I guess we could maybe a bit better to reference profiles table but let's see if it works with no Rose return okay here's our user saved courses and these are those reference user ID and course ID that's great okay and let's try this function copied and going to course card where we have this button and I will add that in here we can move this into here actually let's so course card Library we don't need those just okay let's save it and should be user saved courses let's see if what it says when we don't to the function to trigger await post okay yeah that's we're not using because I was assuming we're going to create a separate API for that so let's just do this and going to oops once again it's unrecognized it's weird because sometimes it fetches the category sometimes it does not even though the query is the same like I have not updated versus not the course card here it's supposed to get it okay so let's try if enroll works I don't know if it's doing some kind of cheshing because oh well okay sign out and roll oh because I pressed oh this is a link and we don't have link yet okay I'm gonna remove the link session is not yeah same thing the way we are getting a session we can replicate that since that's working already for us so and that's a hook so I'm gonna Define outside of the function and constant user equals we can access user like that session please start again okay sir starting an objects um so try and then we have let's see if it's saved okay no I didn't say either we are not passing the course ID and that is you can just take it from here foreign let's ask now to get all our saved courses for us but that would be I'm gonna pass the name of the table relation table oh wait we are Super Bass okay we want to I think it's thinking I just want to run it in SQL editor um this courses JS page maybe that would all right [Music] yeah we don't have an API and we also don't have this Library oh it's trying to get okay saved courses I'm gonna open this to the side and here let's add that extra State for the saved courses let me scroll or maybe we can create like a separate component that would be probably better and then import it into the account for that I'll create in components new file saved courses.jsx and let's copy this paste it and maybe user ID we already have it on account so we're just gonna get that from account let's remove go over line by line Super Bass saved courses user ID let's pass that and fetch if we have user ID course I did such a threads it should get from here data okay and then say it courses it's just gonna list the titles which is good enough for now let's import this in the account export default yep user profile this will be once you have user profile available before that we can't pass user ID equals I think we should be able to access this from here so I think I misspelled saved courses yeah your saved courses let's see what's that Theta here because it should create a list are we on the okay set saved courses course data or if we don't have access to the I don't think this one saves yeah because this condition has set saved courses but I don't know if this one's not you know it's Syntax for type uid I think I'm using let's see what we have in user so accounts cone State oh it's user underscore ID all right that's what I'm gonna pass okay yes okay so now we can see the JavaScript so fundamentals that I enrolled in on the courses page layout from inside of the courses page to our application file because we want to have the header also on our courses so and other pages so let's do this and that should be fine and going to pages index.js maybe apjs would be okay so this is where we have the session context provider and in here I can do layout the also import it at the top so it's in this is inside pages so find uh it's probably default okay yeah great going back to courses now if I'm enrolled in JavaScript fundamentals I'm still not sure why this is not getting this relation loaded try one thing okay now it's there weird so if I'm oh I'm already enrolled in JavaScript fundamentals let's see if we can ask it to update this button and show like enrolled or maybe like a check mark um and I think is the react icon Library yeah react and let's give it the name of the table just in case it goes down a different route and that would be user saved courses create also a bookmark icon so instead of having a text of enroll we can just press that to save a class and probably removing that and a floating loaded and when the button loads it checks redirected look okay I'm gonna update the user part because every time I feel like it gives us different ways of checking user Ascension but we already have a way that we figured out it's working for us I'm just going to use that and okay so it's supposed to fetch the courses and check which ones in the cooler which course ID we have and we are passing course ID as a prop so let me copy code right now enroll like button it's just inside course card so I'm going to create a new file for that let's see what it needs okay so instead of checking user session I'm also going to pass user ID yeah because we don't want to check on every course card if you have a session or not we can just pass it from there so removing oops removing this one updating Super Bass and this is in yeah going back Library react icons use effective State that's there enrolled set enrolled okay and then no user user ID same thing here and then the these are the dependencies I'm also going to update if user ID or course ID changes we have to obviously refetch this data redirect you actually we can redirect them to logging it's true actually let me I'm gonna do this this is here replace it everywhere except oh no not this one okay this is already replaced so I'm just gonna do it myself and so it inserts save the course if not already saved okay and then it updates set enrolled otherwise removes or delete or inserts up gray and then the icon gets updated accordingly that should be fine let's import this into course card and oh we also need we don't need on click anymore because it's gonna do that and let's see so of course ID going to be equal to ID here and then user ID that one we can also pass it down from courses index we don't already have that array okay just gonna move this here foreign equals let's see if this is the case um inside okay so once we map and now let's go back to course card get user ID from here so we can pass it in here the one issue is that if user ID hasn't been loaded should still update new session okay import statement at the top okay so I have this enrolled so it's showing that I'm enrolled in here I wonder what it's supposed to show when because we do have the logic bookmark so maybe because it doesn't have a color or oh yep outline works great that's actually all this to the left load this categories get updated so maybe there's some kind of caching issue that oh I would note to like double check if categories are not fetched then refetch it that should solve it so this would be it for this project and to quickly recap what we did so we we set up this course app using make sure yes Super Bass Tailwind reused react icon for our icon library and then view of the other libraries after that we set up a schema to Define courses categories and user we did the setting of the database meaning like putting some dummy data for testing in it we also checked I'm using LGBT what like file structure should look like what schema should look like even it generated data for us and we utilized it also to for styling creating this like responsive grid elements all this like colors and Etc we implemented authenticate station and then after that we created users table where we store more information about the user users can log in using email and password and we also try to came across obviously there are some issues that we try to debug using the documentation of superbase itself and chat GPT we created this like layout that right now it only has a header that and then layout is conditional meaning if we we're on a signing page it's not going to show up also we for the courses page we have categories page we created relationships in between those and then we create a relationship between user and the courses we created functionality for user to save the courses or remove the course and for them to go to their account get their information get their saved classes and also update their profile like future future changes that I would do is probably on the accounts page I would add all the fields that we have right now in the table like I think there was the image there was like gender year Etc and then for the save courses maybe I'll modify I'll get more information about the course and I'll also give like a remove button that they can like remove the course like their enrollment and going back to courses page yeah we also did this search where we can filter out our database either like descriptions or the name of the courses these categories I still have to fix that but we also have pricing and we wanting like filtering behind the scenes like functions exist but we haven't actually added filters so for example price filter would be a good feature to like practice on next and going forward these are some of the aspects of development that I would consider using chargpt as an assistant first one would be called optimization technique so what are some of the ways to optimize performance in this application is one thing you can ask what are some of the ways to fetch this kind of data faster and or how to test the performance itself is something that you can ask and not only performance but in general if you're using jazz or if we have never used it for example it might suggest that as a tool that you can use and ask like guidelines or list of like a template of how you can test certain weather components or API requests or Etc also very helpful in writing a readme or technical documentation for example in this our case like I would say based on the code that was generated in the this conversation so that way it kind of like parses through and takes like the whole conversation as a context generated a readme that at least step by set guide on how to set up the project so we did set set it up but we also want to see step-by-step guide and also I'm gonna add readme to Output this project in a GitHub repository and the link would be shared so also you can go over the readme there and set it up yourself and if I set up this boiler played code very simple P probably next thing I would do is just have a list of things that I thought about or could be a good practice to follow along at the professional like website or working application would need so you can ask it to now in this case before that it was your senior architect to a software engineer now you can ask it to be a product manager and tell it that you already wrote some code and write it like the other tasks that would be needed to be accomplished and what I'll do is probably it's going to at least task in bullet points so I would maybe like take this put it in notion and have like a zapier integration that that in from the notion payroll database it automatically creates jira Asana whichever is your task management tool tasks and then you can go over the board you can even assign it to other people or for yourself to have a good way of continuing working on this or if you're new to full stack development you kind of see this template of what are the list of things that need to be done and hopefully you enjoyed this tutorial you learned how to use chat GPT but also some other Concepts there and thank you for watching

Channel: freeCodeCamp.org

Views: 210,199

Keywords:

Id: GizsSo-EevA

Length: 136min 30sec (8190 seconds)

Published: Thu May 18 2023