Tech Tutorial

Create Full Stack AI BG Removal SaaS App using React JS, Clerk | Full Stack AI React Project

Estimated read time: 1:20

Learn to use AI like a Pro

Get the latest AI workflows to boost your productivity and business performance, delivered weekly by expert consultants. Enjoy step-by-step guides, weekly Q&A sessions, and full access to our AI workflow archive.

Summary

In this comprehensive tutorial by GreatStack, learn how to build a full stack SaaS application focusing on a background removal tool using MongoDB, Express, React, and Node.js, popularly known as the MERN stack. The project includes authentication with Clerk, a background image removal feature using a third-party API (ClipDrop), and a payment gateway via Razorpay for purchasing credits. This project covers both front-end and back-end development, concluding with deployment on Vercel, making it a powerful demonstration of integrating multiple tools and technologies in a single application.

Highlights

Develop a SaaS application using the MERN stack. 🚀
Integrate Clerk for user authentication and management. 🔏
Utilize ClipDrop API for background removal features. 📷
Set up Razorpay for credit purchase transactions. 💳
Deploy the project seamlessly on Vercel. 🌐

Key Takeaways

Learn to build a full stack SaaS app using MERN stack for background image removal. 📷
Authenticate users effortlessly using Clerk in your React projects. 🔐
Leverage ClipDrop's API for effective background removal features. 💡
Integrate Razorpay for seamless online payments to purchase credits. 💰
Deploy your complete app on Vercel and connect all the dots! 🚀

Overview

In this exciting tutorial by GreatStack, we dive into creating a full stack SaaS application for background removal using the versatile MERN stack. The process begins with setting up a MongoDB database, following through with Express on Node.js for the back-end, and building a React front-end. The project demonstrates building a user-friendly, fully functional web app.

User authentication is handled by Clerk, offering an easy setup with secure sign-ins, utilizing its ready-to-use UI components for seamless integration into any React app. Meanwhile, the core feature of the project involves removing image backgrounds. This is achieved by leveraging ClipDrop's API, which processes uploaded images to refine and remove backgrounds effectively.

Moreover, the tutorial adeptly incorporates Razorpay for managing credit transactions. This not only facilitates a smooth user experience when purchasing additional credits but also demonstrates how to effectively integrate third-party payment solutions. Finally, the project is deployed on Vercel, where its scalability and accessibility are ensured. This comprehensive guide not only strengthens understanding of full stack development but also highlights the integration of various modern web technologies.

Chapters

00:00 - 00:30: Introduction In this introductory chapter, the tutorial begins with a warm welcome to the audience and introduces the focus topic of building a full stack SaaS application using the MERN stack - MongoDB, Express, React, and Node.js. The specific application to be developed is a background removal app, where users can upload an image, have it processed, and then download the modified image with a transparent background. The chapter concludes with a brief look at the project demo that will be constructed throughout the tutorial.
00:30 - 01:00: Project Demo The chapter 'Project Demo' begins with a description of the homepage layout, which includes a navigation bar featuring a logo and a 'Get Started' button. Below this is the header section that presents some text, an 'upload image' button, and a feature image. The chapter further explains the process of removing a background from an image. It outlines the steps: upload an image, remove the background, and download the image. Lastly, there's a mention of an image featuring a background transition, concluding the page walkthrough.
01:00 - 01:30: User Authentication with Clerk In this chapter titled 'User Authentication with Clerk', the focus is on implementing user authentication within a React project. The chapter explains how a tool called Clerk is utilized for this purpose. Clerk facilitates easy integration of user authentication and management by providing beautiful, ready-to-use UI components, such as a sign-in form which can be triggered by clicking a 'get started' button. The chapter includes a brief mention of customer testimonials and a footer as part of the user interface layout.
01:30 - 02:00: React Project Setup This chapter discusses the setup of a React project focusing on user authentication features. It describes the integration of a sign-up form using Clerk, enabling users to sign in via email and password or via Google authentication. Additionally, it highlights the option for creating a new account if the user doesn't already have one.
02:30 - 03:00: Tailwind CSS Integration The chapter begins with a guide on how to sign up for the application, highlighting two options: using a Google account or signing up with an email ID and password. It provides a step-by-step example using a Google account for sign-up, detailing the process of clicking the relevant buttons to continue.
03:00 - 03:30: Assets Organization and Page Setup The chapter titled 'Assets Organization and Page Setup' discusses how to update profile information and profile pictures. It then demonstrates how to remove the background of an image by using a feature that allows users to upload an image. The user selects an image, which then gets processed on a result page. The system shows the remaining credits available for image processing.
04:00 - 05:00: Header and Navbar Design In this chapter, the focus is on designing the header and navigation bar of a website or application. The process includes managing user credits for downloading images. Initially, one credit is used to download an image with the background removed, leaving four credits remaining. Users can click a button to acquire an image, demonstrating the functionality of removing backgrounds. Additionally, there is a system for purchasing more credits, which is accessed via a 'credits' button. Various credit plans, such as 100 credits or 500 credits, are available for purchase, allowing users to extend their ability to download images. The chapter elaborates on the integration of these elements within the header and navbar design.
05:30 - 07:00: Steps Section Design The chapter titled 'Steps Section Design' focuses on the implementation of an online payment gateway within an application. It begins by discussing the integration of a system that allows users to purchase additional credits - 5,000 credits to be specific. The chapter highlights the steps by which users can make payments online through a designated purchase button. Furthermore, there is mention of returning to the homepage via a logo image. Moreover, it touches upon the future steps, including deploying the app on 'versal', an unspecified platform, once the app development is complete. Lastly, it advises viewers unfamiliar with React to seek foundational knowledge through introductory content before proceeding with more detailed coding sections.
07:00 - 09:00: Image Background Slider The chapter discusses creating an image background slider using React. It is targeted at beginners and refers to a tutorial available for free on YouTube. The tutorial begins with creating a project folder named 'BG removal' and opening it with the Visual Studio Code editor.
09:00 - 10:00: Customer Testimonials This chapter, titled 'Customer Testimonials', starts with an introduction to setting up a frontend project using React. The speaker opens a folder named 'BG removal' in Visual Studio Code, prepares to create a new project, and opens the integrated terminal. They proceed by using the command 'npm create V at latest' and provide a project name when prompted.
11:00 - 12:00: Footer and Final Touches In this chapter, titled 'Footer and Final Touches', the focus is on setting up the client environment for a React and JavaScript project. It covers the initial steps required to prepare the project for further development. The chapter begins by organizing the project directory, specifically highlighting the creation of a 'client' folder dedicated for the React project. The main task described is installing necessary dependencies within this directory using npm. This involves navigating into the ‘client’ folder through the command line using 'cd client' and then executing 'npm install' to ensure all required packages for the project are installed properly. Overall, the chapter provides a concise guide to setting up the foundational structure and dependencies for a React-based project.
14:30 - 15:00: Setting Up the Server The chapter titled 'Setting Up the Server' primarily focuses on installing necessary dependencies and packages for a React project. It guides the readers through the process of installing packages for React Router, using the command 'npm install react-router-dom.' Additionally, it mentions the installation of the 'react-toastify' package, which is used for providing toast notifications within the React application. The chapter seems to be aimed at helping developers set up and configure their React environment with essential tools and components.
19:00 - 20:00: Database Configuration The chapter discusses the initiation of a project by first displaying toast notifications once all dependencies are installed. The user is guided to start the project using the command 'npm run Dev'. With the project running on Local Host Port 5173, instructions are provided to open it in a web browser, displaying a successful run of a 'Ved plus react' project.
22:00 - 23:00: Models and Webhooks The chapter titled 'Models and Webhooks' involves cleaning up a default project in VS Code. The process includes deleting an app.CSS file, modifying app.jsx by clearing the page, and using the 'rce' snippet. Finally, changes are saved, and the index.CSS file is cleared.
26:00 - 27:00: Complete Backend Setup In the chapter titled 'Complete Backend Setup,' the focus is on completing the setup of the backend for a web project. The chapter describes updating the website's title in the HTML file to 'Great Stack BG Removal,' which stands for background removal. After making the necessary changes, the project is reviewed in a web browser to ensure the title update is reflected correctly.
29:00 - 30:00: Frontend-Backend Integration This chapter focuses on integrating the frontend and backend parts of a project, specifically discussing the use of Tailwind CSS for styling. It covers the installation process of Tailwind CSS in a React project, starting with verifying the creation of the React project, and proceeding with the installation of Tailwind dependencies using provided commands. The narrative implies hands-on guidance through these installation steps, ensuring that the frontend styling framework is correctly set up to integrate with the project.
31:00 - 32:00: Result Page and Image Processing This chapter provides a guide on setting up a terminal project, beginning with stopping the current project using the 'control C' command. The user is instructed to copy a command from the telin setup documentation, paste it into the terminal, and execute it to install the necessary package. The process involves switching between the terminal and documentation to copy and run commands sequentially.
36:00 - 37:00: Payment Integration with Razorpay The chapter explains how to integrate payment features using Razorpay within a project. It begins by instructing users to locate the configuration files 'Telvin doc config' and 'post css.config', accessible from the sidebar. The reader is guided to duplicate the contents from the configuration files as described in the documentation. The next step involves modifying 'telin config.js' by removing existing content and inserting the copied configuration, and then saving the changes. Finally, it deals with copying a specific part of the code and pasting it into the 'index.css' file.
43:00 - 44:00: Finalizing and Testing In this chapter, the focus is on the final steps of development and testing. The process started by updating the CSS file, wherein three lines of code were appended to 'index.css'. After saving the changes, the project was restarted using the command 'npm run dev', and then opened in a web browser to confirm if everything was working properly. It was verified that Tailwind CSS was successfully integrated and functioning within the project.
45:00 - 46:00: Deployment on Vercel In this chapter, the focus is on organizing and placing asset files required for a project that will be deployed on Vercel. The user shows how to locate, select, and copy all the necessary asset files from a given folder on the desktop. These files are then pasted into the appropriate directory structure within the project, specifically under 'client/src/assets'. This step is crucial for setting up the environment before proceeding further with the deployment process.
46:00 - 46:20: Conclusion and Wrap Up The Conclusion and Wrap Up chapter covers the final aspects of utilizing assets in the VS Code editor. It highlights how the assets folder contains all the necessary icons and images needed for the project. Additionally, it explains the existence of an 'assets.js' file where all images and icons are imported and then exported through an 'assets' object for easy access across components. The chapter briefly touches on testimonials data as well.

Create Full Stack AI BG Removal SaaS App using React JS, Clerk | Full Stack AI React Project Transcription

