MERN stack e-book store | Part 2 | Full Stack Kindle Clone | GeeksforGeeks

Key Takeaways

okay guys we are live so hello everyone and welcome back to gigs for geks guys in this video uh we are going to basically create the remaining part of our Kindle application that is the back end part so the back end was actually remaining and uh just a minute guys okay just a minute I'll come back H say okay now gfg shirt is here okay uh okay let's begin so now guys uh in the part one we have created the live session for part one so what actually happened there is we created a front end we created the reactjs application in nextjs so basically we created some pages like login sign up read all books uh get data of specific book and then read data inside the book that means the PDF or whatever you want to show so we are going to show the PDF so this project is like a complete monack application and it would help you to get started properly with M Stack and I'm not adding a lot of security stuff here because we only got two session one session was for front end this is second session this is for back end so uh this is majorly focused on creating books reading books getting all books and login API and sign up API okay not the security part not the payment part because we have limited time right so let's begin guys I'm going to show you the previous day's code which we did previous videos code so it was actually um this one right we were working on this one so I'll just open this with vs code just a minute guys okay so you can see that this is what the the next year's front end and this was what the back end back end is right now empty we are going to create back end now okay so let's focus on the front end first of all I'll just open this an integrated terminal and I'll just start this so I'll just say npm run Dev okay so I'll just start this now uh we don't have time for the hosting part but I'll just explain you how you can host it in short so uh very simple if you want to host these kind of one stack applications or men stack that means nextjs instead of reactjs so if you want to host these kind of applications for free you can actually use verel for hosting the front end either nextjs or reactjs whatever you are using and for the back end you can use uh different free platforms you can create a free one year AWS account that would also allow you to host your backend using easy to instances you can host your backend there for free for one year or there are some free tools you can just search on YouTube how to host node just back end for free okay you'll get a lot of tools okay so uh yeah this is it hosting is free you can just search for backend tools okay right now I'm not aware of any free backend tool I usually use AWS so I recommended that okay so uh let's talk about this front end it started at Local Host uh 3000 let me just check if everything is fine yes guys so you can see that it has started in Local Host 3000 fine now here guys we need to create the sign in and sign up part okay how we can create this so the UI is already created we created this in the last live session you can check out this at Channel Geeks for geeks you would find the UI part we created it and also I have shared the source code okay so you would find this so to get the source code what you can do is you can just go to GitHub and uh you would find my front end source code so Kindle M gfg you can see that this is the front end source code front end code is available here similarly I'll upload the backend code and also I have to update the front end code today by applying apis so I do that and I'll also show share the latest code front end and back end separately okay so our main task for today is to create API for login this this is sign up page to create API for sign up page then to create API for login then guys uh we need to create API for getting all books okay you can add more filters like category and so on so uh let's wait I think there is some [Music] issue no it's fine but I don't know why it's taking time okay so for the first time it takes time so you can see yeah we created this inner page so here we want to get all books right now we are showing dummy data now if I click on any book uh again you can see this is a specific data of a specific book not all books this is specific data of specific book with the help of this book ID if I click on start reading there was one issue the we were not able able to read this page for some reason so let's see first of all what was the issue here so you can just go to SRC app page after o and read and page. TSX okay so this is basically page. TSX the spelling was wrong okay the spelling was wrong right so the spelling was wrong and also I'll just make it capital okay that's it so this was the mistake which I did in the last video I don't know why didn't fix it in the last video itself but yeah this was the mistake and what else uh we don't have the CSS file let's see why don't we have the CSS file again we didn't create the CSS file so I'll just create the CSS file read. module. CSS okay for now I'll just keep it empty and show you this read page so you can see right now it looks like this and I think we don't have any CSS so there no CSS needed but if you want to add some CSS you can definitely add it okay so you can see this was a sample PDF which we were showing in the read page so suppose you reading a book instead of this we are going to fetch data from our backend the saved pdf from our back end from our database where we have the PDF right so that's what we're going to do today for getting the PDF for storing the PDF we are going to use multer in nodejs okay so these things are very important for you as developers so we're going to use everything today okay so I hope you got the flow login sign up get all books get specific book and then get the PDF of the book okay these apis we are going to create right so let's create these guys we are going to first of all close this uh front end okay we don't need the front end for now we're going to focus on the back end okay so I'll just close everything and uh then after this guys I'm just going to open the back end and integrated terminal okay so first of all we need to create a fresh node just application so we need to initialize it first npm in it okay so it's going to initialize a node application and just hit enter enter enter enter enter and you are going to be sent here okay now we have the page do package.json we need to create a simple U we need to add simple packages so I'm just going to add packages directly I hope everyone is familiar with the notes okay so I'm just going to add the packages which I am going to use so copy and paste right so we're going to use bpjs body parts or course uh we don't need need crypto so I can remove this EnV Express Json web token multer so we're going to need these so I'm just going to type npmi so they're going to install the packages into my back end okay so here you would get a node modules folder now right so after this guys we need to have the EnV file okay so we are going to have the EnV file and here we're going to add our database URLs and some more URLs which we need to be which are needed to be sec Ur okay so how we can actually uh make a URL so first of all we need to create a database right so first of all what you need to do is guys you can just search for uh just simply search for mongodb Atlas just search for it okay so you would find this go to First Link and here we need to we we would be creating a simple Cloud database you don't need to have any database locally but you can use a local database like SQL also but since it's monack so we are going to use mongodb database okay so I'll just sign in it's totally free the database is totally free we're going to store basic user details and book details not the files like book PDF or images we we can't store it here but yeah we can store references we can store Links of those files so link of the images link of the pddf we can store it here okay basically strings and numbers right so here we can see that already my project is created but you can create a fresh project if you want to create okay so I can just say that if I click on new project okay and uh let me just uh name my project so I'm just going to name my project as Kindle life okay let's name this live because I'm taking a live session and I'm just going to say that password is j1223 hj1 123 key okay some tags you need to give so you can just give this and uh then guys uh you need to add members if you want to give uh your friends this access that means if there is some friend or team member you can can give access to the database so create this project let's go we need to manually install using npmi I would just say uh you can just get my source code okay I'll provide you the source code uh it would contain package.json so next time when you install the code from my GitHub get and just download the code from my GitHub uh then you just need to type npmi okay then it would create a node modules folder you must have the node modules folder without that your code won't run okay so yeah you don't need to do things manually if you want to do what you can do is you can just type npm I bpjs body parser and so on okay you can just type it like this in single line these are all the packages which we are going to use in the back end okay that's why I have specified it okay so for saving times I just uh did it at once okay just wrot it here and installed it at once so yeah the versions might change so you can check out for your latest nodejs code nodejs version okay so you can see guys that this is created and now here you can just go to database right now you can see that we don't have any database a project has been created but it does not have a database so here guys we are going to choose the zero that means free version okay and I'm going really fast because this is a live session and we have to finish it very early okay so you can re-watch this video later if you have any queries or if you have any doubts you can ask me in the live chat okay so uh rest everything is fine what kind of Provider you want to use so that's totally up to you generally AWS is fine you can go with Google cloud or Azure and and and I think I can just create a deployment now so you can see create deployment right so this is it now it's going to ask you database user so I can just give it some username and some very secure password so right I'm just giving it a normal password so create database user okay it would be done choose a connection method so compass and here guys you can see uh you get this URL okay so this URL is very important you're going to access your database with the help of this URL okay if you get this URL definitely never share this URL to anyone if you share this accidentally then change the password and username so that it's fine for everyone okay so I'm just going to click hide password okay like this so copy okay I've just copied it and done so I'll just go to my application here and in the en files we are just going to save it for now and let's go back there and here guys we're just going to go to the database okay and if you missed out how to get the URL you can just click on connect and from here you can just go to Compass and again you can get the URL if you missed out the URL right sometimes it happens it won't show the popup in some cases so you can just go it from get it from here okay so then we have browse Collections and in browse collections we have collections inside this right now the database is empty but our database is created fine this is fine till here so we're going to add dat to our database with the help of our apis okay so now this is our code guys and here we just going to say that suppose uh our URL is like this okay our URL is like this and our database name is DB1 okay and then guys we are going to have a JWT secret okay fine now guys in the backend folder itself we going to create database models okay so we going have two types of model one for storing model um that is users second is for storing books so that we can store this kind of data into our database okay I hope you know why we need models in mongodb but basically they are important as a structure as a blueprint it's like name name age gender uh email this is type of model right it's it's a type of model it's a type of blueprint here it's like a table there you can add multiple Fields okay so it's like a blueprint okay your uh column name basically okay so uh here we are just going to say book schema book schema. JS similarly we're going to have us user schema. JS fine so guys in users schema. JS we're going to import okay then guys we're going to create the instance of schema okay and close it and then guys we're going to export it as user okay that's it similarly guys we are going to do it for our book schema so for book we are just going to name it as book schema okay and you just need to export this book schema okay as book and just name this variable as book and Export book that's it okay this this and this is very important okay you can name this anything you want okay this is it guys we created two schemas now in user schemas I'm just going to say we're going to have name email and password Fields okay three fields are important okay fine so name email and password whenever user is going to register or login we need these three Fields right and rest you know why we need unique local case and trim that's that's a node J okay we need this okay white RM is needed if you have Extra Spaces added in the email it would remove Extra Spaces it would make local case sorry lower case that means Capital to small and then we have unique to that means email must always be unique when we store it in database that means there can't be multiple email addresses same email addresses for multiple users right so that's it and that's it right so this is user schema now similarly guys we're going to have the book schema so we have the book schema don't worry I'll provide you the source code just watch this video and you can get the source code and from there you can just copy things or use things okay so in the book we are going to have the book image the thumbnail and the title of the book and the author of the book and description of the book price of the book and suppose you are having an external L like Amazon link so you can just add it like that also so it's not mandatory but I've just added it okay just like if you're using some other API reference so you can just add that API link here okay perfect now guys you can see that this book reference book book schema is also created book schema is created user schema is created EnV is also added package.json is also here now guys we're going to need a file named as index.js okay and we are also going to need a folder named as routes inside this we're going to create two types of routes one route would be Au route Au route .js auth routes.js uh yes and then guys we're going to need book routes.js perfect so we have them here now we have these two files here okay so here guys we are going to import Express GS in author routes and also bcrypt GS in author because we're going to save the password then guys we're going to need book user schema here okay because we're going to get and store the user here then guys we're going to need the Jon web token for creating the tokens later on you'll store the tokens in front end and you can just validate the user accordingly okay if we not performing any extra validation more validation but yeah just for reference we have tokens later on you can use this okay so it's here now guys I'm going to create two types of apis here one API would be the sign up API and guys the second API would be the login API you can create few more API like get user data get user books purchased books like that but right now I'm adding only two apis okay so this is it and now I'm going to have the email password and name okay this is we're going to send while we are signing up right from the sign up page you can just judge that and in the triy part just a minute guys uh just a minute hold on e okay I think we have some doubts here can you suggest me some resources to learn some confusing topics of react best is you can just use chat gbt along with YouTube the best best thing you can do I personally do that and uh most of my learnings have been through YouTube okay different YouTube channels it it's like depending on the topic different different teachers are teaching great and also apart from that use chart GPT easiest option and the last option would be the documentation which I don't recommend that much for beginners because it's difficult to read documentations but you can just copy the data from documentation and paste to chat GPT and then it would summarize things for you okay and few more things is like you can add basic implementation to your code even if it's wrong and then send that code to gbt it would correct things and explain you why things are done okay so this is the few tricks which I use it personally okay let's come back here and uh yes we are going to have the try and catch block because if there is any error our app doesn't crash so try catch is needed okay similarly guys we are going to have the try catch here so I'll just copy uh I'll just copy this much okay and paste it to the login part but in login part we don't need need the name field so we are going to remove this okay so these two apis are here now guys uh we are just going to say that while sign up we are going to first of all check if user already exist or not okay if user already exist or not you sign in up but if you already exist I I'm not going to allow you to sign up okay so I'm just checking that email does exist or not if email already exists I'm just going to say you already have the account please sign up please please log in you already have the account you you can't sign up right this is it now guys uh we going to say that if suppose user is not registered that means this won't be the case then we are in the else case so I'm just going to say I'm just converting the password into hash format and I have just hashed the password okay hash the password that I mean what I mean is suppose my password is a j123 I'm hashing the password that means nobody can see this password in the database in the database I would be saving the P password like this okay so no one can see my my password right that's it so for that we have hash hashed the password we have provided the password and some salt value it's like a mixture of characters okay and I've hashed the password okay converted the password into a unrecognizable character sequence okay only uh the database can know that okay and this would be done with the help of obviously my not back end not the front end okay now you are going to create a new user inside that you have name email password fields are here okay and in password field you providing the hash password not the normal password that means you are providing the sequence okay now you're just going to save this user and user created successfully okay this would allow you to create the user that's it now similarly guys we're going to have the login API okay now in the login API we have the try part so in the try part again we're going to check if user doesn't exist then just ask the user to register or just say invalid credential if user doesn't exist obviously email is wrong or password is wrong like this right so in this case case email is wrong that means user doesn't exist so invite credential now again I'm going to check password so if password is wrong compare compare both the password the password which you have provided from the front end and the password which is saved in the database the password which is saved in the database is in hash format that's why we are using bcrypt do compare because this password is what hj1 123 and this is some hashed password so we are going to compare both of these password with the help of bcrypt okay bcrypt would handle that that's it now you are going to just just uh say that if password do not match just say inv valid credit shift okay if both of these match then create a payload and just add the ID field also extra ID field and uh uh in that payload actually you can add more field like name email if you want to add I'm just passing this object to create a token okay that's what we do I've just given an example we have just added the ID field you can add more fields and you can add more than a user object into this payload payload is just an object here I have just passed user and it's ID you can add more Fields if you want okay or you can just pass user ID also no need to create this whole object that's also fine okay but I'm passing it like this because some people provide email also and other fields also into the payload and save it inside the token okay so now you can just create a token so for creating the token you can just use GWT do method okay GWT do method now guys inside this method we're going to provide the payload okay payload that means this object okay okay then the second field guys which we going to provide is JWT secret JWT secret is actually inside my EnV file I just added a random value inside this you can add a strong value so that it's a secret password okay it's a secret password for creating tokens okay so no one can guess your token uh algorithm very easily okay so you're just generating a token for the logged in users okay then after this guys you can just see that uh this is it we created the key okay we created the token the token is created it expires in 1 hour and if there is any error or if we get the token whatever happens it would be jumping into this Arrow function okay now if there is an error I would get an error else I would just send this to the front end okay R st front end that's it so you can see that our apis have been easily created okay that's it okay so you can see that's it our apis are now available perfect now guys we have created this Au routes now we need to initialize this in index.js so that we can use the apis okay so first of all we are going to import all of this book route auth route. EnV course and express okay fine now in book routes I think I haven't added anything for now I'm just going to add this basic format to the book route and uh what else what else we're going to do um in all routes I think I haven't ex yes you have to export this book routes also okay for now I've just added temporary files temporary things here inside book route we are going to change the later so we have imported these two things okay now guys we're going to also use body parer okay to just identify Json data then we are also going to use DB file to add the database configuration okay so we have the db. CHS here we're going to add the mongodb links okay so let's go to db. JS okay I'm going to import the EnV and also these things why. EnV because from the EnV file we are going to get this URL and database name and database name I have given as a random name DB1 you can give any other name okay but this database would contain your actual data okay then guys I'm going to just call the connect method inside this we provide URL and the database name and then after that we are going to provide then cat so if it's successful then case and if it hasn't have any problem catch case okay that's it so our DB is initialized and we have called the DB that means our D database would be connected to this node just backend okay that's it now we are also going to create an instance of app Express then guys we are also going to create this EnV environment variables and inance ofv environment variables and then guys we're going to also use body parser okay and then guys we're going to use express Json okay then guys we are going to implement course policy for any front end URL so I'm just going to say any front endend can access get postp put delete and then this are these are the allow headers and this is where I'm using the course policy very important okay now guys I'm just going to Define my route so I'm going to say if I type / API / books it's going to go to book route okay so this is book route fine and if I type SL AP / it's going to go to Au route okay that's it that's it so you can see we have actually given wrong name maybe book route okay book route now it's identified and it's going to work properly okay fine now now it's fine okay so the spelling was wrong now guys I'm just going to create a port so I'm just going to say get Port from EnV link if there is no port in EnV link as you can see there is no Port so just use 5,000 but if in your EnV are specifying some specific Port then it would run into that specific Port else it would run on 5,000 by default okay so in some cases you need to specify dedicated port in some cases you don't specify so it's going to go to 5,000 okay so you can see that it everything is fine now I'm just going to start this back end by just typing npm my uh actually uh I'm just going to use node Bon so you can just install the node node Monon npm install node modon okay just install node Bon and then after that you would be able to start this back end so nmon um sorry n o d e m o n you write this and you can see now your back end is started okay so you can see authentication failed why because there is uh some kind of mismatch in the keys you can see I haven't provided the password so you have to provide the password also soj 123 obviously you are not going to tell this to anyone so I'm going to save and start again and you can see listening connected to database this message must come that means your database is connected so I'm going to test my API so for that you're going to need the postman so I hope everyone knows how to use Postman okay so this is Postman and here guys we can actually perform the login functionality so uh first of all we're going to provide the sign up sign up and this is what slash API slash o slash okay I think this is it let's go to our backend and this is what/ API so I'm going to go inside Au routes now inside Au routs I have specified the login and sign up okay so I'm calling SL signup okay/ signup now guys in headers I'm going to provide content type content type ABJ okay now guys in the body we're going to say that that's the raw body okay and here guys we're going to say we have the name as Harel Jen okay fine and then guys we're going to have the email field so email field and it's going to be suppose HJ 1@gmail.com right now we are not verifying the email you can add verification methods like OTP later so we have the password fields and the password might be h123 so I'm adding this let's check so could not send the request because the port was 5,000 now if I click on again you can see there is some error cannot get because this is a post request now I'm going to send again you can see user created successfully once you see this message that means your user has been created where you would store the user so obviously it would be stored in the database automatically so just go to database let's check so here guys we have database Collections and in users guys you are going to see that user has been created successfully and this is a hash password no one can guess that now I I canot I cannot guess this right no one can guess this even if you have the access of the database you cannot guess the password so it makes things very secure okay so this is sign up and similarly guys we have the login so let's try the login part now so uh we okay I have done one mistake okay right now instead of sign up we're going to perform the login part and we don't need the name field so I'm just going to remove this and then login you can see you got the token that's it so login and sign up is working perfectly right so now guys we're going to perform operations on book routes okay book routes right so let's go to the book routes and here guys we're going to import the book schema okay now we are also going to use molter okay we going to use M that's why I imported MTA why because we are going to store PDFs right so uh we are also going to have the uploads folder okay so here um just create the uploads folder up O A so here I'm going to upload my PDF so uh what we going to do is we going to go to index.js and here guys we need to add one thing which is make use of static file so you can add it here so I am just saying that show static files that means inside whatever is inside uploads folder just show them as static files whenever I call those files from front end so front end would be able to receive the files inside this approach folder that's what I have said here okay now I'll just go to book routes and uh here router is not specified why it's not specified um okay I just didn't copy it okay router okay fine now guys we are just going to say mta. storage here we're going to specify in which directory I want to store the data so I'm just going to say what would be my destination so my destination would be the uploads directory and what would be my file name so my file name would be current date and original file name so something like this so that's how you can store the files right now I'm just going to create a reference for multer and store it inside this variable so whenever I want to store something this variable would be called okay as a function right that's it that's it now I'm going to Simply create the book okay for that we're going to use the create method okay this is it and then here guys what we are going to do is what we going to do is we are going to call the upload method so first of all we are going to upload the PDF then we are going to upload the remaining data of book okay so this would be provided while with the API itself I'm going to provide this with the API like what so I'm just going to show you in the post man here so you can see you're creating a book in the body you have selected form data in headers you have selected content type and here guys you can see you provided PDF as type as what type would be file type is file others are type text so you can make this type file and provide the PDF whatever PDF you provide okay that's what I'm seeing so from the body I'm providing this much data okay and then first of all I'm extracting the PDF I'm uploading the PDF to this then guys then guys what I'm going to do is I'm just going to save this PDF URL to my database that's it okay so request response okay request response and close this okay now uh just add a comma also and it would be fine uh hi Karthik official computer Academy uh right now gu right now official computer Academy we are creating the backend part and the front end part is already created in the part one so you can start watching from there you'll understand everything because these Pages these apis which we are creating today are the pages are are the apis for the pages which we created in last video you can just visit Geeks for geeks Channel there you would find part one watch the part one then you would understand this API okay and if you don't know monack you won't understand anything so it's my suggestion please learn the monack okay properly because these things multer and all these things are basics of monack okay now guys uh we are here we are just going to say our API is uploaded our our book is uploaded okay our PDF is uploaded after that you want to save this book to a database name title author the PDF URL and like this okay so we are going to first of all get this from the body okay this is what we are getting from the body and also we going to get the file path which we have saved what path so what actually happens is the file would be uploaded to this uploads folder okay uploads folder so we're going to get the path of that file here automatically because we uploaded it okay so melter Returns the path in the request. file. part automatically so we're going to get the path from the request itself that's it okay now guys we are just going to say try and catch okay try and catch that's it okay and inside this guys I'm just going to say new book okay so new book and here you can see we have image title author description price Amazon link and the PDF okay or whatever you want to name it okay so you can see it's according to our schema okay now we're just going to save this to our database so save okay and then the response okay response so let's try to create a book so here you can see I've already written an API what you're going to do is you're just going to convert it to form data okay and body would be form data and headers would be like this we are calling this API okay books create API and here you can see I provide the ID as suppose one okay if you don't need this id id you you you don't need to specify it by the way we need to provide the image okay image URL okay you are also going to upload the thumbnail of the book just like PDF right now I just used some extra URL like this but you can upload the thumbnail of the book just like multer we used for PDF similarly you can upload images also okay but right now I just used this link to just show some some some image okay then we have the title as HJ book and author and some description in the description is in HTML format so we can show it directly then we have the price and then we have the Amazon link and then we have the PDF so if I click on create you can see the book has been created successfully and it's here so we can just go to our database and you can see that here we we have the database just refresh this and in the books part you can see that now book is also available don't worry guys I'll provide you the source code you can just check it from there so you can see that you got the path of PDF what is this path so this path is nothing but if I just copy this you can make this more secure and add some subscription based stuff https gon SL look sorry HTTP gon SL Local Host 5,000 okay 5,000 SL uh API SL payment I'm sorry API SL books I'm sorry you can just type it directly okay so if you hit this you can see that you got this right so that's it that's what we have uploaded this URL is nothing but my resume so I uploaded that only that you can upload anything right so that's how you can upload things okay perfect very easy just make sure the type of this would be file and you can just select any file you want okay any file you want you can just upload any file you want like uh I'm going to upload suppose this one okay and let's say the the gfg book okay I'm sorry the gfg book okay and uh Harel Jen okay suppose like this okay and what else you can just add a PDF and you have added the PDF now you can see another book has been created successfully if I click on refresh you can see that your book has been created successfully perfect can see that book has been created successfully perfect now guys uh we have created a book now guys we need to get the book okay so for getting the book first of all we're going to create an API to get all books okay so we just going to say from our from our DB we want to get all the books right so we just going to see that try and inside that we're going to say await book. find I'm just going to find all the books and return all the books that that's it so front end would get all the books now similarly guys we are going to say we have the catch part okay we are going to say if there is an error we're going to show the error that's it okay so we're going to get the all the books okay let's test this so here guys uh if I am fetching this okay if I click on this you can see I'm able to get all the books that's it you don't need to provide anything uh in the body or in the head you can just skip this part you don't need anything here okay you can just remove this and you can also remove the body can make make it none okay right so that's it okay so you can just click on send you can see you going to get the book this is just a get API not a post API okay now guys similarly we're going to call one specific book book with the help of the object ID okay what id you're going to provide the ID in the params okay in the URL itself in the API URL itself and you're going to extract that ID okay then you're going to provide it to the tri block inside that I'm just going to find that specific book by ID and just going to return this what id I'm providing here so suppose uh I want to get the gfg book the gfg book so I'm going to provide its object ID okay in the reference that's it so uh let's uh also add the catch part so I'm just going to say we have the catch part also okay now guys let's test this API so we're going to get the book with the help of its ID so I'm going to come here come here okay books slash and here you need to provide the ID so suppose you provide this ID so if I click on send so you can see you got this specific book right this specific book that's that's what we wanted right this is it now from this book you can just get the PDF link and you can just add your friend backend URL and just get the PDF show the PDF right so you can see that now all the apis have been created important ones and since we don't have that much time so I'm not moving further with the API part let's connect this to the front end and end this project okay right so uh for connecting this to the front end we need to Simply say this was our back end right so this is our front end I'm just going to open this in integrated terminal and I'm just going to say npm run Dev okay okay now you can see that my front end has already been started in Local Host 3000 so I would just go to Local Host 3000 right so you can see that's it now here guys in next J I'm going to this is my next year right so here you can just directly create. env. local okay and here I'm just going to say nextore public uncore API _ URL and here you can just add your backend URL so HTTP colon sl/ Local Host suppose my back end is running on 5 5,000 okay so I would just add the back end URL that's it that's it guys you just need to add this now I can call this anywhere I want okay so now guys for running this into our front end we are just going to add the apis first of all let's add the API to the sign up page okay first of all we need the user to sign up so let's go to the sign up page okay so in components sorry in as in app and pages and sign up and this is the sign up page right so in the sign up page I'm just going to say that const um API URL equals process.env Dot and then just add this URL and let me just print this URL so console.log API URL so let's check if we are able to get the URL or not so just inspect and then go to console and just refresh and actually go to sign up page and you can see guys that this is the sign up page but we didn't get the URL why didn't we get the URL I think we're going to get the URL here so not sure why this is not updating maybe this is not refreshing for now let's close it contrl C and again start sometimes it doesn't update so we need to update it okay now guys let's refresh and you can see that it's refreshing and again it's trying to show the sign up page but I don't know why it's not working um this is the sign up uh this is Local Host environment variables are loaded and uh we are not able to get the URLs maybe it's not updated that's why it's not updating uh next just might not take some more time anyways uh we can just continue directly so guys here what we are going to do is we have the API URL Local Host 5,000 okay so it just going to say that we have a form data okay we have a form data set form data just import use State and also import the remaining things next image and use client and so on okay now guys here we just going to see that we have the router from next navigation okay and also if there isn't any change in the input Fields just handle the change okay and then if we want to submit the form sign up form sign up page then call this handle submit okay now inside handle submit we're going to do something later but for now I'm just going to fix this UI okay so uh whenever I submit the form I want to call the handle submit method okay whenever I submit the form that's it and what else we are just going to say that in the input field of the name whenever I make a change first of all value would be passed here value would be shown in this input field and just call handle change so handle change would do simple thing it would just add that specific field to that specific key okay and just update the form data that means other fields would be same but the new field would be updated whatever feed you are making change on okay similarly guys we're going to make change on the email feed okay we're going to make change on the email feed similarly guys we're going to make change on the password feed password field right similarly guys we're going to make change on the confirm password field right rest everything is fine okay so let's save it and then guys we're going to Simply say console.log form data okay I'm just going to print the form data let's check it okay so if I click on Create and I need to add the name also so now if I click on this H 1 2 3 okay something like this and in this we need to add one more thing e. prevent default okay so e do prevent default okay now guys it's fine so HJ okay and uh suppose I am adding this email this password right and also this password I click on create account uh right now it's not saving not sure why data is not saving here that's why the API isn't being called properly okay I have closed everything now let's rerun this so I'll just open the back end and back end would run in nodemon okay and this would run in Local Host 3000 so npm run Dev right so let's test this okay it's reloading again and again maybe there is some it's still not updating still not updating that's why uh because we tried to print the URL it didn't print maybe there is some issue with the URL also anyways let's continue we need to finish this then we'll check the URL if it doesn't work we'll fix it later but yeah there's no issue so you can see that yeah we are right now getting the name email password and confirm password okay we are able we and we need to get these feeds name email password and confirm password okay guys we'll do one thing uh let's open this again it would be easier now okay and then some password it's working but it's not calling the fields there is some issue with the fields okay let me just check okay okay I'm just going to rename it first names must be capital okay and uh what else we are just going to import update this part okay and also guys we didn't export it so just export this part okay and what else we just going to say everything is fine here fine let's check okay now it's working maybe there was some refresh issue okay so you can see that we are able to get the data perfect so we are able to get the data here we just need to implement our API okay so what was our API URL so whatever it is you're going to modify it here okay so you're just going to say whatever is your API URL just add add it here uh I'm just going to add back text here okay and here guys we just need to add our API URL whatever is your API URL so dollar and close it and API URL okay and I don't know why back ticks are not shown here okay fine and uh okay we missed out the API URL so con API URL equals process Dov dot what was the URL note JS URL uh just go to uh EnV local and go to this page okay yes so processing NV public URL API URL that's it okay that's it so you can see that it's here we have API or sign up and inside this we have provided name email password this would be sent up to the signup API just like Postman we are implementing it here okay now if everything is successful if response is okay account created successfully go to login page and if something is wrong go to just just show the message just alert the message you can show toast notifications also later right I'm just showing this okay one more thing guys I think I must add it in the try catch part that must be better let me just format it a bit so after this just check passwords okay and instead of this I am going to use trke catch that's it that's it okay so you can see that I have provided try catch okay perfect so you can see that it's here let's test this okay so uh I'm going to say that suppose I'm going to create a user named as HJ 1@gmail.com and the password would be hj12 34 5 6 hj1 2 3 4 5 6 if I click on create account you can see user already exist because user already exist because we have already added this user to database right if I do it with other emails so you can see you account created successfully account has been created if you come here in users you would see that account has been created successfully so hj2 is also here fine now let's create the login part so login part is very similar to the sign up part okay so in the login part again we are just going to add a few things so uh in the login part we are just going to say we need to again get the email and password okay then we are going to handle the form data just like that okay and then guys in handle submit instead of the other fields we are just providing this much uh what we are are providing first of all we are preventing refresh default okay now in the try part we are going to do something and in the catch part we're going to do something okay now in try part guys what we're going to do is we're going to say um instead of the signup we're going to show the login API okay so login API right and we just going to see that just show the API URL okay what was your API URL this was your API URL right perfect okay then headers and then this email and password then you would get the response if response is okay then I'm going to go to Kindle library page you can add some uh authentication like tokenization later right now I'm just sending this directly to the Kinder library page okay and if there is an error you're going to get error logging in okay now here guys you're going to see that when you try to sign up uh here just going to say handle form submit okay and now in the email input is going to say that handles hand a change and also the value okay similarly for the password feed again you're going to handle the change and just update the value okay so handle the change and update the value this is it okay update the value now when you click the signin button when you click the signin button it would automatically call the types submit that means handle submit and handle submit would be calling this okay let's try to login now okay so I'm just going to refresh first so let's try to login with this email I'm going to provide some random password if I try to sign in you can see that right now uh it's having some export issues Let's test it again okay now if I click on sign in you can okay actually uh let me just refresh first okay okay now it's going to work properly so you can see that this user exists let's add some random password so you can see invited credentials perfect now let's add the actual password so hj1 2 3 4 5 6 so sign in you can see login successful and after login successful I'm sent to Kindle library page right now guys in Kindle library page we need to Simply get the Kindle library okay so I'll just go to this after o and Kindle library and here we need to get all the books okay that's it we need to get all the books so I'm just going to remove everything from here and add things from scratch okay so here guys we need to make some imports first okay then since we are using typescript so add the type okay then after this we are just going to create page and Export this page that's it now inside this we are going to say we're going to get the book ID from the actually we'll cover this later okay okay right right right right sorry sorry yeah we need to cover it now okay so guys where were we yes I made wrong Imports okay right fine so yeah we have this okay we have this now inside this we have the router okay fine and then we have show set show which we created in last video and then all books which we are going to show okay into our page fine then guys uh we are going to get data for our books so get data function would be here fine huh and then after this we have to Simply say we have we are storing all books okay and I remove the object just add the object all books okay and the type is what string and just close it okay so this is the type of book and I'm just saying either type of this array or just keep empty okay so you can see that this is it and now I'm trying to just fetch the books so here I'll just add a use effect which would be called every time you load this page okay so I'm just going to call this function create the function fetch books okay then I'm going to call this function okay now here guys I'm just going to say that try and catch so if there is any error loading would stop okay else I'm trying so here guys I'm just providing it and here you can add the API URL okay and just bring the API URL also perfect now you have the API URL just add the plus sign and it's done okay now guys I'm just going to say if this response is not okay failed to get books okay but if you got the books just show the books into my books array all books array and set loading as false that that's it okay and now if it's loading I'm going to show loading okay here I'm just going to say if it's loading I'm going to show loading if loading is true I'm going to show loading if there is an error I'm going to show the error that's it if everything is fine then I'm going to show my actual component data what data I'm just going to show this naar first okay and after this rest everything was same okay we are just fetching the data so we did this yesterday only we were showing the book data we did this yesterday okay so