Final Touches
In this lesson, we're going to give final touches to our application
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md
file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the The newline Guide to Fullstack ASP.NET Core and React course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to The newline Guide to Fullstack ASP.NET Core and React with a single-time purchase.

[00:00 - 00:09] Before publishing our application, there are few changes I would like to make to our application. These changes might improve functionality or aesthetics of our application.
[00:10 - 00:16] If we open the browser, we see React app here. Instead of our app name, which is Learnify.
[00:17 - 00:34] So what we can do is we can go to index.html file and instead of React app, we can say Learnify. Now we can open the terminal, shut the server and restart it.
[00:35 - 00:48] And now we can see Learnify here. Also, if we open the description page, I notice that the Booknow button is not doing anything.
[00:49 - 00:59] So what we can do is we can go back to VS code and open the description page. And here we will create a function with name Booknow.
[01:00 - 01:15] And this function will accept an ID of type string. And now what we can do is we can dispatch, add basket item async function.
[01:16 - 01:26] And we can pass the course ID, which will be this ID. And also we will redirect the user to the checkout page directly.
[01:27 - 01:31] So now I can use history. And I notice that we don't have history.
[01:32 - 01:38] So let's create it here. Consistory is equal to use history.
[01:39 - 01:48] And here I will say history.push and push the user to the checkout page. And I see something red here.
[01:49 - 01:55] Let's import user's tree using React router. Now let's pass this function to the Booknow button.
[01:56 - 02:06] And here we can use one click event. And here we can call Booknow function.
[02:07 - 02:16] And we can pass course.id. And let's pass an exclamation mark here.
[02:17 - 02:21] Now let's reopen the browser. Let's do it again.
[02:22 - 02:28] Let's go here and click on Booknow. And as you see, it directly takes us to the checkout page.
[02:29 - 02:34] And this is what we wanted. We wanted the Booknow button to take the user directly to the checkout page.
[02:35 - 02:41] But if you click on go to cart, it will take us to the basket page. And if you click on Booknow, we will directly go to the checkout page.
[02:42 - 02:53] Now I noticed if it is already in basket, it tries to add it automatically. So we need to check a condition and we want to check if that item already exists in our basket.
[02:54 - 03:00] We will not add it. We will simply push the user to the checkout page because right now we have this product inside our cart.
[03:01 - 03:09] But if you click on Booknow, it will try to add it again. But since we are having a problem, it will save problems saving item to the basket.
[03:10 - 03:47] So now what we can do is go back to VS code and here we will use F condition and we want to check if basket. items.find and if item.cossid is equal to this ID and this is undefined, which means this ID does not exist in the basket only in this case, we want to dispatch add basket item async function.
[03:48 - 04:01] And if it is not undefined, which means that the cost is already inside the basket, it will not dispatch this function. Now let's go to the browser again and check it.
[04:02 - 04:09] Now if you go back and click on Booknow, we won't see the error again because it is already inside. The basket.
[04:10 - 04:13] Perfect. Now I want to talk about one more problem.
[04:14 - 04:28] Since we are using Postgres database in production, I encountered a problem. If you open, we are seeing sections and lectures inside the data.
[04:29 - 04:47] But when we try to add a new section or a new lecture via the controller, it starts the primary key with one, which clashes and gives us an error to encounter this problem. We can either change the primary key type from integer to bid.
[04:48 - 05:02] But this will take a lot of work to create new migrations and change some logic . The easiest way is to make all the IDs inside sections and lectures to be much much bigger than they are right now.
[05:03 - 05:11] By doing that, our IDs won't clash with each other. So what you can do is I have added sections.json file and lectures.json file.
[05:12 - 05:24] You can simply download them and replace this data with the newer one. So go back, download the data, copy the data and first fall inside sections.
[05:25 - 05:36] json. Let's remove it and paste the newer data. I have just changed the IDs and made them much bigger so that if it starts from one, it doesn't clash.
[05:37 - 05:46] And same goes for lectures.json file. Simply copy the data, come back, delete the older data and paste the new one.
[05:47 - 05:59] And again, I have changed the IDs so that it doesn't give us the same problem. Also, I have added a few more courses. You can simply add them inside courses.
[06:00 - 06:10] json file because right now we have courses only for one category, which is IT and software. But now I have added courses for all the categories. So three more courses for each category.
[06:11 - 06:29] You can do the same thing, download the file, copy the data, come back to courses.json file, delete this one and paste the new data. That's it. And now that we have added more courses, what we can do is we can change the page size, which was three to eight.
[06:30 - 06:39] So what we can do is we can go to course slice and check the page size. And here we can make it eight.
[06:40 - 06:46] So now what we can do is we can drop the database. And so we will type dot net.
[06:47 - 06:58] First of all, let's clear it and type dot net EF database drop. The API is a starter project and project is infrastructure.
[06:59 - 07:04] So let's wait for it to drop it. Press Y.
[07:05 - 07:08] And it has dropped the database. Now let's create a new one for that.
[07:09 - 07:18] We will go back to our API project and type dot net watch run. And it has seeded the new data. Let's go back to the browser.
[07:19 - 07:28] And now we see eight courses. And as you can see. For every category, we have three courses for languages.
[07:29 - 07:32] For music. Productivity.
[07:33 - 07:35] Marketing. And business.
[07:36 - 07:43] And obviously we have much more courses for IT and software category. And the page size is eight. So we can click on two.
[07:44 - 07:48] We have our ninth course here. Amazing.
[07:49 - 07:52] Now let's prepare our application to go to the Internet.