00:00 - 00:30 hello and welcome to another exciting tutorial of greatest stack in today's video we are diving into how to build a full stack SAS application using mongodb Express react and nodejs we will be creating a background removal app that allows user to upload an image process it and then download the image with transparent background let's start by taking a quick look at the project demo that we are going to build in this tutorial this is the
00:30 - 01:00 homepage of our project on the top we have this navigation bar with logo and get a started button then we have this header section where you can see these text one upload image button and one feature image after that we have these steps to remove the background upload image remove the background and download the image after that we have this image with background transition
01:00 - 01:30 next we have this customer testimonials and at the bottom we have this footer let me scroll up and if I click on this get started button it opens a user login form to implement this user authentication we have used a tool called Coler using Coler we can easily integrate user authentication and user Management in our react project it provides beautiful and ready to use UI components like sign
01:30 - 02:00 in sign up and user profile for react application so let's come back to the project and as you can see I have integrated this sign up form with the help of clerk this is the signin form so we can enter the email ID and password we can login on this website and we can also use this continue with Google option and here we have this option for sign up so if you don't have the account you can click on this link sign up so it will open a sign up form
02:00 - 02:30 here you can sign up using the Google account or you can sign up using the email ID and password so let me sign up using my Google account I'll click here then click on continue so after creating the account on this app here we have credits 5 then we have the name and here we have the profile image let me click on this profile image so it will open this card where I can manage the profile if I click here on manage
02:30 - 03:00 account so this is the profile page from where we can update the profile info and profile picture let me close it now let's see how to remove the background of an image so here we have this button called upload your image if I click here it opens a window to select an image so let me select this image now we are at the result page and it is processing our image right now you can see we have total five credits left and after processing the image you can
03:00 - 03:30 see the credit has been reduced so now we have four credits left because we have already used one credit and here we have the button to download this image so let me click on this button and you can see we have downloaded this image without background so we have successfully removed the background of this image let me click on this credits button so it will open this credits purchase page where we have added different plans to buy 100 credits 500
03:30 - 04:00 credits and 5,000 credits so that user can purchase more credits here we have added the online payment gway so that user can click on this purchase button and make the payment online to get the more credits now let me come back to the homepage by clicking on this logo image after we finish building this app we will deploy it on versal before we dive into the code if you are completely new to react I highly recommend watching my
04:00 - 04:30 react beginners tutorials first it is available for free on my YouTube channel I will include the link in the description below now let's get started now I'm at the desktop screen and here we are going to create a folder for our project and write the folder name BG removal let's open this folder with vs code editor so let's select open with
04:30 - 05:00 code now you can see this BG removal folder is open in vs code editor here we will create our front end project using react so right click and select open in integrated terminal now in this terminal we will type npm create V at latest here it is asking for the project name so let me add the project name
05:00 - 05:30 client after that we will select react and JavaScript now you can see in the left side bar we have one folder with the name client and here we have this react project next we have to install the dependencies in this project so in this one we will type CD client so now we are in the client folder now in this client folder we will add npm install so it will install all
05:30 - 06:00 the dependencies required for the react project now the dependencies has been installed next we will install some packages for react router so let's add npm install react router Dom and with that we will install the react toasttify package so that we can
06:00 - 06:30 display the toast notifications all the dependencies has been installed now we can start this project so just add npm run Dev now our project is running on this Local Host Port 5173 so let's open it in the web browser so now you can see our Ved plus react project is successfully running in the web browser
06:30 - 07:00 next we will clear this default project for that let's come back to the vs code editor from here we will delete this app. CSS file after that we will open app.jsx and we will clear this page here we will use the snit which is rce now save the changes after that let's come back to the index. CSS file and we will clear
07:00 - 07:30 this file also now let's save the changes now let's open index.html and here we are going to rename the website title so the title will be great stack BG removal that is background removal now save the changes and open the web browser here you can see the project is clear here we are getting the title
07:30 - 08:00 great stack BG removal next we will add the support of telin CSS in our project so let's go to the new tab and search for telin CSS V let's open this link here we have the steps to install the telin CSS so first step is already completed we have created our react project now in the second step we have to use these commands to install the telin dependencies so let's copy this line and
08:00 - 08:30 come to this terminal first we have to stop this project so just add contrl C yes now just paste the command that we have just copied from the telin setup documentation paste it and press enter so this package has been installed come back to the documentation again just copy the second line and paste it here
08:30 - 09:00 so after that we will get two files Telvin doc config and post css. config you can see in the left side bar after that we have to copy this configuration file so just copy it and open telin config.js file and remove this and paste the code that we have just copied from the documentation save the changes after that we have to copy this code so let me just copy it and we have to paste it in index.css file so let's copy and come
09:00 - 09:30 back we will open index. CSS file and paste three lines of code save the changes now we can again start our project so let's come back and type npm run Dev after that open the link in the web browser so now our project is running in the web browser so now we have the telin CSS support in our project
09:30 - 10:00 now on my desktop screen you can see we have folder with the name assets and in this folder we have all the assets required to create our project you will find this assets Link in the video description so let's copy all the assets select all files then copy then go to Project folder then client folder then SRC then assets and in this one paste all the files now just close this folder and come back
10:00 - 10:30 to the vs code editor if I expand this assets folder you can see we have all the icons and images and we have one assets. JS file also where I have already imported all the images and icons then we have this assets object where I have exported all the images and icons so that we can easily access it in any component then we have some testimonials data that is
10:30 - 11:00 required to create our UI then we have some plans data that is also required to display on the client website if I come back to the design file this is the figma design file here you can see this is the price plan and in this homepage we have to display this testimonial data so I have already added these data in an array in the assets. JS file you will get this figma design Link in the video description so that you can go and
11:00 - 11:30 explore this design file and you can copy the text and create your website after that let's minimize this browser come back and uh here we have the assets folder we will right click and select reveal in file explorer now let's open This Ss folder and here we have three files that is BG layer. PNG favicon SVG then then this slide icon. SVG so let's
11:30 - 12:00 copy all these three files and we will come to client folder public folder and paste the files you can see we have added three files in this public folder let's close this folder now let's open index.html file here we have provided v.svg for the favicon so here we will provide our own
12:00 - 12:30 icon so let's add favicon do SVG that we have added in the public folder save the changes come back to the web browser now you can see our own icon in this browser title next we will create the folder structure for our client project so in this SRC folder we will create a folder with the name components we will create all the components in this folder now let's create another folder in this SRC and
12:30 - 13:00 the folder name is Pages where we will create all the pages required in our project after that let's create a new folder in this SRC and the folder name is context in this folder we will create the context where we will manage all the states and functions now we have created the folder structure next we will create some pages and we will set up the react
13:00 - 13:30 router so in this Pages folder let's create a new file with the name home do jsx so this will be our homepage here we will use the rafc snippit save the changes now let's create another file in this Pages folder so the file name is result. jsx here also we will use rafc now now let's create another file
13:30 - 14:00 in this Pages folder and file name is by credit. jsx here also we will use r a f c snippit so now we have created three pages in this Pages folder now in this figma design you can see we have three pages that is homepage result page and and the Buy credit page so we have created three files for three pages after that we will set up the react router using this pages so
14:00 - 14:30 first we will come to main. jsx file and first we have to import browser router from react router Dom package after that let's remove this strict mode and here we will use browser router tag so we have wrapped this app component using this browser router tag in our project we will get the support of react router now we have to
14:30 - 15:00 set up the routes so let's close this file and we will open app.jsx file now in this div let's remove this text and in this file first we will import routes tag from react router Dom and we will also import the route tag so we have imported routes and route from react router Dom package Now by using this tag
15:00 - 15:30 we can create the routes for that within this div we will use the routes tag and inside this routes tag we will create multiple route so first let's create the route for the homepage so we will add the route tag then add the path that is slash then we will add the element and in this element we will Mount our homepage component so simply write home we are getting this Su
15:30 - 16:00 so let me select it so this home has been imported after that let's close this tag and close this route tag so we have created the route for the homepage similarly we will create the route for the result and buy page so let me just copy this statement two times
16:00 - 16:30 in the second one we will add the path SL result and in the element we will use result page so we are getting this result from Pages folder select it now this result has been imported similarly in the third one we will add the path SL by and here we will use the element that is Buy credit so we are getting the S let's let click here so this bu credit has been
16:30 - 17:00 imported so we have created three routes for the three pages now we will test this route let's open this homepage you can see we are at the root and here we are getting the home now if I type slash result so now you can see we are getting the text called result and if I change the path SL bu here we are getting the text Buy
17:00 - 17:30 credit that is coming from the Buy credit page component so our routes are working so let's come back to the homepage again after that let me close this delin website and in this design file you can see we have this design so we will start building this UI design
17:30 - 18:00 as you can see in this design file first we have to create this navigation bar so let's come back to the vs code editor and in this components folder let's create a new component and write the component name Navar do jsx here we will use rafc now I want this navard in all pages so you can see this navard is available in homepage then result page and Buy
18:00 - 18:30 credit page so this nav bar is required in all three pages for that we have to mount this Navar component in app.jsx file before this route so that it will be visible in all pages so before this routes let's add the Navar tag we are getting this suggestion just click here close this tag now save the changes here we are getting this Navar on the
18:30 - 19:00 homepage let's open navb bar. jsx file and remove this text navbar and here we will create the navigation bar here we have to create the UI design of the navigation bar so as you can see in this design file we have to add the image using the image tag then we have the button so let's come back to the na. jsx file and here within this we will create one image tag and in this
19:00 - 19:30 SRC we have to provide the logo so let's add assets we are not getting the suggestion for this assets so let me go to assets folder assets. Js assets. Js file after that let's come back to the Navar file here we will add assets so now we are getting this suggestion let's click on it now we will use Dot then we are getting all the images so just
19:30 - 20:00 select logo save the changes and come back to the web browser now we are getting this logo that is coming from the assets folder after that here we have to create one button tag and in this button tag we will add the text that is get started so let me just copy the text from here and in this button we will paste the button text get started and after
20:00 - 20:30 that we need the image tag for this addo icon so we will use the IMG tag and in the SRC we will use assets. addo icon we will save the changes now let's come back to the web page here we are getting this get a started text and here we have the icon that is in the white color that's why it is not visual after that we will add some CSS properties but before that let's come to app.jsx
20:30 - 21:00 file and in this div let's add the class name and we will provide the telin CSS classes so let's add the minimum height a screen then we will add the background color save the changes now let's come back to the navb bar. jsx file and in this div let's add the class name here we will add the tent classes so we will provide Flex item
21:00 - 21:30 Center justify between then we will add the margin from X then padding from y then we will add the margin from X for larger screen save the changes now we are getting this logo in the left side and we are getting this button text in the right side next we will add the CSS properties in this logo so in this image let's add the class name and provide the width
21:30 - 22:00 then we will provide the width for the smaller screen now you can see the image size is perfect next we will add the CSS properties for this button that is get started so in this button tag let's add the class name property and we will provide background zinc 800 then we will provide the text color then Flex then item Center then we will provide the Gap and padding from X and Y then we will
22:00 - 22:30 add the padding for different screen size then text a small and Border radius save the changes now this button is looking good next we will add the CSS properties on this Arrow icon so here we have another image tag in this one we will add the class name property and let's provide the width and we will provide the width for different screen save the changes so now the size for this icon is
22:30 - 23:00 looking good so we have created this navigation bar let's go to different route so if I type SL result here also we are getting the navigation bar on the result page if I want to go to homepage then we have to remove this result so next we will add the click feature on this logo so that when we click on this logo then we will be
23:00 - 23:30 redirected to the homepage so first we will import link tag from react router Dom after that before this IMG we will add the link tag and wrap this image with this link tag after that in this link let's add the two property and here just provide the path of our homepage that is slash save
23:30 - 24:00 the changes now we are at the SL result page if I click on this logo now we are back to the homepage after that we have to create this header section to create this header section let's create a new component in this component folder and provide the name header. jsx
24:00 - 24:30 here we will use ra Ace I want this header component on the homepage only so let's open home. jsx file remove this text from here here we will add header that we are getting from the components folder let's click here close this tag now save the changes now on this homepage we are getting this header text that is coming from this header
24:30 - 25:00 component next we will Design our header component so let me remove this text from here and if I come back to the figma here we have two sections that is left side and right side so in this div let's add the comment so let's add the comment text left side after this comment let's create one div and within this div we will create the UI design of the left side and after
25:00 - 25:30 this div let's add one more comment so let me just copy it and paste it here here we will add right side and here we will add one div so this is the left side and right side so first we will create the left side of this component so in this vs code editor within this div let's create one H1 tag for this
25:30 - 26:00 text so simply copy the text from here and paste it in this H1 tag now we need this text in three lines for that we are going to use the BR tag to add the line break so after this text let's add the BR tag and after this background from we will add the BR tag now in this text you can see we have the gradient color in this background text
26:00 - 26:30 so we have to wrap this background text with a span tag so let's add the span tag and close it after this background now save the changes and come back to the web browser so we are getting this text in three lines after that here we have a small paragraph text so let me just copy it and here we will add one paragraph tag in this one paste the text save the
26:30 - 27:00 changes after this line in this paragraph tag we have to add the BR tag so it will be displayed in two lines come back come back to the web page so you can see we are getting this text after that we have to add one button to upload the image so after this P tag we will add one div tag in this div we will add the input field
27:00 - 27:30 with a type file after that we have to create one label tag and in this label we will add the image tag we are adding this image for this upload icon so in this SRC let's add the curly braces and we will use assets do upload button icon after that let's create one paragraph
27:30 - 28:00 tag and in this one let's add the text upload your image after that in this input field we will add the ID that is upload one and in this HTML 4 we will add the same ID upload one now we have to hide this input field so just add hidden save the changes and come back to the web browser now you can
28:00 - 28:30 see we have the text upload your image if I click here it will open a new window to upload any image file let's close it so now we have created all the elements for the left side next we will add the CSS properties so let's come back and here in this vs code editor Let me hide this terminal and in this dip we will add the class name property here we will provide Flex item
28:30 - 29:00 Center justify between Max a small Flex call reverse then we will add the Gap then padding margin and padding for different screen size then margin for different screen size save the changes we have added this CSS properties in this left side but we have to add it in the parent div so let me just select it remove it and add it here in this pent div now save the
29:00 - 29:30 changes so you can see this text in the left side and we have some margin and padding from the left and top now in this H1 tag we will add the class name property so let me make this text in different line so that the class name will be visible so here let's add the class name we will provide text 4 XEL then text 5 XEL for different screen size and text 6 XEL also then font bold
29:30 - 30:00 text colored will be neutral 700 then we will add the leading tight that is the line height save the changes now you can see these text in larger font size next we will add the gradient color in this text which is background for that let's come back to the vs code editor here we have the span tag so in this one just add the class name property and in this one we will provide BG gradient to right from Viet
30:00 - 30:30 600 to this color then we'll add the BG clip text and text transparent save the changes now we are getting this text in gradient color after that let's add the CSS properties for this paragraph tag let's come back to the vs code and in this P tag let's add the class name
30:30 - 31:00 property and here we will provide margin text size and text color gray 500 save the changes so now this text is looking good after that we have to add the CSS properties for this button for that come to this label tag here we will add the class name property and in this one we will provide inline Flex Gap
31:00 - 31:30 three then padding X padding y border radius cursor pointer then we will add the BG gradient for the gradient background color then we'll add the first color code then second color code then we'll add the margin Auto then we will add the hover effect that is a scale then transition all then we will add the duration for the transition save the
31:30 - 32:00 changes now you can see this button with h animation and background color next we'll add the CSS properties for this text and this icon so let's come back first we will add the class name property in this P tag here we will add text white then add the text small and in this image tag simply add the width that is 20 save the changes
32:00 - 32:30 now this upload your image button is looking good and we have this beautiful hover effect now we have created the left side of the header let's come back to the vs code editor here we are using this BR tag to separate these lines but we don't want the multiple lines in mobile view for that here in this PR we will add the class name property here will use max MD
32:30 - 33:00 hidden now let me just copy it and paste it in this VR tag similarly in this VR tag also we will add the same class name here we will use max SM save the changes come back to the web browser now if I select inspect then go to mobile
33:00 - 33:30 view now we are getting this text in one line you can see this description text now we will add the right side elements of this header so in this div you can see where we have added the comment right side so in this div we will add the image tag in this image SRC we will use assets. headed image after that in this we will add the class name property here we will provide
33:30 - 34:00 width full then Max width medium save the changes now we have this image in the right side of the header if I click on inspect and open this web page in a smaller screen so you can see the image displayed in the right side is displayed at the top of the header component for the smaller screen and below that we have the text end button so now we have
34:00 - 34:30 created the UI design for the header section after that let's come back to the figma design and we have to create this section where we have to display the steps to remove the background so to create this section let's come back to the vs code editor and in this components folder let's create a new file that is steps. jsx here we will use our AFC
34:30 - 35:00 snippit next we will Mount this component in the homepage so let's open home. jsx and after this header let's add steps we are getting this suggestion so just click here and close this tag save the changes now just come to steps. jsx file and here we will Design this component so first we need this title in H1 tag so in this div let's create one H1
35:00 - 35:30 tag just copy the title text and paste it here in this H1 after this text let's add the BR tag save the changes here you can see we are getting the text in the left side after that let's come back to the vs code editor and after this H1 let's create create One D and in this one we will create
35:30 - 36:00 three boxes for that we will create one div and in this one we will add the image tag for this image after that here we will create one div and we will create two paragraph tags in the first one we have to add this text which is upload image so just copy it and paste it here
36:00 - 36:30 now in the second one we will copy this text and paste it here in this image SRC we will use assets dot upload icon now save the changes here we are getting this H1 text then this icon then a small text and large text next we'll add the class name for this section so let's add the CSS properties in this
36:30 - 37:00 div so just add the class name here we will provide margin for different screen size then padding for different screen size save the changes so now we have proper space for this section also after that let's come to this H1 tag and here we will add the class name property here we will provide text Center enter text to XEL for different
37:00 - 37:30 screen size we will add the different text size then we will add the margin top and font semi bold save the changes now you can see this text in the center and increased font size after that if I come to the figma design you can see this text is in the gradient color so we will provide the gradient color in this H1 text for that here we will add the class say BG gradient to
37:30 - 38:00 write from color then to another color then we will add the BG clip text and text transparent save the changes now we are getting this text in gradient color after that let's come back to the web browser and in this day we will add the class name property and here we will provide Flex items start Flex wrap Gap four
38:00 - 38:30 margin top and margin top for different screen size then justify Center save the changes next we will add the CSS properties for this boxes so in this div let's add the class name property and here we will provide Flex items start Gap four background
38:30 - 39:00 white then border then drop shadow then padding bottom then border radius now we are getting this box next we will add the hover effect on this box for that after this class name we will provide hover scale 105 then transition all then duration 500 milliseconds save the changes now you can see the
39:00 - 39:30 hover effect on this box next we will add the CSS properties for this image tag and this text so in this image tag let's add the class name property and here we will provide maximum width 9 after that in this P tag let's add the class name property and here we will provide text Excel font
39:30 - 40:00 medium now in this P tag let's add the class name property and here we will provide text small and text color neutral 500 then we will add the margin from Top save the changes now this box is looking good after that we have to create three boxes as you can see in this figma design so before that here we will add the BR
40:00 - 40:30 tag now it is looking good now let's create another copy of this div so let's copy and paste it here we will paste it for two times now just come to design file and just copy the text that is remove background and in the second P tag just paste this text now just copy the Third text and paste it here in this P tag
40:30 - 41:00 that is download image now we have to update the icon so in the second one let's add assets dot remove VG icon in the third one let's add assets. download icon save the changes now we are getting three boxes that is representing the steps to remove the background now this component
41:00 - 41:30 is ready if I open this in the mobile view you can see this component is looking good it is displayed in a column because we have used the flex wrap now we have created this section now we have to create this section where we will display the image background sliding effect so let's come back to the vs code editor here in this components folder let's create a new file with the name BG
41:30 - 42:00 slider. jsx in this file let's add the rafc snapit save the changes now come to home. jsx file and after this steps we will Mount BG slider component save the changes here we are getting BG slider and at left corner now we will Design
42:00 - 42:30 this component so to create the UI design let's open BJ slider. jsx file and here remove this text and inside this component before this return we will create the state variable so let's add const we will add the variable name slider position and the setter function name is set slider position is equal to user State and initialize it with 50 after that we will create one Handler
42:30 - 43:00 function so just add con handle slider change and it will be one Arrow function in this parameter we will take the event after that we will add set slider position and we will provide e.
43:00 - 43:30 Target do value so we have created one state variable that will save the slider position and here we have created the slider Handler function that will update the slider position as you can see in this design here we are going to use two images and one input field with a type range so that we can change the range from 0 to 100 and it will update the range in this
43:30 - 44:00 slider position State variable so let's create the UI So within this div let's create the H1 tag for the title so let me just make a comment here title after that let me just copy the title text from here and paste it in this H1 after this text we will add the BR tag to add the line break after that I will add the gradient
44:00 - 44:30 effect so you can see the same gradient effect in the previous text so let me just come back to the steps. jsx file and from this H1 tag we will copy all the classes and come back to the BG slider and here in this H1 we will add the class name and paste the classes save the changes now we are getting this text at the
44:30 - 45:00 bottom with this gradient effect next we have to create this slider for that here let's create one div in this div we will add the comment that is background image after that we will create the image tag here we are going going to use assets
45:00 - 45:30 dot image with background here we have two images image with background and image without background so we will select image with background after that we will add a style property and in this a style property we will add the object here we will Define the clip path and here we are going to use the template literal so let's add the backck and in this one we will use the
45:30 - 46:00 inser then provide the value zero and in the second parameter we will add the value from this slider position so let's add the dollar sign curly presses here we will provide 100.2 minus slider position then we will add the percentage sign now we will add the third parameter that is zero and the fourth parameter is also
46:00 - 46:30 zero if I save the changes here you can see we are getting this image with 50% clip path if I change the value so if I write 80 you can see the 80% of this image if I write 20 you can see the 20% image is visible now let me now just make it 50 again and after this image tag here we will add one more comment let's add the comment text for
46:30 - 47:00 ground image so after this comment let's add another image tag in this image tag we will use assets do image without background now in this one we will add the a style property and in this a style property let's copy this clip path and paste it in this
47:00 - 47:30 style in this one we will remove this second parameter so let's remove it and paste it at the end so it will be the fourth parameter so we have added it in the fourth parameter from here let me remove this 100 minus just provide the slider position
47:30 - 48:00 here we have provided this slider position in the second position and here we have provided it in the fourth parameter now save the changes and come back to the web browser now you can see we are getting two images now if I make it 40 you can see the 40% of this image and 60% of this image so this logic is working after
48:00 - 48:30 that we have to make the changes in this slider so we will create one slider using the input field so before closing of this div let's add the comment that is slider and here let's add the input field and in this input field we will add the type range and and we will Define minimum range zero and maximum
48:30 - 49:00 range 100 after that let's add the value property and in this value let's add slider position after that let's add the onchange property and in this on change we will simply provide the Handler function that is slide so here we will provide handle slider change that we have created here now say the changes now you can see we are getting one slider so if I slide this R slider so
49:00 - 49:30 when we move this slider you can see this clip effect after that we will add the CSS properties so that both images will be visible on same place so let's come back and in this div let's add the class name property and here we will provide relative width full Max Max width 3 XL overflow
49:30 - 50:00 hidden margin Auto rounded Excel save the changes after that we will come to this image here we will add the class name property and here let's provide absolute top zero left zero width full height full save the changes now you can see we are getting this effect when we
50:00 - 50:30 move the slider after that we will add the CSS properties for this slider so let's come back and here we have this input field in this one we will add the class name property and here we will provide absolute top 1 Y2 left 1 Y2 then we'll add the transform minus translate x 1 by 2 minus Translate Y 1 by2 then we will add the width full Z
50:30 - 51:00 index and one custom class name that is slider save the changes now you can see we are getting this Rin slider in the middle of this image and this slider is working fine after that in this H1 tag let me add margin bottom 12 and for the screen greater than small we will add the different
51:00 - 51:30 margin now we are getting this margin after this text next we'll add the custom class name property for this input field so that it will be hidden from this background slider so let's come back to the index. CSS file and here let's add the class name that is slider here we will provide webkit appearance none height
51:30 - 52:00 100% background transparent now save the changes now you can see the range input field is invisible and still it is working next we have to replace this blue dot with our slider icon for that let's add the class name do slider then we'll add the double column Das web
52:00 - 52:30 kit slider thumb here we will provide appearance none width 30 pixel height 30 pixel then we will add the background image URL and here we will provide this icon path SL slide icon SVG then we will add the background position it will be
52:30 - 53:00 Center then we will add the background repeat none or no repeat then we'll add the background size cover save the changes now you can see instead of the blue dot we are getting this image that is the slider image so this slider is perfectly working so now we have created this slider after that let me close this
53:00 - 53:30 file and here in this div let me add the class name property and here let me just provide the padding from bottom padding y axis and margin X save the changes now we have a space at the bottom now this section is working fine let me open this in the phone view so you can see in the phone view also this slider is working
53:30 - 54:00 fine so now we have completed this slider section next we have to create this customer testimonial section for that in this components folder we will create a new file and write the file name testimonials. jsx here we will use RFC snippet we have to mount the this component in the homepage so let's open home. jsx file
54:00 - 54:30 and after this BG slider we will Mount testimonials component now just open the testimonials. jsx file here we will add the UI component so if I open assets. JS file so in this one you can see we have the testimonials data where we have two object with ID the text author image and job title and it is in the
54:30 - 55:00 aray and in this aray we have two object and each object is representing a single testimonial data so we have total two data now we will use these data to create our testimonials so first in this div we will create a comment and here we will add the text title where we will add the title for this testimonial component so you
55:00 - 55:30 can see the title so let's create the H1 tag and in this one we will paste this text customer testimonials here we will add the class name property and let's come back to the steps. jsx file from here let me just copy the same class name from this H1 tag after that come to testimonial component and paste the
55:30 - 56:00 class name in this H1 with that here we will provide padding y5 save the changes now we are getting this text after this text we have to create two boxes for the testimonial data so here simply create one D and in this
56:00 - 56:30 one let's add the curly bra here we will use testimonials data that we are getting from the assets file this data is an array so we can use the map method and in this one we will pass individual item and index number as parameter and we will return one structure using the this div first we will add the key property
56:30 - 57:00 in this div we will add the index number after that in this div we will create one paragraph tag so this paragraph tag is for this quote icon so let me add the quote icon so just copy and paste it here after this P tag let's create another P tag here we will add the testimonial
57:00 - 57:30 text so to get the text in this P tag we will add the curly braces here simply add item. text after this paragraph tag let's create the div and in this div we will add the image tag and in this image SRC we will provide item. image after this image tag we will create one div and in this div we will create two
57:30 - 58:00 paragraph tag the first one is for this div and the second one for this job Ro so in the first one let's add the curly Braes and we will add item. author and in the second one we will add item dot job title now see the changes now you can see we are getting
58:00 - 58:30 this quote then text then image author name and job title and now we have the second data in the same structure next we will add the class name properties for this component so let's come back in this St we will add the class name property and here we will add grid then provide GD columns one for above a
58:30 - 59:00 screen size grd columns two then Gap then Max width margin Auto then padding and save the changes now just come back and we'll create this boxes so come to this div here we will add the class name property here we will provide background white B radius padding drop shadow maximum width margin auto save
59:00 - 59:30 the changes so you can see this white color of box after that we will add the hover effect on this box so that when we move cursor over it it will display the increased size so in this classes let's add hover scale 105 transition all duration 700
59:30 - 60:00 milliseconds save the changes now you can see when I move cursor this size is increasing now just come back to the vs code here in this P tag let's add the class name property and here we will provide the text 4 XEL text Gray 500 now just copy the class name from here and paste it here in this P tag here we
60:00 - 60:30 will make it text small save the changes now you can see we are getting this codes and then we have the testimonial text after that we will come to this div and here we will add the class name property here we will provide Flex item Center Gap three margin top five save the
60:30 - 61:00 changes now we are getting the image in the left side and in the right side we have the name and job title after that let's add the CSS properties in this image so let's add the class name property here we will provide the width n then provide rounded full so that it will be a circle save the changes now you can see the image is
61:00 - 61:30 looking good with this size next we will add the class name property for this text which is the users name and job title so in this job title let's add the class name and here let's provide the text a small then text color gray 600 save the changes now our component is looking good after that let's add some custom font in our
61:30 - 62:00 project so let's open a new tab here we will search for outfit font let's open this website fonts. goole.com from here click on this button get font then click on get embed code then click on import now just copy this import
62:00 - 62:30 statement now just open index. CSS file and in the first line paste this import statement after that here we will add the property that will be applicable for all the elements so here we will add the font family and provide outfit save the changes close this tab now can see this quote icon is looking good and this text
62:30 - 63:00 is also looking good so after applying the custom font this website is looking beautiful after that we will create this area so that user can upload the image from here and from here also so to create this section let's create a new component so in this component folder we will create a new file with the name upload.
63:00 - 63:30 jsx here we will use RFC snippit and we will Mount this component on the homepage so let's open home. jsx file and after this testimonials we will Mount the upload component save the changes so first here we have to add the title so in this upload Ro component within this div let's add the H1 tag and
63:30 - 64:00 from here let me just copy the title text and paste it here after that in this div let's add the class name property and here let's add the padding bottom 16 and here we will add the comment also so that we will get to know this is title in this title we need the gradient color so let's come to steps. jsx file and from here just copy the classes from
64:00 - 64:30 this H1 now just come back to the upload. jsx file and in this H1 we will add the class name property and paste all the classes now save the changes so now you can see the title is looking good see the magic try now in this one we'll will add some other classes that is padding Y
64:30 - 65:00 and for a screen size more than medium we will add py 16 save the changes now we have extra padding for this section after that we have to create this upload button for that simply come to header. jsx file from here let me just copy this div come to a load. jsx file and after this H1 just paste
65:00 - 65:30 it in this D we will add the class name property and here we will provide text Center and margin bottom 24 after that here we have provided ID upload one in the previous button so here we will add the upload to and in the label tag also we will provide upload
65:30 - 66:00 to now save the changes and come back to the web browser here this page is not loading because we have used this assets do upload button but we have not imported the assets so just add import then we will add the assets from assets file now save the changes scroll down now you can see we
66:00 - 66:30 are getting this upload button Let me refresh this web page we are getting this upload button if I click here it will open a file selection window now just click here to cancel it now we will create this footer so to create this footer we will come to components folder and create a new file that is footer. jsx here also we will use our
66:30 - 67:00 afce we have to mount this component in the app.jsx file and we need the footer in all pages so we will mount it in the app component so after this route we will Mount footer component after that let's come back to the footer. jsx
67:00 - 67:30 file in this div we have to create the image tag for this logo then we will add the paragraph tag for this text then we'll add the div for this images so in this div let's add the image tag here we will use assets do logo after this image tag let's create the paragraph tag and in this paragraph tag we will add this
67:30 - 68:00 text so let me add the text here copyright at greatest stack. all right reserved after that we will create one div and in this div we will create three images tag in all three images tag we will provide the width that is 40 and in this SRC we will add the curly
68:00 - 68:30 bres in the first one we will provide assets do Facebook icon in the second one we will provide assets do Twitter icon in the third one we will provide assets dot Google Plus icon save the changes so we are getting this footer next we have to provide some CSS properties for
68:30 - 69:00 this footer so let's come back to the vs code editor and in this div tag let's add the class name and here we will provide the tnd classes Flex item Center justify between Gap four then padding and padding for larger screens and padding by3 save the changes now we are getting this image then this text and in the right side we have these
69:00 - 69:30 icons next we will provide the CSS properties for this image tag that is the logo so in this image let's add the width let's provide 150 after that in this P tag let's add the class name property here we will provide Flex one border one here we will add Flex one border L then border gray 400 padding left four
69:30 - 70:00 then text small then text color and Max SM hidden we will make this paragraph hidden in the phone view that's why we have added this Max SM hidden after that in this div let's add the class name property that is flex and GAP one save the changes now our full foter is looking good as you can see now we will get this
70:00 - 70:30 footer in all pages so if I change the path / result here also you can see we are getting we are getting the navigation bar and footer so let's come back to the homepage again so now we have created all the sections of our homepage after that we will create the result page so you can see in this figma design file this is the result page so
70:30 - 71:00 to create the UI design of the result page let's come to result. jsx file and in the browser we will open Local Host Port 5173 SL result path now we will Design This result page so to create this result page let me remove this text from here and in this div let's add the class name property that
71:00 - 71:30 is margin and Main height 75 VH save the changes now this footer is displayed at the bottom and we are getting this space for the result page now just come back to the vs code and within this div let's create another div and and here we will add one comment that is
71:30 - 72:00 image container after this image container comment we will create one div now in this image container we will create two section that is left side and right side of this image container in the right side we will display the background removed image and in the left side we will display the original image for that in this div let's add one comment
72:00 - 72:30 and write the comment text left side after this comment let's create one div and in this one let's add the paragraph tag and write the text original after this paragraph tag we will create cre one image tag and in this image SRC we will
72:30 - 73:00 use assets dot image with background after this div let's create another comment here we will add the comment text right side after this comment we will create another div and in this div let's add one P tag and write the
73:00 - 73:30 text background removed after this paragraph tag let's create one div and in this div we will add the image tag and here we will add assets dot image without background now we will add CSS properties for this section so let me save the changes and
73:30 - 74:00 come back to the web browser here we are getting two images and we are getting the text original and background removed now let's add the CSS properties in this div so let's add the class name and here we will provide the tent classes so let's provide background then border radius then padding X and Y then drop
74:00 - 74:30 shadow save the changes now we are getting this white color of container after that in this div let's add the class name property here we will provide Flex then Flex column for a smaller screen we will add grid grid column gap eight
74:30 - 75:00 now in the left side we are getting the original image and the right side we are getting background removed image now let's come to this P tag and here we will add the class name property here we will provide font semi bold then text color and margin from the bottom in this image tag let's provide the class name property and here we will
75:00 - 75:30 provide rounded medium then border let's save the changes now we are getting the rounded edges after that come to this div which is the right side in this div let's add the class name here let's provide the classes Flex Flex
75:30 - 76:00 column after that in this P tag we will add the same class name so let's copy the class name from this p and paste it here after that in this div let's add the class name property and provide rounded medium border then border color height full related and custom class name that is BG
76:00 - 76:30 layer after that save the changes and come back to the web page so in this image also you can see the rounded corner right now you can see some images are visible at the edges so to fix that here we will add overflow hidden save the changes now the edges are perfect so whenever we will upload the image for the background removal it will take time
76:30 - 77:00 to remove the background so it will process the image after that it will display that image in the right side so in that processing time we will add the loaded screen so to display the loaded screen after this image tag we will create one div and for now let me comment out this image and in this div let's add the another
77:00 - 77:30 div in the first one let's add the class name property here we will provide absolute right then bottom then transform then translate X and Translate Y after that save the changes now you can see the right side image has been removed we have the empty background now in this background we will add one
77:30 - 78:00 image as you can see we have added the custom class name BG layer so in this BG layer class name we will add the background image so let's copy this BG layer class name and we will come to index. CSS file here we will add this class name here we will use background image and we will use the URL here we will provide
78:00 - 78:30 slash if I open the public folder here we have the BG layer. PNG so let's provide that name /bg l.png save the changes now you can see here we are getting transparent background pattern image now come back to this result. jsx file and in this div we will display one
78:30 - 79:00 loader so until the original image gets processed and displayed with transparent background till then we will display one loader so in this div we will create the loader so let's add the class name property in this div and let's provide the border for then we will provide the Border color then we will add the Border radius full then height and width and
79:00 - 79:30 Border top will be transparent then we will add the animate a spin save the changes and come back to the web browser now you can see one loader in the right side and whenever we will receive the image after processing then this div will be hidden and we will make the image visible again so it will look something like this after that we will create these two
79:30 - 80:00 buttons so to create these buttons they will come out of this image container so this image continue div is ending here so after this div let's add the comment and we will add the comment text buttons here first we will create one one div and in this div we will create one button
80:00 - 80:30 tag after this button tag let's create one anchor tag we will use this anchor tag to download the image and we will use this button tag to create this try another image button so let me just copy the text from here and paste it in this button tag after that copy the text download image and paste it in this Anor
80:30 - 81:00 tag next we will add the CSS properties for these buttons so just come back to the vs code and in this div let's add the class name property and here we will provide Flex justify Center justify end item Center Flex STP Gap four and margin top let's save the changes now you can
81:00 - 81:30 see these buttons in the right side as you can see in the design after that we have to design the first button that is try another image so in this button tag let's add the class name property and here we will provide the padding X Y then we will provide the text color then text size then border then border color rounded
81:30 - 82:00 full then we will add the hover effect that is a scale 105 transition all and transition duration that is 700 milliseconds let's save the changes now the first button is looking beautiful with this hover effect next we will add the CSS properties for this second button so here in this anger tag let's add the class name property and here we will write the padding and text color that is text white then
82:00 - 82:30 text a small then we will provide the gradient color in the background so we will provide two color code then we will add the rounded full save the changes so now you can see the second button is also looking beautiful so in the second button also we will add the same hover effect so simply copy the the code from this one and paste it in the second button save the
82:30 - 83:00 changes now these hover effect is working fine we have created the UI of our result page next we have to create the UI of this credit purchase page so let's come back to the vs code we will open by credit. jss T file here remove this text save the changes after that let's come to our web
83:00 - 83:30 browser and open the path slby now in this page first let's add the class name property in this div so let's provide the minimum height of 8vh text Center padding top margin bottom save the changes now we are getting the footer at the end and we have a space for our
83:30 - 84:00 UI first we have to create this button for different plans so in this T let's create the button tag from here let me copy this text and paste it in this button after this button tag let's create the title using the H1 let's copy the title and paste it in this
84:00 - 84:30 H1 after this title we are getting this kind of warning let me collect it after that here we will add one div and inside this div we will display different cards so for different plans we have created one are in this assets. JS file we have one aray where you can see three objects each object is representing a
84:30 - 85:00 single plan where we have the ID price credits and description of that plan so we will use this plans areay to display this UI so let's come back to the bu credit. jsx file here we will add the curly braces and we will use plans this is an array so we can use the map method and in this one we will pass the arrow function in the parameter we
85:00 - 85:30 will get the item and index number here we will return one div in the plan first we have to display this image so to get this image we will use the IMG tag and here we will use the assets dot logo icon here we will provide the width property that is 40 after this image tag we will create
85:30 - 86:00 the paragraph tag and here we have to display the plan name that we have stored in the ID property so let's add the curly bres we will add item. ID after this paragraph tag let's create another paragraph tag here we have to display the plan and description for that let's add item do DC
86:00 - 86:30 description where we have stored the description of our plan after that let's create one more P tag in this one we have to display the price and credit so to display that in this paragraph tag let's create the span tag because in the UI you can see the price is in the large font so we will provide the larger font for this
86:30 - 87:00 asan tag in this one we will add the dollar sign curly bres in this one just add the item do price after this aspan tag let's add forward slash and here we will add the curly bres and let's write item do credits then write the text credits save the changes here we are getting basic
87:00 - 87:30 description and price and credit $50 500 $250 5,000 credits after this paragraph tag we will create the button tag let's copy the text get started and paste it here or let me remove this text and here we can provide the text called purchase let me save the
87:30 - 88:00 changes now we will add the CSS properties for this page so first we will add the CSS properties in this button tag so let's add the class name and we will provide the border border gray 400 padding X padding Y and rounded full then margin bottom save the changes now this our plans button is
88:00 - 88:30 looking good after that we'll add the CSS properties in this H1 tag so let's come to steps. jsx file and copy the class name from this H1 tag now just come back to the buy credit. jsx file here we will add the class name property and paste the classes after that we will add margin bottom six and for different screen size we
88:30 - 89:00 will add the margin bottom 10 save the changes now this text is also looking good after that we have to add the CSS properties for these plans so come to this div let's add the class name property here we will Pro wide Flex Flex WP justify Center Gap
89:00 - 89:30 six and text left save the changes now it is displaying the plans side by side after that let's come back and here in this div we will add the class name here we will add the key property that is index from this parameter in this div let's provide the
89:30 - 90:00 classes background white drop shadow small then border then border large then padding Y and padding X then text Gray 700 save the changes so now these boxes are looking good after that we will add the hover effect on the these box so it will display some scale effect so let's add
90:00 - 90:30 the hover scale 105 transition all dation 500 milliseconds save the changes now when I move cursor over these div you can see beautiful hover effect after that we will add the CSS properties for these plan title that is basic Advanced and business plan for that here in this paragraph tag
90:30 - 91:00 let's add the class name property and here we will provide margin top font semi bold save the changes now we are getting the Bold text for these plan title after that we will add the class name in this P tag here we will add text small after that in this P tag we will add the class name property and here we will add
91:00 - 91:30 margin top six let's save the changes after that we will come back to this vs code editor and in this as span tag let's add the class name property and here we will provide text 3 XEL font medium now come to this button tag here we will add the class name property here we will provide width full background gray
91:30 - 92:00 800 text white margin top text a small border radius and padding y then minimum width 52 save the changes now you can see these buttons are also looking beautiful so we have completed this pricing page also now we have completed the UI design for the
92:00 - 92:30 homepage then we have created the price plan page to buy the credit then we have created this result page next we will integrate the color authentication in our client project for that let's open a new tab and search for for clerk after that we will open this website clerk.com from here we will
92:30 - 93:00 click on get started now click on Google or GitHub to create a new account or you can also use the email ID to create a new account so I'll use the Google option let me click on this button select the Google account click on continue button after that here we have to provide the application name so I'll simply write BG
93:00 - 93:30 removal that is background removal after that click on this create application button after that we have to select the framework so let me select react from here we have to install some packages we have already created the project after that we have to install this package that is color SL color
93:30 - 94:00 react so let me just copy this statement or command and uh let's come to the terminal and we will stop the project using contrl C and yes after that we are at the client folder here we will paste this command npm install color SL color react we will press enter so it will install the
94:00 - 94:30 dependencies required to add the color authentication in the project so now we have installed this package after that come back and here we have to create one environment variable where we will store this publishable key for that in the client folder we will create a new file and write the file name Dov here we have to paste it so just
94:30 - 95:00 copy and paste it here now save the changes next we have to go to main. jsx and we have to import the publishable key so let me just copy these statement from here and we will come to main. jsx file and after this import we will paste this code by executing this statement we will
95:00 - 95:30 get the envirment variable in this variable after that we have to use the color provider and in the color provider we have to add the publishable key as you can see here so let's come back inside this browser router tag we will add cler provider we have created this Coler
95:30 - 96:00 provider tag we have to wrap this app component using this color provider so let's move it within this tag now we have successfully wrapped this app component next we have to import the color Provider from the color package so here Simply Ty import curly bres color Provider from here we will provide the package
96:00 - 96:30 name that is at color SL col react after that in this color provider we have to add publishable key so let me just copy it from here and we will paste it in this color provider tag here we are getting the publishable key from the environment variable and we are providing it in the color provider tag
96:30 - 97:00 right click and select format document save the changes now in the project we have the support of color authentication now we can use the component for user signin and sign up so let me try this one let me just copy the tag from here which is signin button and we will come to
97:00 - 97:30 app.jsx and here after this nav bar let me paste this tag we have to import this tag from the package so just write sign in button from color and color react select it click on it so it will be imported now save the changes and now we have to run this project so just add npm run
97:30 - 98:00 Dev now let's come back to the web browser here we are getting One signin button if I click here now you can see we are getting this signin form and we can easily sign in in our application using this form now let me just remove this signin button from here and from here we will remove this import statement also save the changes and come back to the web browser reload this web
98:00 - 98:30 page we will add the logic so that any user click on this get started button then the login popup will be displayed here for that let's come to na. jsx file and in this component we will add const curly addes here we will do a structure open sign in and we will get it from use
98:30 - 99:00 color cook we are getting the suggestion just click here so it will be automatically imported from the color package in the na. jsx file after that here in this button tag we will add the on click property and in this one we will pass the arrow function and here we will call open signin function and in this one we will provide one empty object let's save
99:00 - 99:30 the changes and come back to the web browser let me reload the web page and click on this get started button this button is not working let's come back to the vs code here we have to add this parenthesis save the changes come back to the web browser now click on this get started button so it is opening one popup for sign in so user can sign in using this form let's click on this button continue with
99:30 - 100:00 Google now we are successfully logged in let's come back to the project and still we are getting this button now when the user will get logged in then we will display their profile icon and color profile settings for that let's come back to the vs code editor and in this Navar we will write const curly Braes after this curly Braes we will
100:00 - 100:30 write user hook if the user gets logged in then we will get the sign in state and user data so simply right is signed in with that we will get the user if the user gets signed in then we will get the variable true and with that in this user we will get the all user
100:30 - 101:00 data like email profile picture signin method and Etc Now by using this is signed in property we will hide this button and we will display the user profile icon for that after this link tag we will add the curly braces here we will check if our is signed in variable is true in that case we will return one div and if it is false then
101:00 - 101:30 we will simply return this button so let's move this button from here and past it after this colum now in the div we will add the user button so let's add opening Arrow we will add the user button from cler react then close this tag and save the changes now we are successfully logged in and here we are getting the profile
101:30 - 102:00 icon if I click on this manage account here we can add the multiple email we can update the profile change the picture and we have other options in this security we are getting the device information here we have the option to set our password because we have logged in using the Google account when when we sign out from here let me click here again we are getting this get started button so this logic is perfectly
102:00 - 102:30 working now we have successfully integrated the color in the client project next we will create the back end and in the back end we will use the web hooks so that when the user login on the website or create an account then we will save the data in the mongod DV database for that here in this BG removal folder we will create a new folder and
102:30 - 103:00 write the folder name server that is our backend server now in this server we will right click and select open in integrated terminal now we have two terminals first one is for the client and the second one is for the server where we will set up the backend server now right click click on this server and create a new file that is server.js now just close other
103:00 - 103:30 files now the server.js file is open and in this terminal you can see we are at the server folder so here we will add the command npm init so our package name is server just press enter all the options will be default here we have the entry points so we have already created server.js file that's why it is displaying server.js so we will use the same file
103:30 - 104:00 just press enter we don't need any test command simply press enter after that you can see one package.json file if I open it here we are getting this main server.js then we have two scripts one is test and the second one is a start let me remove this taste a script here we are getting the script start here we have the node server.js
104:00 - 104:30 file now whenever we will add npm Run start then it will run node server.js so let's clear the terminal and here we will install some packages for our backend so here let's write npm install Express with that we will install course. EnV and nodemon then we will install the form
104:30 - 105:00 data after that we will install Json web token after that we will install then we will install multer then we will install exos and after that that we will install SX then install the razor
105:00 - 105:30 pay these packages are required to create our backend so we will install all these packages just press enter and wait for the package installation to be completed now all packages has been installed and here we have no mod modules folder after that we'll create a simple Express app in this server.js file but
105:30 - 106:00 before that here we will create one environment file so here in this server folder we will create EnV file and in this Dov file we will store the secret keys for different application after that let's close this file and come to server.js file and here we will set up one simple Express app in this file first we will import EnV SLC
106:00 - 106:30 config by using this we will get all the environment variable in the backend process after that we will import Express from Express package after that we will import course from course package after that here we will add the comment and here we will write app config here first we will Define the port number on which Port our back end
106:30 - 107:00 will start so let's add const Port equal to here we will get the port number from the envirment variable for that simply add process. EnV do Port if the port is not defined in the environment variable then we will use the port number 4,000 after that we will initialize the
107:00 - 107:30 instance using the Express package so just add con app equal to express after that we will create one API route so let's add the comment and we will write API routes let's create one route using the get method so just add app.get our Endo will be slash here we will add the addo
107:30 - 108:00 function in this one we will get the parameter request and response now we will send one response using the send method here we will add the message that is API working so here we have created one API Dot and here we have defined the port now let's
108:00 - 108:30 start this app on this port number so let's write app do listen method and in this method we will provide the port that we have declared here after that we will pass the Aro function and here we will add the message in console so just add console log and write the message that
108:30 - 109:00 is server running on Port then add the port number that we will get from this port variable so we have created one simple Express app after that we will add the comment and here we will write any ize middle Wares so let's add the comment initialize middle
109:00 - 109:30 Wares here we will add the middleware that is app. use then express. Json by using this whenever we will get any request on the server then it will be passed using the Json method after that we will add one more me middleware so just add cores by using this we can connect our client that is running on the different
109:30 - 110:00 port to the backend server we will save the changes after that in this package.json file we will create one new script so here we will write the script server and in this one we will use node Monon then server.js by using this node Monon we will restart this server whenever we
110:00 - 110:30 will make any changes in the code file so it will automatically restart the backend server now to run this project we'll simply write npm run server So In This Server folder we are adding this command npm run server let's press enter here we are using the import statement so first we have to make our project modular so in this package.json file
110:30 - 111:00 here we will add type and we'll write module save the changes now whenever we make any changes so it automatically start our server and you can see the message server running on Port 4,000 now let's come back to the web browser let's close these files and here we will open open a new tab and here we will type Local Host Port 4,000 now you can see the message Api working on this
111:00 - 111:30 Local Host Port 4,000 so the API is working fine next we will set up our backend so we will create the folder structure for our back end so in This Server folder we will create a new folder with the name configs inside this folder we will create all the configuration file like database configuration and other after that in this server folder
111:30 - 112:00 let's create another folder with the name controllers in this folder we will create all the controller functions that contains the backend API logic after that let's create a new folder in This Server folder with the name middle Wares inside this folder we will create the middle Wares like authentication middleware or form data passing
112:00 - 112:30 middlewares Etc after that let's create one more folder with the name models in this folder we will create Mongo's model that contains the structure in that structure the data will be stored in the database after that we'll create one more folder with the name routes in this one we will Define multiple routes for different
112:30 - 113:00 purpose now the folder structure is ready for our back end now we will create a new model by using that model we will store the users in the database suppose any user click on this sign in button and created One account then we will store the user account data in the database for that in this models we will create the model for the user Data
113:00 - 113:30 before that we will set up the database in the backend project for that let's come to web browser and we will open mongodb Atlas let's open this page from here we will create our database account after creating the account we will get one URI and we will use that URI in the project let's click on this Google
113:30 - 114:00 signin button after that click on this connect button we will select Compass here we will select compass from here we will get the urii so let me just copy this UI from here now just come back to the vs code editor and we will open EnV file in the server folder here we will create one variable that is mongod
114:00 - 114:30 DBU and in this one we will paste the URI make sure to remove the forward slash at the end from here we have to replace the database password that we have created while creating this database collector here we have to replace the password you have to enter the password that you have created while creating the
114:30 - 115:00 database so let me add my password after that save the changes and we will open this config folder and here we will create a new file that is mongod db. JS in this file we will import the from package now we'll create the arrow function with the name connect
115:00 - 115:30 DV it will be one async Aro function so just add async and create the Aro function after that we will add a weight do connect then we will add the dollar sign craes here we will provide our mongod DVI so just add process. EnV do from here just copy the environment
115:30 - 116:00 variable name and paste it here after that we will provide slash and the project name so the project name is BG removal after that we have to export it that is the connect DB function so just add export default we will provide our function name that is connect
116:00 - 116:30 DV after that here we will add do connection dot on here we will provide the event name that is connected after that we will pass the Arrow function whenever we will be connected with the mongod DV then this function will be executed and in that case we
116:30 - 117:00 will display the message in console so just add console.log database connected now save the changes and after that let's come to server.js file in this app config let's add a wait and we will call connect DB function we are getting this suggestion just click here here we have to add the extension
117:00 - 117:30 that is JS and we will call this connect DB function now save the changes now you can see in the terminal we are getting two message database connected server running on Port 4,000 so now the database is successfully connected with the mongod DB now our Express app is successfully connected with the mongod DB database next we will create the models for the
117:30 - 118:00 users data so in this model folder we will create a new file and write the file name user model. JS here first we have to import from Mongo's package after that to create the model we have to Define the schema to describe the schema we will add the variable with the name user
118:00 - 118:30 schema equal to we will use new keyword and we will use the do schema Constructor in this one we will add the object and here we will Define the structure of a user model so first we need the color cler ID in this one we will store the users's clerk ID and the property type will be a
118:30 - 119:00 string after that we will make it required so just add required true and it must be unique so let's add unique and we will make it true so whenever we will create a user then we need this clerk ID and it must be a unique value after that let's create a copy of
119:00 - 119:30 this and here we need the email property the type will be string required true and unique true now let's create one more copy here we will provide photo the phototype will be a string required true but we can remove this unque property now let's create one more copy here we have to provide the first
119:30 - 120:00 name type will be a string and we will remove this required property similarly let's create one more copy and name it as last name let's make the n capital after that here we will add another property that is credit balance so just add credit balance here we will add the type it is
120:00 - 120:30 number then the default value will be five so whenever user create a account then the user will get five credit for free that's why we have added the default value five now the schema for the user is ready where we have declared the Coler ID in email photo first name last name and credit balance Now by using this user schema we will create the user model for that just add
120:30 - 121:00 con user model equal to do models do user or we will provide do model then provide the user then provide the user schema now the model is ready next we have to export this model from this file
121:00 - 121:30 so that we can use it in any other functions so let's add export default user model now the model is ready now we can use this model to create the users in the database so whenever we will create the account using this clerk then the user data will be saved by the cler now I want to shve the data
121:30 - 122:00 with our back end so that when the user creates the account then we will store the users data in our database for that we have to use the Coler web hook so just add clerk web hooks let's open this website whenever we will create one account we will get this type of data using the web hooks so by using this data we can save
122:00 - 122:30 the user in our database so now we will set up the B hooks in the backend project for that first we will create the new controller function so in this controllers folder let's create a new file with the name user control controller.js here we will create the controller function so let's add one comment here we will write API
122:30 - 123:00 controller function to manage cler user with database then we will add the API Endo so the API will be created at HTTP Colum sl/ SL Local Host Port 4000 SL API sluser SL web
123:00 - 123:30 hooks so we will create this web hooks endpoint now let's create the Aro function here so let's add const color B hooks it will be one async Arrow function so just add async keyword and create the arrow function in this parameter we will get request and response here we will add the logic so
123:30 - 124:00 that whenever we will create a new user in the front end then we'll get the user data in our back end also after this we need a public IP to work with cler web hooks to get the public IP we will use versal that will assign a domain to our back end and we will use that domain as a public IP in the cler web hooks so first we will initialize
124:00 - 124:30 the git let's click on this button initialize repository here we have to commit it here it is displaying multiple files so we have to exclude the node modules folder for that let's come to this BG removal folder folder in this one we have client and server now here in this road folder we'll create a new file with the name git ignore so just add dotg
124:30 - 125:00 ignore now in this file simply type nodecore modules so it will ignore all the files from this folder save the changes now you can see 58 files let's click on this icon again and here we will add one comment so let me add the comment first commit and click on this
125:00 - 125:30 commit button click on yes now we have created one git repository next we have to publish this branch on the GitHub repository so just click on this publish Branch I have already connected the vs code with the GitHub account if you have not connected you will get a prompt to connect your GitHub account with this vs code so here you can see we have two options private and public repository so let me select private repository with the name BG removal just click
125:30 - 126:00 here now it is uploading all our files on the GitHub now you can see we have successfully uploaded this project on the GitHub now in this server folder we have to create one versal do JS file so let's create that file we will create a new file in This Server folder and add the file name versal do Json after that let's come back to the web browser and we will open github.com
126:00 - 126:30 slre stackd here you can see one notes repository let me open this and here we have this versal Json config for M let me open this one here you can see we have versal Json config for Express backend so let me just copy this one and come back to the vs code and in this
126:30 - 127:00 versal dojon file we will paste the code we are using server.js as main file that's why here you can see we have added server.js if you are using index.js or main.js then you have to replace this file name now save the changes and again we will commit the changes so so here we will add the comment added versal Json and click on the commit button click on
127:00 - 127:30 yes then click on the sync changes now the files has been synced now we will open the GitHub account let's come to the github.com I'll sign in so now we have one Repository BG removal let me open this in this one you can see all the files has been uploaded and after that we have to
127:30 - 128:00 open viral.com then click on the login button I will continue with Google now let's add a new project from here we will select this BG removal click on import after that here we have to select
128:00 - 128:30 the root directory so click on this edit button and from here select This Server then click on continue button here we have to add the environment variables so just click here and come back to the vs code let's open EnV file and copy this one after that paste it in this versal inv variable so it will add the key and value after that here we have to provide the project name so let me add the project name BG
128:30 - 129:00 removal GS that is great stack we have provided the name then we have selected This Server as root directory we don't have to change anything in this framework after that just click on this deploy button now the deployment has started let me just wait for few seconds now we have this message congratulations and here we have the
129:00 - 129:30 button called continue to dashboard let me click here and in this dashboard you can see we have one domain from here we can access our back end so let me copy this backend URL and paste it in the new tab so you can see the backend is working we are getting the message API working now we have deployed the back end on versal let me copy this URL from here and now let's come back to the Color website in this
129:30 - 130:00 integration document you can see color dashboard just click here now we are at color dashboard now just click on this be hooks option and here you can see one button called add endpoint let me click here and in this endpoint URL we have to paste the backend link so let me add the complete URL https colon slash then BG removal gs veral do app after that we
130:00 - 130:30 need the web hooks at this end point that is/ API sluser SL web hooks so let me just copy it and paste it here so now we have provided the complete URL for the web hooks endpoint after that here we have to subscribe the events so scroll down and we will select user created user created at Edge user deleted and user updated select all these and just click
130:30 - 131:00 on this create button now we have created our endpoint and in the right side you can see we have this signin secret let's click on this I icon now we will get the secret key so just copy it and come back to the vs code editor and we will open EnV file here we will create a new environment variable so let me add the
131:00 - 131:30 name color web hook secret and paste the key that we have just copied save the changes now we have this web hook secret key and by using this secret key we will create the user controller function where we will get the user events to create this color we hooks here we have to create one try catch
131:30 - 132:00 Block in this TR block we will add the logic using that we will verify this web hooks so first we will import web Hook from s Wix package after that here we will add the comment here we will write create a svx
132:00 - 132:30 instance with color web hook secret after that here we will create one variable with the name W hook equal to new and we will use this web hook that we have imported from the SX package after that we have to provide our cler webook secret so just add process dot
132:30 - 133:00 EnV Dot and we have to provide the envirment variable name so let's open EnV file and copy this name Coler web hook secret copy and paste it here after that here we have to verify the header using this W hook so if I come to this web page web Hooks and here if I click on this testing now we can test an event so let me click on this user
133:00 - 133:30 created so here whenever a new user will be created at this endp point we will get these data in the body of the request and in the header we will get some SX ID svx timestamp and SX signature we will use these info to verify this web hook event for that let's add await and we
133:30 - 134:00 will use W hook do verify method and in this one we have to pass the request body in the Json Str stringify method so just add Json do a stringify and just paste request. body after that we will add the curly braces and in this object we will Define the svx ID svx timestamp and SX signature so
134:00 - 134:30 we will add svix ID here we will add request. headers and in this one we will type SX idid after that we will add swi timestamp and in this one we will add
134:30 - 135:00 request. headers and we will write svx time stamp after that we have to add the svx signature so let's add svx signature and let's provide request. headers and in this one we have to provide sfix
135:00 - 135:30 signature after this method if this S ID time stamp and signature is correct according to the web hook secret then the process will execute further else we will get the error so when any error occurs then the catch block will be executed so in this catch block we will add console log and where we will
135:30 - 136:00 console the error message so just add error. message with that we will create one response so just add response. Json here we will add the object where we will Define the success property false here we will add the message and in the message we will provide error. message suppose we don't have any error
136:00 - 136:30 it means the webook events is correct in that case we will check the type of that event for that first we will D structure the data and type from the body so we will type request. body in this data we will get these data like email address first name ID and in the
136:30 - 137:00 type we will get the event type so here you can see user. created this is one event if the user is updated then we will get the user do updated and if the user is deleted then we will get user. deleted by using this event type we will create the logic to save update and delete the user from the database for that here we will use the switch
137:00 - 137:30 case in this key property we have to add the type that we are getting from the request body here we will create multiple cases for multiple events here we will use user. created after that we will add the curly bres and inside this curly bres we will add this
137:30 - 138:00 break now let's create one more copy of this case copy and paste it the second event will be user do updated after that let's create one more copy and in this case we will add the type user. deleted so we have created three cases so according to the event type this
138:00 - 138:30 switch case will work now we will add the logic for the user created so if we get any event like user created then we will get the user data from this event and we will save the data in the database so just add const user data equal to if I open user model here we need the color ID email photo first name and last
138:30 - 139:00 name to create a new user for that here we will write Coler ID and in this one we will use the data. ID so in this data you can see we will get this ID as a string we will save this data. ID in this color ID after that we will add the email property and in this one we will use
139:00 - 139:30 data do email so in this data we are getting this email addresses let's copy this one and paste it here data do email addresses in this one we are getting multiple objects suppose if we have provided multiple emails in the account then we'll get multiple emails as you can see this is an array and in this one we have this first
139:30 - 140:00 object in this object we have this email address property ID link to property object and verification property now we will use this email address property to get the email address because this is an array so we will use the element zero and in this one we will use this email address property so let's copy and paste
140:00 - 140:30 it now we have the Coler ID and email ID of the user after that we will add the first name property so let's add first name and in this one we will get the user first name for that in this data object you can see we are getting first name so let's copy and paste it here with data do first name after that we need the last name we will write last name after that we will
140:30 - 141:00 add data Dot and in this data we are getting last name and it is giving one string so let's copy this property paste it here last name now we have color ID email first name last name next we need the photo property so just add pho photo to get the users's photo we are getting this image URL let's use this property so just use
141:00 - 141:30 data. image URL now we have the data to create a new user we have the color ID email first name last name and photo of the user next we have to create the user in the database so just add await and here we will use the user model do create method and in this one we will pass user data that we have just created and after creating this user
141:30 - 142:00 simply write response. Json and here simply add the empty object now we have created the logic to create the user in the database now we have to add the logic to update the user data in the database so in this case first we will create the user data like this so let's just copy this and paste it here from here we will remove this clerk
142:00 - 142:30 ID because after creating the account we never update the user clerk ID we can update the email first name last name and photo so we have added these four properties after that we have to update the user using this data so just add await user model and we will use the method find one and update in this one we will find the user
142:30 - 143:00 data using the color ID so just add curly presses we will write color ID and in this one we will provide data do ID after that we will provide this updated data so just write user data after that if the user update the name email ID or photo then we will get the latest data in the database after
143:00 - 143:30 that we will create one response using the Json method and here we will pass empty object now we have added the logic for the user update and user create next we'll add the logic for the user delete this logic is simple here we have to use the the await user model and here we will use find one and delete
143:30 - 144:00 method in this one we will add the object where we will Define the Coler ID and here we will add data. ID so it will find the user using this Coler ID and delete that user from the database after that we will will add response. Json and here we will add this empty object now we have successfully created
144:00 - 144:30 this Logic for the web hook after that we have to export these functions from this file for that here we will write export then add one object and in this object we will write color web hook let's save the changes and after that we will come to routes folder and in this folder we'll create a new route so just create a new
144:30 - 145:00 file and write the file name user routes.js in this one first we have to import the Express package after that we will import the controller function that we have created in the user controller file so just add color web hooks now we are getting this from this
145:00 - 145:30 controller folders and user controller.js file after that here we will create one router using this Express package so just add const user router equal to and here we will use express do router interface by using this router we will create a new endpoint so here we will
145:30 - 146:00 write user router. poost method after that in this post method we will write our endpoint path that is SL B hooks after that we will add the controller function that is Coler web hooks now we have created this route
146:00 - 146:30 next we have to export this user router from this file so just add export default then export this user router now we have created the new router and new route for the webook now we will use this router to create the API so just come to server.js file and here after this API route here we will add app do use and in this
146:30 - 147:00 one we will add the endpoint path that is/ API SL user after that we will add the user router so we are getting this suggestion use a router from this file let's click here so it will automatically import this after that we have to save the changes here we are getting one error let me open user controller.js
147:00 - 147:30 file and here we have imported this user model so here we have to add JS extension save the changes again now the database has been connected and server is running successfully on the port 4,000 after that we have to click on this button then we will add the comment so we will add B hooks
147:30 - 148:00 added and click on this commit button click on yes then click on sync after that we'll come back to the web browser and we will open this versal website then go to deployments now you can see the new deployment has been started after that in this EnV file we have created a new EnV right so we have
148:00 - 148:30 to copy it and go to settings then envirment variables and here just paste the new involment variable then click on save button now we have two environment variables that is color WB Hooks and mongod DB after that let's come back to the deployments now let's create a new deployment so just click on create
148:30 - 149:00 deployment we will select the main branch and click on this create deployment button so it will again start the deployment let us wait for few seconds now let's come back to the web browser and first we will delete this account so go to security then click on delete button and here we have to write
149:00 - 149:30 this delete account and click on this button now account has been deleted let's open the mongod DV database from here we will click on this browse collections here we will get this BG removal as you can see we have one users collection and in this collection we don't have any data now let's click on this button and click on continue with
149:30 - 150:00 Google Now the new account has been created let's come to the homepage after that let's come back to the mongod DV and click on this refresh button as you can see we have created the account on our front end using the Coler and in the mongod DV database we have the user details so we have the Coler ID then email address
150:00 - 150:30 photo first name last name and this credit balance that is default generated with the value five now let's click on this profile icon manage account let's update this profile if I click on this update button then click on upload we will upload one image after that let's come back to the mongod DB database and click on the refresh button now from here we can copy this
150:30 - 151:00 image URL and we will open the new tab and paste this image URL so you can see the new image URL that we have just uploaded in the front end and this image URL has been saved in the mongod DV database so so the web hooks is perfectly working for the user created and user update events now let's test the user delete event so let's go to security click on this delete Account
151:00 - 151:30 button then write this message delete account and click on this delete Account button now let's come back to the mongod DB database click on the refresh button so you can see this user collections is empty it means the user has been deleted from the database so this web Hook is perfectly working after that let's login again and
151:30 - 152:00 click on this continue with Google now we are loged in after that we will come back to the homepage and in this design file you can see we have to display the credits and we have to display the user's name so to display the credits let's come back to the user controller.js file and here we will create a new controller function to get the users creit data so
152:00 - 152:30 first we will add the comment and here we will write API controller function to get user available credits data after that here we will create the arrow function so just add const user credits equal to and here we will use the snc and create the function after that in this parameter we will get the request and response here we will add the try catch
152:30 - 153:00 block from this catch block we will copy the statement and paste it in this catch block here we have exported this color web hooks so let's cut it and we will past it at the end at the bottom of this page now in this Tri block we will add the logic that will return the user createit so just add
153:00 - 153:30 const color ID equal to request. body we will get the color ID from the request. body we will not send this clerk ID in the request body instead we will send a middle Weare that will verify the token and from the token we will get this clerk ID after that we will create a variable
153:30 - 154:00 with the name user data in this variable we will store the user data of the user that we will find using this color ID so just add await user model dot find one method after that we will add the object and here we will Define the Coler ID now we have passed the Coler ID that we are getting from request.
154:00 - 154:30 body after that we will create one response using the Json method and in this one we will add success property that is true after that we will add the credits property and here we have to add the users creit data so just add user data dot create it
154:30 - 155:00 balance now the controller function is ready we will export this function here so in this object we'll write user credits after that we will create one middleware for this controller function from where we can verify the user so in this middleware folder let's create a new middleware so we will create a new file and write the file name
155:00 - 155:30 .js in this file first we have to import the JWT token so just add import JWT from Json web token after that we will add one comment here we will write middleware function to decode JWT token to get color
155:30 - 156:00 ID after that we will create one Arrow function so just add con o user equal to a Sync here we will create one Arrow function in this parameter we will get request response and next function so so just add request response and next function after that here also we will add the try catch block and in this catch block let's come
156:00 - 156:30 back to the user controller and just copy the statement from this catch block and paste it here from here we will export this Au user function so just add export default Au user now in this Tri block we will add the logic that will convert the token to Coler ID before that let's come back to
156:30 - 157:00 the web browser and we will come to dashboard and from this dashboard we will click on sessions and here we will click on this customize sessions in our database we have added the Coler ID that is saved as user. ID in this Coler Dash code so here we will write color ID after that we will add the column and after this colum we will
157:00 - 157:30 simply click on this user ID so now you can see here we have added the color ID and user ID after that we will click on the save button now whenever this session token will be created in that one we will get this color I ID and in the Coler ID property we will get the user ID next we have to verify the token and after that we will copy the Coler ID in
157:30 - 158:00 the request body for that we have created this middleware so here we are using this middleware because we are at the development mode if you are working with production you can use the express color middleware if you come to this website here you will get the color Express with or you can use this one also in the production lbel project so
158:00 - 158:30 whenever you have to create a production level project then you have to use this color Express with or but currently we are in the development so we are using this manual JWT verification so after this first we will get the token from the header so just add const curly bres token equal to request. headers so whenever we create a API request to get
158:30 - 159:00 the user data or anything related to user then in the header we will provide this token that we will get from clerk session token after that here we will check if we don't have any token in the header in that case we will generate one response so just add a return response. Json and in this one we will add the success property that is
159:00 - 159:30 false and after that we will add the message that is not authorized login again now if we have the token then we will verify the token and decode that token so just add the con and here we will add the variable name token decode then use the JWT do decode method and in this one we will add the token
159:30 - 160:00 that we will get from the header after that we will get the color ID in this token decode so here we will add the color ID in the request body so simply write request dot body do Coler ID equal to token decode do Coler ID after that we will call the next call
160:00 - 160:30 back function now we have created the Au user function so we have successfully created this middleware to decode the token and get the clerk ID from the JWT token now we will use this or middleware in this user credits controller function to create an API that will return the user avable creit for that let's come to user
160:30 - 161:00 routes.js file after that here we will create one new endpoint using user router dog method and here we will add the end point that is/ credits here we have to add the middleware so let's add Au user so the file will be imported after this middleware we will add the controller function that is user
161:00 - 161:30 credits so let's click on the suggestion so it has been imported now save the changes now the API route is ready if I come back to the web browser they will create this section in the navigation bar where we can display the available credits of the user so let's open the client folder from here let's open SRC components and open navb bar. jsx
161:30 - 162:00 file before that here we will create one context also using that we can maintain our states and logic in a center place so in this SRC folder we have created a context folder and in this context folder let's create a new file and write the file name that is app context. jsx here we will write
162:00 - 162:30 const app context equal to create context so here we have created this context now just export this context and after that we will create the app context provider function so just add const app context provider equal to here we will create this Arrow
162:30 - 163:00 function in the parameter we will get the props after that here we will add one variable with the name value it will be one object and in this object whenever we store any variable or function then we can access it in any component in the project so let's add the return statement and here we will
163:00 - 163:30 return app context. provider tag within this we will add props do children after that in this tag we will add the value property and in this value we will add this variable which is value after that we will export this app context provider
163:30 - 164:00 function from this file so let's add export default and here we will add this app context provider function next we have to add this app context provider function in the main. jsx file so that any component can access our context so after this color provider we will add app context provider
164:00 - 164:30 tag so you can see the app context provider has been imported here and within this tag we will move this app component now we will get the support of app context in our project now save the changes and close this file after that here we will create one state variable so just add const credit set credit equal to use
164:30 - 165:00 State and initialize this value with volan data Falls after that here we will create one Arrow function with the name load credits data and it will be used to get the credit data from the API for that just add cost load credits
165:00 - 165:30 data and it will be one asynchronous Aro function here we will create this Aro function and in this function we will add the TR catch block we have to call the API in this Tri block and for that we need the user session token and backend URL so to get that let's open EnV file and here we will create a new environment variable
165:30 - 166:00 with the name V backend URL so let's write V backend URL and equal to http SL localhost Port 4000 now save the changes close this file here we will create one variable with the name backend
166:00 - 166:30 URL here we will get the backend URL from the environment variable for that let's write import dot meta do EnV Dot we have to add the variable name from this envirment variable so let's paste this we backend URL now we have the backend URL in this
166:30 - 167:00 variable next we have to get the users session token so to get the user session token we will write cost curly bres get token and here we will get the token using use or hook we have to import this use or hook so just add import curly
167:00 - 167:30 bres use o [Music] from at theate cl/ Coler react after that we will come to this triy block and here we will generate one token using the get token method so just write con token equal to a wait then use get token
167:30 - 168:00 method and after this we have the token and backend URL now we can call the API so to call the API we will use the exos so if I open package.json here we have not installed the exos in in our dependencies so first we have to install the exos so let's open this terminal where the front end is running so let's stop this project using contrl C and Y and here we will type npm install
168:00 - 168:30 exos now the exos package has been installed after that we will run our project so just add npm run Dev now in this context first we have to import the ex package so just write import exos from exos
168:30 - 169:00 package after that we will use this exos to create an API call so write const curly Braes data equal to a wait and we will use the exos doget method in this one first we will provide the backend URL plus we will add our endpoint path that is/ API SL user slash
169:00 - 169:30 credit after that we have to add the headers so just add the curly Braes we will Define the headers and in this one we will add the object where we will add this token that we are generating from this G token method after that we'll get the response so here we'll check if our data. success is true it means the API call is successfully
169:30 - 170:00 executed and here we will get the credits data we will save that credit in this credit state for that here we will write set credit and we will provide data dot credits suppose any error occurs in this Tri block then the catch block will be executed so here we will console log the error and with that we will display a
170:00 - 170:30 toast notification so to display the toast notification first we have to set up the react toasttify so let's come back to the web browser and we will open a new tab and here we will search for react toasttify let's open this npm website scroll down we will get this two import statement so let me just copy these import statement and come back to the app.jsx file and in this file after this
170:30 - 171:00 import just paste the lines that we have copied after that in this div we will add toast container tag and in this tag we will Define the position that is bottom right so whenever we will get the toast notification the notification will be displayed in the bottom right position after that close this file and come back to the app context. jsx file and here we
171:00 - 171:30 will create one toast notification so first we have to import the toast so let's add import toast here we will write from react toasttify package after that in this catch block we will add to. error in this one we will provide error. message after that this load Credit Data
171:30 - 172:00 function is ready and here we have the credit estate where we will get the user credit now in this value object we will add this credit State set credit Setter function and load credits data so here we have added this state variable and functions and we can access it in any component with that we will also add the backend
172:00 - 172:30 URL now save the changes and come back to the na. jsx file here first we will get the state variables from the context so just add const curly presses credit after that we will get the load credits data function then we will use the use
172:30 - 173:00 context hook to access the context and in this one we will provide our app context now we have the credit and load credits data function here we will create one use effect and in this one we will pass the arrow function here first we will check if the user is signed in or not if the user is signed in in that case we will call this load
173:00 - 173:30 credits data function and if the user is not signed in then we will not call that function for that let's add the dependency aray and in this one we will provide each sign in so whenever this property gets changed then the function will get executed after that we will add the if statement and in this one we will add each sign in property after that we will add the load credits data here we will
173:30 - 174:00 call this function now just come to app. context file after getting this credits data we will add the console log for temporary purpose so let's add data do credits save the changes and come back to the web browser let's click on inspect and go to console so in console you can see we are getting this number five that is the credit of this user so our function is perfectly
174:00 - 174:30 working after that let's come to navb bar. jsx file and now we are getting the credit next we have to display this Credit in the navigation bar as you can see in this figma design file we have to display this createit in the left and in the right side we have to display the users name so in this div we will add one button and in this
174:30 - 175:00 button we will add one image tag and in this image SRC let's add assets dot creit icon after that we will add one P tag and in SP tag we will add the text credits colum and here we have to display the value for that let's add the
175:00 - 175:30 curly bres and in this one we will write this creit state now save the changes and come back to the web browser now we are getting this icon and createit five next we will add the CSS properties so first We'll add the class name in this div and here we will provide Flex item Center Gap
175:30 - 176:00 two and for larger screen we will add the Gap three after that we will add the class name property in this button tag so here we will write class name and here we will provide Flex item Center Gap two background blue 100 padding X then padding X for different screen size then we will add the padding y then border radius full save the changes after that we will add the hover
176:00 - 176:30 effect on this button for that here we will add hover scale 105 transition all and duration of 700 Mill seconds save the changes after that we'll add the CSS properties in this image tag so here we will provide class name property that is
176:30 - 177:00 W5 now we will add the class name property in this P tag here we will write text extra small for different device we will add the text small font medium text Gray six 00 now save the changes and come back to the web browser now it is looking good here we have added this hover effect after that we have to display the
177:00 - 177:30 usern name also for that after this button tag let's create one P tag and in this P tag we will write hi curly Braes and in this one we will use user. full name now in this paragraph tag let's add the class name property here we will write text Gray 600 for mobile device we will add hidden so it will be hidden on phone save the
177:30 - 178:00 changes and come back to the web browser now you can see we are getting high great stack and this credit so this logic is working fine after that we will create the St variable and function to remove the background from the uploaded image for that we will come to app context. jsx file and here we will create one state
178:00 - 178:30 variable with the name image here we will write con and write the variable name image and Setter function name is set image equal to user State and initialize this value with false after that let's come to this value object and here we will provide this image and set image Setter function after that we will create one
178:30 - 179:00 remove background function that will be executed after uploading one image after this load Credit Data function here we will create a new function with the name remove BG so write const remove BG equal to and it will be one asnc Arrow function so write asnc and create the arrow
179:00 - 179:30 function after that in this parameter we will get the image after that let's add the TR catch block from this catch block let's copy the statement and paste it in this catch Block in this value object we will add this remove BG function after that let's come to hi. jsx
179:30 - 180:00 file and here let's add const curly Braes and here we will get the remove BG function we will get it from Context so just add equal to use context and provide the app context after that we will link this function with our input field on change property so whenever we will change the image then this function will be
180:00 - 180:30 executed so in this input field let's add the onchange property and in this onchange property we will pass the event and here we will call remove VG function and in this one we have to provide the file for the image file we will use e. Target do files index0 after that let's remove this name property and here we will add the
180:30 - 181:00 accept and in this one we will add the image/ star so that whenever we will click on this input field then we can select only image file now after this let's come to upload. jsx file and and here we will get that function that is remove BG and we will get it from use context and provide the app context
181:00 - 181:30 file here also in this input field we will add the on change property and here we will pass the event and here we will call the remove BG function and in this one just provide each do target. files index0 with that we will remove this name property and here we will add the accept property and in this let's add
181:30 - 182:00 image/ star now whenever we will select the image then this remove BG function will be executed in that case in this Tri block let's add the console log and we will add this image that we are getting from the parameter let's come back to the web browser we will open inspect and go to console if I reload this web page and from here if I select any image
182:00 - 182:30 like this so here we are getting this image file in the console we will save this image file in this image EST State variable for that in this function we will add one check that will be if user is logged in or not for that here let's write const curly
182:30 - 183:00 bres is signed in and we will get it from use user hook and we will get this use user Hook from the color package as you can see see it has been imported from the Coler color react after that in this Tri block let's add the if statement and we will check
183:00 - 183:30 if the user is not signed in in that case we will display a toast notification in that case we will display a login popup so before that here let's add the con and here let's add open sign in and we will get it from use color
183:30 - 184:00 cook so when we'll click here it has been imported now in this if statement we will call that function so let's write return open signin function that will open the signin popup component if the user is already signed in in that case first we will set one
184:00 - 184:30 image so let's add set image and we'll set the image that we are getting from the parameter so we have provided the image in this state variable after that we'll create one more State variable to store the result image that we will get from the back end for that let's create one estate variable with the name result image so just add con result image set result
184:30 - 185:00 image equal to use a state and provide the willan data false again come back to the remove VG function and and after setting this image we will set result image false after
185:00 - 185:30 that we will send the user on the result page for that let's remove this console log and here we will use the navigate function so first we will create the navigate function const navigate equal to here we will use the use navigate hook so use navigate has been imported after
185:30 - 186:00 that here we will navigate the user on result page so just add navigate and in this one we will provide the path that is/ result after that we will save the the changes and come back to the web browser now we are already logged in and click on this button and select one image now you can see we are redirected to the
186:00 - 186:30 result page after that we will create one API that will receive this image file and remove the background from the image and return the image again for that let's come back to the server folder and in this one we will open the controller folder and here let's create a new file that is image
186:30 - 187:00 controller.js in this one we will receive the image from the front end and we will remove the background of that image to remove the background of the image we will use clip drop clip drop provide the background removal API if I come to this API here you can
187:00 - 187:30 see we have this remove background API we will use this API to remove the background from our application so first let's click on the signin button and here we will provide the email ID let's provide theil email ID user. gr@ gmail.com then click on sign up signin button so we will receive one email let's go to my
187:30 - 188:00 email here we have received the image from the clip drop API let's click on this link after that we will see the user ID email ID and credits here we can claim 100 free credits that we will use in our application so let's click on this button claim my 100 free credits here we
188:00 - 188:30 have to provide the name so I'll write the name greatest tag then we have to provide the phone number then click on this claim my credits you will receive one OTP on your phone number you have to enter the
188:30 - 189:00 OTP after adding the OTP just click on this okay button now you can see we have claimed the 100 free credits if you need more credit for the application you can purchase more from this button 100 credits are enough for our development project so we will use this credit first we have to get the API key
189:00 - 189:30 so let's click on this button reveal API key and from here we will copy this API key after that let's open the vs code editor and in This Server folder we will open EnV file and here we will create one envirment variable to store our clip drop API key so we will
189:30 - 190:00 write clip dropcore API and store our API key now save the changes and close this file now open image controller.js file here first we will import the required packages to call the clip drop API to remove the background so let's write import xos from xos package after that we will import file system from file
190:00 - 190:30 system that is FS after that we will import form data from form data package after that we will import the user model here we have to provide the JS extension after that we will create the controller function to remove the
190:30 - 191:00 background of the image so first let me add the comment controller function to remove background from image here we will create the arrow function so so just add con remove BG image equal to snc and create the Aro
191:00 - 191:30 function after that we will get the parameter that is request and response in this one we will add the TR catch Block in this catch block let's come back to the user controller copy the statement from this sketch block and paste it in this sketch block here we will add export and in
191:30 - 192:00 this export we will export this remove BG image controller function after that we will add the logic in this Tri block to remove the background so first our challenge is to get the image from the front end to back end for that we will use the form data to pass the form data in the expressjs we are going to use one middle Weare that we will create using the
192:00 - 192:30 molter package so in this middle Wares let's create a new file and write the file name molter DJs in this file simply import the molter package after that here we will create the disk storage configuration so let's add the comment we will write the
192:30 - 193:00 comment creating molter middleware for passing form data after that we will create the variable with the name storage and in this one we will store the molter disk storage configuration so let's write molter do disk storage and in this one we will add one object where we will Define the file name and in this file
193:00 - 193:30 name let's add the function in this function we will pass the parameter that is request file and call back function after that here we will add the col lies and in this function we will call the call back function and in this one we will provide two parameter first one is null and the second one will be a new file name to our file so to provide
193:30 - 194:00 a new file name let's add this back tick dollar sign curly Braes and to make this file name unique we will use date. now that will return a timestamp after that we will concat the original file name for that let's add dollar sign cly reses and here we will add the file. original
194:00 - 194:30 name so now we have created the disk storage configuration now we'll create the middle Weare using this disk storage so let's add one variable with the name upload and in this one we will call the multer package in this molter package we will add the curly bres and here let's add the storage that we have created here now our middleware is ready to pass
194:30 - 195:00 the form data after that here we will add export default and here we will write the name of the middleware which is upload Now by using this middleware and this remove BG image controller function we will create one new route to create a new route in this routes folder let's create a new file and write the file name image routes.js
195:00 - 195:30 in this file first we will import the Express package so just add import Express from the Express package after that here we will import the controller function so just add import CES remove BG image we are getting the suggestion just click here and here we have to add
195:30 - 196:00 the extension do JS after that we will import our middle beare that is upload that we have created in this middle bear folder m. JS file so we are getting this Su just click here so it has been imported after that we have to get this Au user so let's add import o user from middleware SL .js
196:00 - 196:30 file now we have imported all these controller function and packages after that we will create the route so to create the route we have to initialize a new routers so just add const image router equal to Express dot router now we have the router and using
196:30 - 197:00 this router we will create a new end point so let's write image router. poost and in this one we will add the path that is/ remove BG after that we will add the middleware that is this upload middleware that will pass our form data so here we will write upload do single and in this one we have
197:00 - 197:30 to provide the field name in which we are sending the image so whenever we will send the image we will send the image with image field name so that's why I have added image after that we will attach one more middleware that is au user that will authenticate the user using the token and generate the Coler ID after that we will attach the remove BG image controller function now we have
197:30 - 198:00 created this route now we will export this router for that just add export default image router after that let's come to server.js file and here we will add app.use and in this one we will add the path that is/ API SL image and in this one we will Mount our image router let's click on it so it has been
198:00 - 198:30 imported now save the changes so the server has been restarted you can see database connected and server running on Port 4,000 after that let's come to image controller.js file and here we will write the logic to get the image and return the image after removing the background so first in this controller function we will get the color ID from request. body so just add const curly
198:30 - 199:00 veres clerk ID and we will get it from request. body after that we will find the user with this color ID so just add const user equal to await here we will use user model do find one method and in this method we will add curly addesses and here we will provide
199:00 - 199:30 the clerk ID that we are getting from the request body now we have the user now we will check if the user is available or not with this color ID so let's add the if statement and and here we will write if not user in that case we will return one response so just add return response. Json in this one we will add the
199:30 - 200:00 object and here we will define success false with that we will add the message that is user not found suppose we have the user with this color ID then we will check the credit balance of that user if user have the credit balance then only user can remove the
200:00 - 200:30 background and if the credit balance is zero then we will return a response where we will add the message no credit balance for that let's add the if statement and in this one we will check if the user Dot credit balance is equal to zero in that case we will return one response using the Json method and in
200:30 - 201:00 this one we will provide object and here let's define the success property that is false and here we will add the message also that is no credit balance with that here we will add one more property that is credit balance and in this one we will provide user
201:00 - 201:30 Dot credit balance suppose user have some credit balance like three or four Credit in that case first we will get the image path from the request file so just const image path equal to request dot file do path now we have the image path after
201:30 - 202:00 that we have to read this image file in one variable so just add the file system so let's add the comment and here we will add the comment Tech reading the image file after that let's create one variable so just add const image file and in this one we will store the file using this path so let's add the file system dot create read a stream and
202:00 - 202:30 in this one we will add the image path now we have the image in this variable after that we will create a new form data because when we come to clip drop to page and if I come to docs if I click on this remove background and I scroll down here you can see to remove the background of the picture we have this API URL and the
202:30 - 203:00 request must be an HTTP post and its body must be a multi-art form data so we have to add this image in multi-art form data then only we can use this clip drop API for that here we will write const form data equal to new form data now we have created the form data and in this one we have to add the image
203:00 - 203:30 file as you can see here you can see image file file fi with original image to process so we have to add the image in this image uncore file field name so let's add the form data. append method and in this one we will add the image underscore file we are using this field name and in this one we have to provide our file so
203:30 - 204:00 here simply write image file now the form data is ready and here we have provided this clip drop API in the envirment variable now we will use this form data and clip drop API to remove the background from this image file for that we will use xuse to make the API call to this clip drop
204:00 - 204:30 API so just add cons CES data we will get this data from response equal to await here we will use exos do poost method and in this one we we have to provide the URL of the API so let me just copy it from here and we will paste it here after that we have to add the form data that we have just created
204:30 - 205:00 here after that here we have to add the headers for that let's add comma and this object and in this object we will Define the headers so let's add headers and in this header we will add the object where we will add the API key to send the API key from here we'll select the JavaScript as you can see in the headers we have to use this property to send the API key so
205:00 - 205:30 let me just copy it X API key paste it here after that here we have to provide the clip drop API key so let's add process. EnV Dot here we will provide the clip drop API key so just open the envirment variable and from here let's copy this name come back to the image controller and paste this environment variable
205:30 - 206:00 name after adding this headers here we will Define the response type so just add response type and here we will add the aray buffer so we will get the response in the form of add AER that's why we have added the response type now in this data we will get the image with removed background we have to send this data in
206:00 - 206:30 a response to our front end for that we will create a base 64 image with this data so to create the base 64 image we will add the variable const base 64 image equal to we will use buffer Dot from method in this one first we have to add the data that we are getting from the
206:30 - 207:00 API after that we'll add the type that is binary after that we'll add dot two string method and in this one we will provide base 64 now now here we will get the base 64 image now we'll create one more variable with the name result image in this result image we will use
207:00 - 207:30 the template literal so let's add the btic and here we will add data column and here we have to define the mime type for that just add dollar sign curly Braes then use request. file dot MIM type after adding this we will add this semicolon after that let's add the base
207:30 - 208:00 64 after that let's add comma dollar sign curly bres and here we will provide the base 64 image from this variable now we have this result image now before sending this image to the user as a response first we will deduct one credit from this user credit balance because we have successfully
208:00 - 208:30 generated the image next we'll deduct the credit for that let's add await user model dot find by ID and update method here we have to provide the user ID that we will get from user doore ID property after that here we will add curly addes and here we will update the credit
208:30 - 209:00 balance here we will provide user. credit balance and from here we will decrease it by one that's why we have added minus one now right click and select format document now now it is looking good after that we have deducted one credit from the credit balance next we will send this image to the user for that let's create one response using the Json method and here
209:00 - 209:30 we will provide the success property that is true with that we will add result image and we will also add add credit balance and here we will provide the latest available credit of that user so just add user Dot credit balance and we will deduct it by one so
209:30 - 210:00 we will get the latest credit balance for the user with that here we will add one more property that is message and in the message we will add back background removed now we are sending this response success True Result image latest creit balance and message background removed now save this file now we have created the logic for
210:00 - 210:30 the background removal now we have to link this API remove BG with our front end for that let's come to client folder then go to SRC then context and app context. jsx file and we will complete this remove BG function after this navigate here we will generate one token
210:30 - 211:00 so let's write const token equal to await and we will use get token method after that here we will create a form data where we will send the email to our back end for that we will add const form data equal to new form data after that in this form data we
211:00 - 211:30 will add our image so first we will check if we have image in that case here we will append this image in our form data so let's use append method on this form data and here we will add the field name that is image in this field name we will add our image that we will get from the parameter after that here we will call the API that we have just created so
211:30 - 212:00 just add const curly braces data equal to await and then use the exos do poost method in this one first we will add the backend U L and in this vant URL we will add the endpoint address that is SL API SL image/ remove BG after that we will add our form
212:00 - 212:30 data and here we will add the headers and in the headers we will add one object where we will add token that we have generated here after that here we will get the response data and here we will check if the data dot success is true in that case we will get one image in base 64
212:30 - 213:00 format and we will store that image in this result image State variable for that in this if statement we will call the set result image and provide data Dot result image after that we will update the credit balance also so let's add data. credit
213:00 - 213:30 balance if we get this data. credit balance from the API then we will set the credit and here we will provide data. credit balance suppose this data. success is false in that case we will get the error message so let's add the Elsa statement and in this Elsa statement we will create a toast notification using that error message so let's add toast. error
213:30 - 214:00 here we will provide data do message here also we will copy the same code so let me just copy and paste it here after that if the balance is zero then we will send the users on credit purchase page so let's add the if statement and here we will add if data Dot credit balance is equal to Zer in that case we will call the
214:00 - 214:30 navigate function and in this navigate we will add the path of our credit purchase page that is/ by now the function is ready so whenever we will call this function we will come to the result page and after that we are calling this API that we have created in the back end to remove the background of the image if the background is successfully removed then we will get the image in this result
214:30 - 215:00 image State now let's save the changes and come back to the web page we will go to homepage refresh this web page we will select one image let's select this image now this is the dummy images on this result page so let me come back to the database here if I open this users and refresh this data now you can see the creit balance
215:00 - 215:30 has been reduced by one it means the image has been generated now the image is stored in this result image state so we have to display this image in the result page for the let's come here in this value object and here we will add result image State and set result image now save the changes come back to the homepage refresh it and now let's
215:30 - 216:00 come to Pages folder result. jsx in this page first we will get the result image and image from from the context API so let's add const curly Braes result image with that we will get the image that we will upload we will get these
216:00 - 216:30 images from App context so let's write use context hook and in this one we will provide app context now we have the result image and image now here we are displaying this image so if I type SL result you can see these images are a static so we will display these images from this state variables so in this
216:30 - 217:00 image SRC let me remove this asset image and here we will provide one Turner operator here we will check if we have this image in the estate variable in that case we will generate one URL using this image so let's write url. create object URL and in this one we will provide the image state if we have this image then we will display this image in this image tag and if we don't have this image then simply
217:00 - 217:30 return one empty string now just come to the right side let me comment out this one and let me remove this assets here we will provide turn operator where we will check if we have this result image then simply provide this result image and if we don't have this result image then we will provide the empty
217:30 - 218:00 string and with that we are displaying this loader so it will be displayed until this image gets loaded for that here we will use the turn operator we will check if we don't have the result image with that we have the image then we will return this div so let's remove it from here and paste it here if we don't have the result image
218:00 - 218:30 and we have this image then we will display this loading effect now save the changes and come back to the web browser now you can see we are not getting any image because we have not selected any image from the upload button similarly for this button also we will add the same thing so let's wrap it inside a curly bres and here at the
218:30 - 219:00 beginning we will add result image and if this result image is available then we will display these buttons after that in this anle tag let's add the hdf here we will provide result image so that we can download the image to download the image here we have to add the download attribute after that let's save the changes and come back to the web browser
219:00 - 219:30 now we don't have any button here let's come to homepage and reload this web page now just click on this upload button and from here let me select one image so let me come to download folder I'll select this image now you can see we are getting this loading animation after completing the processing we have this image with transparent background so the background removal feature is working fine if I
219:30 - 220:00 click on this download image button now we are getting the result. STM so let me just come back here here we have added this hdf and we have added download attribute by mistake here we have added one more hdf so let me remove this one just save the changes now we have only one HF in this a tag which is result
220:00 - 220:30 image now save the changes and come back to the web browser now if I click on this download image here we are getting JPG file and the size is 4 MB let me open this file so you you can see we have the image with transparent background so now we have successfully removed the background of the image and we can download the image now we will make this button functional so that if anyone click on this button then the
220:30 - 221:00 user will come to homepage from there user can upload a new image to remove the background so our remove BG function is working fine here we have three credits left as you can see in this navigation bar and if I update the database so here also you can see the credit balance 3 so while creating a new account user will get five credit and if user upload an image and remove the background then one
221:00 - 221:30 credit will be deducted now let's make it zero we will make the credit balance zero click on update button so you can see the credit balance is zero and if I reload this web page you can see the credits is zero now if I click on this upload button and select any image now you can see the notification no credit balance and we are redirected to this buy page where we
221:30 - 222:00 can purchase the credit now in this Navar also we will add the logic so that whenever people click on this credits then user will be redirected to the credit purchase page so let's come back to the vs code then go to competence folder navb bar. jsx file in this file we will add const navigate equal to use navigate
222:00 - 222:30 hook use navigate has been imported after that we will come to this button where you can see this credit icon and this creit text so in this button we will add the on click property and in this one we will pass the arrow function and here we will call the navigate function in this one we will provide the path of our credit purchase page that is/ bu now
222:30 - 223:00 save the changes and come back to the web browser now if I click on this button we are redirected to this Buy credit page so till now we have created the UI of this project and we have created the background removal feature now we will add the payment integration in our project so that if the credit is zero then user can easily purchase the credit
223:00 - 223:30 using the online payment gway for that let's come back to the vs code go to server folder then go to controllers folder and open user controller.js file here we will create a controller function that will initialize our razor pay payment and before that we have to get the razor pay key ID and key secret from their dashboard and we will store that in this EnV file so here let's
223:30 - 224:00 create the envirment variable where we will store the Reser pay key ID and key secret so let's create one involment variable with the name Reser pay key ID after that we will create razor pay key secret after that we will add
224:00 - 224:30 currency here we have created three environment variables now let's come back to the web browser and open a new tab and here we will search for Razer pay now let's open Razer pay payment gway website from here you have to create an account here you have to create an account so click on sign up button here you have to provide the
224:30 - 225:00 phone number email ID and other details to create your account and after creating the account you will get razor pay key ID and Razer pay key secret in the dashboard I already have the account so I'm going to use that credentials here so in this razor pay key ID I'll paste my Razor pay key ID and here we will paste the Reser pay key secret you can find it from the Reser pay dashboard and in this currency
225:00 - 225:30 we have to provide the currency details according to our razor pay account I have created this account in the India and the Indian currency is INR so I have added the currency code in so now we have created three envirment variables to set up the reserve pay payment after that let's come to user controller.js file and here we will initialize our payment Gateway for that
225:30 - 226:00 we have to import the Reser pay from the Reser pay package so let's write import Reser pay from Reser P package after that we will scroll down here we will add one comment here we will write gway iniz here we will create a variable with the name Reser pay
226:00 - 226:30 instance equal to new Reser p in this one we will provide our key ID key and key secret so let's add the object and here we will add the key ID property here we have to provide the key ID from the envirment variable so just add process. EnV dot we will come to EnV file and just
226:30 - 227:00 copy this envirment variable name razor pay key ID just paste it here now add the comma and here we will add the key Secret in this one we will add process. EnV dot here we will add this Razer pay key secret let's copy this one and paste it here after that we will add the comma and save the changes now we have
227:00 - 227:30 successfully initialized the razor pay instance by using this razor pay instance we will create the order we will verify the order in the razor pay for that here we will create One controller function to make the payment using Reser pay so let's add the comment and here we will write the comment text API to make payment for credits now here we will write
227:30 - 228:00 con here we will create the arrow function that is payment Reser pay now we'll add snc and here let's create this Arrow function in this parameter we will get request and response after that here we will add the try catch block now just copy this a statement from this catch block and we will paste
228:00 - 228:30 it here now in this Tri block we will get the color ID and plan ID from the request body so let's add const curly presses ID and plan ID and we will get it from request. body after that we will fetch the user data from this Coler ID so just add
228:30 - 229:00 const user data equal to await here we will use the user model do find one method in this method we will add the object where we will add the Coler ID so it will find the user using this Coler ID after that here we will check in this if statement we will check if we don't have any user
229:00 - 229:30 data or if we don't have any plan ID then we will generate one response with success Falls so let's write a return response. J and in this one we will add the object where we will define success property false after that we will add the message in this message we will write invalid
229:30 - 230:00 credentials after that here we will create four variables so just add let credits after that we will add plan after that we will create amount and date we will use these details to create the payment so whenever we will make any
230:00 - 230:30 transaction in that case we will save the number of credits then plan detail then amount of that plan and purchase date for different plans we will change the value for that we will use the switch case statement and in this key we will add the plan ID so if I come back to the web browser and and in this purchase page you can see we have three plans basic
230:30 - 231:00 Advanced and business so these are the plan ID suppose we get the plan ID basic in that case in this plan ID we will get this basic if user click on this second purchase button then we will get this advanced in the plan ID so for different plans we will generate different data in this variables so let's create the first case that is
231:00 - 231:30 basic in the basic one our plan will be basic after that here we will Define how many credits we will get from this plans so let's write 100 you can see 100 credits after that we will add the amount here we will add this $10 so let's write 10 now just create the copy of this
231:30 - 232:00 one here we'll add Advanced so let's copy it and paste it here and in this plan also we will paste the same now we are getting the create credits 500 so let's write 500 credits after that we'll add the amount $50 now let's create one more copy of this
232:00 - 232:30 case so the third plan is business so just paste this business here now the credit is 5,000 and the price is $250 right click and select form a document now we have created this switch case statement and using this we are setting this variable using this plan ID if the plan ID is basic then in this credits we will get 100 and in the plan we will get
232:30 - 233:00 basic and amount will be 10 and here we will generate the date also now to generate this date here we will write date equal to date date do now so we will store the time stamp of the date while creating the transaction now we have all the data for the transaction now just come to models folder and for this transaction we will create a new model so in this model
233:00 - 233:30 folder let's create a new file with the name transaction model. JS now in this file first we will import the mongos from mongos after that we will create the transaction schema so just add const transaction schema equal to new do
233:30 - 234:00 schema and in this one we will Define the structure of our transaction so we need to save the credits plan amount and date and color ID so here in this schema we will write color ID and here we will write type a string and required true after that here we will add the plan property the type will be
234:00 - 234:30 string and the required will be true after that we will add the amount property the type will be number here also we will set required true after that we will add the credits property here we will add the type number required true after that we'll add one more property that is payment and the payment
234:30 - 235:00 will be bullan and by default it will be false so whenever we will create one transaction the payment property will be false and after completing the payment at the time of verification we will make it true after that here we will add the date property and the type will be number where we will store the time stamp of the current date time now we have created the schema for the transaction now we will create the
235:00 - 235:30 transaction model so just add const transaction model equal to do models do transaction or here we will use dot model here we will provide the transaction after that we'll add the
235:30 - 236:00 comma and provide the transaction schema now the model is ready next we will export this model so just add export default then provide transaction model now we have created the model where we have defined the color ID plan amount credits payment and date let's come to user controller again now we have this credits plan amount and date after that
236:00 - 236:30 here let's add one comment and we will add the comment text creating transaction now just add const transaction data equal to one object where we will add this color ID we will add the plan then we will add the amount then we will add the credits then we will add the date so we
236:30 - 237:00 have created this transaction data according to this transaction model next we have to save this data in the database for that here we will write const new transaction equal to a wait then use the transaction model dot create method and in this one we
237:00 - 237:30 will provide transaction data after that the transaction will be stored in the database next we have to initialize one order using this razor pay instance so to create a razor pay order first we have to create the options for the order so we will add cost options equal to it will be one object where we will provide the
237:30 - 238:00 amount and the amount will be amount that we have created here here you can see we have the amount so we are providing this amount in this options and we will multiply by unit 100 after that we will provide the currency and in this currency we will provide the currency data from our environment variable so we will write process.env do
238:00 - 238:30 currency now we have to add the receipt this is very important to add the receip and in this receip we'll add new transaction ID that is automatically generated in the mongod DB this receip is useful at the time of verification when we will verify the payment now the options is ready now
238:30 - 239:00 let's create the Razer pay order for that just add await Razer pay instance dot orders do create and here we will provide this options after that we will pass the Aro function in this AR function parameter first we will get two parameters and if any error occurs then we will get the
239:00 - 239:30 error and after that we will get the order details after getting this error and order here we will add the if statement and here we will check if we get any error in that case we will return one response so just add return response. Json here we will provide success Falls with that we will add the message property and in this one we will provide
239:30 - 240:00 error suppose we don't get any error during creation of an order then we'll get the order details so in that case we will generate the response using the Jon method and here here we will add the object where we will Define the success property that is true with that we will pass the order details also that we are getting from this parameter now the controller function is ready to generate the reserve pay
240:00 - 240:30 payment with that we will add the verification method also so now we'll create the API using this controller function for the let's come to routes folder user route. JS file and here we will create a new route to create the route first we have to export this function from here so in this export object we will write comma
240:30 - 241:00 payment Reser pay save this changes now come back to the user routes.js file here we will write user router to create the API here we will use the post method after that here we have to add the endpoint path that is/ pay Reserve in this one we will add the Au user middleware and after that we will add payment Reser pay so we will select
241:00 - 241:30 it from this suggestion so it has been imported now save the changes now we have successfully created this route now let's come back to the client folder and we will open SRC Pages folder and in this one we will open by credit. jsx file here in this page component we will add the logic to initialize the Razer
241:30 - 242:00 pay payment for that we will come to this razor pay website and from here let's open the documentation so let's go to resources click on developer docs then click on this payments then payment gway then weave integration and select this integration steps here we will get this script as
242:00 - 242:30 you can see here the script SRC check out rasor pay.com version one checkout. JS so from here we have to copy this a script and come back to the vs code editor let's open the client folder index. HTML file and after this a script just paste this a script tag that we have just copied now save the changes
242:30 - 243:00 and close this file after that here in this page component we will get the backend URL and and load credits data function from the context so just add const C Li say we will get the backend URL and load credits data function equal to use context and in this one provide app context here we will initialize the
243:00 - 243:30 navigate function also so just add const navigate equal to use navigate so whenever users successfully complete the payment then the user will be redirected to the homepage using this function after that here we will get the token so just add cost here we will get get token
243:30 - 244:00 method and we will get it from use o that we will get from this clerk react package just click on the suggestion so it has been imported now we have this backend URL load Credit Data then navigate function and get token next we will add the logic so that when we click on this purchase button then the payment will be
244:00 - 244:30 initialized for that here we will create one Arrow function with the name payment treasure pay so let's write const payment Reser pay equal to and it will be one asnc Arrow function and in this one we will pass the parameter that is plan
244:30 - 245:00 ID now the arrow function is ready here we will add the TR catch block because we are going to deal with apis so in this catch block let's add the console log in this one we will add the error after that we will display one toast notification also whenever the error occurs so just add toast. error and in this one we will provide
245:00 - 245:30 error. message in this triy block first we will generate one token using this get token method so we will write call token equal to a wait and here we will use get token method now we can call the API because we have this backend URL token and here we have this plan
245:30 - 246:00 ID so here we will write const curly Braes data equal to a weight and here we will use exos we are not getting the suggestion for the exos so we have to import it manually so just add import exos from exos package after that here we will add exos
246:00 - 246:30 do poost method and in this one we will provide the backend URL after that we will add the API end point that is/ API SL user slash payer now we have to pass the body and in the body we will pass the plan ID that we are getting from this function
246:30 - 247:00 parameter after that we have to add the headers so let's add the curly braces and here we will Define the headers and in this headers we will add the curly Braes and in this curly Braes we will add the to that we have generated here after this API call we will get this data and here we will check if we got the data dot success true in that case we will initialize the
247:00 - 247:30 payment using that order details so here let's create one function with the name init pay so just add const init pay and it will be one async Arrow function so just add async and create the arrow function in this one we will receive the order details so simply write order so in this parameter we have added
247:30 - 248:00 order and after receiving the data do success in that case we will call this init pay function and in this one we will provide this order details so in this if statement we will write init pay and in this one we will add data. order now the payment RoR pay function is ready next we will create this init
248:00 - 248:30 pay function and before that we will link this function with our buttons for that let's come to this button tag and here we will add the onclick property and in this on click property we will pass this Arrow function and here we will add payment resure pay and in this one let's provide item do ID in this item id we will get the plan ID like basic Advanced and
248:30 - 249:00 business now we have to create this init pay function to create this function first here we will create the options for our payment so if I come to this documentation page as you can see here we have to create this options for the payment in this options we have to provide the key amount currency name
249:00 - 249:30 description order ID and other details like recept so just come back to the vs code come to this init P function here we will create the variable with the name options it will be one object and here first we have to provide the key this key will be razor pay key ID so let's come back to the server file then EnV file and from here let me just
249:30 - 250:00 copy this Razer pay key ID now just come back to the client folder then open EnV file and here we will add Vore and paste this variable now just copy this environment variable name from here now just go to buy credit. jsx file and in this key property we will write import. meta do
250:00 - 250:30 EnV dot paste this name that is V desert pay key ID now we have added the key next we have to add the amount so let's add amount property and here we will provide order. amount now we will get the amount data from this order that we are receiving from the back end after that here we will add the currency in this currency also we will
250:30 - 251:00 provide order. currency after that we will provide the name of this payment so let's write one a string that is credits payment after that we will add the description and in this description also let me paste the same message credits
251:00 - 251:30 payment after this description we will add ordered ID and in this one we will provide order. ID after that we will at the receed property and in this receed property we will provide order do re we will collect the spelling after that we will add the Handler
251:30 - 252:00 function that is one asynchronous Arrow function so just add asnc and create the arrow function now in this parameter we will get the response from the Razer pay after getting this response we will try to console log that response so just add console log and we will write this response so that we can see the response in
252:00 - 252:30 the browser after that we will use this options to create the reserve pay payment so here we will create one variable that is Razor pay equal to new window do razorp and in this one we will provide this options now here we have created this new window using this options now we
252:30 - 253:00 have to open this window for that we will write Reser pay dot open method now save the changes and come back to the web browser let me reload the web page now if I click on this purchase button as you can see we are getting this razor pay payment option here we have to provide the mobile number so let me add the dummy phone number here then click on continue button after
253:00 - 253:30 that here we have to provide the card details to create the payment so let's right click and select inspect and go to console to get the dummy cards we will search for razor pay dummy cards razor p d card number let me open this website test card details and from
253:30 - 254:00 here let me just copy this card number and in the payment popup we will paste the card number then provide the future date in this expir date here we will provide three digit in this CBB then we will add the card holder name so let me write great stack and click on this continue button we will click on this button maybe later after that just click
254:00 - 254:30 on this pay on Bank page from here we can simulate the success or failure so just click on this success button now you can see we have the message payment [Music] successful after that we will receive the response as you can see in this console we have this response and by using this response we have this Razer pay order ID
254:30 - 255:00 Razer pay payment ID Razer pay signature by using these properties we will verify our payment and add the credits in the user account as you can see still we we have this zero credit so to update it we have to create a new controller function so let's come to server folder and in this one we will open user controller.js file and here we will create a new controller function to verify the razor pay
255:00 - 255:30 payment here we will add one comment that is API controller function to verify razor pay payment here we will create one Aro function so let's write const verify is pay equal to and it is going to be snc Aro function so just add the snc keyword and create the arrow
255:30 - 256:00 function after that in this parameter we will add request and response now we will add the TR catch Block in this catch block block we will copy the statement from the previous cat block and paste it here now in this Tri block first we will get the razor pay order ID so as you can see in this response we are getting razor pay order ID so we will get it from the body so
256:00 - 256:30 just add const curly bres let's copy it from here and past it here equal to and we will get it from request. body after that here we will get the order info using this razor pay order ID so just add const order info equal to a
256:30 - 257:00 wait then we will write Razer pay instance dot orders property and here we will use the DOT fetch method in this method we have to provide this razor pay order ID after that we will get the order details in this order info variable here we will check
257:00 - 257:30 if order info do status is equal to paid if the order info do status is paid it means the payment is successful then we will create a variable with the name transaction data in this variable we will store the transaction detail that is stored in the
257:30 - 258:00 mongod DV now we have just created a payment if I go to mongod DV and click on this refresh button here we are getting this transactions collection and if I open it it here you can see we have one transaction you can see we have the clerk ID plan amount credits and payment false so right now the payment is false we are going to save this transaction details in this variable so we will use
258:00 - 258:30 await transaction model dot findy ID method and to get the transaction ID we will use this order info so when we created this order in the receip we have added the transaction ID so we will use this receipt to get the transaction ID so here let's write order info do
258:30 - 259:00 receipt from here we will get the transaction ID now we will get the transaction details and it will be stored in this transaction data variable after that we will add the statement here first we will check if the transaction data. payment is true in that case the payment is already verified then we will create a response using the Json method where the success will be
259:00 - 259:30 false so we will write return response. Json success will be false and in the message we will write payment failed if the transaction data. payment is false it means the payment is not verified so in that case we will add the credit in the user account and we will Mark the transaction payment as true for that let's add the comment and here we
259:30 - 260:00 will write adding credits in user data so first we will get the user data we will write const user data equal to await and here we will use the user model to get the user data and here let's use dot find one method and in this one we have to provide the Coler ID to find the user so we will add the Coler ID and we will get the Coler
260:00 - 260:30 ID while creating the transaction we have sent the Coler ID right in the transaction so we will get the transaction ID from this transaction so just add transaction data do color ID now we will get the user and here we will create a variable that is credit balance and in this variable we will store the user credit balance so we will write user data
260:30 - 261:00 Dot credit balance after that here we have to add the transaction credit suppose we received the credit 100 and the previous previous credit is 5050 then the new credit will be 150 so here we will write transaction data do credits now we have the updated credit balance next we have to update this user data with the latest credit balance so
261:00 - 261:30 just add await user model dot find my ID and update method here we have to provide the user ID so just add user data doore ID after that we'll add this curly PR and here let's provide credit balance that we have just calculated here by executing this statement the
261:30 - 262:00 credit will be added in the users account and after that we will mark this transaction as paid let's and the comment text making the payment true so when the user will create a transaction the payment will be false and when we verify the payment then we will mark it as true to Mark the payment true here we will use await transaction
262:00 - 262:30 model do findy ID and update method in this one we will provide the transaction data doore ID after that here we have to add the comma and add the object and in this object we will make the payment property true after that we will generate one
262:30 - 263:00 response using the Json method and here we will Mark the success true and here we will add the message credits added now our verified erer pay function is ready next we have to export this function so in this object we will type verify razor pay by using this verify razor pay controller function we will create a new route so
263:00 - 263:30 come to user route. JS file and here we will create a new route so just write user router. poost method and in this one the end point will be verify razor after that we will provide verify Reser pay controller function now save the
263:30 - 264:00 changes now we have successfully created this route next we have to integrate this API endpoint with our client so let's open the client folder Pages then go to buy create edit. jsx file and we will complete this Handler function now we will complete this Handler function to verify the payment in our client project for that here we will call the verify API that we have just created so
264:00 - 264:30 first we have to generate one new token so we will write const token equal to await here we will generate the token using this get token method now we will call the API for that let's add the TR catch block and in this trive block we will call the API so let's add the curlys we will add the data that we'll get from the response
264:30 - 265:00 after that we'll add await exos dopost method and here we have to provide the backend URL after that in this backend URL we will concatenate the endpoint address that is/ API sluser SL verify razor now in this body of this API call we have to provide this response where we have the razor pay order ID so here
265:00 - 265:30 we will just provide response after that we have to add the headers so let's add the object where we will Define the headers proper property and in this headers we will add one object and in this one provide one token now the API call is ready after that we will check if the data do success is true in that case the payment
265:30 - 266:00 has been verified so we will load the latest Credit Data so just call load credits data function with that we will navigate the users on the homepage so just add navigate and we will add this slash now we can also give a toast notification once the payment is successful or the credit added so let's add the toast do
266:00 - 266:30 success and in this one let's provide message that is credit added after that if any error occurs in this process then the catch block will be executed and in that case we will add the console log and error and in this catch block we will give a toast notification with the error message so just add toast.
266:30 - 267:00 error and here we will provide error. message after that we will save the changes now just come back to the web browser and open the website and here you can see we have the zero credits let me reload the web page and click on this credits now we will buy this plan which is basic so just click on this purchase button it will open a payment
267:00 - 267:30 popup here we have to provide the card number so let me copy the test card number paste it here here we will add any future month and year then we'll add three digigit number then we will provide the name on the card and click on the continue button click on this button maybe
267:30 - 268:00 later now we will simulate the success so just click on this success button now you can see the payment is successful now at the right bottom you can see notification credit added and in the navigation bar you can see the credits is 100 now we can use this credits to remove the background of the image so now if I click on this upload
268:00 - 268:30 button select this image again now we have the original image and in the right side you can see one loading effect and after processing the image you will see this image with removed background now you can see the credit is 99 so one credit has been deducted for removing the background of this image and here we have the button called download image so it will download the image with transparent background you can see this
268:30 - 269:00 is our downloaded image so this feature is working fine now our project is ready now we have successfully created this bgd removal web application next we will deploy this project on versal for that we will open wal.com here we have already deployed the back end so let me just come back to the vs
269:00 - 269:30 code editor and we will commit our latest changes for that here let's add a message project completed we will click on this commit button click on yes now just click on this sync button so that this commit will be saved on the GitHub now just click on okay now we have successfully uploaded our project on GitHub now just come back to the web browser open the GitHub
269:30 - 270:00 also now you can see here we have this BG removal where you can see updated now let's open this project here we are getting this commit project completed let me close this GitHub page and we will come to versal let me reload this web page you
270:00 - 270:30 can see this is the back end and for this back end also you can see just now because we have updated the GitHub repository now we have to add the updated environment variable for the back end so let's open server folder then go to EnV file and from here let me just copy all the environment variables and come to this backend project here
270:30 - 271:00 you will click on the three Dot and click on settings then go to environment variables and here we have already added the color W hook secret and mongod DV URI so so we have added these two envirment variables now we'll add other variables now just copy these envirment variables come back to the versal and in this input field just paste it now we have all the environment variables and values just click on this save
271:00 - 271:30 button now we will come to deployments and inside this we will create a new deployment with latest invo requirment variable so let's click on this three Dot and select create deployment here we will select the main branch and click on create deployment button now the deployment has been started we will wait for a few
271:30 - 272:00 seconds now you can see the deployment is ready now now just come to homepage and from here let's open this URL now you can see we are getting this message Api working now our back end is running successfully after that we will deploy the BG remove client project for that just come back to the vs code editor and
272:00 - 272:30 from here let's close all these files and uh we will click on this client folder and here we will create a versal do Json file so right click and select new file and in this client folder we will create versal do Json file here we have to add the configuration to support the react router for that let's come back to the
272:30 - 273:00 web browser and we will open github.com SL greatest div and here we will open this notes here you can see we have versal Json config for M let me open this one we have already used this configuration for the back end and here we will use this second configuration that is for the front end so just copy this configuration code and paste it in this versal dojon file under client
273:00 - 273:30 directory now we have to save the changes and we have to commit this changes in GitHub so click here and here we'll add versal Json added then click on this commit button then click yes then click on this sync changes and click okay after that let's minimize this vs code now just come back to the versal again and refresh this web page in this
273:30 - 274:00 in this backend project you can see the message just now because just now it has been redeployed because we have updated our GitHub now we have to deploy a new project so just click on new project and from here let's select this repository BG removal just click on import button after that here we have to select the root directory just click on this edit button and select this
274:00 - 274:30 client then click on continue button now you can see it is automatically selecting v as a framework now in this environment variable we have to add our environment variable so if I come back to the vs code then go to clients and EnV file here we have total three envirment variable just copy this and paste it
274:30 - 275:00 here now here we have to update this backend URL so if I open a new tab and here we will open this link which is our back backend link from the versal so just copy this URL and come to this tab and in this V backend URL we will paste the backend URL that we have deployed on versal make sure to remove this forward slash else it will not work so remove this forward slash from the end and
275:00 - 275:30 click on this deploy button now just wait for a few seconds so it will complete the deployment now our project has been deployed let me click on this button continue to dashboard here we have the link to access this web page so let me just click
275:30 - 276:00 here now you can see we have successfully deployed our website on versal now let's test this website again we will click on get started button I'll click on continue with Google Now let me select the Google account click on continue now we are successfully logged in on the website and here we have the credits which is 99 so in this video we have created this BG removal project and
276:00 - 276:30 we have also added the online payment gateway to purchase the credit and here we have added this button to upload a new image and the image will be processed and we will get the removed background image and after creating this project we have successfully deployed it on versal I hope this tutorial will be helpful for you if you have any question you can ask me in the comment section please like and share this video and also subscribe my channel greatest stack to watch more videos like this one thank
276:30 - 277:00 you so much for watching this video