Transcript for:
Full Stack Application Development with Spring Boot and React

what's going on guys welcome to this video where we are going to build a complete full stack application using spring Boot and react in the end we are also going to deploy this application to a so do watch this video till the very end because there is a lot of learning lot of knowledge that has been packed into it also if you haven't subscribed to my channel do subscribe hit the Bell notification icon also in the comments let me know who you are from where you are joining and what are you doing currently in your life I would love to know you so like I said this is going to be a full stack application that we deployed to AWS a lot of students been requesting me to come up with a course where we build an end to-end application using springbot so I'm going to cover spring boot we are going to make spring boot apis that we are going to expose to our application application meaning the front end we are going to have database integrated with the spring boot app then we are going to move towards react we are going to understand the basics of react how react works and uh what are components and everything so the building blocks of react are covered and that in a very handson way also we will build the front end step by step I'll show you everything line by line as to what each thing means and we'll be actually doing this Hands-On so it's a complete practical course and then once we build the front end we are going to integrate it with the back end where we fetch live data from the apis that we have built so we'll be actually consuming the apis ourselves that we built in the course also once the front end is functional we are going to beautify it so we are going to learn how you can use bootstrap into your react application so you'll understand how you can add uh components pre-built components pre-styled components from bootstrap and then we are going to deploy the back end the database and the front end these three things onto AWS so if you have never used AWS or like don't know much about it don't worry I will be holding your hand and teaching you everything step by step I'll show you everything in the dashboard what all is needed for you to deploy the application and I'll give you step by-step guidance so please watch this video till the very end also show some love comment uh subscribe and like the video as well so that this would encourage me uh or this will fuel uh the encouragement for me to bring more such free courses for you all so without a further Ado let's Jump Right In so let's get started with the absolute Basics so we'll start discussing by what is a web framework now first let's understand why do you need a web framework and what gaps does something like this fill in so if you look at all the modern web applications or most of them they all have a lot of things common in them for example all the web applications need a way to serve web page to a user when the user tries to access certain URL right all the web applications need to communicate to the database like they need to save information to the tables and they need to save and fetch as well they also Al need to manage the security like this is also common okay so security databases URLs authentication all of this are common functionalities across major web applications now a question that you should ask yourself is should you build all this functionality from scratch every time okay so you as a developer would be working on multiple web applications you will be building and deploying a lot of stuff so all of this is common and it's a common piece of code that you have to replicate all the time you can think of this as a need for a boiler plate in your life okay so it's not necessarily important that you should do this every time from scratch okay now you can compare this with the analogy of building a house okay so to build a house you would need a blueprint and a set set of tools now web development also works in a similar way where you need some sort of a blueprint wherein you have a set of things predefined okay now earlier in early days of web development developers had to build all of this right from scratch so they had to write raw code like for HTTP requests database interactions template rendering and so on okay but this process was pretty much timec consuming and it led to a lot of error like it was pretty much error prone okay so there has to be a better way now imagine when you're building a house okay what if you have some pre-fabricated components like pre-built walls you have pre-built windows and pre-built doors as well so you you have doors of different sizes walls of different sizes and windows also of different sizes and depending on the size of the house you're building you can pick the wall door door and windows okay based on your requirement now so that would of course lead to faster assembling okay it would lead to fewer errors and also it would be much more precise right because you already have a template that you have set because these are just the repetitive tasks that you need whenever you build a new house okay so you could think of this as a prefabricated component so this analogy of pre-fabricated components which helps you assemble faster and it even helps you reduce a lot of Errors okay now this is where things go fast and this is where web framework comes into picture now you can think of this house building analogy where you had a lot of pre-fabricated components which led to faster build time okay you can compare this with web development and that is where a web framework comes into picture so a web frame work has a lot of pre-fabricated components like in the analogy of house okay so it has a lot of pre-fabricated components that enable you to build your web application quickly okay now when you build a web application you know that you need a way to let's say access a URL you need a way to serve users request you need to authenticate and all of this so that is where you you can have a set of boiler plate okay which is nothing but a web framework so what a web framework is it is nothing but a collection of pre-built tools and modules that you will need to do standard task across all the applications okay now you can think of this like an authentication database accessing and so on all right so all of this is combined and packaged as a web framework because you as a developer will need all of this depending on the kind of website you are building and whatever you need you can make use of that for example if you are not making use of authentication in one of your projects that's perfectly fine you don't need to use authentication then right so this way you can use whatever you want from the pre-built set of components and go forward so like in our house building analogy you were free to pick whatever you want like if you want walls you can pick walls if you up building a house without uh windows so you can skip that okay it's up to you so this this is something similar that is applicable in web Frameworks as well so some of the popular web Frameworks that exist in the world are spring boot okay so this is a Java based web framework and it is known for its ability to build Enterprise grid applications really quickly so some major Enterprises use spring Boot and if you are working in Java it's really important that you learn about spring boot soon so spring boot then we have D Jango which is a python based web framework and it is known for its batteries included philosophy so if you read a bit about D Jango on the web you will see this term batteries included everywhere which means that it includes a lot of common functionalities built in all right then you have flask which is also python based framework it is lightweight more flexible and it is super great for small projects or whenever you need more control on your project so that is where flask comes in it is pretty much lightweight when it comes to comparison with Jango then you have Express so this is a JavaScript based web framework and it is a part of a mean or M Stack so by mean I so mean stands for mongodb expressjs angular and nodejs and M which is me RN stands for Express react and nodejs okay so this these are text tacks that you can use and express is widely used for building apis with with JavaScript okay then you have Ruby on Rails which is a ruby based framework so Ruby is a programming language and you have Ro so Ruby on Rails is also popularly known as Ro and uh it is a ruby based framework which is also quite popular so these are some of the popular web Frameworks that exist in the world today and depending on the programming language that you are learning you can pick any of these Frameworks and start building your applications they enable you to build and deploy your applications faster than the traditional approach wherein you had to write a everything from scratch okay so a lot of things are pre-built in this framework like ability to interact with the database like ability to interact with the server host and so on all right so basically what I mean over here is it accelerates your development time and if you're building a web application today you should use a web framework so this is about web framework let us now start talking about spring framework so what is spring framework so spring framework takes away the hazle okay and it's a comprehensive open-source framework for Java so spring framework has a lot of features built in which makes it quite popular in the Java World okay let us talk about some of the amazing features that spring framework has to offer us so the number one feature would be inversion of control now what does inversion of control mean okay so inversion of control means spring manages the life cycle and the configuration of application objects okay now what I mean by application objects so these are the objects that are created during the lifetime of your application okay so when you run your application there will be some objects that will be created and you will need to use them so spring manages the life cycle and even the configuration of these objects it reduces the dependencies and it increases the flexibility for developers okay and whenever you need these objects spring makes it available for you okay so you don't have to take the hazle of managing these objects now because of this feature you can build applications that are not tightly coupled so let me explain by what I mean over here okay so let us take an example of uh the source code that I have over here so in this source code I have message service this is an interface it has a method defined or declared I should say it has a method declared which is string get message and this is being used by this particular class email service okay and it defines this particular method over here all right now let us say we have another class called SMS client which uses this particular message service and it's dependent on this particular class over here like or message service is an interface so it is using the message service interface to make use of email service class okay so it's creating the instance of email service class and it's assigning to the message service all right now this is a dependency and whenever you create an object of SMS client okay this object is automatically created and it's assigned to the message service instance which is an interface all right now if you take a look at this code this code is tightly coupled so SMS client is tightly coupled with this dependency class okay now SMS client explicitly knows about and creates this instance over here and that is why we are call in it as tightly coupled okay now this is not good okay like okay this code would run you can make use of this but this does not promote loose coupling okay so with inversion of control feature you can make use of dependency injection and with the help of dependency injection the dependencies are defined by you and they are injected at runtime by spring okay so what I mean by that let me explain this to you so when you write the same source code with spring framework how would you write it so take a look at this source code now okay now what is happening over here is we are not creating an instance and we are not initializing the message service class over here so like in our previous example if you take a look over here okay we were creating an instance of email service and assign assigning it to message service which is an object of message service interface okay but here suddenly we are not doing that what we are doing is instead we are accepting a parameter in a Constructor and we are assigning that parameter to the object over here okay now this is more flexible and more modular as the class itself does not need to be concerned with creating or managing the dependency es okay now the question is how is or who who is passing this object over here or how is this initialized okay so who gives message service object over here and how is this initialized so the answer is spring framework okay so when I said dependency injection so what happens is when you run this particular piece of code using spring framework what spring framework will do is it will provide the instance of message service through the Constructor during the runtime okay and this is what the inversion of control feature is so with inversion of control the Springs ioc container so there is ioc container that spring framework has it manages the life cycle of objects okay and it injects the appropriate implementation of message service over here okay so message service is an interface over here all right so it injects the appropriate implementation of message service to this particular Constructor during the runtime and because spring is providing the instance during the runtime it allows for lose coupling between components and it promotes a modular design which makes testing and maintenance easier okay and it also enables the separation of concerns so here like we we have not written the code which is tightly coupled okay so tomorrow like if I have to go back and if I see this code over here so I have given the I've created the object of message service and during run time appropriate implementation of message service is provided to the Constructor that we defined using spring okay now if the implementation changes in future spring will make sure that the appropriate implementation available at that time is provided to the instance of message service right so even if the implementation changes you don't have to change your source code over here okay and that is what loose coupling is so loose coupling means whenever you're changing something the other parts of code are not impacted whereas in this piece of code like the one without using the inversion of control feature here this is tightly coupled okay so if the implementation changes so for example if we change this to something else so this is not instead of email service this is let's say some other service like mail service or let's say SMS service or something like that so if this changes then this changes as well now this is changing because it's tightly coupled okay and here we have moved to a inversion of control feature okay we have making use of inversion of control feature and because of that it's not tightly coupled okay and because of this Loosely coupled and because of this feature of dependency injection we have a modular code so this is inversion of control done with the help of this Constructor and we get the dependency on runtime so this is about inversion of control now we have data access so spring framework also provides a simplified and consistent way to handle data access from various sources like jdbc hibernate GPA and so on okay then spring is an MVC framework and it provides a clean separation between the presentation code okay so what I mean by presentation layer is the code which manages the interface okay so whenever you access the application from the browser the source code or whatever is being managed in the browser whatever the user sees is the presentation layer okay and then you have the logic part and then the database access part which is separated so MVC makes sure that model view and controller are separated so this you will see once you start building the applications with spring boot then you have transaction management okay so spring provides a unified way to manage transactions across objects okay and spring also has a security feature which is highly customizable feature Rich okay and whenever you're building like Enterprise grade web applications security becomes crucial and spring framework provides us with authentication authorization and protection against some of the common security vulnerabilities all right so that's spring framework so there are a couple of more features which is testing support so so spring framework helps or it has a really good support for unit testing Frameworks and integration testing okay it provides uh good integration with junit mokito and so on okay also spring framework provides support for internalization and localization and this allows developers to build application that can be easily adapted for different languages and locals if you have to talk about some history about spring framework so this framework came into existence in 2002 and this was developed by Rod Johnson okay now prior to this everyone was building applications in a traditional way in Java so Johnson's goal was to create a lightweight alternative to Java e platform okay so Java e was being used at that time which was not a simplified way to web development then Johnson thought of creating an alternative which is lightweight and that is how the first version of spring was released in March 2004 okay and it had lots of co- feature and since then it has gone major developments and versions have been released all right so so that's about spring framework let us talk about spring boot so what is spring boot so spring boot is open- Source Java based framework used to create Standalone production grade applications that are based on Spring and Java now how does spring boot differs from Spring and what is the difference between them so when it came to building applications with spring Frameworks there were a lot of steps involved in setting up configuration right writing boiler plate code and deployment of the app yes spring framework reduced a lot of boilerplate code which developers had to do initially but still there was some gaps like developers still had to do configuration setup and a lot of things before they could run their application and this was the Gap that was filled by Spring boot so what spring boot did is it offered a set of preconfigured components or defaults that are typically needed for application to run or application to work and it eliminated the need for a lot of boiler plate code that was involved in setting up a spring application so spring boot is based on Spring and it makes a lot of things even more easier when you compare it with spring you can think of spring boot as Maggie so if you are making a Maggie you will just open the satchet okay put in all the ingredients that come in within that particular satchet and you done okay so basically that Maggie packet has everything you need to make a Tasty Noodle okay a basic noodle within like 2 to 5 minutes so that is what spring boot is essentially it it is a package which has which has everything that you need to start building and deploying your web application okay so you can think of spring boot as It's a combination of spring framework pre-built configuration and embedded servers yes so when running application you also need to deploy the application to a server right how will you run a serers side web application you need a server and if you are doing development locally of course you will need to set up some local server on your system so spring boot makes all of this easier and when you create a spring boot project you have all of this pre-configured so you just have to hit the Run button and you just see your application running and being deployed onto your server you don't need an external server or you don't need to do a separate server setup so initially like before spring boot you had to set up a local server okay deploy the application on that and then check changes okay so this in this had some hazle of course Spring framework reduced the hazle that developers had to do before spring came into picture but with spring boot it became even more easier now we will also take a look at pre-built configuration so what I mean by pre-built configuration is like you don't have to focus on configuration configuring things so when you add a database or when you want to use a database into your application you will have to do a set of configuration like you will uh earlier developers need to add dependencies and do a lot of stuff so there was a series of steps that developers had to do to make the application work but with this pre-built configuration feature you just have to specify few properties like what is the username what is the host URL of database and password and some some additional properties depending on the kind of database that you are using but that is it and it's all done so the configuration will be automatically done by Spring boot so this is what spring boot is now let us talk a bit about the components of spring boot so the number one component is spring boot starters so what are spring boot starters now these are a set of dependency descriptors or dependencies that exist which make your life much more convenient okay so for example Le you can think of this as ready to use ingredient packs okay so if you're building a web application you have a start a project for web so what does it contains and how it makes your life easier so a web starter will have everything that a typical web application needs for example like you might need a way to handle rest API request so these different things that are needed by a typical application are handled by these starter projects there's also a starter for working with database so it's called a starter jpa project okay now what it brings in is it brings in the jpa configuration then jdbc configuration together so you just have to include that startup project and you are ready to work with database that is it so this is spring boot starters then you have spring boot Auto configuration this is something we just discussed so it automat atically configures your spring boot application based on the jar dependency that you have added so for example if you have added a dependency to work with database spring boot knows that it needs to configure database then so this is autoconfiguration then you have spring boot actuator so this is one of the non-functional requirements that every web application has so whenever you are building a web application you would need a way to monitor its Health like do some Metric Gathering you might need to do some HTTP tracing and so on and this is not mentioned as a requirement by any of the clients so you as a developer have to make sure that your application is healthy up and running now how would you Ma monitor your application so that is what spring boot actuator is it enables you to monitor your application so this is a ready to use feature okay and you can tweak it uh as needed by you but this is one of the amazing features of spring boot then you have embedded server so when you want to run your application okay you don't need to configure a separate server so you have a standalone embedded server which will run your application as a jav file okay and this eliminates the need of you managing the headache of deploying your application on a separate server okay then you have spring boot Dev tools and it is it consists of some development time tools that uh enhance the productivity during application development and it provides features like uh automatic application restart live reload of some static resources if you have added so static resources like CSS HTML JavaScript and so on so these are the components now if you have to talk about advantages number one Advantage is it's Standalone so you can quickly get started with spring boot okay you don't need to deploy your application to the server and you are just ready so you just configure the project you create a springbot project you import it or open it with your favorite ID and you are ready to write code okay it's Standalone and Standalone meaning it does not need to be deployed separately on a server it comes in with an an embedded server so it can work on its own then it has starter code so I explained what starter projects are and it makes your life much more easier okay then you have to do less configuration of course because of the autoconfiguration feature it reduces the cost and the application development time as well now why do developers love spring boot number one it's Java based it's fast and easy to use it comes with an embedded server and it has various plugins available and a lot of Community Support as well it eliminates the need for writing boilerplate code and configurations now when it comes to building application with spring boot there are different tiers that we should be aware of so the number one is the presentation layer and then you have the service layer then data access layer so these different tiers or you can even call them layers are categorized into these three parts okay and this is a part of spring boot architecture so let's understand what they are so what is a presentation layer so presentation layer presents the data and the application features to the user okay and this is a layer wherein all the controller classes exist now what is a controller so whenever you send a request to your web application controller does the job of handling that request okay and it's a part of presentation layer and this layer is responsible for accepting the request from the user validating the inputs the user has given and passing it to the next layer which is the service layer now what is a service layer so service layer is a layer where business logic of the application resides and all the tasks such as evaluations decision making processing of data is done at this particular layer now this layer will be frequently called by the presentation layer and once the processing of request is done service layer will take help of data access layer to fulfill the users's request now what is a data access layer so as the name suggests this layer is is where all the repository classes reside now repository classes are the classes that talk to the database okay so all these classes will reside over here and they will talk to the underlying databases so for example if I have a browser and if the user is accessing our application from the browser so how will it access so we have our application hosted on our server now this request will be intercepted by controller controller will pass on this request to the service service will pass on to the repository or the data access layer which will in turn talk to the database and get the desired results and pass it on to the user so this is how the request flows in a typical spring boot application now what are we going to build with spring boot so with spring boot we are going to build an application that will help us store and retrieve challenges that are stored monthly so these are the end points that we'll Define in our application so we will have a get request to/ challenges and this will enable us to get the list of all the challenges then if we want to get a challenge for a specific month you can use this endpoint you can say get challenges and pass in the month so you can say one so one will give you the challenge for January then you can also create challenge using this post request you can update any challenge so you can use a put request to update this Challenge and you can pass in the ID and then you also have the delete request so you can delete any of the challenges you wish to so this is a simple application that we are going to build and in the process we are going to learn the nties of spring boot while building all right and this is how our application is going to look like so it's going to function this way wherein a user can send a request from the browser then from the browser the request is handled by the controller so we are going to have a challenge controller over here and this challenge controller will validate the request and from here it will head over to the service layer where the business logic will reide then from the service layer we can talk to the repository layer to get the data from the database and then the response is sent back to the user and all of this will be hosted on our server so we are going to build this entire application okay with the help of spring Boot and we are going to Define everything we need to run this in browser now let us understand how you can create a spring boot project okay so to create a spring boot project you need to access a tool called Spring initializer so in your web browser you can say spring initializer and you will see this website start. spring.io you need to head over to this website so we are going to make use of this website to generate the project for us so so what this website helps us with is it helps us with creating a spring brot project so it will give us the entire structure for spring boot so we'll be making use of intellig but you will now ask why can't we create the project directly in intellig so the reason is this feature is not available in the free version of intellig okay so if you have intellig ultimate you can make use of this feature wherein you can create a spring brute project but we will stick to how we can make use of free version of intellig okay so I'm going to make use of this website so I'm going to say Maven over here so here I can select Maven because Maven is the build tool that I'm going to use for my project I'll keep Java selected I'll make use of latest version of spring boot here the latest version of spring boot is three okay and 3.1.1 is the latest release but now here you will notice there are some spring boot versions with snapshot append in the end now snapshot is the version of spring boot that that has opened or been released in preview so it might have some bugs and it is recommended that you do not use Snapshot version for learning so you should use the version without snapshot written okay and it has to be latest one and also there is a possibility that you might see some other version number over here so spring boot keeps on releasing versions every now and then but don't worry the functioning of this project won't change and if it changes I'll make sure I update the video so here now once you done selecting the version you need to specify some details about the project like you need to specify group artifact and name so group is nothing but the package of the project so the package I'll say com. Embark X so this is a domain name that I have or the website max.com so I'll keep this as the package artifact can be the name of the project okay so the name is challenge app so I'll keep this as the name and it gets autop populated over here now the description is you can specify any description you want so I can say app for monthly challenges like so and you can see the complete package name come up over here it's autogenerated you don't need to edit this I'll keep the packaging as jar and the Java version as 17 you can choose the right version for you but I'll stick to Java version 17 okay now this is about some configuration now over here we have dependencies so what is what does this dependency mean so dependencies have so this is a list of dependencies that you can add to your spring brute project and it has startup projects as well so you can see the spring boot web so I'll select this so it enables you to build web applications including restful applications with spring MVC and it has Apache Tomcat as embedded container okay so I'll add this dependency and you can see there are lots of dependencies like I have dependencies for database so you can see spring data G pa okay then you have jdbc you have mongodb you have you should have one for postgress as well okay but there are so you can see pogress SQL driver now whatever you select over here and if you click on explore so you can explore what is being generated over here you can see this project structure that is being generated okay you can see like over here like this entire pom.xml so pom.xml is where all the depend encies would be added you can take a look at this and you can say close now once you're done with the configuration and exploring over here you can see generate now what generate will do is it will download the zip version of this particular configuration in the form of the project okay and it will give you the zip version so you can use this ZIP version then to work with so I would request you all to hit generate and get the project onto your system so I have downloaded the zip version from Spring initializer website okay as you can see challenge apppp doip so this is what it gave me now what I'm going to do is I'm going to extract this over here okay you can use any extracting software and it will give you all the files over here now what we are going to do is we are going to open this project with the help of intelligence so let us head over to intellig so you can open intellig and this is what the welcome screen that you're going to see I'll click on open I'll head over to the location where I downloaded and unzipped the file so I have unzipped it over here challenge app as you can see you'll see this icon and I'll say okay now it will ask you whether you trust this project now I trust this project I know I've downloaded this from a reputed source okay now it's asking this because it will run some code from this folder and it just it's just confirming and intellig is just confirming from the security standpoint so I'll say trust all the projects in this folder and trust this one okay and it will open up this project project for me okay you'll see some tip of the day which you can close so you can see some processing was happening over here at the bottom okay and here we have the entire project okay so what we have done is we have done setting up the entire project into intellig hey there so welcome back so in this video we are going to continue building our challenge application using Java spring Boot and intellig idea if you have not subscribed to my channel I would request you all to do so and also smash the like button this will motivate me to bring more such content to you all for free so without further Ado let's get started all right so welcome back so this is what we are going to build is what we have discussed in our previous video so we are going to cover the get query or the get API for the challenges endpoint okay and we are going to cover the rest of the endpoints one by one okay so let's head over to our intelligy idea so here in intellig I have the IDE set up entirely okay I have I have unzipped the project and I have opened the project let us take a look at what exists in our project right now and how is a typical spring boot project is structured okay so you can see here I have the main directory where my project resides I have some folder like intellig these are the configuration files related to intellig so we don't need to touch them we have some files related to maven which again we are not supposed to touch then we have the SRC folder now this is where all our source code will reside so you have the main folder wherein you will be writing all the source code and then you have the test folder wherein you'll be writing all the tests that you'll need for your application so I'll just collapse this test folder now within this main folder you have Java and resources so under Java is where all your Java files will reside so if you expand this a bit you'll see the package structure that we have defined and then you have this main application page okay so this is a page wherein you will have the main method and this is the main method that will be responsible for running your spring boot application and you can see see this annotation over here atate spring boot application which tells that this is like this entire file is a spring boot application okay and now you will be able to add more files and structure to your project so under this package is where we will start writing a code okay and then you have the resources folder where you can have the static files and the templates and then you have application. properties so this is a file which is empty it's a properties file wherein you can store the properties that Define your application now if you go down you have a pom.xml okay so if you click on this and let me collapse this project structure so you will see this is the pal. XML Maven file okay this is typically needed by Maven to manage all the dependencies and this particular file has all the information that is needed for your project okay and if you scroll down you have the group ID here okay so this is the group ID of the parent and this is the group ID of the project okay and you can see the name of the application and the description as to what we had mentioned on the spring initializer website and here we have the Java version that our application will be using so if you scroll down you have the dependencies so this is the spring boot starter test okay and this is the spring boot startup web so this tells that our application is a web based application and here is where spring boot will provide everything and make available everything that typically a spring boot web application needs okay so I have this pom.xml defined now let us open up our project structure here and let us start writing some code to get the list of all the challenges okay so like I said we are building this particular endpoint get/ challenges which will return all the challenges that we have within our application so here I'm going to first Define a controller okay so I'll say Java class and I'll say challenge controller so I have this controller created all right and now we need something to store the list of our challenges because that is where what this controller is going to return okay so I'm going to say private list and I'm going to say challenge okay and I'm going to say challenge challenges so let's call it challenges is equal to new array list so for now I'm going to store all my challenges in the form of array list and we are going getting an error so now we are getting an error which says cannot resolve the symbol challenge okay so what we need to do is we need to click on more actions here and we need to say create a class challenge it will confirm where this class should be created so I'll say okay and you will have this class created in the same directory over here okay now this is a class where we are going to define the structure of a typical challenge that we will have in our application so what do we want to store with our challenges so I'll say private long ID so we'll store three things one is ID then we'll store the month and this will help us Define the month against with against which the challenge is stored and then we are going to have some description about the challenge okay so I'm going to say ID and then I'm going to say string month and then let's have private string description so this should be S capital okay so this is defined now we can Define The Constructor okay so I can right click and say generate and I'll generate a Constructor and then I will will have right click generate and I'll generate getter and Setters for all okay so our class is done so this is the class that will help us store all the challenges information okay and here in the controller we have that error message go away all right now let us Define an endpoint to get the list of challenge so I'm going to say over here public list so this will be a method which will enable us to return all the challenges to the user and I'm going to say challenge here so since we are returning the list of all the challenges this is what our return type should be okay and I'm going to say get all challenges okay and this is the method and I'll say return I'll simply return this challenges object over here which is being stored as a list all right now I want to tell you like this this is how our application will function so from the browser or from the postman if you send a request that is going to be managed by controller the request will be routed then to service so controller will do the acceptance of request okay from the appropriate controller methods So within controller you typically have a lot of methods that are respons ible for managing different kinds of requests how that is something you'll see shortly and then when the request is mapped to a particular method that request is being forwarded to that of service okay now service is a place where all the logic resides like all the business logic resides and then if there is a need to interact with the database it is passed on to the repository and repository is responsible to communicate with the database and fetch the results and send the response back to service and service in turn sends the response back to controller and finally user sees the response so we don't have these two parts created yet like the service and the repository we are just working right now in the controller let us understand the controller first as to how it works and then we will make way for each one of them first service and then repository wherein we'll work with the database so for now let's focus on controller so here we have this controller created wherein we have this variable array list which is of type array list and then we have a method that returns all the challenges now we need this to map to a endpoint over here which is/ challenges so if the user says domain name slash challenges our application should return the list of challenges so how do we create this mapping so first you will have to mention over here an annotation which is rest controller so this annotation tells spring boot that this particular class is a controller all right and then we'll have to Define another annotation so if you say add the rate you can see two suggestions come up post mapping and get mapping so if you want to create a get mapping you can use get mapping and annotation if you want to create a post mapping you can create post mapping annotation so I'll say get mapping and I'll mention over here challenges like so okay so what we are doing is we are telling spring boot that hey this is a controller and whenever request comes with this particular endpoint and it's a get request so execute this method all right that is what we are telling spring po now let us run this project so I'm going to go to challenge application and here you're going to see this red or sorry not red green button so I'll click on that and I'll say run now this will start running the application you'll see a progress at the top right here okay and depending on your system this will take some time it should not take too long let me expand the logs you should see logs coming coming up over here okay and you should see this message in the end started the application name which indicates that our application has been started all right and you can see some information like Tomcat started so Tomcat is a server which is inbuilt and our application is running on Tomcat server on Port 880 all right so let's head over to this port so here in the browser I'm going to say I'm going to open a new tab I'm going to say Local Host I'm going to say 8080 and I'm going to say enter so the moment you say this you get an error and this is the default error page that is available within spring boot okay this is something that we have not created but we are seeing this error message because we are trying to access a URL for which we have not defined any functionality okay so if you take a look at our source code okay so if I disable minimize this and if I go to our source code we have defined the endpoint for SL challenges and not for the root URL so I need to go to slash challenges now here you can see you have an empty array okay so this empty array says that we don't have any data for the challenges all right which is fair enough we have created an m list and that is what we are returning okay you are seeing two buttons here raw and past okay so these buttons are coming in from a plugin that I have used which is Json format okay so this is the plugin if you search for Json formatter it's a chrome plug-in which is used to format Json in your browser okay so typically if there is a Json response in your browser it is going to look all jumbled up okay so this plugin does the job of formatting it okay and you can see it brings this two buttons raw so whether you want to view the data in the Raw format or the past format so I have this plug-in installed if you want to you can use this otherwise it's completely fine okay but I just wanted to let you know that this is coming because of that plugin I'm using okay so don't get confused as to what is this so yeah so this is an empty response all right so we are done adding and empty response now now let us understand how did our application work and how was this request served so this request is getting served by application okay and if you add any object or anything in the array list you are going to see the data over here okay so let me show that as well to you so I'm here in the controller class and let me add a single challenge okay to our list so that we can see some output over here so I'm going to create a Constructor I'm going to say public challenge controller and here I'm going to say challenge so a challenge object object challenge one is equal to new challenge and here I'm going to define the challenge okay so I'm going to say one L which is the ID January okay and then I'm going to have the challenge description so I'm going to say learn in new programming language and I'm going to add this particular challenge one to challenges now if I rerun the application let us rerun since we have made a change so for every change you have to redeploy your application and the application needs to rerun on the server so I'll switch over to my browser and I'll hit ref fresh so here now you can see the data that we have initialized our challenge list with is coming in as adjacent so this API is now working for us and now let us talk about how our API worked okay so let us analyze some the logs for this okay so let me expand this a bit and let me go to the top so at the Top If you see you have the spring Banner okay this prints in Spring and it prints spring Boot and the version of spring boot that you are using okay then you see this message which says that the application is being started okay now if you scroll down a bit here you will see where all the environmental variables are being set okay so here it's making use of profiles okay and with the help of profiles all the application variables are being set and there are currently no active profiles because it's a brand new project that we have created and we have not defined any profiles but profiles is a concept using which you can set environmental variables or some properties when you're running your application for example you can have different profiles or properties for Dev environment Brad environment QA environment and so on all right so there's no active profile so it picks up the default which is fine for us at this stage then spring boot has an embedded server okay so it comes with an embedded Tomcat server and the next set of logs talk about how Tomcat initialization happens and Tomcat is initialized for port 8080 okay and it starts the service so the service is started and then the seret engine is started okay now after the seret engine is started the mapping of the URL and everything happens okay and if you scroll down here the application is fully started as you can see now finally in the end okay we have the dispatcher serlet being initialized okay and this dispatcher serlet is responsible for dispatching the request to the appropriate controller and then the initialization is completely done so our application is ready okay as you can see onto a particular Port which is port 8080 all right so this is how our application runs now what happens is when you hit this query okay when you hit this URL in the browser so here is where our application is run so we say Local Host because we are running it on a local machine and we say colon ad8 because this is the port on which our application is running right now so if you have deployed your spring boot application this will typically be replaced by your domain name okay so you can have like abc.com challenges all right or you can have api. abc.com challenges if you are exposing your API so this will be replaced by the domain name and then you have/ challenges now when you access the URL that is mapped to your application so excluding challenges this is what is mapped to your challenge to your application okay now when you send a request here what happens is the request is routed to the controller so from like all the controllers that exist in the application so let me tell you in an application there can be multiple controller files that's perfectly normal okay so if you're defining lots of entities and then you have lots of uh modules inside a single application you can have different controllers for each one of them that is completely normal as of now we have only one controller and our application knows that whenever a request comes to this particular endpoint it is supposed to go to this particular method and perform the action within this particular method now what does this method do it simply Returns the list object and on the fly during runtime this is what is converted into Json and returned to us as a response so this is how typically our request flows right from the browser to the application and then again it comes back to the browser when we hit the URL what we are doing is we are sending a request okay we are sending a request to the server after that request is being processed we get a response object so this is the part of the response object okay now response object has two parts one is the response itself and then you have the status code so we'll talk about status code a bit okay but we are only seeing the response right now because we are trying to access it from the browser okay so this is how our application processes the request now let us head over to the next part wherein we will write some code which will allow users to add some challenges into our application okay so let us switch over to our ID so here we have get mapping okay to accept the challenges into our application we will need another type of request which is nothing but post mapping so here you have this post annotation SL challenges okay so what I'm going to do is I'm going to say over here public void add challenge okay and I'm going to add write some code to add the challenges over here now first thing I need to map this to a URL how will I do that you must have guessed it right you will use post mapping annotation okay and you can see Slash challenges so here the URL is same but the request type is different so get mapping so if a request comes with the type get you will return all the challenges if a request comes with the post request on the same endpoint you will add the challenge so same end point but it's providing two behaviors based on the request type okay now what are we going to do over here so we are going to add the challenges and we are going to say over here challenges dot add and I'll add challenge over here okay so so we need to add this challenge object and I can return challenge added successfully I can return this string over here okay but it will return like it will give you an error because we are we have mentioned void over here so I can overun this and make this return a string okay so this will return string now now where do we get this challenge object from so this is the challenge that user wants to add into our application so how do we get this object from the user so we need to add this as a parameter over here okay so I'll say challenge challenge okay now the question is how does this method gets this parameter okay so this method gets this parameter in the from the request body now what do I mean by request body so whenever you send a post request a post request typically has some additional information with it and that is known as the request body and and request body will have some additional request parameters that are typically needed to complete that request okay and I'm going to accept the challenge object as the request body here with post mapping so I'm going to I'll have to tell spring boot that hey you need to get this object from the request body how do I tell this with a simple annotation so I can say atate request body now this will tell boot that Hey whenever you get a post request on/ challenges you can call this method but you have to also get the request body and put this or wrap that request body into this object and that object is passed on to this particular method here which then adds it to the challenge list okay and that is how the challenge is added all right so let us rerun our application now so I'll stop and I'll rerun so our application is up and running now the question is how do I send a post request from the browser okay so you cannot send a post request from a browser you need a tool like a tool from where you can query any API or where you can create a request and using that particular tool you should be able to send all the kinds of requests like get request post requests put request and even a delete request okay so what tool shall we use so there are multiple tools in the market but the one that I'm going to prefer is Postman okay so Postman is nothing but it's an API platform for building and using apis okay and if you are already in developer you must be well aware of Postman all right so this is the official website of Postman which is post man.com and you can see like there are tons of developers who are using Postman already and this is the most popular tool out there to work with API requests okay there are many other tools also but this one is most popular and you can go through all the features here okay if you wish to or what you can do is you can download Postman okay so here you can see download the desktop app for Windows Mac and Linux so whichever platform you are on you can click the icon for that and you can download the exe or executable file for your own OS okay so download this and then the installation process is fairly straightforward so you have to just follow the installation steps like any other application on your operating system and boom you're done so I have already installed this particular application so this is Postman already installed on my my system okay so if you open the interface you might be asked some onboarding questions and if you skip all of them you will see this particular screen okay where you can see multiple options at the top okay so there is an option home you have option to access workspaces for which you need to create an account you have an option to explore if you click on explore you should be able to browse all the open apis okay so I'll go back to the offline API client so this particular interface here is called as offline API client interface by Postman this interface has two parts okay so one is the left part on which you will see all the requests that you have executed so this is a place wherein you will see history of all the requests that you have executed and on the right hand side you will have a way to create an ex execute your request and here at the bottom you can see response so here you will see response from all the requests that you have sent okay you can even save your request and do a lot of stuff with Postman okay you can save your request so that you don't have to create that request again so if you're using a request a lot of times you can make use of that feature so what I'm going to do is I'm going to create a post request so you can see over here we have this drop down to get the post request we'll copy the URL I'll paste the URL here okay now with the post request we need to specify the body so here you can see the body tag I'll click on this and you have multiple options here none form data I'll say raw and I'll select the format as Json okay so here we'll add some Jason data wherein we'll pass in the information to create a new challenge okay if you want you can copy this Json here I'll copy this and I'll paste it here okay so we'll use the same Json in fact so I'll create the challenge okay so I'll say February and I'll say learn a new or create a new app something like this so what I'm doing is I'm creating a post request to this endpoint and within request body I'm seeing some I'm sending some Json data which is the structure of my challenge object so all the parameters that a typically a challenge needs is what I'm sending along with this request now let me trigger this the moment you trigger this you will see a message challenge added successfully 200 okay so you can see you're getting a response message and a status code over here now what does a status code means so status codes talks about the status of the request so when you send a request what happened to that request was it successfully executed did it fail was it redirected to some other server or if it failed whose issue it was was it was it you who was sending the bad request or was it an issue on the servers end so all of this is communicated with the help of status codes and there are different status codes that are available and these status codes are standard defined for HTTP protocol so if you're getting 200 it means okay 200 okay means your request was successful so if you get 2011 created it means you had asked the server to create something for you and it's created okay so typically in a post request when you are adding a new challenge you should get 2011 created if you want to like as per the rule it should be 20 one created but right now we have not defined that and we'll go to that but yes we are getting 200 which means that our request is successful okay now you can even have like 400 which is nothing but bad request then you have internal server error okay it has a status code as well so this way different status codes have different meanings and it helps you understand if you're communicating over the HTTP protocol as to what happened to your request Okay so here we got okay which means everything is okay and here you can see this is a request that we just executed it will come in in the form of History okay and what I can do is I can now convert this into get request and I can send this now if you send this as get request you will see you are now getting two challenges so this is the initial challenge that we have initialized in the app then you have the Feb challenge as well where we say create a new app and this is something that we created we just created using Postman okay so the code to add a challenge into our application is working perfectly fine all right which means we have successfully executed our post request over here hey there so welcome back so in this video we are going to continue building our challenge application using Java spring Boot and intell idea if you have not subscribed to my channel I would request you all to do so and also smash the like button this will motivate me to bring more such content to you all for free so without further Ado let's get started so now we are done with the post request what is happening is we are receiving the data from the controller and we are processing it in the controller itself but ideally we need to create a service layer which will handle all all the logic that the application needs to do so let us head over to intellig and Define a service layer so here in intellig I'm going to create a new file I'm going to say a new class and this will be challenge service now this is a file where all the service related code will be written okay but what should this class have so this class will for now have the list of Challenge and it will manage all the addition and deletion and whatever operations we are doing on that list okay so we are going to move that logic from the controller to that of the service okay so I'm going to cut this from here and I'm going to have the list defined over here and then I'm going to even move this initialization part okay so I'll say over here public challenge service okay and this is the service Constructor okay and I have added the initialization code over here now I'll return the challenges okay I'll copy this and I'll create a method here okay so what we'll say is we'll say public void get all challenges like so okay and I'll return the challenges so we need to modify the return type here so I'll say I'll change the return type here okay so return type is changed and I'll copy this part as well or let me copy this method itself okay that will be better and I can add that method over here so I can say add chall instead of request body I can just have the parameter here and this will return a Boolean okay so I'll return true so I can say if challenge is not equal to null so we'll add a small validation here okay you add the challenge and return true else you return false like so okay now the problem is this returns a string this method so I need to overun this and change this to Boolean so we are all set okay we have the service class which has all the logic to add and retrieve the list of challenges but we have all errors in controller now so let's fix this so here in the controller for get all challenges method instead of returning the list the object of challenge what we'll say is we'll say from the service class so we'll say challenge service dot get all challenges okay so this is the object of the service class okay now we'll create a local variable okay so this is of challenge service type but we won't create it over here okay we will create it over here okay okay and I'll keep this as private okay so this is the object of challenge service and then I'm going to go over here and I'm going to say challenge service do add Challenge and I'll pass the challenge object here okay and since this is returning a Boolean I'll accept a Boolean value here okay so I'll say is challenge added like so okay so if the challenge is added so if challenge added then I'll return this okay else I'll return challenge not added successfully like so so I'll say challenge not added successfully something like this okay so this is a small validation that we are doing at our end okay now the question is we have not any initialized the challenge service object how do we initialize this so one way is you can like you can say challenge service is equal to new challenge service something like this okay but we don't need to do this way so spring manages the dependency for us okay so we need to just specify the parameter here so we can specify the object of challenge service and I need to say this do challenge service is equal to challenge service now who provides this dependency to the challenge controller class so this is provided by Spring Boot and spring boot with the inversion of control mechanism makes sure that if this class requires this dependency which we are specifying in the Constructor during runtime what it will do is it will it will make the object available of this type and it will pass this to this particular Constructor so that this is initialized okay so this will be taken care by springbot but for this to happen we need to tell spring boot that hey you need to manage this particular class how do we tell that so this is just a normal class how do we tell spring boot that you need to manage this particular class by telling spring boot that this is a service and how do we tell spring board that this is a service we can do that with the help of a single simple annotation which is service annotation so this annotation tells springbot that hey this is a service class and you need to manage this class so during runtime it will make the object available for this class and it will serve it to challenge controller so this is handled and our code is also error free okay so I'll just optimize imputs here we don't need this import and I'll redeploy our application so our application is is running now if I switch over to postman okay I can get the list of all the challenges you'll see we have one challenge right now okay which is what we initialized in the service Constructor okay now what I can do is I can pass one more challenge here so let me head over to post request over here okay and here in the body if I Collapse this I have a way to create one more challenge so I'll say send and you will see challenge added successfully okay now if I go to post and if I say sorry not post if I go to get and if I get the challenges you will see the challenge is being successfully added okay now one problem here is we need to pass during the post request we need to pass the ID also so if I try to add a challenge without ID what happens challenge added successfully but now if I get all the challenges you can see here this challenge has ID as that of null now ID is nothing but a unique identifier which typically users should not be allowed to set okay so the application itself should generate the unique identifier and set it during the saving the object when it's saving the object so now so what I need to do is I need to manage this ID variable by ourself so we'll switch over to intellig and here in the service class what I'm going to do is I am going to I'm going to create a field private long ID and I'll initialize this ID to that of one L okay and instead of ID I'll call this as next ID so this is the next ID that we should assign to the object okay now what we will do is before adding the challenge okay I'll say challenges dot set ID okay so I can set ID not over here not to the list so I'll have to add it to challenge. set ID like so and I need to say next ID Plus+ so what we are doing is we are initializing it to one and we'll set it to one and then we'll also increment after the setting is done so the the next object will get the ID as that of two okay that is it so let us run this so if you run this and if you don't provide the ID or even if you provide the ID that ID would be overridden by the autogenerated ID and if you don't provide the ID it won't matter so here in Postman now okay I'm going to get the challenges so you have only one challenge right now so let us trigger a post request okay so I'm going to to send the post request without an ID I'll send and I'll try getting the challenges and you'll see okay so you have the ID starting as one because so these two have same ID because we are already initializing the object with id1 so what I will do is I will remove that initialization like either I can start the ID with two or I can just get rid of this initialization so I'll get rid of this initialization like so okay and let us rerun so this should be good now okay so now our application is running now if I send the get request you don't have any challenges okay so I'll close all the tabs and I'll try to do a post request post request does not have any ID let me send this so challenge added successfully now let let me do a get request so you can see we have an autogenerated ID of one now if I add one more Challenge and if I try to get it you will see the IDS are now being autogenerated okay and if I try to add a challenge with any random ID like I say ID coolon 5,000 let's say okay okay and if I send the request you'll see it got added but let us check the ID so the ID is three and it's it's not 5,000 okay so the ID is completely now in our control and we are not allowing users to define the ID right now all right so ID is now being handled by our application and typically this is the best way to go about like ID should be under your control as a developer and the reason is like it's a unique identifier you cannot allow your users to Define IDs in your system or unique identifiers in your system so I'll tell you an example if you go to open a bank account you get a customer ID okay that customer ID is generated by Bank you cannot set your preference like I want this kind of customer ID or that kind of whatever is generated by bank that is what is given to you and you have to use that so that is what the identifier for you if someone from your family will open the bank account he will get another unique ID which will be his custom ID okay so this is one example of how IDs are managed in real world with the help of banks now we are done managing IDs and we have a get request and a post request now what we need to Define is we need to define a get request to get a single challenge okay for a particular month we we need to define a put request to update a challenge and we need to define a delete request to delete a challenge okay so let us start with the get request for getting a particular challenge so I'm here in intellig and I'm going to go to the controller okay and within the controller I'm going to create one more mapping okay so I'll just copy this code here I'll create one more mapping and I'll call this method as get a Challenge and this particular method will need an input as to which challenge do you want so I'll say long ID okay and instead of get all challenge I'll say get challenge okay so I can just remove get a challenge and I can say get Challenge and here also get challenge so this method is something that we need to Define in our service and I'll pass in the ID here okay now this is what we have defined okay now I need to hover on this and I need to resolve the error by creating a method in the challenge service okay so here I'll say okay so here this method is returning a list of challenge which is not right so I'll return a challenge object since we are just returning a single Challenge and I'll say return challenges dot get so this get won't work because for getting a challenge okay using this get method you have to pass in the index and index is not what we really have we have a property of challenge which is nothing but an ID okay so what I need to do is I need to say over here for okay I need to define a for each Loop and I need to say challenge and I need to go through challenges okay and and I need to compare so I need to say if challenge. get ID okay we need to define the object here as well so I'll say challenge now challenge. get ID do equals okay ID so if the ID matches then we are returning the challenge okay otherwise we return null okay so this this is a method that we have written okay let me format this a bit okay here right so so you have this method get challenge okay which accepts the parameter as ID we have a for Loop that it reads through the challenge list okay and you get a particular challenge object and for every challenge object you are getting the ID and comparing it with the ID that you have received if there's a match you return that particular Challenge and if this for Loop is exhausted and you don't find any match you return a null okay which means you did not find the challenge and the challenge does not exist so now here in controller okay we are not going to return the list of Challenge and I'm going to modify the return type here okay so I'm going to go to more more actions and I'm going to change the return type here like so okay so from all the suggestions I choose changing the return type because that is what actually we are doing okay but the thing is I don't actually directly want to return the response of this particular method here okay so I need to accept the object here and then I can say if challenge is not equal to null okay then I need to return challenge okay else I need to return so so here I need to return something if I don't find the challenge and let us hold a bit on this one okay so I'll just comment this part of code we'll come back to this okay as to how we will handle the situation of challenge not found okay but typically what you can do is you can simply return null for now okay so I'll say null okay and the error will go away okay no issue as such you can also specify an else over here so I can say else so yeah this mapping is done now the question is how do we get this ID okay so we have to get this ID right so we can get this ID right from the URL with the help of parameter within the URL okay so when making the get request to this URL you can say slash one and this one is nothing but the ID of which you which you want the challenge for so you can say one or you can say two or you can say three and so on okay so actually what we want is the month over here okay not the ID okay so this will be the month and not the ID so I'll just refactor the small mistake over here okay so I'll say month over here and I'll say month over here okay and if I go inside the method this this has to be month and instead of get ID this will be get month and month over here okay so small refactoring over here also month is a string over here okay what we can do is we can have string over here like so okay and in the controller also we'll have string so this sorts it out okay now if you go over here instead of ID you will pass in February like so so challenges SL February okay or now the question is this is going as the parameter within the URL okay or a dynamic variable within URL so for getting the challenge within the month of February you will pass in Feb for getting the challenge for January you will pass in Jan and so on okay so how do you get this parameter or variable from within the URL and the answer is you can make use of path variables so you can say path variable and you will get the path variable that is being passed now how do we tell spring boot okay where this path variable will be entered so for that we need to add in the URL like this we need to say month so this tells spring boot that hey this particular part of the URL will be dynamic and it will be entered by the user on the Fly and whatever is entered is should be mapped to this particular parameter or this particular variable and it's mapped and you have the path variable annotation as well to mention that okay and whatever is mapped is passed into to the service class okay so I'll rerun this let us see the output okay so let us try getting all the challenges first so you don't have any challenges okay okay so now let me create a challenge so I'll create a challenge for the month of February so now we have added the challenge into our application and what you will observe is if I try to get the challenge with the capital F okay I get a response you can see over here but if I try to get a challenge with small F I do not get a response okay and this is bad because you cannot expect the URL to be in the correct case so your application has to perform a match for the correct case okay so here what we can do is what we will do so here we'll go to service and I'll compare By ignoring the case okay and I'll rerun the application so we'll wait till the application builds so the application is up now I'll create a The Challenge and now I'll try to get the challenge by capital F so it works and small f it works okay so this is perfectly fine all right now what happens if if I say March over here okay so if if you say March you don't get any response but you are not even getting an error because March challenge does not exist or there is nothing in our application for March yet but ideally you should not get 200 okay over here you should get the response as 44 not found or something like that so how do we handle this now so if the object does not exist in our system we need to return the appropriate status code and we can do this with the help of a mechanism so let us head over to our ID and let us switch to controller so here now in the controller we need to customize the response and we need to have better control on the status codes so for this we need to make use of response entity class now what is response entity class response entity class in Spring is a wrapper using which you can represent the entire HTTP response including the status code and body now it provides us the developers a way to customize is the HTTP response that is returned from the controller method okay so let us see how you can make use of it so here since you are returning the challenge object you can say response entity like so and you can specify the return type as response entity okay so I'll just move the parameter part to the next line over here okay now here when we are returning this we need to say new response entity and you will have the challenge object and you will say HTTP HTTP status. okay okay now what this will do is it will send challenge object as a part of the response with the help of response entity and also it will mention the status code now instead of returning null we need to say new response entity and here we need to say not found okay so HTTP status dot not found like so okay so this way you can handle the response codes now the benefit of using response entity is you get to do c customization of HTTP response and also you need to do you get a chance to do flexible response handling okay and also response entity class helps with consistent API design so here this particular method is returning the response wrapped in response entity here also you can follow the similar philosophy and you can have all methods that return the response entity object so with this you can have consistent response and consistent AP API design for your API okay now if you take a look at the HTTP status okay if you hover on this okay so if you are on Windows you can press control and hover and if you're on Mac you can press command and hover so this will get converted into a link click on this and you'll see all the status codes inside this class so this is 200 okay this is created 2 not2 accepted and so on so you can scroll through okay and you can see bad request unauthorized if you scroll down you will have 500 internal server error bad gateway and so on so you have all the status codes that are defined in HTTP status class now after you have made use of this let us run the application and let us see the output okay so after running the application if you head over to postman and if you try sending something that does not exist you get a custom Response Code which is 44 and if I create a challenge okay you'll see challenge added successfully and now if I say February you get 200 okay so you can see depending on the output of the request you are able to get the appropriate status codes okay so you can implement this for all your apis okay in fact you can go over here and you can say response entity like so it can be string and here new response entity all right and you can copy this and you can add it over here also and here you can say challenge not added successfully and not only the message you can also change the status code over here okay so you can say not found okay so this is managed now and similar way you can do it for the list here like so and here you can say new response entity comma HTTP status. okay okay so this is enabling us to provide a consistent API design for our abis and we are also having a better control now on status code otherwise we were just passing the message here like challenge not added successfully but the status code would have been 200 okay okay because like we have not customized the status code yet all right so this is managed now okay hey there so we have come really far with our challenge app application we have built out quite a few endpoints and we have few endpoints still remaining so in this video we are going to cover the remaining end points and we are going to see them execute in Postman so are you ready for this let's get started also I would like to mention that if you have not subscribed to this channel I would request you to do so so that you can stay updated with the next videos in this particular Series this Series has quite a few video that will be coming up so I would also request you to press the Bell icon and to put on the notifications so that you can be notified whenever I launch a new video and if you are not aware of the previous videos that we have uploaded so I would request you to check the video description or to check out my channel for the remaining videos that I have published around this particular project so this particular series involves building the ENT entire challenge application using Java spring boot framework from scratch so without further Ado let's begin the action hey there welcome back so far what we have done is we have worked on the two get request and we have also worked on the post request so post is used to create the challenge and get is used to get the challenge so we can get all the challenges or get a challenge by a specific month now let's work upon the put and the delete request so put will be responsible for updating the challenge and delete will be responsible for deleting a particular challenge so let us head over to our ID now here I'm going to switch over to my controller and we are going to have the controller definition so here I'll just press enter and I'll start defining a new method so I'll say public and we'll pass in the response entity here and I'll say string and I'll say update challenge here okay now here we need an ID so this ID will Define which challenge we are updating and we will also need the challenge object okay so I'm going to say challenge and I'll say updated challenge like so now what we need to do is we need to call the challenge service class class and we need to say update challenge so I'll say update challenge so we have not created this method or defined it yet we will do shortly okay but for now I'm just using this method and based on how we using we'll be creating the method inside the service class so what I'm going to say is I'm going to say update challenge we'll pass in the ID as well as the updated challenge object now from this particular method I need Boolean so Boolean response which tells me whether this challenge is successfully updated or not so I'll say is challenge updated like so and now based on this particular response that we are getting I'm going to return the response to the API okay so for now I can just say return new I'll say response entity or I can just copy this from here okay so or not this one so we can copy from this one like so because it's a string response over here and that is what we need so I'll just paste it over here I'll say is challenge updated and if it's updated it will say challenge updated successfully and if it's not challenge is not updated successfully okay so we are done writing the response over here okay now what we need to do is we need to create this method so I'll hover on this and I'll say create method update challenge now this has created the method over here okay now here in this particular method we are going to use all these parameters to update the challenge in the list okay so I'm going to update the challenge now but to update the challenge I need to get the challenge first with this particular ID okay and what I'm going to do is I'm going to write a for Loop okay so I can just take this for loop from here like so so from challenge challenges okay I'll get ID over here and I'll compare this with so I'll say equals and I'll compare this with this particular ID over here okay and here I'm going to say challenge dot I'll say set set month and here I'll say updated challenge. get math okay then I'll say challenge dot so we need to do this for all the parameters so I can say challenge. description and I need to get the description so we need to update the month and the description both for the challenge object okay okay so since we are iterating using the for Loop we have the current challenge object in this particular object over here and I'm replacing the values here okay and this values are being replaced only if the ID matches okay and we getting the ID from the controller here now once this is done I'll return true over here and if the loop exits I say return false like so all right so this is the update challenge method all right now what we can do is we can simply run this particular app and let us test the output in the postman so the application is running now in the postman what I'm going to do is I'm going to head over to the post request and here I'm simply going to copy this or we can simply modify this request as well so I'll say put I'll keep the endpoint same and here I'll remove the ID okay but one thing that we have missed over here so here if you come I have not mapped this particular thing to a URL so I I missed this okay so I need to say put mapping over here okay so since we have get mapping defined here we have post mapping also we have something called as put mapping and you can see over here so you can keep the URL same so so I'll say slash challenges okay and here we need to tell the controller from where we are getting these two parameters okay so long we are getting from path variable and this particular thing we are getting from request body okay now path variable over here is this particular path variable so ID comes as a part of the URL okay now if you rerun this so let us rerun and let us switch over to our Postman so our app is running now now here in Postman I have the request ready okay so I have slash challenges slash I'll say one okay and I'll try and update this but if let me check whether we have any challenges okay so I'll try getting all the challenges okay we don't have challenges so we need to create a challenge first so I'll create a challenge first for the month of February and I'll say save now let us get the challenges so we have the challenge now created which is of ID one now what we can do is we can update the challenge okay so I can say put challenge one here and I'm going to like send this update so I'll say February here and I can say updated in the end like so so create a new app updated like so and I'll hit the send request the challenge is updated now if you try and get the response you will see that the data is updated okay now if I try an update against an ID which does not exist you'll get 4 not4 not found and the message is challenge not updated successfully okay so you can ify the message if you want but this is how the update query works okay so this is about update now so we are done with the put request now let us start talking about the delete request that we wish to do now with the delete request you will be accepting the parameter or the ID as a part of the URL and we'll be deleting that particular Challenge from our application so in order to do that we will head over to the controller and here I'll start defining the delete method so I'm going to say public response entity and I'll have the string as a response type and I'll say delete challenge like so and here I'll say long ID now I'm going to have a mapping created for this and I'll say delete mapping over here this is The annotation and and here I'm going to just mention the same parameter or the same URL so we have one URL like the same URL being mapped to different functions which is like put delete post sorry not post post and get have same URL but put and delete have similar URLs and here I'm going to say call this as path variable so this method is getting this from the path variable we need to specify that and now I'm going to start writing the code so I'm going to say challenge service. delete Challenge and I'm going to pass in the ID and I'm going to accept a Boolean return from here so I'll say is challenge deleted like so and I'm going to say I'm going to have a similar if Els condition over here so I'm going to say is challenge deleted challenge deleted successfully or challenge not deleted like so okay so this is our delete function and now what I'm going to do is I'm going to create a method in the service now here what we can do is we can say challenges dot remove if okay and I'm going to say challenge like so and challenge. get ID do equals and I'm going to pass in the ID over here now this particular piece of code is a Lambda expression that we are using over here so we are saying from the list challenges remove if now this is a method that is available in the list interface so since this is a list over here we are making use of this method remove if okay now within this method we are passing in this expression where challenge represents an individual element of challenges list okay and what we are doing is we are comparing this okay so this is a condition to evaluate each element in the list okay and we are checking if this particular object's ID is equal to the ID which we have received over here okay and if there is a match it's being removed because the method says remove if so if this is true we remove that element and here we need to return the response of this particular method over here okay so so overall the meaning of this code is to remove the elements from The Challenge list that have an ID matching the given ID and if the element is found with the matching ID the remove if method will remove it from the list and it also returns true if if there is no element with the matching ID this entire expression or this entire method call returns false okay so this does the job that we needed to do and I'm going to rerun our application so let us rerun and let us see what the output looks like so the application is running now here let us create a challenge first so I'll get the challenge created and let us check what challenge is created so it's a February challenge now we can have a delete request okay so here instead of put I'll change this to delete I don't need body here okay and I'll say delete Challenge number two so two challenge we don't have if I file this request you'll get challenge not deleted 4 not4 not found which is of course a challenge which this ID does not exist so I'm going to say challenge is one and if I trigger this you see that the challenge is now deleted and now if you try to get all the challenges you are not going to get anything so this is how you can work with the delete request now here in the controller if you come over so this is our controller we have different mappings defined like we have delete mapping put mapping get mapping and post mapping okay now we can even make use of the request mapping annotations so here at the top I can say request mapping like so so this is The annotation that is used in Spring to map a web request to a specific controller okay now what we can do is we have repeated patterns in all our URLs so we have slash challenges that is repeating across the entire design okay over here so what I can do is I can take this part and I can add it over here okay so now what we can do is we can just do away with this so we don't need to specify challenges in our URL okay because we are not specifying it at the class level okay so we can get this removed like so so I'm removing it from all the URLs and now our URLs look much more cleaner okay so here what we are saying is we are saying at the class level if there is any request that is coming to this particular endpoint so our domain name/ challenges it should be routed to this particular controller here okay and this is the root URL of this particular controller so you have all the URLs defined within so you have like SL Monon okay which will be slash challenges SL Monon so that is taken care of by Spring MVC framework okay so if you rerun the application so let me rerun this so we'll rerun and we'll wait for its deployment and now here if you come to the postman and now if I try to trigger this URL this URL will still work as it is okay so you can post a new challenge it will get added you can get the challenge now it'll work fine so with the help of request mapping what you can can do is you can make your like methods a bit clean okay so instead of specifying all the repeated patterns in the URL you can just specify them at the class level okay so whenever you specify this at the class level it just sets the base URL for all the Handler methods within that particular class so it's it's really really helpful out there and so yeah this is about request mapping is what I wanted to tell you so we have completed all the functionalities that we discussed okay so everything that we needed to store and work with challenges is now done so what you can do now is you can feel free to update and add more endpoints or functionalities to practice and learn more about spring boot Hello friends so I'm back with this video and in this particular video we are going to talk about jpa and we are going to understand behind the scenes of jpa and how can you get it configured for your spring boot project so some time back I started building an application I started a playlist where we started building monthly challenge application and uh what happened is I got some good feedback on this particular playlist and I have decided that I would be teaching GPA using this particular application so this video is the continuation for that particular playlist so you can check out that playlist list and the earlier videos If you want to get up to speed with the source code all right but what we are going to do in today's video we are going to configure and get started with jpa we are going to understand how GPA adds value to our spring board application and we are going to work with an in-memory database called H2 so I'm going to handhold you to understand these Concepts and help you configure these in your own projects so if you have not subscribed to my channel yet and if you're finding my content useful I would highly encourage you all to hit that subscribe button and also turn on the Bell notification icon so without a further Ado let's get started Hello everybody welcome and now it's time that we do a lot more development with the challenge app and we take this development a bit further so we have the API work working okay so if you take a look at the controller over here you have like a few apis that we have created so we have one API wherein we are getting all the challenges we have one end point where we are adding the challenge then we have one end point where we are getting a specific Challenge and then we have one endp point where we are performing update and one for delete so we are performing the crud operations wherein we are creating updating deleting and even reading the data so we are doing cred operations over here now before moving ahead with the development okay I would tell you that we are making use of list to manage all of this so here we have a list if you see the service we have created a list and with the help of list we are storing all the data in the list right so so we are going to enhance this improve this and we are going to make use of databases all right and I'm going to show you all the magic and how it works with spring boot but before that I'll show you one more enhancement that I have done so what I've done is I have like created an account for Postman so in one of the last videos when I made use of Postman I did not make use of the account so I'll tell you like having an account has its own benefits okay so like you can even use Postman without an account there are no issues as such but I would highly encourage you all to make use of this free account feature over here okay so once you create an account you'll see so if you have not created the account you'll see the login and sign up options here at the top right okay if you click on login or sign up if you have a account you can like login if you don't have an account you can sign up it will take you to browser it will do the authentication and it will get the account created now the benefit of creating the account is whatever apis you're creating or whatever endpoints you're creating and the request that you're creating it gets saved in the account if you don't create an account what happens is the end points get deleted after a while because you have not signed up and it will store it for a while and then it will erase it so if you're touching this project after a while you won't see those end points over there so I would encourage you all to create the account now creating account gives you access to workspaces and collections so you can see over here I have the workspace tab at the top okay you can create a workspace you can like what is workspace so if I have to give you a simple definition workspace is a place for you to work so if you're working on the challenge application or if you're developing a certain kinds of apis you can create a workspace and within workspace you have something called as collections collection is nothing but a group of API okay so you can see this is one collection I can create more collection over here so I would encourage you all to create a workspace over here switch over to that workspace and then create a collection okay so I'll show you like I can create a blank collection you can see there are templates as well to create a collection so if I create a blank collection okay I can call this as you can say okay one second so here you can rename it so I can say test collection okay so you can make use of this feature and leverage the benefits okay so you can see the collection is created and you can add a request under it you can see the request gets added okay so this is a separate collection now and this is separate okay so this is what I want to tell you about Postman so you will see this change over here wherein you'll see that hey I have this kind of a layout what is it so people who are not aware of Postman I wanted to give them a update on this as to what I'm up to okay so I would encourage you all to do this all your requests are being saved over here so we have get request post put and delete okay now let me run the application so I'll start the application and I'll show you a problem that we have in our application so the is up and running coming over here you'll see I don't have any challenges right now it's an Mt Json response so I'll create one challenge okay I'll create another challenge for March let's say okay now if I get the data you have two challenges right there are two challenges here you can see okay now let us say I restart the application what I'll do is I'll shut the application let me restart application is up again I'll come over here I'll try to get the data now you can see there is no data but we just added a couple of challenge so what happened here so what is happening in the back end we are making use of a list to manage all the data and all the challenges that we are creating the single array list is managing all the challenges that are being deleted added everything so this particular thing is being created right now in the memory and memory exists only till the application is running so if you restart or stop the application this data is lost which means the array list is destroyed and it no longer exists and this also means that all your data that you had saved in the array list is destroyed and this is not how real world applications work right so if you create a Facebook account if you change your profile picture if you come after after 10 days you're going to see your profile picture there right so if you change your name or anything any sorts of posts or changes you make anywhere on any of the applications like Facebook Instagram that you use daily you're going to see the changes persist over there why do they persist because they're making use of persistent storage which is database okay so let us add database to this and we're going to enhance our application to move from a list to database now the question is oh adding database is a lot of work it might seem like that but actually with spring boot it's not like that okay so spring boot has this amazing thing of GPA now what is GPA so jpa what I mean is it stands for Java persistent API so that is what it's called so it's jpa which is like Java persistent API now this particular thing allows you to convert your objects into tables okay so I'll go over here we have a challenge class right now this is a class where we are going to or where we are actually storing the challenge in this format right so we are storing ID month and description so in future if you're adding a database you would have a challenge table which is going to store the challenge information like ID month and description right so these same Fields will also exist in the challenge table the table name would be Challenge and it would have ID month and description all right now the thing is what spring boot says or what this concept of GPA says is if you already have an app and if you have already created classes you're going to work with objects then with the help of jpa you can get this class converted into a database table sounds awesome right you don't have to write separate queries to get your tables created and that is what gives you a lot of upper hand all right and I'm going just going to show this to you in some time but talking about jpa jpa is easier and simpler to follow it makes creation of the tables or cre creation of the schema or the database easy it allows you to convert your objects into tables you can even query your data so querying is also simple there are some simple sets of methods that are made available to you with the help of jpa okay so it's called jpa right Java persistent API so it's a API and it has a predefined set of things like methods and all and you can make use of those methods to query the data that is also something that we are going to see okay so so what we are going to do is we have these fields right ID month description we are going to get these fields converted into columns and this particular class converted into a table within the database and we are going to do this without writing a single line of query and that is something that I'm going to show you okay so talking about jpa we are going to head over to our browser and uh now to add jpa how do we add jpa right it's a dependency essentially so I'm going to head over to our favorite website start do spring. .io which is spring initializer all right I'm going to choose Maven over here just make sure you have selected the right option over here I'm going to click on ADD dependencies and I'm going to say you can already see in the suggestion it says GPA over here in the hint you can say jpa and you'll see this over here spring data jpa it allows you to purs data in SQL stores with Java persistent API using spring data and hibernate okay so I'll just select this I'll head over to explore and here in explore you can see all the code that it's generating and you can see over here it has this dependency which you can like copy so I'll just copy this dependency and you can come back to your project so here is my project you can switch over to pom.xml and I'll collapse this and here what you can do is you can add that particular dependency and you can see this dependency exists and once you make any changes to pom.xml like you add any dependency or make any changes in the configuration what is going to happen you need to reload or refresh Maven over here so you can see over here this particular icon appear so the moment I made the change this icon appeared and it says load Maven changes Maven project structure has been changed and you need to load the changes into intelligy to make it work work correctly so I'll just click on this icon and it's going to do some processing over here as you can see at the bottom and what it did is since we added a dependency and since it detected a change in the palm. XML it asked us to reload all the changes and once we did a Reload It fetched all the updated libraries and everything so if you head over to project okay and if you scroll down to external libraries here you will see an update where all the like see Java persistent API everything like you will find some external libraries that have changed over here okay so we won't uh scroll through the libraries I'll just collapse this okay but you should see all the changes appear with there okay so so this is about adding GPA into your project so jpa is done we have the apis that we need to work with the database now the question is we need a database and how do we add a dat database with our project so that is also really simple with spring boot so I'll switch over to browser and we are going to make use of a database called H2 database so if you Google for H2 you are going to see this first link H2 database engine and if you open this link I have it open you can see this web page so this is the site of H2 database and it says what H2 database is right so H2 database is a very fast open source database it is embedded which is like it it is a inmemory database okay so you can make use of any database with spring boot okay there's no need to make use of inmemory but I'm just showing you this particular option because uh it's embedded it's fast to get started okay but if you have some other database Choice like MySQL po SQL or any other popular database you wish to use you can make use of that but you'll have to add the corresponding dependency so I'll close this and if you're making use of MySQL so you can say MySQL over here and you need to add MySQL jdbc driver if you're making use of PA SQL you need to add the corresponding driver okay now adding the driver means it's a dependency you have to add you have to do a little bit of configuration and it's done right and you should have the database configured wherever you are making use of it right but since we are talking about H2 we'll make use of this H2 database okay you can see so it's it's a 2mb footprint and it supports embeded and server modes as well and it also gives you a browser based console application from where you can see your data so I'll click on explore now the moment I click on explore I should be able to see the dependency and what I'm going to do is I'm just going to copy the dependency like so and I'll switch over here and I'll add the dependency here and I'll reload the M changes okay now if you go to external libraries you should see the the dependencies for each two database okay so if I scroll down scroll up you can see this H2 database has been added now earlier it was not there okay so so you will see this external librar part being changed as in when you add dependencies into your project so what is happening is Maven is taking a look at the project structure and the pom.xml file and it sees okay this project needs H2 database this project needs spring data GPA so it fetches everything okay from the server and it adds to your project so you don't need to add things manually so earlier if you have done Java development in early days like uh when spring boot was not there you had to add jar files manually to your Java project so it used to be really cumbersome but this has made things a lot easier okay so we have the database added now now what do we need to do next so next is we need to explore the web application which is the H2 console that is given to us by the H2 database so for that we need to enable the console so what I will do is I'll head over to application. properties within resources folder okay so it's giving me this message over here spring boot configuration files are supported by intellig idea ultimate so it's asking me to do an upgrade to intellig idea ultimate I'm just going to ignore it okay and here we are going to add some configuration so if you want to do any sort of custom configuration you can add it in this particular file within spring boot okay so like we know spring boot autoc configures staff okay so if you take a look at the pom.xml we have just added the dependency okay so take a look over here so for.xml we have added a dependency H2 database now what springboard is going to do is it is going to give us access to everything around this database okay we don't need to do any sort of configuration and that is what the spring boot Auto configuration feature is so let me give you an example so I have not changed anything in application properties I'll just restart the application because I've changed a lot of stuff okay a lot of stuff has in I've added GPA and I've added H2 database now if you see over here let me do contrl F okay the application is started I'll just search for a H2 okay so you can see H2 database this jar file was loaded okay I'll just go to next next and I'll just press enter again so you can see over here on the console you are seeing this thing being printed okay you're seeing that there is a connection that is being added to the database so it says added connection this is the URL of the connection so it is giving you a long URL over here URL is equal to jdbc coin H2 Co M colon in this value and then it is also giving us a user so this is already done so a URL is being configured for H2 database our database is available at this URL and a user is being created which is essay so I guess s stands for system admin okay so that's the user that is being created by default there's no password you are not seeing any password being printed okay so that's the thing and the application starts automatically okay you can see there are GPA related logs as well so initialize GPA entity manager Factory and so on okay for the persistent unit so that there is a entity manager Factory which manages the entity okay you can see GP related logs okay but one concerning thing like the things for our concern is this one so you can see database is automatically configured we did not configure this URL and this is a default URL that we have access to and the def default user that is what Auto configuration is if I want to make any changes in this default configuration I can do that with the help of this file application. properties that is what I intended to explain okay now how do we access this database so if you install like my SQL or post SQL you will have access to the local application right but you can access the database with the help of this database URL and you you have to enter this database URL in the the H2 console what is H2 console H2 console is a web application provided to us by H2 database so I'll switch over to the browser and here I'm just going to type in Local Host colon 8080 okay so I'll just go to 8080 our application is running there and I'll say/ H2 hyen console okay you'll get an error you can see this error here okay so this is a URL H2 hyphen console and this is where we should have been able to access the console now to access the console we need to enable the console the console is not enabled by default so what I'm going to do is here in the application. properties I'm going to say spring. H2 do console do anyil is equal to True something like this and I'll stop and rerun okay so this will tell spring boot that hey I need H2 console to be enabled and here if you search now in the logs so let me search H2 H2 okay you can see there is this URL being printed which is the database URL this is where our database is being made available along with the user and if you scroll down there is one more log now this was not there earlier okay so you can see H2 or H2 console Auto configuration so Auto configuration is in picture and since we have entered this property here it has made H2 console available at/ H2 console okay and database is available over here you can see the magic over here right we did not do a lot we just added one property and automatically we have access to H2 so earlier we were getting error when we accessed this page now if you refresh you should see this nice page appear okay and here you have different fields like save settings setting name driver class G BC URL username and password okay we need to enter the jdbc URL like you must have guessed so the URL that we saw over here so we need to copy this URL I'll copy come over here you have to paste it over here okay it's a longl looking URL we can configure it to get something shorter but right now let's work with default things and here you should see the user where was the user here essay so if you come over here it's already populated essay and you can say test connection and the moment you say test connection you will see test successful and what you can do is you can connect the moment you connect you have this beautiful looking UI which allows you to see all the tables here on the left hand side so this the tables under this connection and you have access to this query window all right this is H2 database enabled sorry H2 console enable for your action now the thing is we are not seeing any table over here we have this default user table which has this user essay being created information schema but no tables right and like we said we going to make use of GPA to get our challenge class being converted into a database table and how are we going to do this with the help of jpa so jpa is going to give us that power that ability into our application which will allow us to convert this class into a database table and we don't need to write any sort of query that's the good news right now how do we do that okay so we added two dependencies right so I just wanted to explain the difference between these two dependency jpa is not a database so many students feel that hey jpa is a database jpa is not a database jpa is a Java persistent API which allows you to work with the database right so it allows you to convert your entities into database tables it allows you to query your tables it allows you to enter data into the table and do a lot of other stuff right so basically everything that involves working with the database is allowed by this particular thing jpa and H2 H2 is the database okay so these were the two dependencies and this was a difference this is a database and this is a thing called called GPA which allows us to work with database now how do we get this class into our database so in order to do this we'll make use of something called as annotations now what are annotations so annotations are a thing in Java which operate or which start with ad theate symbol now if you write ad theate over here you're going to see a lot of suggestions here okay lot of suggestions and annotations are a way to give Java extra information about your classes the fields or anything like that so you it they are like a label that you add in your code that gives Java some extra context about whatever you are creating okay let me give you an example so we need to tell Java first of all that hey I need this particular class to be converted into a table within the TP and how are we going to tell this with the help of annotation so we are going to do at theate and there is an annotation called entities you can see entity and it is coming in from Jakarta dop persistent package so I'll just select this entity now this entity annotation is coming in from this package and this is the part of jpa so if you have configured jpa so this entity is being made to available because of that particular dependency that you have added okay if you remove that dependency you'll get an error that hey this particular package is not being found okay so with the help of entity you are essentially telling Java that instances of this class should be macked to the corresponding rules in the database table and this particular class is a database table so we have made use of this entity now and now let us restart and let us see what errors we get so of course we are going to get error I'm telling you up front but let us see what happens okay we got an error let us scroll down and let us start learning from these errors okay and these errors I'm purposely generating so I'm generating because I'm not directly adding whatever is required over here so we'll see the error and we'll understand why this particular thing is needed right so you can see over here it says this particular entity so now we are telling Java that hey this is an entity okay consider this as an entity so entity is being mapped to the database right entity is a thing or a class that is being map to the database right so here the error ISS entity this particular entity has no identifier and every adorate entity class must declare or inherit at least one identifier with the help of this particular annotation right now what does an identifier mean identifier means like a primary key in the database which is nothing but the ID and how can you define that you can Define that with the help of this not annotation so I'll just copy this which is our ID this one is our ID right and we need to make an import over here it's coming in from the same package Jakarta persistent sorry persistence and I've done this now let us run this we should IDE get one more error let us see okay we did not get error so hopefully we might get an error in the latest stage because we have not added a empty Constructor over here which will be needing okay but for now I'll just leave this so we have atate entity at theate ID okay and I have run the application okay if you take a look at the console okay you have normal logs okay we got an error in fact so if you scroll up here now this error that we have CAU is because the query that is being generated so you know when we said this is an entity what Java is going to do is the create table statement is being created over here you can see this query we have not written this is being generated because we have just added GPA and we have just marked this class as entity okay but what is happening is there is an execution error for this particular query it says like this particular query is not being executed there's an error and the error it seems to be with the month column so month is a reserved word in database world right so what I will do is I'll tell over here like I'll mention that hey so you can make use of this column annotation and column annotation you can add name over here and here you can say challenge month so what I'm doing is I am specifying the column name for this particular field in the database so I'm just telling so I'm telling over here that for this particular column just make use of this name within the database and if you read start this let me restart let us see what happens if you restart there is no error you can see so so that was indeed an issue okay you need to be careful so this particular field name is working in Java but in database World it might throw an error right so you need to be careful of the fields that you're having and uh Java persistence API has uh this amazing uh thing where you can make use of this annotation and you can tell explicitly that hey use this name for the database also I would mention one important thing slightly important thing in the usage of terminologies over here I'm constantly referring jpa to Java persistent API okay but actually in the recent version it is also being called as Jakarta persistent API okay so and that is why you seeing all the packages over here as Jakarta dop persistence Jakarta dop persistence you you can see over here so this is a name change that has happened recently it does not matter like the functionality has not changed but the package names and everything have changed so online if you read up about this there is a possibility at some places you might see Java persistent API at some place you might see Jakarta persistence API okay so just remember this okay after watching this if you go somewhere and you might see something else don't worry okay so if you scroll up over here on the console okay you are seeing this database available at over here okay I'll copy this and you'll notice that the database URL has changed so with every restart the database URL is being changed and uh we are getting a new database URL so this was our database URL earlier and if you try to connect it right now you'll see that this is not found and if you paste the newly generated one and if you test you'll see that it's successful now you can connect and you can see this table exists over here this is automatically being created right we have not created this right so we have just added a couple of annotations I should say like not even a couple we just added one annotation okay so this annotation we added because of a name conflict okay so in fact couple we need to add ID as well so these two annotations we added right this third one was to get rid of the month keyword within the database but with these two two annotations literally you have a table into a datab base you did not specify the structure also keep in mind like if you change anything over here like any like if you rename this particular column or if you rename this or if you changed anything you will see that change being reflected over here okay so in order to get the data type of this particular table what you can do is you need to run this query okay so there is this information schema that you can see over here within that you need to refer to columns and you can say where table name is equal to challenge okay so that's our table name and if I run this you'll see that it has three columns ID challenge month and description and if you scroll to the right you can see you can see over here that this is not nullable this is nullable and here is a data type you can see big in character character now why big because this is an ID and why character because that is what you have defined over here so you have defined string which is a Java equivalent of character right the the uh string of character like the list of characters is what is a string in Java but in the world of database or with H2 you have character over here and this is what the limit 255 right the maximum length you can customize this all of this over here so you can see how whatever we defined in the class got translated into the H2 database right now another thing is for every restart what is happening is we are getting a new database URL this one we can keep this as constant how do we do that so I can copy this I can go to application properties so this is a default Behavior right what is the default behavior for every restart you get a new jdbc URL if you want to override anything default you need to touch the application properties right and here you can make use of a property which will tell Java that hey this is what I want to make use of so you need to say spring. datas source. URL this is a property and you need to paste in the URL you wish to have okay so here it's saying jdbc H2 mem and I can like change this so this you can keep this if you wish to but this looks a little bit complex so I can say test over here okay and this looks a bit short I can copy this I can restart let us restart this and let us see how this operates now if you scroll up over here okay where is that lock so you can see this is available over here and you can see database URL here this is a database and where is this coming from this coming from here now if you go over here if I hit refresh if I try to connect on the earlier URL it won't work and you can like add this over here and you can say test and you can see this worked and you will see the challenge over here so you can see I hope this was useful I hope this helped understand how you can add or you can convert like classes to that of database tables classes to database tables I hope this was helpful for you all hey there so I'm back with this video where we are going to take the monthly challenge application further so what we going to do is so far we have database configured with our application but the database is not being used in the code right so our apis are still pointing to the list so we are going to have the apis work with the dat and that is something that we are going to learn how we can do by the end of this session you are going to see your challenges being saved retrieved updated deleted so the entire crowd operation would be performed with the help of the database right now this monthly challenge application is going to evolve a lot in the coming videos so I'm working to bring in the front end for this particular project as well so you will have a front content which we'll be building using react and I'm also going to show you how you can deploy this particular application onto AWS okay so something that we are building is going to be live soon and you will be able to share the URL of the app that you build with the entire world okay so that is going to be some amazing stuff that is coming in so in order to show your support I would encourage you all to like subscribe and share as much as you can that's what you can do to support creators like me who are working to bring in such free content for you all so if you like this particular video do like subscribe and support me in whatever ways you can so that I can bring more such amazing content for you all so without a further Ado let's Jump Right In so now that we have configured the database which is the H2 database over here okay as you can see and if you come back to not the boosman but here in the browser you're going to see your entity or I should say the table over here which is nothing but the class that is coming in from your project so given that now we have achieved this if you take a look at our application okay so I'll close this properties for a while and if you take take a look at the services over here okay so this is the service here we are managing everything that you would see still with the help of list okay so this is not the service okay so this is the service here right so we are managing everything right now within the list so we have this list created okay where we are managing the list of challenges we are saving the challenges in the list you can see over here we're saving the challenge here we are retrieving The Challenge from the list itself so it's time that we move all this logic into the database how are we going to do this so we are going to do this with the help of a data axis layer which is going to be a repository so understand this right now we have a controller okay so controller what is controller doing it is intercepting the Epi request so any API request coming to these end points is being intercepted by our controller then controller is delegating this to service what is service doing service has all the logic this is a service layer and now we need a data access layer so what I'm going to do is I'm going to create a repository over here and what is the role of repository so repository is going to help us communicate to the database so what it's going to be is it's not going to be a class it's going to be an interface and I'm going to call this as challenge rep repository I'm going to keep things really simple okay and over here we have this interface created now what I'm going to do is spring boot makes your life a lot easier so like I said this is a repository that we are creating I would like to mention that spring boot data jpa also provides us with two inbuilt repositories okay and I would like to show that to you so I can say crud over here okay wait a minute so let me extend this so I'm going to say extends and I'm going to say crud repository over here so you can see over here if you go into this credit repository this is an interface and it has a lot of pre-built methods okay so this is inbuilt repository this is one of them this is known as crud repository there is also one more which is known as GP repository okay so this is GP repository all right now now what these two repositories do is it comes in with a bunch of crud operations now what I mean by crud operations so if you're not familiar with this term crud means create read update and delete okay and what does this do with the help of this we get pre-built methods that we can make use of to talk to the database so let us understand this people whenever you are working with the database what are you going to do you are going to create something right you're going to read something you're going to update something and you're going to delete something of course you're going to have something custom as well okay but this is going to be the standard right so if you're working on a to-do list app you're going to create the todos read the todos update the todos and delete the todos right you're going to perform crud okay of course you would have some custom operations like you are going to fetch todos weekly like in last seven days or monthly those are some C operations that you're going to do but this is going to remain the standard and every application needs this right whether you're building a to-do list application e-commerce or any sort of application so what spring boot tells is I'll give you an inbuilt stuff okay this is inbuilt GPA repository that you can make use of all right and uh you can use it for performing all the standard operations okay and you don't have to provide any sort of extra code you just have to use this and you are ready to do some basic crud operations along with the database that you have configured in your springbot project let me show this to you okay so here what I'm going to do is I am going to specify a couple of parameters okay so we need to specify a couple of things over here okay here we need to mention the kind of objects that we are going to work with so we are going to work with challenge objects right and you need to specify the the type of the primary key which is long over here so if you go to challenge over here we have long as the ID okay so that is something that we have defined over here and that is something you need to tell spring Boot and jpa repository so that it will provide the corresponding methods to you okay now let me show you the magic we have just done this definition okay we have just written this much of code we have not written any sort of implementation anything and uh we have just extended interface with jpa repository which we got inbuilt okay and you can see this is coming in from data GPA like if you take a look at the package you'll notice it's coming in from the GPA data GPA package okay and we have added two parameters here one is the type of the entity and the type of the primary key of the entity okay and what is the greatest thing we don't have to write any implementation spring boot or spring data GPA will automatically generate the implementation at the runtime and we can use it to perform the operations all right and let me demonstrate this to you so what I'm going to do is I'm going to switch over to service over here okay so in service what do we have we have a list over here right and right now everything is being managed in the list so we are adding challenges in the list itself so what we need to do is we need to get rid of this okay and we need to move move the logic to the database so what I'm going to do is I'm going to come up over here okay I'm going to need our repository so I'm going to say challenge repository and I'm going to say challenge repository over here now I'm going to make use of challenge repository here okay so I'm going to say over here if challenge is not equal to null Okay challenges. add so instead of challenges. add I'm going to say challenge Repository dot I'm going to have access to a few methods so you can see over here challenge repository dot gives us access to a lot you can see over here it gives us access to find all so if you want to fetch anything from the database you have to just say find all okay if you want to filter you can specify that as well okay so you can see find by ID so you can specify the ID unique ID with which you want to filter the data so I'm going to save over here we are just saving right we are adding challenge to the database so I'll just say save over here okay this is done and our job is done so we just replace the method so instead of referring this to the array list or the list that we have over here okay we are just pointing this particular logic now to the repository and we are saving it to the database do you want to test it let us see this and let us see if if we are able to see the challenge being added okay so what I would do is I would come here or let us switch over to the database first okay we will first confirm that the database is empty so I'll say select star so you just need to select challenge table you'll have the query automatically over here and you need to run this that's it now I'll come over to postman okay you can see get challenges okay you won't get any challenges okay this is coming in from the list okay we have not changed this particular thing in the post man but if we'll go to post data this is where we create the challenge right so I'll say send okay we got an error so let us switch over to IDE and let us see what issue has happened so if you see over here we got a long stack Trace here's the exception beginning it says null po exception cannot invoke challenge Repository do save okay I understood the error so if you come over here challenge repository we have not initialized the challenge repository actually okay so what you can do is you can specify autowired over here okay so I'm going to say autowired I'll save this all right let me run this so probably I'll get one more error over here okay because we don't have a default Constructor but I wish to show this to you okay getting errors is one of the best things okay you get to learn things so I'll show you right now so if you run this you get an error again okay earlier one was because we forgot Auto add annotation but if you come over here we got second error okay and uh let me scroll up so this worked fine till here and over here you you can see this is the error starting okay so you need a default Constructor why is default Constructor needed and if you see over here this is pointing us to our entity class which means that the challenge class over here okay so this challenge is now an entity okay we are saving it to the database but it does not have a default Constructor and we are getting error for that and the reason is because we are making use of jpa and the underlying thing that jpa uses is hybernate okay and uh it requires a default Constructor to instantiate entities before po populating them with data from the database okay and uh this is one of the errors that you might get if you don't have a default Constructor so right now you're also learning how we are debugging the issues so whenever you get an issue like this kind of issue over here internal server eror there's no need to get scared over here switch over take a look at the stack trace the error messages are really friendly okay and you can debug things easily you can see this is coming in from from hibernate like I said okay you can see hibernate at a lot of places so what is the solution it's clearly telling us that it needs a default Constructor there's no default Constructor so we'll come over here we'll say generate Constructor select none done restart the application hopefully it should work fine all right so what I'm going to do is I'm going to okay it worked fine will trigger again and this time you get 200 okay all right so the challenge is created successfully now how do we validate we'll go to our database I'll say connect and here I'll select this entity and I'll see if the challenges within the database so you can see indeed we are now interacting with the database okay and what are the changes that we did very minimal okay so just to add the database we did very minimal changes and now with interacting also we are making very minimal changes so we first added a repository okay this is the repository that will help us interact with the database and you can call it a data access layer all right all the logic for talking to the database goes here then we have service within service we added the repository we Auto wired it and here we just made change to this line so instead of adding it to the list we are now saving it to the database okay now we need to modify all the methods over here so that all the data we get is from the database because if if you see our application right now if you try to get all the challenges you can see this is coming in from the list but this is saving to the database so database has one challenge but that is not coming in over here so what do we do is we'll migrate this from list to that of the database so I'm going to or we can just comment this part we'll just comment the list so we start getting errors everywhere okay and we start removing all the references then to the list okay so what we do is you can see over here return challenges we won't say return challenges but instead we'll make use of repository dot find all why find all because find all is a method you can see it helps us getting all the entities from the database okay so whichever app you're working on if you're working on an e-commerce store and if you have a product repository you just say find all and you get all the products from the database okay and go on after the days where you have to write complex queries you just make use of these methods and you get your job done now if you come over here so let us understand how we are going to transition this method from list to that of the repository so this one is not going to be straightforward because I'll tell you something we are not fetching the challenge by its ID but we are fetching it by a custom parameter or I should say it is a field in the challenge entity so it's a field in the challeng entity called month okay so like I said earlier jpa has some predefined methods using which you can fetch the data okay so for example you can say repository Dot and you can like get by ID you can get all the challenges and so on okay but if you need something custom okay you need to Define it now the question is how would you define it okay because you don't want to write quer right and we are saying that GPL makes our life easier so understand this what GP will do is it will create a query in the back end or in the hindsight depending on the method name that you specify okay so for example here I want to get the challenge so I want to get a single challenge by month right because I'm passing in the month right and what is month month is a field so what I'm going to tell over here is I'm going to say challenge repository dot find pi month okay and I'm going to pass in the string over here okay and what is the string string over here is month okay so I need this kind of a method where I get challenges by month why find so why are we saying find over here because everything when you talk about repository everything is by find so if I say do find if you need to fetch anything it starts by find that is the convention okay so you can see over here find by ID if you want to find a specific challenge by ID you have to use this method and pass in the ID if you want to find all you can passing the Sorting order as well so find is a convention okay you cannot use get over here okay so we are saying find by month all right and I also need to ignore the case because this a string right so I'm going to say ignore case okay so we are talking in terms of literally I would say code language okay and we telling the repository which is nothing but GPA that hey we need this entity by month okay you need to ignore the case and you need to make use of this parameter so you need to find by this so I'm I'll be passing month and you need to ignore the case and get the object over here okay but the thing is this is a custom method it does not exist so how do we Define we just need to Define this in the repository over here something like this okay and the moment we Define this jpa will take care of the implementation we don't need to do anything else it's just that we need to specify like the return type over here so return type I'll specify is optional over here I'll say challenge all right and we are done I believe so if you come over here okay so return value is never used so we need to make use of the return value over here now how are we going to make use of return value so I'm going to say optional and I'm going to say challenge here and I'm going to say challenge like so okay I'm going to get rid of this entire for Loop so we don't need for Loop over here right earlier we were making use of for Loop because like we did not have uh the database right so we were iterating through the list now here what I'm going to do is since we are making use of optional I'm going to say or else over here okay and I'll pass in null if challenge is not retrieved it will return null over here that is what it means okay otherwise it will return challenge itself all right so this is how things will work and you can imagine how GPA repositor will take care of the rest okay so this is something that we'll see in action When We R rerun the application okay but now let us come down and let us talk about updating the challenge so here what we need to do is I will like take this down a little bit and here I'll first say challenge repository Dot and here I'll get the challenge by ID why ID because we have access to ID over here so we have two things over here one is ID another is the updated challenge object so I'll say find by ID like so and I'll pass in over here updated challenge like so okay and uh we need to get this optional challenge like so here all right so this is done we okay it should not be updated challenge here it should be ID here we are passing ID all right so this is done and what I need to do is I need to write if condition I need to say if challenge is present okay if challenge is present what are we doing so we need to update the challenge right so I'm going to to create a challenge object challenge to update okay is equal to I'll say challenge. get okay so this is a challenge that we' have fetched from the database and what I need to do is I'll say challenge top date dot set let's say set month and I'll say updated challenge so we just need to update everything now okay and I guess we have done this down also okay so I I'll just copy this here and instead of challenge to update I'll just cut this to this okay so we are done just be sure you are updating the right object so challenge to update is supposed to be updated over here okay don't make the mistake of updating this object over here okay this is one of the mistakes that I see devs make and then when testing the code they are like okay why is it not not updating okay now we'll say challenge repository and I'm going to save this okay and we are going to make use of simple save method and which challenge we are saving so we are going to save challenge to update like this all right we are done and here if this is done we need to return true okay I'll say return true okay and else we need to return false like W and we need to get rid of this code okay so I'll just delete this this is good and all okay so this is done now what we need to do is we need to modify the delete thing as well so I'll get rid of this this is uh using streams because we were making use of array list so I'll say challenge repository over here dot if I type in delete you can see this delete by ID delete as well right so I can make use of delete by ID and I can pass in ID over here okay and you can see over here okay required type Boolean but this is giving in like the void okay so what we can do is we can add an extra validation here so what I will do is I'll first find the challenge okay I'll first find the challenge okay then I'll check if the challenge is present okay if the challenge is present what are we doing so if the challenge is present I'm going to delete the challenge like so so I'll delete the challenge here and I'll say return true and then over here if this does not work then I'll say return false so yeah so a couple of checks but it looks good now okay so yeah we we have successfully migrated our array list or I should say the code we had written the DRL is to that of the database right let us test this so I'll just run this application and let us see if we are able to fetch everything from the database all right so app is running I'll come over here let's try to get some data we are not getting any data okay and uh let me also refresh the database so I'll connect and right now there's nothing in the database all right if you come here we create one challenge if you come here you can see the challenge being created and if you come here if you try to get the challenge you should see one challenge being returned where is this coming from of course the database okay you can even update the challenge okay so you can so let me check the id id was one so if you try to update this with February create a new website challenge updated successfully and if you come over here run this you can see February create a new website fantastic you can even delete this okay so I'm trying to delete the challenge with id1 challenge deleted successfully if you come here it's deleted and if you go to get data you're going to get no challenges so indeed this is working fine we have been able to successfully migrate the changes so whatever changes we had we have been able to migrate all those operations to the database so I hope this was useful just to do a quick review over here okay I would like to tell you that we have not done a lot of changes to bring in ddps into action we have just made use of this repository where we use pre-built GPA repository we told GPA repository that hey we will be working with the challenge entity and the primary key is long okay so primary key is long because we need to get the methods that work with long ID and what I mean by long ID so here you can see we got delete by ID so if you say wait a minute so if you say challenge repository dot delete by ID you can see long ID is the suggestion and that is because we have specified long as the parameter so we are telling GPA that hey we need everything to work with long as the primary key and that is what we got and here with the help of pre-built methods we made some changes I wouldn't say a lot of changes some changes into the service layer and everything is working absolutely fine you can see and we are now pointing to the database instead of the list over here and I can safely get rid of this okay so isn't this amazing I hope this was useful and uh I hope you understand the power of GPA to see how things are working internally and uh to see how queries are being generated internally by G you can do an optional step you can head over to application. properties over here okay and what I would say is what you can do is you can say a property over here you can say spring gpa. show hsql and you can add True to this so what this will do is this property controls whether SQL statements are locked or not so in the hindsight so here we have methods right we making use of methods from the repository these methods are being translated to queries in the hindsight and they are being used to interact to the database whichever database you have configured okay so if you want to see what all queries are being generated you can add this property and you can rerun the application the moment you rerun the application okay let us see so the application is running now if you call in API and if you are interacting with the repository you can see over here okay this query is being printed so this is a query that is being generated red you can see if I am trying to create the challenge if I come over here you can see over here there is a insert query that is being triggered okay if I'm trying to update so you can like experiment and see what is happening over here okay so this property helps you with that so I guess that's about GPA I hope you all had fun configuring GPA into the monthly challenges API hello everyone welcome to this particular video where we are going to take our application a bit further now for viewers who are new to this Channel and if you're not familiar with this playlist so we are building a full-fledged application using spring boot as a backend and react as a front end so we are going to build this application and we are going to get it deployed onto AWS so it's a complete Hands-On course that I have I'm working on and I'm releasing it step by step in the form of this video and all the videos are being added to the playlist so if you're new to this channel be sure to check out description to get the link to all the videos and the playlist of course and uh if you have been watching the playlist I want to talk about this video as to what we are going to cover so in this particular video we are going going to cover the most requested things so most people like most of my viewers have uh commented and reached out to me and requested that I should talk about react and teach react in a very Hands-On way of course which is my style so this video is the beginning for the same so the application that we have built so far has apis and those apis are working with the database and now it's time that we talk about the front end so we are going to start building the front end using react and in this video we are going to understand what react is why you should care about react how react works we are going to set up react on our system we are going to get the necessary tools that will enable us to develop with react so we are going to do all of this so stick till the very end because this this video is going to be really important for the upcoming videos and I'm not rushing through I'm taking time and explaining you everything so be sure to watch it completely so that you get a good hold of the base so that's about the video and I would also want to mention that if you haven't subscribed to my channel yet you should definitely do that so press that subscribe button and turn on the Bell notification icon people uh I'll tell you my the views that I get I was checking analytics and the views that I get majority of the views are from users who are not subscribed and a lot of viewers are returning as well so of course you're finding my content valuable that is why you are returning but you haven't subscribed I don't know why so you should subscribe turn on the Bell notification icon also like share the video comment and uh regarding comment I want to tell you something I wish to know who you are from where you are joining and watching this playlist so do comment in the comment section of this video let me who you are from where you are joining and what are you doing currently are you studying if if you are studying where you are studying what you are studying and if you're working what you working and where you are working what is the field you are so I would want to know you more and I will reply to your so that's about the introduction for this video be sure to subscribe just reminding you again uh because subscriptions number of subscribers that I have impact my ability to bring in such free content for you all on this platform okay the support you shows tells me that you're loving the content and I should bring more such content for you all so without a further Ado let's jump right into the video hey there welcome and let us begin talking about react so we'll talk about what is react why such a thing exist assist okay so here I'm on Google and I'm going to Simply type in react so the moment you type in react you're going to be presented with this official website of react which is react. now before visiting the website let me talk a little bit about what react is so react is a library as you can see over here in the description and it is a JavaScript library so if you are little bit Familiar of web development or if you are computer to engineer you will know that web essentially consists of HTML then we have CSS and we even have JavaScript now what is HTML HTML is nothing but the building block of the web so if you right click on anything over here like any element these are all elements right so if you right click on any of the elements if you say inspect so I'm on Chrome and I have this option inspect and let me like take this down so you are going to see all the code over here and you can see all the HTML elements here if you over on any of the element you're going to see the corresponding HTML element being highlighted okay this is a div so HTML essentially consists of tags like you can see over here div tag then we have h2 tag these are all inbuilt HTML tags that browsers understand so these are modern browsers that understand these things okay so this is HTML what is HTML used for it is used to define the elements now what happens is defining the elements is not enough okay you need to beautify them for example like here you see this react is being highlighted in bold right why is it being highlighted in bold because I've searched for react okay there is a particular styling for this right you can see this is being highlighted like in light gray which is a little bit different from this thing over here this is a link right so this is being highlighted differently so if I right click over here and if I inspect you'll see this is H3 okay and a tag here you can see a tag so in HTML you create links using the a tag now if you like expand this a bit here is where you'll see all the CSS you can see so a tag this is the a tag and here you can see the CSS the color is defined as blue if I change the color to let's say pink red you'll see the color is being changed in the browser you can see this is completely real time if I want to change this to let's say yellow which color do you want okay so you can change the color so this is how beautification is being added to web pages okay so you can see like beautification is being controlled by CSS what this code is you can see over here this code is CSS so you're saying for a tag now what is a tag a tag is over here which is so if I over on a tag you'll see the corresponding tag being highlighted or the corresponding element being highlighted on the left okay when you overover on the tag so it's the react this react text okay that is what it is and here you have CSS for the same so a tag it says all the a tags so if I over on a tag you'll see all the a tags being highlighted on the left hand side right so that is where all the a tags are being used which means that is where all the links are being rendered because these are all links right so I want all the AXS to be in this color I don't want any sort of text decoration that is what you're defining over here okay cursor is being changed to pointer so if I hover on this you can see the cursor is being changed right it's being changed to a pointer I can disable that okay okay it's not allowing me to override that but that's fine so the point is to understand what CSS is you can see that live over here right so I'll try to bring it to the default color it was something like this okay yellow and green is not looking that natural but you understand like this is C SS right then you have something called as JavaScript now what is Javascript JavaScript brings in life to the web pages so any sort of validation you want to do in the web pages any kind of popup you want to show you can do all of that okay so if you want to see JavaScript in action we can go to console tab over here at the top okay and this is the browser console so here I can say alert okay and I can simply say hi here something like this okay you can see hi this is the alert so any sort of validations popups or any sort of dynamic things you want to do you can make use of for JavaScript okay so JavaScript adds lives to your web pages okay now what is react react is a JavaScript library okay let us head over to the website of react and let us understand why this thing exist okay now let us understand how web used to work before react okay so what used to have happen is this is a web page right and uh you have different interactive elements over here so I can click on the nav bar and I can go to another page now when you load a web page HTML is loaded CSS is loaded JavaScript is loaded now when you switch over to another tab over here again the entire thing is reloaded so HTML is reloaded CSS is reloaded and JavaScript is reloaded if I go over here again everything is Reloaded click on community again everything is reloaded so this is not efficient you know like every time even though CSS and JavaScript does not change and it's constant throughout the side we are reloading it okay and this is not good right this is not the efficient way and we humans love to be efficient right and that is why react exist so I'll tell you how react is different so react is used to make single page web applications now what does it mean so what happens is you have this web application this is a web application right this a web page it's a web application it is going to have a frame outside this is a frame and inside for example it is going to have component so for example search is a component these Tabs are is a nav bar component okay you can create a nav bar and you can add like four buttons over there okay this button is also a component this is also a component then the center part is also a component so this entire page has a frame and within this Frame you have components inside placed okay now what happens is if you want to switch over to learn over here you can see the top thing does not change across the website right so why do you want to reload this you don't want to reload this you can just reload this bottom part right so with the help of this component based architecture this became possible so instead of reloading this entire web page even though nav is constant you are reloading that entire thing right it is not efficient right it is consuming uh your data it is consuming network activity it is also consuming processing power it is not efficient so that is why this component based uh thing came into picture where only the component where there was a change used to be reloaded so if you go to reference only this part will be reloaded if I switch to this only this part will be reloaded so that is what is a single page application so it is actually single page application like one page and the components are being reloaded okay and they are being reloaded depending on where you are interacting and how the application is built okay so that is what single page web applications are and react is used to make these kind of single page web applications okay so what reacts allows you to do is here you can see it allows you to create components okay now like I said here this thing is a component this thing is a component all these things can be components that you have defined and then you can have a frame and within this Frame you can load all the components that is what react allows you to do okay and why does it allow you to do so I just explained because if you like go to reference I'm just reloading this bottom part I'm not reloading this nav bar I'm not reloading this message at the top right only this bottom part is being reloaded if I click over here only the things on the right side is being reloaded you don't need to reload the entire web page every time right so that is what react allows you to do it allows you to create components you can create components okay so for example you can create search bar using react you can create Navar using react and then you can define a frame and within that frame you can assemble all the components in whichever way you like okay so that is what this thing talks about okay so it lets you build user interfaces out of individual pieces called components and it also has an amazing demo here on the website okay so this website might change the interface might change depending on when you're watching this video but right now I'm seeing this kind of an interface on the website okay if you come over here they have this amazing example so don't worry if you don't understand this code okay what this thing is trying to highlight over here is there are components in here you can see this is an interface okay our interface that you want to show this is a video thumbnail then you have the video title description like button and so on okay now here what you have done is you have created a component called thumbnail so you can see over here thumbnail right then you have created a component called like button here like button you have a component called video okay you can see so this is the entire component video you can see right so this is reusable as you can imagine okay so like button if I want to use at some other place I need to just make use of this tag okay thumbnail I need to use it another place I can just make use of this tag okay and tomorrow if there is any change in the thumbnail I just need to make that change at one place and it's reflected across app app tomorrow if I want to change how the animation of this like button works or any sort of UI change over here I want to change the color of of like button you just make change wherever you have defined this like button so wherever you have defined this like button you make that small change and you save it it's deployed across the app that's the magic so reusability as you can imagine is one of the major things that is coming across you can see over here okay you can see whether you work on your own or thousands of other developers using react feels the same okay it allows you to seamlessly combine components written by independent people okay and here you can see this is amazing you can see here so using little bit of JavaScript it has rendered so you created a video over here okay uh this was a video that you created and using JavaScript you are rendering video three times you can see three videos okay and this syntax this is a markup syntax that is known as GSX so JX is something that you'll hear often when you're working with react okay so this is about react and how it works okay so I would encourage you all to just go through this website also to give you one more example a a little bit interactive one I we can go to learn over here and if I scroll down here you can see this okay so here what we have done is essentially we have created a function so this is a function that is returning button and let's say this can be any button so right now it's a very simple button and it says I a button okay but let's say if you need a sort of button that is specific in UI and message to your application you can Define it like this and here what you have done is here I'm like rendering this button over here you can see my button so I'll tell you what happens is when you're are developing with HTML you have like inbuilt tags you have this H1 tag you have h2 tag you have H3 tag and every tag has a meaning right H1 tag has a meaning like if you write anything us H1 tag it is going to be shown in this way in header if I replace this and this is like a proper editor so I I'm allowed to change the code over here so if I change this to H2 like so you can see this will like show things in a different way okay the font size is little bit smaller okay so every tag that is inbuilt in HTML has its own meaning so here you can see this is our own custom tag so react allows you to create your own custom tag here we have defined our own custom tag my button this is the function my button that we have defined what is the definition of my button this is the definition so whenever you are calling my button we are calling my button we are using my button over here whenever you are using my button over here this is returned and this is replaced over here in a way okay so this thing this entire thing is being replaced over here like this when this is rendered into the browser okay so I'll just do control Zed I can even prove it to you so if I right click over here and say inspect let us see over here what's happening okay so I'll just take this down a bit I'll scroll towards right you can see here you are not seeing my button so here actually we are writing my button in the code but here you are not seeing my button here you are seeing this code being rendered you can see so what is happening is wherever you're using my button during runtime this is going to get rendered the definition of my button is going to get rendered so let me replicate this I'll replicate this and you can see one more button was added okay now if I change the definition I am a let me say I'm awesome button you can see it's reflected everywhere can you imagine this magic like so one you change at one thing you change at one place I'm sorry you change at one place and it is reflected across the application so if you have any sorts of custom buttons custom likes imagine building Instagram you're using like button at several places right and you have that uh theme to maintain so you create a component okay you use it at several places thousand places you use you need to make a change to the component no problem you come and make a change over here and it is reflected across the application okay so this is what and you can make use of this component n number of times so I can like just keep on rendering this this and you will see you can see the definition being substituted over here so this is the benefit of react so like we understood this react promotes the usage of single page applications okay you can make single page web applications you can uh essentially create your own components you can reuse those components so it promotes reusability you can uh it allows you to maintain your code easily as well so if you want to make a change you make change at one place it's reflected across so it makes it keeps things tidy okay also react is very popular these days so if you search for react salary in your location wherever you are from you can see so this is payscale.com for United States and you can see uh this is the salary right now that is getting paid for to react developers even full stack developer are being paid well so there are a lot of jobs that demand this skill set and it's important that you learn this as a software engineer so whether you are a backend engineer whoever you are these days react is also being used to create mobile applications okay so yeah it's really important that you understand this stuff and start building stuff using this technology so this is react now how do we write code in react so to write code in react you need nodejs now what is nodejs so nodejs is nothing but a JavaScript runtime and it lets you execute JavaScript code on the server side okay so that's something that we need nodejs will also need something called as npm now what is npm so npm is nothing but a package manager for JavaScript okay it is used to manage the different packages that you use with JavaScript uh like you can it is used to install libraries tools Frameworks so if you want to make use of react you need to make use of this package man okay also we will need something called as Visual Studio code so this is going to be the IDE okay and uh we are going to make use of this and and it has a wonderful support for web development as well so we are going to make use of Visual Studio code for this so coming to our browser what we going to do is we're going to head over to Google and we are going to search for nodejs okay this is something that we are going to need I'm going to click on this and you can see over here this is where we will need to install the nodejs so you can download the nodejs LDS version okay you can download it from here and you can even go to download page and if you need anything custom like for Windows Mac you can get the selection from here okay installation process is very straightforward you download this like any normal soft software program and you just follow the setup and installation instructions okay once you have downloaded what you can do is you can come over to your terminal and you can verify whether the installation was successful so you can say node hyphen V you should see this version being printed so your version number might be a little different from that of mine because uh this this might depend on when you're watching this video and whe there is a newer version available but don't worry about different version number a number should get printed that is what you should worry about then you type in npm so we need this node package manager as well okay and you can say iph we so this should also print a version number it's okay if it's different than that of mine okay but we need these two things to be installed on your system so one is nodejs which is the JavaScript run time okay and then we have npm which is a package manager so just be sure that you have both of this so now once this is validated I would request you all to navigate to the directory where you wish to create your react project so let's say I want to you can make use of CD command head over to the directory okay and I'll just switch over to C Drive okay and now in this particular directory I wish to create a react project okay now how am I going to do so so I need to just say npx okay now what is npx npx is a package Runner tool that comes along with npm so remember we checked for npm version which is node package manager okay so we are going to make use of npx which is a package Runner tool that comes in with NP M and it allows you to run command Okay locally on your machine so we are going to say npx and I'm going to say create react app okay now what is create react app okay so this is a tool you can say that allows you to create react based application so react based applications have structures some file that you need right so this allows you to create that structure the project automatically with ease okay so that's the benefit of doing this after create react app you can specify the project name so I'm going to say challenge app front end something like this you can specify the name of your choice just press enter okay so it is telling us that it cannot create uh okay it cannot contain capital letters I'm sorry about that so I need to say challenge front end something like this and I can say live version okay so I'll just press enter and this should ideally work so you can see what it is doing is it is creating so it has automatically created a folder first of all for me okay with the name that I have specified and within the folder it is processing okay it is creating the react project and this might take a little bit of time depending on the kind of computer you're using the network speed and all it is going to download a few packages for you so we'll wait for a while and we'll wait for this entire thing to process all right so I'm done with this command and you'll see it did a very nice job of creating the project so you can see here this is the directory it created because this is is the directory that I specified okay and it said inside that directory you can run several commands npm start so what is it going to do this is going to start a development server well that's a good news we have an inbuilt development server for us to work with Okay npm run build this is going to bundle the app into static files for production so this is for produ purposes npm test this is going to test npm eject we have some tools uh sorry not tools we have some commands and then if you scroll down this is the command that it's suggesting us to begin with it's saying you can start by typing in CD you switch over to this folder and then you say npm start so what I will do is I'll say I'll just copy this I'll paste this we switch over to this and it said npm start something like this so this is going to start our server simply okay and you can see it's on Local Host 3,000 and this is our first react based application which we created okay or I should say we did not create okay so this is automatically generated project using Create react app okay and it's also giving us some hint over here you can edit app.js and save to reload okay it has a link to learn react which will take you to the official website of react all right so far so good so so this is our application up and running now what do we need to do we need to start coding and modifying things and what are we going to do for that we are going to install an IDE which is the ID Visual Studio code okay so this is what it looks like if you already have it on the computer well and good if you don't then head over to this official website it is a free tool okay it's free built on open source runs everywhere so since I'm on Windows it's prompting me to download a stable build for Windows you can switch to whichever operating system you need to but if you are uh if your operating system has an installer over here it is going to automatically so if you're logging in from Mac over here it is going to show you download from Mac okay so whichever platform you are opening this from it is going to show you that pattern and you can go through this if you're not aware of what Visual Studio code is but just download and just install it like any other software program okay I have it already installed so I won't be showing you the installation steps but installation steps are not at all complex it's it's very simple and straightforward so after you are done with the installation you will be shown this kind of a welcome screen I'm seeing some recent projects here because I've been using visual studio code for a while now but uh you need to come over to this kind of an interface you need to go to O file open folder now if you click on open folder you need to navigate to the location where you have created the react app so click on open folder navigate to the place where you created the react app and get your react app open in this ID so I have opened this particular folder of mine okay and uh now over here you are seeing let me zoom in a bit okay you're seeing this project structure that was automatically created with the help of create react app okay so let us go through this project structure okay so here this is the folder or the project name that I had specified when um mentioning the project name or when running the command then you have node modules okay so what are node modules so this directory contains all the npm packages which means libraries dependencies that your project relies on okay so generally you won't need to interact with this folder directly okay so you won't be touching this folder at all then you have public folder now public folder has all the static files like uh main index.html uh you can see like the name itself public so all the static files favicon all of that will come over here okay then you have like index.html over here okay this will contain the root div element which the your application will interact okay uh if you close this you have uh let me close this okay then you have over here some Json files okay or let us talk about SRC so SRC is a very important folder for you as a developer because this is where you'll be writing all your code and this is where all the magic will happens okay so this will have all your JavaScript files all your react components stylesheets images any other the assets that you are working on everything will reside over here okay now within SRC if you take a look at uh app.js okay so if you come over to the browser you can see edit SRC app.js so this page is being rendered from here okay so if you see over here edit SRC app.js so that message is coming in from here okay and then at the bottom you had a link which said that if you need to learn react you need to go to this link so that is where this is coming from okay this is where it's coming from okay so this is app.js then you have index.js what is index.js okay this is a starting point of the react app and this is where this app component is being rendered okay so you understand this app.js is a component that is being added in index.js you can see this is being added over here okay so all your source code will recite don't worry if you are not understanding anything right now about what component is going where but what I mean to say essentially over here is all your source code will reside over here okay and whatever changes you need to make you can make over here okay so SRC is the folder where you'll be working a lot because you as a Dev you'll be building stuff and SRC will be your home so right now what I would encourage you all to do is here in the app. CHS since you're seeing this message coming in you can modify this message and play around with the HTML a bit and so instead of edit if I say edit one and if I save this file if you come over here you can see edit one being reflected we have not done any sort of refresh reload anything right how is this being reflected I just changed here and I just saved it and we have a server running how and where the server come from so you remember we like started the server by saying npm start over here so this was the command that we executed npm start and this triggered the development server you can see you can read these uh these output over here okay this thing over here that you see compiled successfully and it also gave you a URL so if you are accessing local this is the one if you're accessing on network this is the one okay so you have a server which is up and running it is hosting your application and whatever changes you're making over here you just need to save the file so I edited this file you see this dot over here at the top which it means that it's not saved so if without saving if you check it won't reflect okay if you save this crl s come here it is reflecting Auto reload so I would encourage you all to to make change and observe what's happening it's good to get familiar with the playground hello everyone how are you all doing welcome to this new video where we are building a full stack application using spring Boot and react from scratch and by the end we'll be deploying this application onto a server we'll be making of ews for the same so we have come very far with this particular application we have now react setup on our system and now it's time that we get familiar with the fundamentals of react so we'll be talking about things like components properties and states in this video so do watch this video till the end we are going to learn these Concepts handson without the use of slides all right so this is going to actually help you understand how these things work when it comes to react all right and these things become the piece of everything that you do in react all right so if you're new to this Channel and if you're watching this video for the first time I would highly encourage you all to watch the earlier videos the link you'll find in the description for the entire playlist so to get some context as to what is happening what source code we are using and what have we done so far you should watch the earlier video videos and uh also I would urge you all for those who have not subscribed hit that subscribe button turn on the Bell notification I can that means a lot to me and it impacts my ability directly to bring in more such amazing free content for you all so that's the best thing you can do to support Creator like me all right so do like subscribe and also in the comments let me know from where you are joining what you do what's your name just introduce yourself I would like to know you more so without a further Ado let's Jump Right In so now we have the react app set up and we have been making use of an external terminal so far so you have been making use of terminal that exist on your system right but with Visual Studio code you can go a little bit further wherein you have an inbuilt terminal over here as you can see so if you go to the top menu you will have a terminal option you can start a new terminal over here okay you can see you have multiple terminals that you can create so I can create n number of terminals I can add over here okay and over here I can run the commands so if you run PWD which gives me the present working directory you'll see that this terminal opens in the current directory where my project is as of now so so whatever I run over here will be executed in the root of the project so you don't need to worry about that okay so here I'm just going to run the same command npm start using which we start our application so the development server has started and now I'll I'll just move this to a separate window over here okay so we have this application up and running okay now let us talk a little bit more about our application so I'll I'll just minimize this over here okay we don't need to see the terminal the application is running now all right we don't need to worry about it if you need to access terminal anytime you can like directly go over here and access the terminal over here so you will find this terminal present over here okay so so yeah so coming to our application okay I want to talk about the index.js Okay so here we have seen app.js okay let me like just zoom out a bit okay app.js is one file which has the app component okay we have index.js so there are a few JavaScript files that we need to know about okay now what is index.js index.js is the starting point of your application it's like an entry point you can see for your react application and this code we have not written it's autogenerated when we created the react project using the CRA tool okay now there are a few things I want to explain here you're seeing a few input statements at the top okay the first one is where we are importing the react Library okay now this particular library is important for creating and defining the react components so that is what is happening at the first line Second Line we are importing the react Doom now react Dom is a client API which is used for rendering the react components to the Dom so Dom means document object model okay so if you're doing web development you often have to work with the document object model on a web page to render things here we are importing the CSS file this is the index. CSS that you will find defined over here okay this is pre-created we did not create this all right coming back to the file you have app being imported okay from app so this is coming in from here app.js you can see so this is what is being imported and whatever you are creating over here whatever you're defining is being shown over here here you can see okay so we are making use of app right and uh report web vital is a function that is used to measure and report on various uh web performance metrics okay so this this is something it it's a reporting thing all right and you can see over here it's calling this function all right but we'll be talking about this thing over here okay here what is happening with this piece of code so once the Imports are done we are actually rendering the app so here we are like uh creating a root okay so this is selecting the root Dom okay so if you have used JavaScript there is something called as document. getet element by ID using which you can get the elements from the HTML page okay so here if you go to index.html so you'll find the index.html over here in public folder okay so this is the template that you have okay and here you have like a normal HTML template so this is like HTML head you have meta tags you have everything like fabicon everything set up but here you have this div within the body so when the body tag starts you have div over here and this div has the idea of root okay and you can see over here this comment here that is written okay this HTML file is a template if you open it directly in the browser you'll see an empty Peach okay and what is happening is this root is being fetched in index.js over here okay that is a root that is being fetched over here in index.js and what we are doing is under this root we are rendering our our entire react application that is what is happening over here we are seeing root. render and we are making use of app component over here that we have imported okay the component is being used for rendering okay so I hope this is making sense and this particular app like I said is coming in from app.js so this entire thing that we have defined over here is being rendered then on the web page under the root so if you go over here like your application is running if you say inspect okay you'll see this root and under root you have everything okay see this is the root so if you collapse the root you don't have anything outside the root under the root you have like the app and under app you have header the P tag whatever you have defined in the appjs so that is how your app is being rendered this is important that you understand if you're working with react for the first time all right so the rendering is done now let us understand the components part okay so here you have the app component we are making use of app component in the index.js over here okay now within app okay you have something called as header over here okay so I'm going to like get rid of this default code okay so what I'm going to do is I will take this header and I'll remove this entirely okay now what we can do is we can have our own components created like I have said and let us begin creating the components so what I can do is I can say H1 over here R react app okay something like this so so okay I have this and if you come over here I have our react app as a message over here okay so it instantly reloads if I save the file okay now what I'm going to do is I'm making use of this HTML tag over here this is normal HTML tag now let us say I want to print a greeting all right so one way is what I can do is I can like uh say over here H2 something like this and I can say hello react okay if I save this okay you'll see Hello react coming in over here now let's say if I want to print this greeting multiple times okay you have to write it three times right now what if I extract this into a component right I'm reusing this right at multiple places so what I can do is I can like create a new file over here okay I can call this as creating. GS something like this all right and over here what I can do is let me copy this code over here okay and I can like have a function Okay so so I can have a function like this okay and I can say creating we don't need parameters right now and I can past this code okay so this is what we want the component to be and I can return this spe over here something like this all right and what I'm going to do over here is I'm going to say export default creating so we need to export this as well so that this is available for import and I'm going to come into app.js here all right and what I'm going to do is here let's make use of this component right so I'm going to come over here first or let's try making use of it directly okay so I'm going to remove this h2 tag I'm going to say greeting like so so you can see the moment I used greeting it was automatically imported at the top okay I don't need to import logo because it's not being used but greting is imported you can write this manually or you can get it auto imported like I did okay and I'll close this so we are making use of this component that we have just defined like any other HTML tag this is our custom HTML tag you can say right isn't this amazing I'll save this and you can see the output has not changed all right if even if you take a look at the HTML okay take a look at the HT HML it's the same HTML as if I have defined H2 three times but actually I not defined H2 three times I defined H2 two times and then I'm making use of creating component well this is our component now and the question is I'm making use of this component once can I make use of this component multiple times yes of course you can why not so if you want to make use of this component multiple times you can you can save this come over here you you can see the app is reloaded and the things are looking normal right just like you have like added h2 tag three times okay now if you want to make any change in the message or anything you have to just make it at one place and it's reflected everywhere so that's the power if I make a change over here hello react and if I add exclamation let's say if I come over here you can see exclamation added everywhere but if it was other way around like if you were not making use of components you have to make this change at three different places right now this is about component okay this is how you can create your own component and this is the first component that you have created now things get even more interesting with Dynamic things like you can pass Dynamic parameters into components which can help those components behave differently based on what you are passing let me show that to you okay so here if you write an HTML tag you can like Define a property something like this right you can pass in a property so with react you can do something like this as well okay so here I can come in now here I can say name okay let let us call it name you can call it anything okay and let me say John over here okay name is John okay let me comment these for a while right now okay so this is the comment okay so we have only one component I'm passing in John and here what I need to do is I am going to make use of this kind of a syntax okay I'm going to say name something like this okay this is known as destructuring and here instead of hello react I'm going to have name something something like this okay so why name is surrounded in curly braces because it's a variable okay it's it has a dynamic content if I save this and if I come back over here you can see hello John right hello John is being printed and John is something that you passed in from this particular file over here isn't this interesting so you're passing parameters and this is known as properties okay it is also known as props so when you're working with react okay you will hear this term prop which is nothing but properties so this is an example of a property so what you can do is here I'm going to uncomment this okay you can copy this so instead of John here I can pass in let's say Alice for example then here I can pass in anything I like I can say like Bob let's do this if you come over here you can see hello John Alice and pop okay so you have the same component behave differently depending on what you are passing in as the parameter and what have you used over here you have used the concept of properties so this is known as properties when it comes to react now so far we are working with a single parameter or a single property can you have multiple properties yes of course you can so let us say I want to pass in message as well along with the name when we make use of greetings okay so I can say message over here okay and here I can say welcome okay and uh I can copy the same thing here I can paste it over here I can pass in welcome with an exclamation okay this is a different message and here I can say hello something like this okay and we can go over here in greeting and here we can add one more parameter like so and here we can make use of it so here since I'm returning this okay so what I can do is now let's say I want to return P tag as well along with H2 okay so I can say p like this and I need to say message something like this okay now we are getting an error okay so it is saying GSX expression must have one parent okay so here's one more learning now all right we are returning these two tags okay and these are being returned as jsx right so jsx means JavaScript XML but the thing over here is you cannot have two tags being returned you need to have one tag only okay and if you are having a situation where you have a multiple tags being used something like this so what you need to do is you need to add in a parent tag so I can say div over here okay and I need to wrap this into a parent tag something like this over here okay and I need to add this into round brackets like this okay all right so you can see the error is now gone okay so what we are doing is we have wrapped these two elements because we added one more P tag okay and we are returning this wrapped in div now and we've just made it a little bit pretty okay but we were getting an error and what is the error that we were getting so it was talking about GSX okay like you cannot return two elements you need to have one parent okay one element only so that is something that you need to keep in mind okay and if you come over here now you can see hello John welcome hello Alice okay I've zoomed in a bit okay but you should see something like this hello Sean welcome hello Alice welcome hello Bob welcome and you can see this is without exclamation this is with exclamation and this is just hello okay so indeed this is working okay also if you see over here you see the div tag but this is something different so this div tag is like we use in HTML right if you're familiar with HTML you will know this but this is not like HTML right if you make use of div tag in HTML you make use of something called as class right you make use of something like this class class right this is HTML but here we are making use of class name okay what is class name that is that sounds a little bit new right if you're not familiar with react so here when working with react you make use of class name instead of class over here okay and this is to specify the classes of an element okay that is the syntax and this is because react makes use of GSX okay so it's a slightly uh different syntax than that of JavaScript and GSX is nothing but an extension of JavaScript okay and uh if you make use of class name it gets compiled to class like we make use in HTML so if you come over here even though you have made use of class name you can see class over here okay so it's being compiled to class during runtime you can see we are saying class name here but it is coming in as class after it's rendered okay so now with this particular application what I want to do is let us say we have this message okay this message is some data about this particular component okay also name is a data about this particular component so normally whenever you want to store any kind of data about a particular component you make use of something called as States okay now if you have heard of react before or if you have read about it you must have heard of this term called hooks so what are react hooks so react hooks were introduced in some of the latest versions of react and they allow you to use things like State life cycle methods and all when you're working with functional components so this particular component that we have defined is a functional component okay now what is a functional component functional component is simply a component that is created using a function okay we are not making use of class over here if you make use of class and if you create a component which you can you are creating class-based components but normally today everybody writes functional components only okay so we have created a functional component and you can make use of hooks to get access to State okay and with State you can store some data about your component that you have all right so what we need to do is what we going to do over here is we are going to go at the top okay I'm going to say import and I'm going to say use and you can see over here we have use context use effect okay there will be something called as use state so we have imported use State over here okay now let us say we want to have message as a state of our creating okay of this particular component okay so what I can do is I can create a state over here I can say const like so I can say message so take a look at the syntax you have message and then you also specify the function name okay and then over here you make use of something called as use State now what is use state so if you see this use state is used to initialize or give any initial State value okay so I can say use State and what is the initial value that I want to to have I want to have it message okay and then you can add a semicolon so what you're doing is you are creating a state called message over here set message is a function and why are we defining this function right now because this is a function that will update this particular State okay in sometime you'll see the magic of this function and state people okay and how it saves your life or saves a lot of time okay so here we have created this State okay and it also has a initial value all right now what we are doing is we are already making use of this state okay now let's say I want to change this state based on certain event okay and let us say for example I have an event let's say I have a button okay and uh let's say on click of this button okay on click of this button what I'm going to do is I am going to have Okay so something like this and I need to update the state over here how do I update we have a function right called set message so I can say over here goodbye for example you can add anything okay whatever message you want to add and here we will add the button text so I'll say change message can be the button text okay I hope this is making sense let me save this file let me come over here okay so we got an error so the error message says identifier message has already been declared okay so there is this problem where what we have done is we have like the prop this parameter and the state name as same so we are getting this error what we can do is we can call this message State and I can make use of message State over here okay so after you rename this to message state okay and if you do a hard refresh you should see this being changed to goodbye okay so you have welcome initially and if you click on change message you can see this is being changed to goodbye all right and how is this happening so what we're doing over here is so let me indent this a bit okay you can see now we have div H2 State being used and then we have a button click based on which we are changing the value of the state so isn't this amazing this function is tied to this particular State variable and whatever change or whatever message you're passing in is being immediately reflected over there and there was minimal lag minimum refresh over there as you can see okay and the change was instant I can even like move this particular thing here okay that we have this entire thing so let me like cut this okay and uh here I'll come okay and I'll paste it over here and I'll create a function so I'll say constant change message okay and this is the function that I'm creating what it's doing is it's simply calling set message okay you can see it's simply calling set message okay and here what I'm going to do is onclick I'm just going to call change message and I'm going to save it okay now let me hit refresh you see welcome if you click you will see goodbye you'll see goodbye this is happening across now you can see okay so this is how States work so state is nothing but some data that you wish to store for a particular component so this is how you create State okay and you're making use of U State hook this is known as hook that you have to import from react okay and uh this is a syntax to Define States so you are defining State and uh you have a call back function which is being created along with it okay and you have this use State used over here to initialize the initial value okay so normally when you creating components you won't create it in the SRC folder okay you would normally have a folder created you will call this folder as components okay and you would move the greetings inside components okay and it's asking you to update the inputs you'll say yes okay so whatever inputs are there you can see this UT statement has been updated okay I'll save this and I'll save this as well okay and our application is working as normal you can see all right so this is how uh you can create components work with States I hope uh this has given you some good overview of uh the basics of react and how things work when you are working with react okay so these are some foundational Concepts that will help you build like an application that would have react as the interface okay so these were some of the foundational Concepts I would encourage you to create more components try using those components see how things work create more streets try using them and see how things work okay experimenting is really important when you you are learning programming what's going on guys so welcome back to this video where we are going to take our application one step further so what we are going to do is we are going to start building the list of challenges and of course this list is going to be dynamic it is going to be interacting with the backend server that we have built so for those who are new to this Channel and if you're watching this video for the first time let me set some context for you all this video is a part of a spring boot Series where we are building an application using spring Boot and react like in a full stack way from scratch so we'll be building this application and in the end we are going to deploy this application onto AWS server so that you can share this application with the entire world so that's what it it's about if you are interested in checking out the entire series head over to the description to get the link of the playlist so you can watch the earlier videos and then come back and watch this to get some more context as to what we'll be doing in this class so talking about this video in this particular video we are going to be working on the list like I said and that list is going to be dynamic it is going to interact so first of all it is going to be rendered in react we're going to make use of react and then that list is going to interact with our backend server now we have a server up and running and uh we are making use of spring boot there we also have a database so the entire flow will be from your front end you're going to call the backend apis and backend apis are going to interact with the database that is how it's going to work so in the process you're going to learn how you can make calls across domains so here the front end is hosted on a separate server and back end is of course a different server so it these are two different servers right two different domains so how would you interact what errors would you face and how would you prepare your application for that so all of that will be covered in this video be sure to watch it till the end and also like I have always been saying I get a lot of views from people who have not subscribed I don't know why you all are not subscribing hit that subscribe button press the Bell notification icon uh this gesture indicates support towards me my content that I have been uh sharing freely over here and uh if you want to support a Creator like me this would be the best way to support right now because this directly impacts the ability of me bringing in such amazing free content for you all so do subscribe like and in the comments let me know from where you are joining and uh what do you do right now what's your name just introduce yourself I would like to know more about you so without a further Ado let's Jump Right In so we have built some decent stuff with react and you can see we Now understand the basics and the working of react right and that to in a Hands-On way now what we want to do is we have our challenge application with some of the apis that we have built and what we need to do is we need to add a front end of this sort okay so this is a PNG image okay it's an image and if you see if I zoom in a bit you can see here I have a header I have a basic form okay it's it's not a fancy UI first of all it's a basic simple form that I have which allows me to add a challenge so here I need to type in month here I can type in the description I need to submit okay on submission the challenge should appear here in the list so this is the list that is showing the list of challenges month-wise that have been added into my application and when I say application this is the front end okay and this will interact with the back end now where is the back end so this is a back end that we have built okay this is service this is repository we have these endpoints that are our controllers okay so this is the back endend and it has H2 database so what is happening is from here this is front end you query or you submit anything this is a react application so the changes or whatever interaction you do with the front end is being handled with your react application react application will interact with the backend which is the spring boot server the code running on Spring boot okay and then this particular changes are being stored or managed within the database by your application with the help of repository layer that we have created I hope this makes sense right so this is going to be the entire flow and we are going to build something like this so what we need to do is we already have some code here so either you can start a new project and start fresh but I'm not going to do that I'm just going to start making changes here itself in our application and we are going to build the function it so the first functionality that we would be building is going to be about listing the challenges so what we're going to do is so forget this form first of all we'll build this in the second part but for now we'll first list the challenges so we'll go stepwise this a second step adding the form and getting the changes added to the database the first step is like to list the challenge so we are going to list the challenge right from the back end and when I say backend they are being fetched from the database with the help of the apis okay so I'll come over here I'll begin making the changes right from app.js okay so I'll remove this particular component greetings okay because we no longer need it all right here in the app I'll also get rid of these things okay we are not now printing in greetings we need to show the list of challenges all right so what I would do is I would I have a div here okay this is a div I would have H1 so I'll start writing some simple HTML tags okay here and I'll say monthly challenges this is the header the moment I Sav the file and if I come here I see this header here right so there's an auto refresh which is nice just make sure that you save the files after making the change if you don't save and if you switch to the browser and you wonder like why changes are not reflecting of course it's because you have not saved the file so I've made this mistake a lot of times so so this is something that you need to know now what we need to do is here we need to populate the list of the challenge okay now in order to populate the list we can have that as the component right so what I would do is here I would create a new file okay within component and I can call this as challenge list.js something like this so this is the file that is going to help me like manage the entire list of challenges and I will be controlling how my challenges are being displayed right from this particular file so here I'm going to go into creating. JS okay so we don't need State over here so what I'm going to do is I'm simply going to write a function like so okay the function name will be challenge list something like this over here I can like remove the list of parameters okay I can see return and here I'm simply going to have a diff like this okay and I can see I can see over here div list over here something like this okay and uh I'll add a semicolon here as a closure and I'll come back here okay in our app.js and here I can simply get challenge list like this okay and you'll see okay so there's no import added let me see whether this code is working okay so it says challenge list is not defined because there's no import added so I need to import this so I'll say import and uh I'll say challenge list from I can say here components okay one second components slash challenges so this is the syntax and you need to end this with the semicolon okay so it's saying challenge list was not found in components all right so what is the issue let's come here okay so the issue is because we are not exporting this component so this is something thing you need to do export and I need to say default and I need to say challenge list like this now if you come to the browser you'll see that you can see the list okay how are you seeing what's happening this is the JS file what's happening we are creating a function which is simply returning a div okay nothing complex here we are having this function app where we are just showing the header and the list of challenges right now this is not a list this is like a simple like component usage that we are doing over here okay and we are displaying also you can get rid of this end tag actually we don't need this so I can just remove this but you just need to add a forward slash here like this now if you come back the code has not changed okay because you have not got any error sort of it's working perfectly fine now what we will do is we need to have the list of challenges right so what I will do is I will get a state created okay so I'll say constant and I will have challenges I'll have the okay not message it's set challenges okay and here I'll say use State like this okay and I'll have it initialized to an empty array okay so this is this is the list of challenges that we are having now what we need to do is this list or whatever this challenge is holding we need to display it within this particular code right because this is the code that is responsible for rendering challenges onto the UI right so what I will do is I'll pass this as prop okay and to pass this as prop I'll say challenges is equal to challenges something like this right this is done now I'll come here and uh within this piece of code what I need to do is I need to accept the challenge okay so I'll say challenges like this okay I'll save this okay and uh now I need to iterate through the list of challenges and I need to render it onto the UI okay so what I will do is here okay here I'll say challenges and I need to make use of map and I'll say challenge and like this okay and uh I'll move this div inside here like so okay and instead of just displaying list over here okay I I can like say over here one second I'll say challenge dot so what we are doing over here is we are having this particular object okay we have challenges which is having the list so this is an array you can say and it's having the list of challenges that you have okay then you're making use of map over here okay now map is a function uh this is a function in JavaScript this is Javascript code and this is used to iterate over each item in an array and return a new array with the transformed item okay now here what we are doing is we are iterating over each challenge object in the challenge array okay with the help of this map function okay then what we are doing is we are having a div okay and here we can add a key all right so I'll say key and here I'll say challenge. ID so challeng is here this challenge object is having ID and name inside it these are two properties that this array like every object in this array is having okay we have not defined this yet like ID and name right now but we will soon go to like abjs and get these two created okay and what we are doing over here is we are we have added this property called key over here and this is being used to uniquely identify each rendered elements in react okay so this key element is used to keep track of the element's uh ID okay so every challenge here is then marked as unique over here okay so I'll save this right now okay and uh I I guess this should render the challenge onto the front end but let me come over here to app.js and what I will do is I don't have an initial value defined for the list of challenges right so what you can do is you have an option to add or initialize the starting list of challenge okay so what I can do is within this array I can have the objects so I have this first challenge Okay add a comma I'll say name I will call this as first challenge okay or I can just say description so our challenges have month so wait a minute so if you come over here to back end our challenges have month and description okay so instead of name I can have description like so okay and I can say first challenge description over here like so okay and here I can say month coolon I can add something like this and here I'll say Jan January like this okay this is done and I can have one more challenge added over here so this is just a static list right right now okay we have not connected this to the back end which we'll be soon doing but uh you need to understand how this rendering process is working and then we'll understand how you can get this connected to the back end okay so you can see so these are the two challenges that we have initialized the challenge object with okay now what is happening challenges has two challenges with these attributes like ID month and description okay then you're passing this as a property to the challenge list then you are getting this in the challenge list and then here you are rendering it and how are you rendering you're accessing each property that you have within every challenge okay if you save this and if you come over here okay we are not seeing any output we need to check why this is not being rendered so what I will do is I'll right click I'll say inspect I'll go to console now here in console you're getting a clear warning and a clear message that two children are having same keys and keys should be unique so that components maintain the identity across updates okay it's pretty clear so here we are making use of key okay we are assigning a key which is challenge. ID and probably this is not unique okay see over here this is not unique so accidentally because I copied I forgot to change this so change this to two and come over here okay and refresh this the error goes away okay but there's another problem we are still not seeing any challenge being rendered and also there's no error as well okay so what I will do is I'll go to elements I'll go to body I'll see how the HTML is being rendered you can see the rendering is happening so after H1 you can see here we have H1 and then we have the list of challenge here so this list is being rendered with two divs so these two divs are because we have two challenge right so this is being rendered but the thing is it has no contents okay now it has no contents so we need to see what's happening so here we have month and description if you come over here okay we are not rendering month over here we accessing name and there is no such thing called name over here okay so if I change this to month it should work and you can see it's working fine now right so you can see now challenge being rendered so if you quickly go through the code what we are doing is within app.js we are having a state which is maintaining the list of challenges okay we have initialized this to an array of two objects the object has two attributes okay three attributes I should say ID month and description okay ID month and description and if you scroll down here we have created a component called challenge list which is like like uh getting the challenges rendered and to get the challenge rendered we are passing this array to the challenge list and the list is taking this array going through the every object in the array with the help of the map function and it is rendering each using the dev as you can see over here okay pretty simple you can uh also like copy this code so I can copy this code here okay you can come over here I can comment this and you can render it over here you can directly paste this code here okay this will also make sure that you get the same output right but the benefit of having the component based approach is that you can use this list at different places right so having components makes your code easy to understand okay so if I do control Z this approach makes it easy to understand because you know okay challenge list and this is managing the list so if you want to use the same list at multiple places you can of course do that and even the code looks really organized now what I can do is right now I'm just rendering the uh month of the challenge right so challenge can actually get complex like in future I can have month right now I have month and description along with ID in future I can have a lot of other things right within a challenge so this single row right now which is just displaying January February this can actually get a bit more complex where you want to work with multiple stuff so what you can do over here is I will add one more file over here I'll call this file as challenge we can have challenge. Js so this is a file that can represent a single challenge okay and what I can quickly do I'll quickly create a function I'll say challenge here and uh this particular function will have a parameter like this challenge so it will have one challenge that it will accept it will return something okay I'm going to have a return statement ending with a semicolon and here what I can do is I can say I have a div like this within div I'm going to have a H5 tag okay so we'll try to keep it very simple I'll say challenge dot month like this and uh I'll come down here just after this I'm going to have a P tag okay and I can say challenge description like this okay and I'll close this curly brace like so okay and I also need to add an export statement okay I can say export default challenge like this see I'll keep Capital like so I'll save this now what I can do is in this list in instead of rendering a challenge by month okay I can tweak this code a little bit what I would do is I'll simply get this component to work so I can say like challenge like this okay challenge so this is the component and the moment I pressed enter you can see this UT statement was added right at the top okay and uh I can say key over here and and we can like get this key removed from div and we can add it over here and here I can say challenge is equal to challenge like so okay this is done I'll just take this to the next line so that it's visible to you all what's happening I can get rid of this div now okay I can like remove this I can remove this okay this is done and I would close this over here okay this is closed like this now if you come over here okay we get an error what is the error let us see it's not being rendered okay why it's not being rendered let me see okay so here I'm like adding two curly braces which I can get rid of if I save this and if I come here you can see it's working fine so you have January first challenge description February first challenge description and so on okay of course this is not looking good right now not as we saw in the UI here okay this is how it should actually be shown but the point is okay we are seeing data being shown over here okay that's not an issue now what is happening is this is being fetched from like a list a static list what we need to do now is since we are able to display the list of challenges we now need to link this to the back end okay so if you scroll up here we need to get rid of this and probably we need to have backend connectivity so that we are calling the apis so which API will call here so here if you go to our controller in intellig you need to head over to get mapping and get all challenges okay so it's slash challenges Local Host 8/ challenges is what is going to give us the list of all the challenges that exist in our application okay so we'll come over here okay and uh we'll make some further changes to get that functionality built so now we need to get rid of the static elements here and we need to add the dynamicity right so we need to interact with the back end now how are we going to interact with the back end so for this we are going to make use of something called as use effect hook you can see this use effect now this is a hook in react like use state so like we have use State okay we have use effect use effect allows us to perform the side effects in your components okay what is side effects now side effect is any such thing or any such change that you are making in the systems state or in the application state that involves the interaction with the outer world so understand this now here this is a react application we have this components that are being rendered but in one of the components you need to interact with the outside world right wherein you want to interact with our backend service that we have created now this backend service is not the part of react application react application is running separately our spring boot server is separate right so this involves interacting with the outside world which is nothing but our backend apis and that is where we make need to make use of use effect so that we can get the data from the outside world and render it seamlessly so if you add use effect it will be imported over here as you can see with use State all right now here let us take a look at the syntax so what I'm going to do is here I'm going to so you can see over here this accepts a function okay so if you over on this you can see it will accept a function okay and uh that function should contain the effect full code now what does effect full code means the code that is interacting with the outside world that is what is effect full code all right now I'll have this over here and here this is the code for function and here I'll have a MD array okay now Mt array is nothing but the dependency list as you can see over here so this is the effect call back you can see this is a call back the first parameter okay this is the effect call back and then you have the dependency array now what is the dependency array dependency array is an array so here see so if this array is present the effect will activate only if the values in the list change okay so this is important We'll add an empty array here and now over here within this particular uh effect over here I'm going to add a asynchronous call using a function to the backend API so I'm going to say constant here I'm going to say fetch challenges this is going to be a sync okay and uh here I'm going to say something like this okay and here I'm going to have the code okay this part is going to have the code to fetch the challenges okay and what I'm going to do is here I'm going to call the fetch challenge something like this so this is a very very simple code that we have written we are creating a arrow function here okay which is called Fetch challenges this function will be responsible for interacting with our backend to fetch the challenges and we'll get the response over here okay and we'll deal with it okay whatever challenges we are getting we'll deal with it and dealing with it meaning we'll set it on the interface and here in the end the last line we are calling this particular function that we created okay this is important otherwise the function is not being called now here within fet challenges we need to make a API call now to make the API call we are going to make use of axus okay or axios there are different pronunciation for this okay but what is this this is a popular JavaScript library for making HTTP request from your JavaScript code okay it's very simple you can make HTTP request to the backend code so I'll just type in the code and then I'll show you also how you can install this particular Library if you don't have it installed already so I'm going to say constant okay here I'm going to say response so I'm going to get a response I'm going to make use of this keyword a wait and I'm going to say axis dot get okay and I'm going to pass in the URL here the URL will go here okay and I also need to import this okay this particular thing so I'll come here at the top I can say import axis from something like this okay I'll save this okay so here I'm getting this error this is not found so if this is not found what you need to do is you need to head over to terminal and you can say npm install AIS like this so this is the command uh like I said it's a JavaScript library so we'll make use of uh this command to get it added and if you come here okay okay I'm getting an error so it says can't resolve HTTP in uh okay so let me scroll down okay it's because I have not added the URL so here what I've done is I have simply like just to demonstrate I've simply made use of this uh this line over here so let me explain what this means so I'm making use of response so whatever response I'm getting from here I'm storing it in response object here I'm making use of await now await is used to wait for a promise that is returned by get over here axis. getet so this is returning a promise and we are waiting for that promise to settle okay so what this means is this line pauses the execution until the request completes at which point the response holds result so until the response holds result we are waiting okay and here I need to add the API so I need to say HTTP and I need to say Local Host colon 8080 slash challenges just make sure that this URL is correct so what you can do is you can copy this URL you can head over to the browser and just paste and see whether you're getting the you can get empty array if your uh backend or the database does not have any challenges or you might get few challenges okay so just make sure that this works just paste it over here save it come back so once this is done you should see this kind of a error response which is expected okay so this means the call is happening but there is some sort of a network error okay our API are working so what is this network error now we'll right click we'll go to inspect and if you go to console to learn more about the error you'll see access to http request over here is blocked so this is where we are making the call and this is from where we are making the call and it has been blocked by course policy all right now what is course over here so course is nothing but it it stands for cross origin resource sharing okay so the full form of course is cross origin resource sharing and it is a security feature that is implemented by web browsers to prevent malicious websites from making unauthorized requests to other website okay now what I mean over here is here we have our backend server as separate okay so this is the backend server Local Host 8080 right and we have the front end server separate which is Local Host 3000 okay now from one server to another server we are making a request so the thing is is is Local Host 8880 which is the backend server allowing our front-end server to connect and fetch the data okay so there is no such allowance that we have done or we have added in the code and that is why by default it is blocking saying that no access control allow origin you can see this okay header is present in the requested resource so so for this to work we need to make a small change right in our uh spring boot application we need to add a single line so we'll switch over to our spring boot application and right here in the controller okay since we want to allow the request to the entire controller we are going to say cross origin okay and here with this annotation we are allowing the request from our front end and we need to also mention over here okay HTTP Local Host okay something like this coolon 3,000 because this is where our front end server is running okay you can directly copy the URL from here or you can copy the URL from here just make sure you copy this and you add it this way so cross origin and within this you have one attribute which says origin is equal to and you specify the URL save this rerun the application okay now after rerunning what we are doing is because we have now allowed cross origin request from our frontend server it should work for us so here if I refresh you can see this is working okay there's no error as such we seeing a static list being displayed right now which is absolutely fine okay what we need to do is we don't need any static data now because we are trying to interact with packen what I will do is I'll just get rid of this can get rid of this okay if you save this okay this is done all right and uh we fetching the challenge we have the response now okay what you can do is you can like let me print the response okay and I'll simply say console. log okay and let us print response let us see how response is being fetched okay just to understand so here you will see if I refresh response is being fetched and printed and here you have this data okay so this is a response object and you have data within which you should see your challenges so let me add a challenge okay so there's no challenge so what I'll do is I'll create a challenge okay if you try to get you have one challenge okay now if you come over here let me refresh you should see one one element in data over here okay so data is where the challenges is being fetched right so if you say response. data here you should see challenges being fetched okay so if I say response dot data and if I save this okay you can see this being fetched okay so now what I can do is I have the data that is being fetched from the backend server so I can come over here and instead of printing it over here this way I can simply say set challenges what is set challenges it is this function here okay I can say set challenges and here I can say response. data like this okay now if you come over here you can see the front end you're seeing March create a new app and this is coming in from where you can see March create a new app and this is exactly what you've added in the back end you can see March create a new app and this is completely Dynamic now if you add more challenge so if I say January create a new website for example okay and if I send this challenge added let me get this you can see March and January are two like additions that we have done okay if I refresh you can see March and January so this is now completely Dynamic okay this is helping you to fetch data from your back end okay so what we have done is okay this is not looking pretty that's a disclaimer which is AB abely fine we will build this slowly but the point is you understand how we are able to fetch the data okay it's not looking good that's okay we'll improve this and we'll get to a point where we have a decent looking UI which looks like this but people it's really important you understand how we fetched the data and how we reached until here okay so learning step by step is the best way to learn if uh you're a beginner or if you're looking to learn something new so that you don't give up you don't get overwhelmed and you don't give up okay so here just to summarize we have this app function okay this app component where we have this state for challenges we have this use effect hook that we are making use of okay okay we missed a semicolon here I'll add this we are like returning this challenge list over here which is accepting the challenge prop and here if you come okay we are simply displaying the challenge with the help of the challenge component again which we have created which is representing a single challenge in our application okay so so yeah that's about how things are working so far and one thing to note over here is challenges is being fetched from the back end right so challenges has a month so if you come over here challenges has these three properties okay so just make sure since it's being fetched from the back end and back end is defining what is being returned to the front end so back end is sending it as month description and ID right so when rendering you should have month description and if you want to make use of ID you should make use of do ID okay if you try to change the name over here because this is not matching from the response that backend is sending okay if there's a mismatch then you will not be seeing things rendered properly okay I hope this was useful and I hope you have a Clarity of how we have been able to connect front end with the back end hey there welcome to this video where we are building a monthly challenge application from scratch with the help of spring Boot and react and yes in the end we are going to deploy this onto AWS server so far we have done a lot in this application we have our challenge list working and now it's time that we built the ability for us to save the challenge into the database and for that we are going to make use of the API that we have created using spring poot so right now we are not focusing that much on the interface okay the interface does not look that good I think it's fine we are learning we're building it and soon in the next step we are going to beautify the interface as well so you are going to learn about that as well so stay tuned till the end there's a lot to cover also if you're new to this Channel and if you're watching this video for the first time check out the description for the link to the entire playlist it's a free playlist I'm putting out to all my viewers you should watch it from the beginning so that you could get some context as to what is happening so head over to the description and get the link to the playlist also if you haven't subscribed liked I would encourage you all to do so also turn on the Bell notification icon to stay updated with new videos also I would request you all to comment and let me know who you are where you are signing up from what do you do introduce yourself I would love to know you more so that's all without a further Ado let's Jump Right In so now it's time that we take this particular application to the next level so right now we have the list of challenges that is being fetched from the backend server into our react application and we need to have so this is a complete UI what we are going to build but we need this kind of a form from where you can add a challenge now and upon addition this is going to be saved into the database with the help of the apis that we have running with in Spring Boot and after addition you will see the list updated okay that is what we wish to achieve okay so we have the spring boot server up and running all right we have a few challenges also that we have added like we have couple March and January and we are seeing those challenges coming in to the application now what we'll do is we'll start adding a form from where the challenges get saved all right so to do that what I'm going to do is I'm going to add a component okay so I'm going to create a new file I'm going to say add challenge. JS over here okay and I'm going to create a function this is the function and I'm going to call this function as ADD Challenge and uh I'll add this here and uh okay we don't have any parameters right now okay and what I'll do is I'll first of all export I'll say default and I'll say add challenge okay so yeah we have this component in works now so now this particular component will have a form so what I need to do is I need to return I'll return something okay and what is that something going to be that is going to be a form which is wrapped in a Dev okay and here I can have let's say I'm going to write simple HTML okay we have this l okay I'll say HTML 4 and I can say month over here okay this is GSX codes not exactly HTML okay you can see a class name this is different from the normal HTML properties okay but uh how this works is this looks exactly like HTML so I'll say form label here okay uh class name actually we won't add right now okay I'll just get rid of this okay so we'll add it later on for styling and all but for now I have this label I'll call this label as month okay so user need to enter the month and then over here I have input okay and I can say type over here and I can say text something like this okay and uh I'll call this will be month over here I'll give this an ID okay and uh I'll say value over here okay now value is month like so okay so shortly I'll tell you why we are adding month over here okay why we adding value as month okay so what we doing is we are binding the value that this input will have okay so the value that this input will have is being binded over here using this uh value over here okay and who are we binding it with we are binding it with the state so the state is not yet created okay we'll just create the state or I can like create it right now let me like just create so that it will be pretty clear as to what is happening okay so I'm going to create couple of States so we are going to deal with month and the description right so I can say month over here and I can say set month okay like this and I can say use State over here okay and this is going to be empty like so okay and uh I'll duplicate this and I'll paste it over here okay and I'll create one more State the state will be description something like this and I'm just going to add description here okay like so okay so the state and the months are created now what we are doing is we are binding this particular field with the month State over here okay and what we need to do is like I'll also add on change over here okay so this is a property that I'll uh create what this will ensure is uh whenever the value is changed okay for in this particular form it is The Binding is done with the state okay so I'll say over here I'll say e okay so this is code that I'll write and here I'll say set month something like this okay and I'll say e do Target dot value okay so we are getting the value and we are setting it with the month using this syntax okay and over here I'll also add required so we need this property to be compulsorily filled right we need this input to be compulsorily filled now what I can do is I have done this okay now wait so let this is wrapped in div we need one more div like this okay which is uh simply like going to help us deal with the description but we also then need a parent div right we need to wrap this entire thing into single diff else we are getting an error so I'll get this diff cut this and I'll paste it over here okay so this is sorted and here I can say HTML 4 so I can say description like so I can add description here okay and and uh I'll just keep daps because this is a label and instead of input I can say text area over here okay the descriptions are normally like a little bit longer okay and uh I can like get rid of this type text ID can be description itself okay value can be description again okay just select this on change uh we need to set the description okay so I'll set the description e. target. value okay so this is how we have created a form right the form is now created now what we need to do is we need to show this particular form right and where are we going to show so we'll come into abjs we'll scroll down here okay and just above challenge list I can add a I can say add challenge something like this okay and I'll close this tag this is done okay and uh yeah so let us see over here so you can see the month and description appearing over here okay ignore the UI again okay UI is not looking that good but we'll build the functionality first and then we'll set the UI okay using bootstrap so yeah so this is done now and uh what we need to do is the challenge part I'm seeing uh not the challenge the form to add the challenge is something that I'm seeing right now now what we need to do is we need to add a button and uh we need to handle the submit okay so I'll just outside this div okay and inside the root div I can add a button over here okay I can say button something like this I can say Okay type over here submit like this and uh I can say submit like so like this all right now what I will do is I need to handle this submit right so what should happen when the submit is pressed all right so this entire form should get submitted so first of all I need to add this entire thing into a form okay so I've not added that so technically this should be inside form right and I need to cut this the ending part of the form and uh or just after the button I need to add this okay now what happens is let me indent this a bit like so okay now here on submit so if this form is submitted on submit what happens so I'll handle submit so this is a function that I need to create okay so this is a function that will be handling the submit okay and I need to Define this function so what I'm going to do is I am going to like come over here just after the states so here what I'm going to do is I'm going to say constant I'm going to say handle submit okay and this is going to be a sync like so I'm going to have this here okay and now here within this function I'm going to have the definition of how I want to handle the submit okay so first of all all I'm just going to say I'm going to prevent default like so okay then I'm going to have a so we are going to make a call here using axis and we are going to save the month and description as a post request onto our back end so since we're making a call to the backen we are adding a tri catch block here okay I also remember here I have not added a tri catch block okay so if you wish to add you can add a try catch over here as well okay so what you can do is here you can come within this you can say try catch okay and you can move these two lines of code within try okay and you can have console. error here and you can say error fetching challenges like so okay and here you can pass in the error object okay pretty simple try catch block is added and you can just save this now coming back over here going to do something similar over here as well okay what we will be doing we will say over here a wait okay so here when making this call we got the response but here we are not going to get the response since we are going to do the post request and we are going to make use of axis okay dot okay we need to import axis all right so I'll say I'll just copy the input okay from here like so okay and here I can say axis dot I can post like so and here I need to copy the U URL okay so I'll copy this URL and uh okay not this URL I copied the server URL one second I need to get this URL here okay you come over here you paste this all right and this is going to be a post request you'll say comma you need to pass in the parameters what are the parameters so here the parameters are month comma description right they will always have the latest value value in the form okay how because you have you are always updating it here okay you're updating it on change as well okay so it is going to always have the latest value so you don't need to worry about it you can just trigger a post request here okay and here what I'm going to do is I'm going to then set the month as empty so since we have done a post request data is sent we need to update the states and the description like this okay this is done all right and uh we need to log the error so we can log the error if needed I can post it over here error adding challenge I saved it okay now come over here okay form looks nice I can say you have March January you can say February and you can say relax and holiday so February is about holiday let me submit submission is done okay let me see if I got any sort of Errors printed on the console no errors so far if you head over to the back end and if you try to get all the challenges you can see February is posted over here but the list is not updated here okay list is not updated if you refresh you'll see the February challenge being shown okay so on submit the challenge is being posted to the back end but the list is not updated so that is something we need to handle now okay so what we are going to do is we are going to have a challenge created uh sorry not a challenge we are going to have a call back function being defined which is going to do the job of refreshing the list after the challenge is added okay challenge is being added but the list is not refreshed once the challenge is added right so we have to do this in the parent component so what I will do is over here uh I'm going to say constant and I'm going to say handle challenge added like so okay and uh I'm going to say over here this is the code that I'm going to have okay and what am I going to do I'm going to just fetch the challenges right what do we need to do we just need to fetch the challenges right and so when we call fetch challenges I'm getting a sort of error it could not find Fetch challenge so one way is I just call this function or I just duplicate this code okay I just copy paste this code here I don't want to do that because in future if any sort of API changes or there's a change in url I don't want to handle the logic of fetching the challenge at multiple places so what I am going to do is I'm going to just cut this entire piece so this entire thing over here I'm just going to cut this from this use effect I'm just going to put it outside here okay so from here we are now calling fetch challenges and from here also we can call the fetch challenges and the error is gone all right simple come over here down and with the add challenge what we need to do is we will pass this particular call back so this is a call back which is doing the job of refreshing the challenges I'm going to pass this as a prop so I'm going to say on challenge added is equal to and uh I'm going to say handle challenge added like so okay over here and uh what I'm going to do this is now accessible or visible within add challenge so here I can simply like accept it over here okay I can say on challenge added like this okay and after the challenge is added like after these have been reset to empty what I'm going to do is I'm going to say on challenge add it I'm going to call this like this okay let us test this whether it's working fine just make sure that you've saved all the files okay otherwise if something is not working the possibility might be that the the file is not entirely saved so I can say test month over here okay and I can say testing adding something like this let me submit you can see test month testing adding okay so this happened without a refresh and if you come over here okay in the postman we had three challenges being fetched if I trigger again you have the fourth one as well all right isn't this amazing it is yes so if you come over here let me come over here let me explain what I just did with this callbacks so here I created this callback which is doing the job of fetching the challenges this logic we actually had but we were not able to fetch the challenge or we were not able to call this function because this was defined within this block so I just defined it or moved it outside the use effect hook and here I passed this call back function as a prop within add challenge component and within add challenge I have access to this now and I call this from here okay we just need to call and the call back function would be called and it will be doing the job of refreshing the list okay and I hope you're getting the clarity as to how this thing is entirely working so that's about the application so far what we have been able to achieve so far is with the help of front end react front end we have been able to consume the API that we have defined with the help of spring boot in the back end and spring boot is interacting with the database so whatever things we are doing over here in the front end are coming directly from the database via our backend apis and uh this data is completely Dynamic there's no static data right now over here okay the UI is not looking that good it's pretty basic but that's completely fine given that we are about to update it all right so that's about uh the addition part of the challenge I hope this was useful hello people welcome and in this particular video we are going to take our application to the next till now we have come very far with our application we are done with everything functional our application is working fine but it's not looking that great of course beautification is also important right so in in this particular video we are going to learn how can we beautify our application and we are going to make use of bootstrap for the same so if you're new to this Channel and if you're watching this video for the first time I would highly encourage you all to check out the earlier videos in this series link for which is present in the description check out the entire playlist and be sure to watch all the videos to get some context as to what is happening with the the source code in this so coming to the video we are going to take a look at bootstrap and if you haven't subscribed and turned on the Bell notification icon I would highly encourage you all to do so doing so motivates me to bring more such amazing free content for you so do subscribe and share this video as much as you so in the comment section do comment and let me know who you are from where you are joining and what are you doing right now in your career whether you're studying or working anywhere I would love to know you so that's all from my side without a further Ado let's Jump Right In so far with the monthly challenge app we have the app functionally working so whatever challenge you add like in terms of month and the description and if you submit it that particular thing is being added into the database and if you refresh you can see it in the list over here so the app is able to interact with the spring boot apis which is our backend code and the spring boot apis work with the database to purs the data the thing that is missing right now is the UI so if you take a look at the UI over here it's not that great all right so we need to clearly work on the UI and for that we are going to make use of bootstrap now what is bootstrap bootstrap is a popular frontend framework and and it is being utilized uh with the HTML components and it can be easily used into Web projects to make your UI much more interactive and responsive with minimal effort okay so if you head over to Google here and if you search for bootstrap this is the official website which is get bootstrap.css okay and uh yeah this is this is what it is so you can go through the website over here okay there are lots of examples out here okay you can take a look at the examples okay so we are going to make use of uh this with react so I'll search for bootstrap react here okay and you'll see this another website which is the react bootstrap website okay so this is the most popular frontend framework rebuilt for react okay okay so this particular thing you can use it with react but this is the official website of bootstrap and this is a react version of bootstrap so I'll click on get started here and you can see over here it says npm install react bootstrap and bootstrap so we don't need both these things okay I won't be getting react bootstrap okay I will be just getting bootstrap so what you can do is you can come over here I will open the terminal here you can see npm install bootstrap something like this so this is ideally going to install this okay you can see it has added this particular thing I'll just close this now okay now what I need to do is if I scroll down a bit here this this code okay so I need to get this okay we will be making use of this particular CSS within our application and and we'll be making use of all the classes that we get access to so what I'm going to do is I'm going to come over here in app.js all right and here I'm going to add this import statement at the top okay if you want to see where this is coming in from so you can go to the project structure and under node modules you'll see a module called bootstrap so let me scroll over here you should see it somewhere over here so you can see this bootstrap so we are seeing import bootstrap slash I'm going to dist within this I have CSS and within CSS you have a lot of CSS files so we are getting bootstrap.min so if you scroll down here we have this bootstrap min. CSS so this is a CSS file that we're making use of it's a massive CSS file okay so you can just go through this I don't know if you would want to but yeah this is what we we are making use of all right so I'll just close this and let us begin making use of this okay so first thing over here if you come to the official website we are first going to make use of containers okay so I will go to The Container here okay so we need to make use of this particular thing container I'll just copy this and I'll come over here so the main div that we have over here okay you can see this is the main div right within this div everything is being rendered all right so I'm going to change the class name over here to okay I'm going to add container here okay and I'm going to say mty hyphen 5 now what is mty hyen 5 let me explain that as well okay so if you search for margin here okay margin and padding all right so Mt hyen 5 is a way to add margin into a element okay so you can see over here m means for margin okay t means for top right margin top padding top so if you use it with P like PT hyphen five it means you are adding a padding of five at the Top If you're saying mt5 it means you're making or you're adding margin of five at at the top that is how it means okay and uh that that is what it is and that is what I have added over here okay now if you come over here if you see the app there's nothing much has changed except the fact that it's all now in the container all right so this is done now what I need to do is I will add some few more classes over here in the H1 tag I need this to be in Center okay so I'll say class name I'll say text hyphen Center here MB so this is margin bottom hyphen 4 and uh if you come over here you'll see this is now centered okay so this is the only classes that we'll make use of in app.js let's head over to act challenge okay over here here is where we have all the like HTML part okay or the jsx part you should say which is rendering or being rendered to HTML so this particular thing over here this entire thing is a form right and if you switch over here okay we need to add a nice form so we can make use of card over here something called as card here so I'll search for card and you can see what do you want to know so about cards you need want to know about examples so I'll go to examples we'll take a look at some of the examples so you can see this is a card this is also a kind of card images in a card okay if you scroll down there are quite a few examples header and footer you can see so this is a card with header so this is a header featured okay and everything has a source code over here you can see like everything has a source code so I'll scroll down a bit and you should see one second so here you'll see these kind of cards where you have a header and uh basically some content inside so if you take a look at the UI that we are aiming to create uh it's similar to this right so this is the exact same card that you're seeing over here so what we need to do is we can make use of this these all classes okay and since we have the CSS already imported U this will be converted into something like this right so we need to have the outer div which is a card over here okay okay and then we need to have the header over here then we have the card body okay and uh within this we have the entire code for the form okay so I'll switch over here and what I would do is here at the top so this is the first div I'm going to say class name here and I'm going to say card and I'm applying a margin over here okay okay when you say my like myy hyphen 5 it is applying margin to top and bottom okay so this is something that I'm going to do and if you come over here you should see like a border added okay so with every change you'll see something happening over here okay and uh here I have form okay so before form I'll also so if you take a look at the UI before form you also have this header right and if you take a look at the code here this is the header so I'll copy this code okay I'll come over here and before the form I'll pasted it here okay something like this like so okay so now this is header and I can call this header as add new challenge like this okay and let me take this to one line single line okay okay so we have this header now what we need to do is we need to add one more div so I'll copy this I'll add this div here and I'll copy this closing div and just after the form I'll paste it over here like so okay so this div now is about I'll say card body right so after header we have the body so if you take a look at how it's defined we have header first so this is the div for card entire div then this is like the entire div has two parts one is the header and this is the second part which is body so we're done with the header now we are adding body so this is the card body and within card body I have this form okay so now if you come over here and if you see the app you can see it's getting into that shape you can see over here okay you're seeing that card sort of look coming in it's just that this need to be better now Okay so I'll come over here we have this div and uh in this div let's say I can say I have I can make use of class name here and I can say MP hyphen 3 something like this okay and uh here so this is a form label right so if you take a look at the form over here here if you go to bootstrap and if you search for form okay like so so here you will see there is a class for form label okay so you can copy this you can come over here okay and uh wherever there is a label so you can paste it over there okay this is a form label and then for the form control you have another class which is form control so we'll copy that also but since we have two labels let me paste it here as well and then we have another class for form control okay so it'll give this sort of a look you can see this look over here for form forms that is the look you will get and I'll just paste it over here and I'll paste this over here so save your code come to the browser and take a look at the app you can see it's starting to get decent you can see right the button is not looking good right this button is still out of the frame so if you take a look at this button here submit button you can see this button has this class button and button primary so whichever element you like you can pick up the classes for that right you can come over here and you can paste it something like this okay so I'll just take this and I'll replace all the class with class names okay since we are writing jsx okay so we'll stick to this okay so it's done and now if you come over here and if you take a look at our form you can see okay the form is looking pretty decent all right but the thing is there needs to be a little bit of margin okay at the bottom you can see it's pretty stuck it looks almost overlapping this text area what I will do is I'll come over here okay we have a class name of margin 3 here so I'll apply the same thing here also and I'll save and if I come here you can see now it's well placed all right so you can see how decent it is looking right now okay you can even add a placeholder so if you come over here or if you see this this thing okay uh I don't see see a placeholder here but let me go to inputs okay so I'll search for inputs that will be better inputs so I've come to input group over here and you can see this placeholder okay now this placeholder is coming in because of this placeholder is equal to use name so I'll copy this let's come here okay I'll just zoom out a bit and here I'll paste it like so so this is the placeholder for month so I can say example okay and I can say January like so okay and uh I'll paste that same thing here okay in here I can say describe the so we can add whatever placeholder we like but I'll say describe the challenge okay describe the challenge and I'll save this and I'll come back to my UI and you can see it's looking very decent now okay very decent we see a lot of improvement here okay so we have done we are done with the ACT challenge part okay now I'll save this and let's go to the list part so here in the list uh we are actually not doing a lot of rendering but if you see we have this diff and within this div everything uh like all the entire list is being rendered so let us go to list part okay let us see how lists can be rendered so this is a list group so this is how this is one way to render a list okay basic this is active items list with active items disabled items okay if you come here come down come down you see quite a few examples so this is the kind of example that we would want if you see over here okay there are two lines okay or two pieces of information but we don't want this notification part okay so if you scroll down if you scroll down okay this is this is what we need right custom content right so we will make use of these classes so if you see here so here we have four elements we just need two so here we don't need uh I would say three days ago this part and uh we don't need add a small point so this we can skip these two things okay so what we'll do is we'll copy what we want so I need this class so I'll come over here and since this is the one that is rendering the entire UI of list I can say class name list group and if you add this okay you don't see major changes little reflection in the UI after you add classes but yeah you'll slowly get there so now we are rendering it from The Challenge component right so what we need to do is we need to go here okay and within this the challenge. JS file we need to update this all right so if you see over here this part this is ahre I'll just copy this we need to render one element right here because this div is coming from challenge list okay so I'll just come here I'll paste this thing here okay you can see now what we need to do is this a this a tag is being returned all right we don't need this part correct we don't need this part so I can get rid of this okay now we have a tag these are the classes we'll keep this classes as it is okay this is the div class and what we can do is uh I will I have this div class this is div content between this is H5 now within H5 I need month so I can take this I can remove this and I can add a month okay and then within uh P tag so there is no P tag okay P tag we deleted actually there was a P tag so if you see this is some placeholder content in the paragraph you can see this this one so this is something that we can make use of okay so if you see see over here right now we have small which is 3 days ago so we don't need that so I'll add B tag over here I'll take this I'll add it over here okay this is done now we don't need this part the old code we can remove this okay now if you see now if you come here oh so everything is blue interesting let us see why it is blue so it's blue because of this active uh class over here so this first one is active Okay and we replicated that first one across everything so I can just get rid of this I can save and I can come over here and see this so now if you see over here you have uh decent looking UI okay but we are still not there yet okay so if you see over here P tag is outside this div here right and by mistake I took this inside right over here because I added the P tag later so I'll just move this outside so that it's then on the new line okay you can see over here okay it's getting there right so it looks exactly now if you see over here it looks like this right this is the screenshot that I have and this is how it's looking okay so it's pretty simple we made use of this rade code over here to like beyy our interface right our list in fact I should say right so earlier this was inside div here so this div so if it's inside div it will come on the same line okay I had to move it outside div to bring it to the next line because description can be longer right so it's better if it's in the P tag right so I'll save this and now we have our app up and running it's looking beautiful as well right we'll test it you can say April and you can say April challenge lose 10 kgs something like that you can submit see over here right it's being added here so if you go to the back end part here Postman and if you try to get you'll see it's being added here okay so it's indeed working perfectly fine end to end you can see how our app is working so if you add anything over here it's being saved in the database with the help of our spring boot rest apis so this is just a demo okay as to how how you can make use of bootstrap if you wish to go further you can explore if any more sort of elements you can add and all everything is over here so you can select any kind of component that you wish to add okay you can see your different lay layouts over here you can go to grid you can see how you can make use of them bootstrap is amazing so you can you can see over here select so these are like different select options okay you can see different select options and you can play around with this see this is the vertical like all the options are available it's sort of drop down but not exactly drop down this is disabled one okay you also have radio options radio buttons and uh check boxes here there are lots of things breadcrumbs if you wish to add them to your website okay a lot of things progress you can see here you can show the progress bar something like this okay if you wish to different backgrounds even even small things like buttons there are so many kinds of buttons you can see primary secondary success danger warning info light dark and Link okay so just play around this is a different style Al together of buttons okay you can see all the classes you just have to pick classes and put it okay and if if I come to our code we are not making use of class name here which is something I forgot okay this is jsx so I'll modify this to class name okay okay this is done so everything is done now and our app is working perfectly fine like we saw so I hope this was useful I hope you'll create Something and update this particular app and also share it with me hello everyone welcome to this video so in this particular video we are going to deploy our application onto a remote Cloud Server and we are going to to make use of AWS for the same so if you are new to this channel watching this video for the first time do watch the earlier videos to get some context the link is in the description to the entire playlist so we are building a complete application from scratch using spring Boot and react so this is a complete full stack app development course where we are learning the nitty-gritties of building the application how to use springboard how can you use react and even how you can deploy and deployment is what is covered in this video so if you have never used AWS don't worry at all this is completely beginner friendly I'm going to break down everything in very simple terms for you all and I'm going to show you step by step what are you supposed to do in the dashboard and where you are supposed to click why an option exists everything from ground up okay so if you have never used jws don't worry you will be able to deploy your application onto AWS Cloud also you don't need a paid account or you don't need to spend to deploy our application since we are learning we will be making use of AWS free tier AWS allows you to create and sign up for a free account so we'll be making use of that and learning how you can deploy but for production grid applications you will need a paid account but since we are learning we don't need it for this tutorial so that's all from my end if you haven't liked subscribed turned on the Bell notification icon please do so this is friendly reminder also comment and let me know from where you are joining and watching us who you are what you are doing currently I would love to know more about you so without a further Ado let's Jump Right In so now we have an application up and running we have the react front end which is running on a server this react front end is talking to the apis here which is running on a separate embedded Tomcat server and then we have a database which is also running separately okay right now we are making use of H2 but we can easily switch to a separate database server if needed like POS or MySQL now how do we get this application Live up and running on a server or on the Internet so for that we are going to to make use of AWS now what is AWS if you are new here AWS is Amazon web service all right so here you can see this is the ad and this is the official website aws.amazon.com so you can switch over to AWS and here you'll see like start building on AWS today so this homepage keeps on changing a lot all right but you can explore this complete your website you can see these are all the services that Amazon offers okay there are lots and lots of services okay so you can just go through the website but what I'm here talking about is you are going to need an AWS account if you wish to deploy your application that we have built right you won't be needing a paid account okay so if you search for ews free here you'll see like this link over here this this is the link to the free tier of Amazon on okay you can see so if you are new to Amazon you get free trials you get 12 months free access to a certain services so you can like take a look at uh different services and what is free in that services so for example ec2 is one of the services you get free tier of 12 months which is 750 hours per month okay you can read what all is included and what is Not So Different Services have different things like for S3 you have 5 GB of standard storage for 12 months free okay which is good so you can explore this free toer even if you come over here on uh aws.amazon.com if you click on get started you'll be taken to the same page okay so I just thought of showing you this separately like how you can Google and come to that same page because I'm not sure like if they change the homepage in future of course you won't be able to find this link but yeah you need an account for getting this for free okay also if you are starting any sort of service in your AWS account be sure to shut it down later on okay because you are being built for per usage basis okay so for number of hours and all so different Services have different terms here for S3 you're being buildt for how much of storage you using so you can see these are all hourly things okay so for the number of hours you're going to be built and also number of data like how much data is are you storing so be sure to shut whatever you are using once you have tested of course if you're creating a production grade application it makes sense to keep your services up and running so that users across the internet can access and use it but since we are learning okay we can sign up for a free account you can learn and then you can shut the services to have free credits for some other project okay so I would encourage you all to create a free account okay click on this and get a free account set up the account creation process is fairly simple like you will be asked for some information about yourself who you are and everything okay and if you have an existing AWS account you can even sign up for that all right so just do that step I already have an ews account so I'm going to sign in to that so after signing up you're going to be presented with the dashboard that looks something like this okay you will have uh different Services access over here you can search for services okay from here search bar you can take a look at all the service and so on okay but before playing around with AWS console let us switch over to presentation and let us understand what's happening right now with our application so this is a overview of how our application is working this is our spring boot application here okay you have this hosted on a tomcat server which is embedded you have controller service and repository you have a separate database now this database right now is H2 database but of course you can have a separate database like BOS SQL or my SQL okay so here you have the react application which is running on a server itself like Local Host Co 3000 that support like how we are running it locally and you can access this react application from the browser and using Postman you can access the apis okay so you can directly bypass the react application and access the apis as well all right so this is the entire application and the entire flow so whatever like interaction you're doing with the react app or the postman the response flows in this direction like it goes from controller service repository and then it talks to the database and then comes back so that is what you're seeing over here the response back now let us talk about how we are going to deploy this so to deploy this we we will be needing few ews Services okay so react app needs a server okay so we are going to host it on S3 now what is S3 I'm going to explain this to you shortly we have the springboard application which also needs a server and right now locally it is being run on a local server that is embedded Tomcat which we get itself with the spring boot but we are going to host it on ec2 instance and database is running on RDS in the Amazon web service account okay so RDS is a service so let us talk about what is S3 and uh what does each mean okay so first we'll understand RDS now what is RDS so RDS stands for relational database service it's an Amazon service okay it's it's called Amazon RDS as well okay so it's a service for setting up operating scaling a relational database in the cloud okay so like we know like Amazon or AWS is offering us cloud services and these services are hosted in Cloud so if you need a database in the cloud you can make use of Amazon RDS okay so that is one and whenever you set up RDS you get options to choose the database engine okay like in Market if you see there are different database vendors like POS SQL MySQL Oracle SQL Server so with RDS you can select which database vendor you want so whether you want to use postra SQL my SQL okay there is a stepbystep uh form that you have to fill in when setting up the database and if you go over here to console okay you can simply search over here for RDS you'll see this managed relational database service okay you can go over here and you can take a look at the dashboard okay there won't be anything over here okay and in uh your account if it's new but uh but I'll I'll walk you through as to how you can create your database okay but this is about RDS now what is ec2 okay so ec2 stands for elastic Cloud compute sorry it's not elastic Cloud compute it's elastic compute Cloud I'm sorry about that okay so it's a service uh using which you can host your applications into a cloud okay so it's like you're getting an ecy to instance which is like a virtual server in the cloud you can think of it like a virtual server and you host your application over there you move your source code over there and then your application runs in the cloud okay that is how we are going to make use of it but we are not going to make use of ec2 directly okay what we going to do is we are going to make use of something called as AWS elastic Bean talk okay so this is a service which helps us deploying applications okay so that is something that we are going to make use of over here okay then talking about react app we are going to make use of S3 okay now what is S3 S3 stands for simple storage service okay so you can host your static files images all of that on S3 server okay so if you're building an app image upload app let's say or if you're storing profile pictures product images in your application you can make use of S3 bucket okay so there are buckets in S3 you can create buckets okay and buckets is nothing but a group of object all right so since the frontend application will have static files like HTML CSS JavaScript and so on you can make use of S3 over here so these are the services that we are going to use okay so first thing what we need to do is we need to set up a database so here in the Amazon auds okay you will have this entire dashboard what you need to do is you need to come over here and you need to say create a database okay now when you say create a database you will see that you have this form right so you have this how you want to create the database like choose the database creation method so do you want to create in a standard way or easy create so depending on what you choose it will change the options below okay easy create will show you few options so that the form looks less overwhelming standard create will'll show you some more options okay you can like configure a bit more all right but here you'll see we don't have option for the H2 database right you can go ahead with my SQL or POS SQL but I'll select posr SQL over here okay if you scroll down you can select any database engine by the way you can see all the options here okay if you scroll down here it will ask you for version you can choose the latest or have the default one selected this is important so here it is asking you what sort of template you want to use what is your use case over here okay so our use case is learning right unless and until you're using it for production you can choose the production over here development testing also is an option you need free tier we don't want to pay anything okay now depending on what you select over here like these options will be enabled or disabled okay so I I'll stick to free tier I don't need a multi aset DB cluster or something like that okay database instance identifier okay so you need to enter the database instance identifier I'll say challenge app something like this and uh you can scroll down it's asking you for credentials so you can see the master credentials over here okay so you can enter the credentials what are your credentials that you want to have so let's say my username is posis and uh I'll enter the password as well okay you can enter any password that you want okay so password thing is done then you scroll down okay here since you have selected free at the top here you'll see micro being selected okay now if you change this to something else if you want to change this to something else others are expensive you can see like this is the capacity of the instance so here this is a very basic instance like a small instance with two virtual CPUs 1 GB RAM and uh this is a network okay if you want to switch to a better version like 8 gig ram or 16 gig ram you have to pay more okay but I don't want to pay I'm just playing and uh learning over here in short not playing I'm learning okay SSD what is the storage that you want so it's 20 by default and minimum is also 20 as you can see over here and minimum is what we'll go ahead with we are not going to have that much of data okay if you scroll down here okay you have all the different settings okay this is important Public Access so do you want a public access or public IP to this database we need to choose yes because we are going to access this database from our spring board application as well right so I'll have this selected scroll down and uh I don't think there is anything else that you need to keep in mind okay it's a 7-Day free tier just have that selected and uh scroll down estimated monthly cost so if you see any cost over here it means that you have selected some of the paid options okay so I'm not seeing any cost over here okay so I what I will do is I'll just stick to this and uh it's it's clearly telling me that there is free tier available to me for 12 months so once this is done and you're sure all the settings are right you can hit create okay oh so master password is invalid probably I gave it a very simple password okay you need to make sure you follow these guidelines okay so once I change the password I come down and I say create the database okay you'll see a small loader here the database will begin creating okay you'll see this popup I don't need any add-ons so I'll just close this but we'll wait for a while until this database is done creating and this will take some time okay this creation process will take some time now what is happening is we will switch over to this diagram so this RDS setup we have done okay we'll get get all the credentials for that okay now here for deployment we will be deploying using a jar okay we'll be creating a jar file of our application and then we'll be deploying okay and also we need to make sure that we are pointing to a postgress uh SQL database because in RDS we have created the engine or we selected the engine as postgress SQL okay so we need to switch to postgress SQL and for that we'll switch over to start. spring.io here I'll select Maven I'll say add dependencies and here I'll say posis SQL driver I'll go to explore and if you scroll down here you'll get this dependency so just copy this dependency okay just come over to your application here go to pom.xml just add this dependency this is important because we now need our application to work with the PA SQL database and why are we doing this so that it works in production okay I'll just refresh this also I would say to to not have any problems I will also comment this out so we don't need an H2 database if you're making use of pogress right so this is done okay now what I need to do is I I need to add some settings into the application. properties so since we have changed the database okay I'll go to application. properties here okay we'll add some properties that are specific to POS SQL so this is specific to H2 database I'll get this commented okay so I would encourage you all to add these properties okay which is the spring data source URL what does this do this is giving you or helping the uh application to point to a URL of database okay so this is the this tells that this is a postgress SQ database this is the URL of the database this is the host name and the port and this is the database name okay this is a username password using which your application can connect this is the platform of the database we are making use of postc SQL then you have this uh ddl Auto create and drop so you want uh things to create and drop okay so every time you make a change to the schema the hibernate which is inbuilt uh in Spring boot okay on which spring boot runs essentially okay so what it's going to do is it is going to create and drop on alter based on uh if if you are doing any change into the schema and this is the platform okay so you may need to add these settings and we also need pogress SQL database okay so now since we need the pogress SQL database if you switch over to Amazon RDS over here okay you will see that the database that we had created is up and running you can see the St is available now and you also have access to the endpoint over here so this is the end point all right and since when setting up this database in the cloud we had mentioned that we need this to be POS SQL database so the database engine of this is posp SQL and what we can do is we can copy this URL endpoint I'll switch over to intellig I'll come over here and here in the URL part over here instead of Local Host I can happily add this URL here something like this okay so this URL I'm adding I have this port number we have this database name which is pogress here I have the username okay and here I need to enter the password so I'll just enter the password also if we deploying this via elastic bean stock we also need one more property over here and the property I'm talking about is the server Port property so I'll say server. Port is equal to to 5,000 so if you're installing or if you're deploying your application via the elastic bean stock which we actually doing in this video be sure to add this property all right I'll also change my password over here all right so I have made the necessary changes now what we need to do is we need to make use of Maven to create a jar file right so we would be deploying our application onto elastic pin stock in the form of a jar file right and and uh one way is you come to like the browser and you install Maven so you can search for install Maven okay and you'll come to this link you have you have a way to install Maven if you want to but if you're using spring boot you already have access to Maven wrapper so if you come over here okay here under mvn you have this folder called wrapper which has maven rapper. jar so we can make use of this as well to create a jar file of your spring boot application how I'll show this to you so I'll head over to terminal here okay and uh if you open the terminal from intellig it will be opening in your project directory okay which is okay now I need to run this command here so I'm going to say/ mvnw package okay and I'll press enter now the moment I press enter you'll see this kind of processing happening over here okay and uh you should see okay you can see GPA and all is also working all right and uh you should see everything worked fine okay there is there is no issue as such even GPA uh was configured successfully you can see over here create table challenge this also worked successfully which means that uh the connection to the database that the remote database that we have configured in the form of RDS has also worked and there were no issues you can even run your application over here and test the apis whether it's working perfectly fine after you switch to remote RDS instance okay now what has happened is this worked fine we have the uh jar file created over here so you can see replacing main artifact you can see here this is the location so within your challenge project within your project directory Target under under Target directory you have the job file so if you go over here under Target you have this job file okay this is what we need to deploy this is autogenerated I mean we generated it with the help of the command okay now what we need to do is we'll come over to our browser now here in the browser I have RDS running and uh what I need to do is I need to head over to services and I need to select elastic bean stock over here so if you are having any sort of uh applications or environment created previously like I do okay uh you will see a screen like this okay but I would request you all to click over here elastic Bean stalk and if you're new uh to elastic Bean stalk you'll see a welcome page like this all right now what we need to do is we need to create an application so I'm going to create an application over here and you will be given steps over here you need to follow these steps okay and get your application up and running so I'm going to say over here challenge app okay and new I can you can give any name over here the name that you give over here you can even add a tag and the name you give over here will also Define the environment name over here it is autogenerated okay if you go down here you can uh select the platform so I have I'm deploying a Java application spring boot of course runs on Java I'll select Java if you scroll down you'll see platform and everything being Auto populated and you can leave these to default because it will of course select the default versions and the recommended ones you can scroll down you can change this if you have any version specific requirements all right now here it says sample application so I'll say I don't need sample application I need to upload my own code and the version can be V1 and I'll be uploading using a local file okay because we are uploading a jar file so from here I'm going to choose the file now when choosing the file navigate to the Target folder where we have generated the jar file and select the jar file okay then scroll down be sure that you have selected single instance over here which is free tier eligible which means that you won't be charge for this all right if you have any other requirement you can select those I'll go next and here you have some service access that you need to configure okay so do you need any services to uh be accessed okay also if you go to the previous step we didn't see the option related to the database okay so okay so there was no option related to database here so I think we might be asked the same in The Next Step so I'll say next over here uh here we'll leave defaults we'll go next okay here you'll see you will have option to set up networking database and all okay so if you scroll down here you have the option for database here it's in the third step so you need to enable database here all right and uh so this option allows you to integrate an RDS SQL database with our environment okay so when you are deploying your application using elastic bean stock you are actually creating an environment and also an application okay so an application is created and along with application and environment is created to run the application okay and and uh what we doing over here is we are telling AWS that hey I also need access to RDS SQL database which we have already created so if you go over here we have already created the RDS database okay here this is the database so we need access to this database because our application uses this okay so what I can do is I can select it from here challenge app snapshot I think this is the one okay so it will select this okay and uh I don't think others are so this is the this is my be sure to identify the right one okay everything else will be autop populated here you need to enter the password over here okay so I'll add my password like so okay and uh then you scroll down here okay and you might be asked for tags over here so I'll just say next it will take some time to load normally so it depends on your internet connection and uh sometimes it just takes time I don't know uh the reason for this and if you scroll down here so you can like configure these settings if you need any custom configuration but uh I I won't be touching anything I'll just skip to defaults and I'll skip to review over here okay now we'll review the changes and we will say deploy so you can see this is our review over here I have uh like some Services over here I'm so you can see environment information here this is our application so like I said there is an environment that is created and also the application that is created over here okay if you scroll down you can see this is a platform okay here we have configured this database okay which is hosted on RDS here are some default configurations and if I go go down here I have some environment properties as well okay so we might be needing or we might be wanting to change the environment properties later on but let me show that to you so let me show you the default Behavior if you say submit all right the changes get submitted and AWS will begin creating our environment and the application okay and this process will take a little bit of time and you have to be patient with it okay so right now the details are being submitted and you'll see like uh it's it's actually like you can see over here it's launching our environment and it will take few minutes so I request you to uh be patient for a while since we are we have just created this environment and the application it will take time and you can see here applications and environment tab you can see the application and environment that is being created for your application okay so I'll just pause this for a while until this is created all right so our application is up and running you can see environment is successfully launched and the health of the application is okay so this took some time I I should tell you I had to wait for a while okay to get this up and running so but we are here now you can see all the events that occurred that happened actually during this entire process okay and it took around like 10 minutes for itself to set up all right now here is the URL of your application that you have got if you click on this and if you open it in a separate tab you'll see okay you you get this error over here okay now we we did not get the 502 Gateway error so if you're getting the NX Gateway error what you can do is you need to go to the configuration tab over here okay and uh let this load uh it's taking a little bit of time so here if you scroll down here you have environment properties okay what you can do is you can click on edit over here you can scroll down and you can add over here server underscore Port okay and you can add 5,000 so why we adding 5,000 because here in the application properties I had said that okay so this is is only if you're getting the 502 Gateway error I'm not getting so I'm just going to do cancel and uh I'm getting this white label error page which means my application is successfully hosted and I can access challenges in point okay something like this you should see an empty array because the challenges are not yet created you can see over here it's an empty array okay which means our application is done and it's successfully deployed you can head over to the application St Tab and you should see the application over here running in this environment right you can also see all the environments that you have over here okay this is one of the test environment that I uh was testing something with but here this is the environment that we have just created okay and you have access to change history so you can explore these settings if you need okay also if you switch over to the diagram here now one question you will ask hey feil you said we are deploying it on ec2 but youing using something called as elastic bean stock what is that and how does it differ why have you not shown us ec2 so here if you go okay what is elastic bean stock so elastic bean stock is like a platform as a service okay now what I mean over here is uh this is a service that is being offered by AWS okay so what this service does is normally deployment has a lot of things right you need to manage the infrastructure you need to upload your code to the server configure your server create an environment for the application to run all of that now what happens is given that this thing was a little bit complex Amazon created elastic bean stock using which developers can easily deploy their application and all the underlying nties is being abstracted by elastic bean stock and managed by it okay so if you go over here to services and if you select ec2 you can even search for ec2 okay and you can see the description virtual servers in the cloud let me open this in a new tab you'll see you have one instance running over here okay and you can see the challenge app is running over here okay so what is happening is elastic bean stock is deploying your application using ec2 in the background okay and uh here in the front end when you're using elastic Bean so things look really easy for you okay so you what we did we just said create a new application we just went through the steps we just uploaded our jar file we just told elastic beanock what we need and what services we need do we need to connect to RDS and all we just mentioned the configuration that we need what elastic bean stock did is it figured out what all it needs so it created an application it created an environment for it to run all of that okay and our application is up and running you can see over here okay and in the hindsight like in the background behind the scenes it also created ec2 instance and got our application up and running over there okay so actually we are making use of ec2 okay but why elastic pain stock and that is why I mentioned ec2 over here and not elastic pain stock okay so RDS is done ec2 is done now we need to host our react application so let us talk about how can you host react and for that we will switch over to visual studio code so now over here we we are in Visual Studio code and what we need to do is we need to prepare our application for deployment all right so first thing we need to do is here we have everything pointing to Local Host okay so what we need to do is I will head over to the browser okay I'll head over to our deployment here or the environment and here we have the domain okay so I'll get this domain okay and I'll replace The Local Host over here with this URL okay you can see this replacement is done here all right looks good all right this should work and uh okay this is one URL also for adding the challenge there is one URL over here okay so we are doing an API call over here as well so I'll change this as well here something like this okay just make sure that you entering the right URL over here and and also you're saving the file okay so now your application is pointing to the uh server over here okay so I have HTTP two times over here okay so be careful when you are copy pasting uh let me check over here okay here I don't have HTTP which is all right here I have which is all right so URL looks okay all right just be sure to save the changes and here now on Terminal we need to run a command so we need to run this command called npm run and I need to say build okay now what this command will do is this will build our react application to create production ready version okay now there is some processing or there are some set of files that we need over here which will be the static files which we'll upload to S3 bucket and we will be hosting our application there and this command will create those static files for us okay so right now we have node modules public and SRC let me run this command now the moment I run this command you'll see some processing happening and here you will see a new folder appear which is build folder okay and we'll wait for the processing to finish okay this will take couple of minutes and you can see the processing is done now if you come over here we have this new folder which is built and this is a folder that we will be uploading onto ec2 okay let me sorry not ec2 this will be S3 pocket okay on S3 so I'll switch over here okay and if you take a look at the diagram here we are hosting our react application on S3 so I'll come over here here I will go to services and here you have S3 which is like scalable storage on cloud now here you can host static files okay I have few buckets already created okay I'll create a new bucket okay you can create a bucket here you can say general purpose you can say bucket name is challenge app and you can say live version whatever name you want okay you can scroll down acl's disabled okay so here you need to configure things and we'll stick to default settings except that we'll remove this check so we want uh public to access like we want Public Access right because we want this to be hosted and accessible to everyone okay so I'm just going to uncheck this one okay uh also uh be sure to choose the region over here so we are not seeing the option to choose the region okay but but yeah if you uncheck the block all public access you you have to acknowledge this okay and if you scroll down you have bucket versioning you can choose the settings that you want over here okay I'll say create bucket okay so now the bucket is created over here okay this is the bucket live version what I can do is I can upload all the files from the buildt folder so you need to select upload here you need to head over to add files and uh I'll head over to Spring Boot and I would navigate to the project folder now the under project folder you will have this build folder that we have just got created I'll select all the files I'll say open so just upload everything okay and uh then what you need to do is you need to say upload over here okay so this will upload and you should see all the progress over here okay now what you can do is here we have uploaded everything everything has succeeded so I'll say close and here I'll uh switch over to properties okay and if you scroll down here okay here you will have a settings okay here you have the setting at the end which says static website hosting so actually we are hosting a website right and this is disabled so what you need to do is you need to enable this okay and you're seeing host a static website and you need to specify the default homepage so I'll say index.html okay you can also specify the error page but we don't want to specify right now all right and uh I'll just say save over here okay now the moment you scroll down to the same setting static website hosting you'll see this URL that you have got access to and if you click on this okay let me click you'll be taken to the web page over here okay so now you're getting this error 4034 bitm now we are getting this error because we might might need to do one more additional step to set the bucket policy okay so what I will do is I'll Google S3 bucket policy for Public Access okay so you can Google something like this and you will see few URLs appear and you can select this URL over here from the ews so this says setting permissions for website access I'll choose this and here you'll see that we need to like uncheck this block all public access which we have done already while creating the bucket and also you need to add the bucket policy okay so what we can do is we can copy this policy okay this is a policy we need to add and you can see the steps over here under buckets choose permission under bucket policy you need to choose edit and just paste this over there and save it also we need to update the bucket name here with whatever name we having so I'll come over here in our S3 bucket I'll go over here at the top okay and here under permissions we need to so here you can see block all public access okay I guess this is off okay because we had done this during the creation and here we have bucket policy and there is no policy that we have added okay you also have a link over here to uh learn more about the bucket policy so you can click over there and you can learn more all right you can see there are a few examples as well so you'll find example policy es uh also uh if you wish to do a particular settings okay so so yeah this is this is the this is that page over here but I'll say edit okay I'll paste my policy that I have copied I'll copy the bucket Arn you can see this bucket name appear over here and I'll paste the same over here like so don't make any other changes like there is forward slash and star leave it as it is I'll just paste this over here and uh I'll just simply say save over here it's saved okay it is done and now let us refresh this let us see if we are able to access okay we are not getting any error let me see so no output is coming in let us see the console as to what is happening now if I switch over to the console you will see that the CSS file is not found okay let me troubleshoot this so CSS in the build folder is under static okay and let me see if static folder exist on uh my S3 bucket so here if you see if I refresh I don't have the static folder uploaded so I guess it did not get selected when when I was uploading so be sure that you're uploading everything okay I'll tell you what happened I I understood so here you added the files right but to add the folder so if you see static is a folder right so even though I selected static it was not uploaded because I had uploaded individual files okay so you need to upload static as well separately and uh you need to upload all of them okay it's says upload and we'll wait for a while it will take some time and uh once it's done okay we should see the confirmation and the close button here so you can see now you can see the static folder okay so be sure when you say upload you add the files first and then you add the folder as well if there are any folders folders won't be uploaded by default that's a lesson right so this is done now and and uh we'll hit refresh and here also we need to hit refresh all right so we see the monthly challenges interface you can see the application is now hosted on Amazon you can see this is the URL that we have got from S3 or Amazon service okay now here you can see and on the right hand side we you have already starting to get errors okay and one of the errors is a little bit familiar it says that the website has been blocked blocked by course policy so this error looks a little bit familiar where our application has been blocked by course policy okay and uh I believe you must be knowing what this issue is so right now what is happening is if you come to intellig okay we need to enable course right in intellig in our controller so if you head over to our controller file here you have enabled access to back end from Local Host but you haven't enabled access to our application from the remote website or from the remote server which is this one right you haven't enabled that so you need to enable this so to do that what I'm going to do is I'm going to copy this URL because this is a URL that we need to allow and I'll come over here okay and I need to also keep the access for Local Host right so I'm going to add something like this okay and I'm going to add one more value over here separated by comma like so okay so I'll change this to new line and you can see like there are two values that have been added okay something like this I can save this okay you can now head over to the terminal and you need to generate a new jar right because we we have made a change to our application code right and we need to make a new jar and that new jar we need to red deploy to our application so that our front end works okay so this new jar will be generated now okay you should see is Success okay it's it's done build success now what I need to do is I need to head over here to our uh elastic bean stock I need to click on upload and deploy here on the right hand side I need to choose the file okay so I'll go to the JP like my project name is jpa I'll go to the Target folder and I'll select the Char you can change the version if needed version label here and you can say deploy so this will take some time for this new deployment to happen but it won't take a lot of time as compared to the first time deployment okay so we'll wait for a while until this completes it hardly took 3 4 minutes for this to update okay but now if I head over to our front end application and if I say refresh we don't see any errors okay and now here if I add anything January and if I say description like this okay if I save this or submit this you'll see it's working and now this is the actual live application so here this application is running right now on the Amazon web services where you have the front end beinged deployed to uh Amazon S3 you have uh the spring board application deployed to ec2 instance via elastic be stock and you have the database running in Amazon RDS you can test this you can refresh you can add more challenges if you want February create app something like this you can even enhance this app if you need okay but here's your little project and this is how you have deployed it okay so you have browser from browser you can make a call to your react application like we are accessing and react app will interact with ec2 instance to like get the code running and your code will interact with database that exist on RDS okay and uh you can even access the aps directly via Postman as you can see I hope this was useful and I hope you have learned a lot by building this