Transcription

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 walkthrough, we'll 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'll 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 field 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 chat GPT. So without further delay, let's dive right into it. When using chat GPT 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 going to 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 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, chat 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. Check the link in the description if you're interested. Alright, 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. For the authentication, a scalable solution and it provided us with options of OAuth, JWT and OpenID Connect. These are indeed, I would say, one of the most popular 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 backend. What components do we need? First, we need an API so that the data can be communicated between the backend and the frontend using a backend framework such as Node.js, Django or Laravel. Once we have that, we can focus on the database. ChatGPT answer mentions MongoDB, 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 going to 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 a list of 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, it doesn't require strict consistency. And I agree with the statement. We do not need like a very structured data for progress, but we do 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 chatGPT returns fields for the table, but we can also ask it to print the output in a tabular format for better visualization. So that's another prompt to remember. And this is the stage where you can request modifications 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 chatGPT, 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 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 that Prisma is a modern database toolkit that provides type-safe and 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 an 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 Superbase is, which is an open source alternative to the Firebase. And let's see what else it tells us about it. Here's how you can set up Prisma for Superbase. It uses PostgreSQL. And it's also providing us with the information that this is a 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 Next.js, Superbase, and Tailwind, the chat GPT should give me all the steps so I don't have to go look for it. And on top of that, if any of the two technologies that I will be using are not compatible, for example, chat GPT should also point that out. And once it's done printing, I'm going to follow the steps here with some modifications. First step is to run the command to create next app. And for that, I'm going to open up a terminal and paste the command here as and select the configurations for my Next.js app. I do see that it says there's a next step to install Prisma, but I think Superbase should have its own client. And we can check that with chat GPT. The answer that we got is that we do need a client module, which is Superbase.js. And it also provided an 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, another thing that was mentioned here is how to set up Superbase. So that would include creating a new project and obtain connection URL for your Superbase database. And you'll need this URL to connect your Next.js app to Superbase. So let's go and do that. I'm going to open this up, I already have an account. And so I'm going to 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 chat 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 text stack? Okay, and now it's listing them, arranged into like categories. And you can install I think I have most of this already, 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 also want the whole application to have access to the super base client, which file should I implement this? And how can I use that implementation of in 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 a 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 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 and end up getting like a crazy high bill from their providers. So to prevent that, let's add those configurations in. Copy the code and paste it here. So that's our 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 example from here. And I'm gonna copy this replace it with and super base key and that's the key. Okay, now I'm going to save my changes also for the super base file and let's open up the terminal and run the command and run those so we can start our development instance and navigate to localhost 3000 where our next JS app should show up. Now the next piece is that so what we did with super base is basically we connected our app to our project in the super base. And now let's ask to you what it thinks about like writing the schema. I did ask it or it's right a schema in Prisma, but there's an option to do that also without a Prisma. So let's see what it says. So push my schema to newly created super base project. And do you recommend using Prisma for this course or just this super base 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 base client. It depends on your specific requirements and preferences. A powerful way to interact including super base. It offers advanced features, etc. So it does say that just going with super base and it is more suitable for smaller projects or when you prefer a more lightweight approach without the advanced features a limited choice. So, okay, let's say if it's we did do peak the smaller more lightweight approach what it's going to propose instead. So I'm telling that first thing that I want to do is I want to add the course table. So how can I push that to the super base and it does give me the code that it already printed out. But once you have good operations, okay. But this is just the functions on the client side. 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 base maybe we'll understand that one table for the project. Here's okay, great. 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 say let's just select table and I'm going to 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 assist in sitting 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 fun. Okay, like gets function here. Now I'm going to 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 base file in the lib folder. So that's great. That 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, 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 import that that correctly awaits the base from okay, so we need to update. Let's see expert defaults. Okay, so what it did mistake is the import statement. And it's should be expert default. And here we get the list of courses. The next step would be as we start creating more components, and we're going to have more files, asking it about file structure, best practices is also naming conventions of this file to recommend the file structure for Next.js using super base 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 feature. So in Next.js, 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's created login, sign up dashboard, page for us. And also in courses, we have the list of the courses course ID and the new creation course, which is pretty impressive. As for components layout is what we use like reasonable things in the layout, for example, had their footer, etc. It did create all of those. And I guess the course card component for displaying a course card. Okay, interesting. And then we have a setup for super base and tailwind and some styling. Usually we don't have much in the global CSS, I mean, tailwind file, any custom code that you update to the tailwind or like setting a thing goes there. And let's see the explanation. So it just goes through 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 can follow similar conventions. And let's see how we named the components with Yeah, the capitalized 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 to be and I'm not sure we'll actually do that. But we don't have images at the moment. And since this is just chat UI, it won't be able to generate the images. But we can ask it to create like something that looks like a dummy illusion using the styling. I don't know something like that. Alright, so I'm going to stop generating because it gave a sample course data when it should take the course data from the super base and but maybe because we asked it to do the colors. Okay, can you use get course function from super base 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 asked for the course card. Yeah, here it is. If you ever see or sometimes it cuts off in the middle of the word because it hits character limit. So just say continue generate background color. Oh, interesting. So it actually did a colors false and text was based on course title. Okay, let's get to components course card. And I don't think I updated this one. He just courses let's create courses folder. Not the file. Okay. In the localhost we can navigate to courses countries or prop types 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 whatever you want to call it depends on the preferences. Okay class names. So let's install the class name since npm install last names library to use like when defining when making conditional statements in tailwind. So, okay, courses. What about components properties of undefined. Okay, so it messed up the import statement of super base. So if we ask it to next time, let's see what it says. default default Okay, then I'll go as data version. And we do have courses. Okay. 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 tragedy. We want to use super base off 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 up. Okay. Okay. Okay. We are setting authentication after courses page. page. Let's see if we have super base 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 is going to show us how to have like courses display only on for authorized users. Let's see if we don't by default selected Google for us providers. We would have to configure Google. So let's see if we can give us authentication only by your username and password. Okay, so this credentials is what's gonna add and 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 going to create a user table that we can get information like email 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 sign up function where we do that will create users table. Okay, so just important quizzes. That's great. And now it's giving us the function when we can fetch courses that user is tech 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 creating a user table. MPM install. Super base UI. This we already have. Okay. We don't, I think, let's reference the file structure that we have. Okay. Installing the UI piece first. MPM install. Super base UI. This we already have a layout. 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. imports if it looks correct import tailwind CSS. So we don't need to import tailwind. I'm going to 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 to resolve. Why is that? Oh, it's inside components. Super base is not defined. It would be nice to like have at least a few things that we want to remind it every time because I think it did. Actually didn't import super base at all. Okay, that's not working. Well, Google, we don't have that configured. Let's do credentials. Okay, the next is documentation. So I'm going to follow that instead since we're getting errors. And apparently, there's a helpers library for next year, we had the one for react, but probably this one is more suitable. So I'm going to 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 base, but we should check because it's probably using this very specific names like this helper function. So we should probably check if our names are matching, that would be in the variable. So yeah, here it's using a non key instead of the key and public. Public supervisor. Yeah, let's update this one. Save it. And also let's update it was used in only in spa base file. 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. export default. Okay, cool. Super base is not defined because we're reading dark. Okay, let's double check the documentation for all of the UI. So we have your react and also I shared So this one is coming from theme is coming from all to a shirt. So actually this code that we got from chat GPT is incorrect. So we're going to 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 base client 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 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 off. And if it's there, we can show the children. Show the children. Or just the code for the container. And it's class names. Responsive let's say for with on mobile. So hide flex item center justify content, etc. And then we have another 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 responsive styles. like form itself, we just named it children. So I'm going to copy this. Where's our off. So we already have flex flex column minimum height screen stuff was but Okay. Okay, and then it's responsive. Let's see on mobile. Okay, this expanded the full width. Great. 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 going to 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 where user 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 based 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 for 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 have a 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 and they're just six, basically one more thing, see if all the imports look correct. All right. I'm gonna import this here, I believe it was probably a default import, not we should get an error. Oh, yeah, navigation here we have already class 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. 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 use 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 not iterable. So, okay, we can just have session. About this. I'm gonna update this with P. Okay, let's see if sign out with actual word this page is not found. 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 sign out 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 an API endpoint. Okay, I think I'm just going to directly use this simple way sign out. So I'm going to copy that one. And so here, the same way we have the client in the layout, I'm going to do the same thing in here. Let's turn this into a button. So this has to go. And let's pass as a callback function, not this one. All right, let's see how that looks. Going back to courses, we need to import. Client, sign out. So we're getting any errors in here. Did you mean on click? Yep, didn't mean on click. And I'm going to also do the same for the sign in. We'll turn the link into a button. Okay, now let's build a search input for our courses page. So I'm going to ask it to generate us the input 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, 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. Okay, so given. That will check matches against course. Was it label or title? Okay, we're not displaying, let's say. We can also check inside the tables on what fields we have. The title description, okay. And some styling, add shadow to the input box. And rounded borders. Container, I'm not sure if you'll do that, but maybe something close. Here's an updated version of courses page code. So it added the search term state, fetch courses, created that. Yeah, we didn't ask the order, but I guess did it handle search from courses? Interesting, okay, so this is how it's doing. So it's using our 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. We're going to also ask a question, so see if it already described how this is happening. So set courses and search term. That triggers handle search, okay. Interesting, so let's say if I do web and then press Enter. Okay, it filters out, interesting. And on FTE, it returns all. Wow, that's impressive. Now, instead, Let's see if we can update that as user is typing. And instead of the search, the text itself, we're going to 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 going to generate SVG for that or suggest a library. Okay, it did add a library. We can also go ahead, install it before it finishes writing the code. And install. Oops, why is it caps lock? All right, 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 handleSearch, setSearchTerm, maybe in useEffect. This updated version we replaced. Okay, so it did ignore, it 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. Did I? Search term, that's the name of this thing. Update it and no need to submit. And have a button to trigger search. Search button, search button. Okay, I can update that. So the update would be simple. We can just trigger handleSearch after the setSearch item. But there might be a caveat to it that update is delayed because when handleSearch is triggered, maybe the setSearchTerm hasn't finished updating. But so data. Well, so it would be more noticeable in, 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 to make it like a production for the application. But we can also ask what it thinks to trigger, maybe this will work. Search when user starts typing. Automatically, okay, maybe that was the key word that I was missing. Call handleSearch on input change. Yep, it's doing the same thing like I did. It added the handleSearch here. But without the, okay. Search when user clears. Let's see if it has solution for not updating like updates being late to call conditionally only when the input is not empty. Okay, yeah, this is kind of like a hack. A hacky solution, but let's do that. Let's try if it, FetchCourse. Also, this is not going to work because FetchCourses is defined inside useEffect. But basically how I would resolve this is, I would trigger handleSearch inside useEffect. So this useEffect triggers when the page mounts, right? And then, Here we pass search term as a dependency. And then let's pass handleSearch 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 link our courses to categories. Write a script for SQL Editor. You 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 base is like a variable. And then this is kind of like, should be like character type. So it's not linked to anything. There's no relationship. And let's see. Okay, so we have our script create categories table. First things first, we have to do that, then create categories junction table and add a unique 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. 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. Command Enter. And let's double check that it was created. My sense is still perfect. And then. Their way to just new query. Okay. Yeah, I don't want to select category every time. Okay, now we're going to create a junction table. Command Enter. So failed to run SQL query for a key constraint cannot be implemented. All right. All right. That doesn't exist in courses table. Yeah, I was going to ask to update courses, but maybe. Right. No, okay. I should have been more specific because it just showed us how to update the table. To resolve this issue, make sure courses table. Names match, okay. Or. Okay. Okay. So it's going to 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 going to 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. Oh, but it 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 going to 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 going to 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 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 going to tell it that this is what we're using and say, We ran. And modify the course card so it includes category. So let's do a field 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. This is, it added it for filtering. Interesting. I don't know why the colors keep changing, but. Okay, then we have the layout. Let's see where it added filters, or I don't know what this SVG is for. Oh, SVG, 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. So it wrote the code with slight modification, so I'm just going to copy what it updated. First thing is this array. I mean, state. And I believe the search term we have inside course page, yeah. So let's add that in here, same for Fetching and the function. Not this one, but this also, for fetch courses, we have that inside the useEffect. So I'm going to add the categories in useEffect as well for filtered courses. We can also ask it to continue while I'm coding that, so it can explain what it did and where we can use this filter courses. Anyways. And I'll search, I'm going to add this in the end. And then we asked 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, it does it afterwards, okay. Okay, so we're just passing course as a course, and we can add another props, but I'm not just going to directly copy it. Since then we would have to change course card a lot as well, and we'll just copy this one. Form. Okay. Course and Category here. Courses page, fetch courses. We don't need to fetch courses one more time, but okay, we have filters, search term, SVG. Okay, that loading screen. Course card, continue one more time because it stopped here. Okay, so after continue, it's giving us the updated code for course card. I don't know if it picked up some different data set 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 we're going to create or we would need to create a separate link for each of the course. It also even provided images, even though there's no image of this. On the Unsplash, it's good to have just this link with added classes, etc. It's pretty impressive, I would say. And then it added field 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 going to close the slides 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 our div inside a link. Okay, courses and for ID, we're going to have, or we can get ID from here. Next up, I'm going to leave the styling that we have right now. I'm 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. Wait, we have. This actually goes. Yeah, we already had category. I'm going to remove this. That was like the hard-coded one that we had in the database and not hard-coded, but it was not referred to actual table. And then after, let's say the title, we put description, then we want to add price on the bottom. We'll ask it next to also add the functionality for the bottom. But first, let's check if the categories are actually getting loaded. Can declare variable defined with category, interesting. Constant reassign. 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 going to go to courses table and I'll add a column here. Let's name this categories ID and here the keys 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 going to identify it using the ID and action needed. No action. There records existing. Let's do cascade and save. So moving this out to saving this one as well. So it's successful create categories ID. Let's populate it right now. And then here we can see this link. So that means it's linked. Let's see if it's going to 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 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 also categorized. So for the courses, we already have a super base from courses where we select everything, but let's see how we can select the nested relationship. And that would be read rows filtering from courses select category. So we can just directly one more thing we have. So we don't need this category anymore now that we have the link. So I'm going to do this and directly delete from here and going back to the API docs courses. Let's say ID. 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 going to work. I'm going to 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 like an object. And courses page once again state and here we have the data object 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. Wait, we don't need the least. Actually, yeah, it is getting the categories comes in as an object. So okay. 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 going to 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 information about user, for example, saved courses and etc in the database. So in this prompt, we are going to see how we can create that table and accommodate those courses list. Okay. So giving context that we have authentication working and we need the script that will create this profiles table and 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 Auth.users. That is how we access this like users from our authentication feature and username is unique. 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 unique constraint to ensure that usernames are unique with the profiles tab. Once you've created profiles, you can create a new profile for each year when they first sign up or login. 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 rows returned. I'm going to 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 confirm the email. Yeah, that's that one. Username. Else, name, file. I'm not going to set those and save. 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. Okay. So we'll start building out accounts page where user, first we want to 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, their information should be sent to the database. And what else is there afterwards? Afterwards, we do that, then we're going to 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 this code fetches profile from, and then this is the fields, then it created a handle update profile function. Now this assumes, so it's giving us a warning that we should have this. If not, 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 going to copy the first version. It's giving us inside. We don't have pages created. I can't be just created, so I'm going to create a new file. .js. So I'll create folder instead. And then in here, new file index. Let's copy this, make sure everything looks good. The super base 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 one, create certainly auth.js file would typically be. So it created sign in, sign up, etc. Those files of functions, which we don't need, since we're using the wrapper and update profile. But I'm not saying use user will be used in the use user hook. Okay, so here, wherever we have use user, there's nothing that's, maybe it returns an user, but I doubt that. I think we can get session from however we're getting in the header. Maybe this one has. Session. Yeah, super base auth. And we only need user ID, so. Session. Oops. Oops. So still, we're going to remove this too. If. Session. Let's do if session. ID. ID. We're going to find the user in our profiles table using that ID. 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 forms and user profile. So if not here, then we can just display that it's loading, so. All right, super base is not defined. Yes, because. Because. Deleted definition. That's. Library. Yes, here we have name. 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. And I come after our logic. So. And let me set the rate to. So this is not. Oh, by default. Just if I can't. That should be like, okay. By default, the container does not have margin auto. Also, we need to add the header at the top. Yeah, because layout we have, we can extract that. Anyways, let's see if it updates bio. User is not defined. Okay, so that's we also need to update the handle 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. Okay. So first we need to update tables, add 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 duplicate set. Save. That's good. Alter table courses and add safe count. Interesting. So we know how many times the course has been saved. Create or replace function increment. Update user saved course 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. Increment saved count trigger. Update to decrement. So that took that into consideration. And the script creates a new table with main relationship between users and courses. Add a unique constraint to prevent duplicate triggers. Okay. Now let's see how we can... Take a relationship and put it into the database. So that would be function enrolling course. And it's going to take the session from Superbase. Okay. I guess that's another way of accessing session. And insert user ID, course ID. Single. Okay. The next 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, didn't really work out. New query. For instance, where... Okay. Auth users. I guess we could maybe better to reference profiles table. But let's see if it works. No rows return. Okay. Here's our user saved courses. It does 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 what it says when we're done. Function to trigger... Await post. Okay. Yeah. That's... We're now using... Assuming we're going to create a separate API for that. So let's just do this. 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. I haven't updated. Where is this? Not the course card. Here. Supposed to get it. Let's try if enroll works. I don't know if it's doing some kind of caching. Because... Oh, well. Okay. Sign out. Enroll. 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. That's a hook. I'm gonna define outside of the function. And constant user equals... I don't know. I guess user like that. Session. Starting an object. So, try. Okay. Let's see if it's saved. I didn't save either. We are not passing the course ID. And that is... I can just take it from here. Yes. Okay. Let's ask now to get all our saved courses for us. But that would be... Okay. Relation table. Oh, wait. We are... Okay. I think it's thinking I just want to run it in SQL editor. This course is... JS page. Maybe that would... Yeah. We don't have an API. 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 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 base saved courses. User ID. Let's paste that and fetch. If we have user ID... It should get from here. Data. Okay. And then saved courses. It's just gonna list the titles, which is good enough for now. Let's import this in the account. Default. Yep. User profile. This will be once we have user profile available. Before that, we can't pass... User ID equals... I think we should be able to access this from here. I think I misspelled saved courses. Yeah. Here's saved courses. Let's see what's the data here. Because it should create a list. Okay. Set saved courses. Course data. Oh, 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 think this one has. Set syntax for type UID. I think I'm using... Let's see what we have in user. Count. 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. And other pages. Let's do this. And that should be fine. And going to pages index JS. Maybe app JS would be. Okay. So this is where we have the session context provider. And in here I can do layout. Then. Also import it at the top. So it's saying. This is inside pages. Okay. Yeah. Great. Going back to courses. Now if I'm enrolled in JavaScript fundamentals. So I'm not sure why this is not getting this relation loaded. Try one thing. Okay. Now it's there. Weird. So if 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. And I think is it 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. 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 if loading loaded. And when the button loads. It checks redirected. Okay. I'm going to update the user part. Because every time I feel like it. Gives us different ways of checking user session. But we already have a way that we figured out is 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 is just inside course card. So I'm going to create a new file for that. Let's see what it means. Okay. 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 we have a session or not. We can just pass it from there. So removing. Oops. Removing this one. Updating super base. And this is a. Yeah. Going back. Library. React icons. Use effective state. That's there. Enrolled. 30 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. Actually, we can redirect them to logging. Okay. True. Let me. I'm going to do this. This is easier. Replace it everywhere. Except. Oh, no, not this one. This is already replaced. I'm just going to. Do it myself. And. So it inserts. Save the course. If not already saved. Okay. And then it updates. Set enrolled. Otherwise removes. Or deletes. Or inserts. Great. And then. The icon gets updated accordingly. That should be fine. Let's import this into. Course card. Oh, we also need. We don't need on click anymore. Because it's going to do that. And let's see. So course ID. It's going to be equal to ID here. Then user ID. That one. We can also pass it down from. Courses index. We don't already have that, right? Okay. Just gonna. Okay. User ID equals. Let's see if this is the case. 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. One issue is that if user ID hasn't been. Loaded. Should still update. Use session. Okay. Import statement at the top. Okay, so I have this. Okay. So I'm enrolled. So it's showing that I'm enrolled in here. I wonder what it's supposed to show. Because we do have the logic. Bookmark. So maybe because it doesn't have a color. Or. It works. Great. Actually all this to the left. Load this categories get updated. So maybe there's some kind of caching issue that. I would note to like double check if categories are not fetched and refetch it. That should solve it. So this would be it for this project. And to quickly recap what we did. So we set up this course app. Using Next.js, Superbase, Tailwind. We used react icon for our icon library. And then few of the other libraries. After that we set up a schema to define courses. Categories and user. We did seeding of the database. Meaning like putting some dummy data for testing in it. We also checked using a GPT 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 authentication. 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 tried to came across obviously there were some issues. That we tried to debug using the documentation of Superbase itself. And chat GPT. We created this like layout. That right now it only has a header. And then layout is conditional. Meaning if we are on a sign in 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 created 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. And get their saved classes. And also update their profile. Like feature changes that I would do is probably on accounts page. I would add all the fields that we have right now in the table. Like I think there was an image. There was like gender, year etc. And then for the saved 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. This 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 ChatGPT as an assistant. First one would be code optimization techniques. 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 of fetch this kind of data faster. Or how to test the performance itself. Is something that you can ask. And not only performance. But in general if you're using Jest. Or if you 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. Whether 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 this conversation. So that way it kind of like parses through. And takes like the whole conversation as a context. Generated a readme that lists step-by-step guide. On how to set up the project. So we did set it up. But we also want to see step-by-step guide. And also I'm going to add readme to. I'll put 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 boilerplate 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. And 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. It was software engineer. Now you can ask it to be a project manager. And tell it that you already wrote some code. And write like the other tasks. That would be needed to be accomplished. Now what I would do is probably. It's going to list tasks in bullet points. So I would maybe like take this. Put it in Notion. And have like a Zapier integration. That in from the Notion table. That 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. Hopefully you enjoyed this tutorial. You learned how to use chat GPT. But also some other concepts. And thank you for watching.