YouTube Transcript:
Vibe Coding Complete Course | Frontend, Backend, Database, Deployment, Payment Integration and more

Skip watching entire videos - get the full transcript, search for keywords, and copy with one click.

AutoDub

Understand YouTube Foreign Videos

Immersive YouTube Voice Translation

Break language barriers, embrace global quality content

Solve Foreign Video Barriers Instantly

Video Transcript

Video Summary

Summary

Core Theme

This content is a comprehensive, project-based tutorial demonstrating how to build a functional AI-powered background remover web application from scratch, covering front-end development, back-end integration, AI API usage, database setup, payment gateway integration, and deployment.

Key Points

Mind Map

Click to expand

Click to explore the full interactive mind map • Zoom, pan, and navigate

You have to learn AI coding. This means you have to build websites using AI.

Whatever ideas you're thinking about, you have to bring them to reality using AI

. But you're completely devoid of guidance. There are 10-15 minute videos on YouTube

, and even some lasting half an hour or an hour. But it

's not clearly explained how to build a website. How to provide prints for it?

How to integrate AI? How to bring that code locally? How

to set up authentication? So that users can log in, sign up, and make payments

. What will happen? How will the database work? How will the user's history be

stored? How will authentication be stored? How will user activity information be

stored? What kind of things work? You have no idea about that.

How will the front end and back end be integrated? How will API calls be made? What if you

need to use someone else's service ? For example, in this project, we're going to create

a background remover. We'll use an API for this.

You have no idea how to integrate it, how to read the characters, or how everything works.

So, don't worry. What will happen in this video is that

without HTML, CSS, or JavaScript, we're going to provide a complete

project-based tutorial in which we

'll create a background remover to clarify your concepts. So, without any

further delay, watch the demo, then we'll start the actual tutorial, where

you'll learn complete web coding. So, this is exactly the video you need right now

. This is a video of more than 5 hours. If you devote more than 5 hours to it, you

'll be able to bring any idea you have in your mind to reality and

even earn money by sharing it with the world. You want to launch your own 1% business. So,

this is the perfect video. There's no other video on YouTube that teaches you this.

But in this video, I'm delivering it to you. The website you

see on the screen is completely AI-generated, with the background removed

. I'm going to give you a full demo. Before that, let me

explain the journey from creating the website to actually deploying it

. This link is shareable, and you

can open it and remove the background. This website

also has authentication set up. If you go to sign in, you can sign in, and

whatever the user removes the background will be stored in the database. This

is a project-based course on web coding. In this web coding

course, I'll give you a complete introduction to how web coding

works. The front end, the back end, the payment gateway

integration, and a thorough understanding of authentication. And many other

things. So now I'll give you a demo.

How would you create this type of website? If I click on "Start Removing Backgrounds" and

go to "Upload Images," your image gets uploaded easily. Even if you

go to another website, search for it, and from there, you

can simply copy the image. I'll just go here, right-click,

and select "Copy Image." Pressing Control or Command-V here,

you can import directly from here. So, I've added this functionality

. I'll click on "Remove Background." It's asking me to sign in.

To sign in, I'll sign in here.

It says "Create Your Account." There's a sign-in button below. Let's click on "Sign In."

I'll enter my credentials there. Then, I

'll click "Sign In." After clicking "Sign In," you can see that I'm signed in

. And here it's also showing me data about how many images I've processed

. How much credit I have remaining. So, we're

going to build a credit-based system. How will credit be calculated? How

will things be managed in the database and how will things work in real time? It's not like this is static and

I've told you normally. In this, we're going to go to a very advanced level. This

is a beginner-to-advanced course, so if you don't know anything about coding like

HTML, CSS, or JavaScript, that's fine. We're actually going to build this entire website

without any coding knowledge. I'll show you how to build it from scratch.

I'll tell you how to prompt you and how to use the AI.

We're going to use many things like cursor tray, super base, Razer Pay, N10.

We're going to use the API in such a powerful way that it will create a system for image background removal

. You can view it here, and you can upload it

. If you want to see the history of your background removals,

you can also come to the dashboard or directly

click on "History" here. I'm already logged in. So, I

'm logged in. So, it's collecting data directly from my database.

I'm referring to the database in other words, but it's actually

stored on its server, Snapc.

If you want to preview the image, you can go to the dashboard and click on the "i" button. You can see the preview.

Again, you can download it from here. So, when I download it, you'll see

that the background is completely removed. Then, if I

open your settings here, you can rename it. For example, it says Vivek Mishra

. Let's change it to Ritesh Sharma. So, I can change it to Ritesh Sharma

. I've also explained how the credit operation

works. You can create, update, or delete anything

. So, we're going to look at all these things and

discuss how to get information from there.

This is a great, in-depth tutorial. I also explained how we'll host this Snapcat AI app

. And how to collect payments? If we

click on Upgrade to Pro here, then click on Start Pro Trial.

You can also upgrade here. Right now, it opens to Razer Pay for payments

. From where you can make payments. So, I also explained payment integration and

how to securely perform these things on the website, such as

integrating it with the database and integrating it with Razor Base. How this will be done securely is also

explained in this complete video. So, this is the video you actually need

to learn WIP coding. This is a complete project-based WIP coding course. So

watch this video till the end, and trust me, it will be absolutely worth it. So, first, I'll

remove the background and show you exactly how to remove the background

here. So, okay, let's

click on "Start Removing Background." Instead of "Upload Image," I

'll just copy and paste it here. I'll copy the image here and then

paste it here. And then I'll click on "Remove Background." I have

one credit remaining. So, this is the calculation we're doing. We

're giving away two credits for free when someone signs up. So, after this, it'll take a little process, and

you'll see how fast the background remover is. So,

just like this, I'll click on the download PNG. I'll do it, and you

'll see the entire page appears. It doesn't have a background. So, this is how you

can create a background remover. So, without any further delay, let's get started, guys.

And watch this course until the end. If you have any problems, come back and check

it out and make sure you've completed it. If you've finished it, and somehow

grasped the concept, then you can bring whatever idea you have in mind to reality

. So, let's get started. So, guys, you've seen the previews and all that

I've shown you how I've created it. The actual website

isn't ready yet when I'm recording. I'm building it completely from scratch

. I've created the entire guide. You'll find the link to this guide in the description below

. So, follow it. And what we're going to cover here is that we

'll use Lovable to build the website. Then, we

'll use an API called Remove Background, which lets us drop this clip.

What are we going to do next? We're going to use Super Base to manage authentication

and store user data in the database. For the workflow, we

're going to use N10, which will help us with the AI-based workflow.

We'll develop the backend. Cloudnary will help

us store whatever images we need, so we'll use its API.

Then, there's Razer Pay, where we'll collect payments.

Using Versal, we'll deploy it live so we

can make it shareable on our domain. So, we're going to do a lot of things. The complete guide

is here, step by step. So, first, let's refine it.

How to generate the prompt. So, the first thing I'll do is, I've

already started chatting with GPD here. And I told him my idea. What

's my idea? Basically, we want to generate a background remover. Okay? Now,

I've talked a little about how we want to generate a background remover. Now,

if you want, I can share this exact chat with you. If I

click share here, we won't talk about anything else. So, I'll share this chat with you

to help you out a little. So, let's copy the link. Copy the link

and I'll do it here. Chat GBD Chat

History: Okay, you'll find my chat history here (symbol). You

can click here to see how I generated it. First of all,

I didn't want to waste time on this, so I've

created everything for you. Here, you'll find a website generation prompt.

How to use this prompt? What instructions to give? How you

'll implement your idea is up to you. Now, my idea is sorted, how I

'm going to implement it. So, you need to have some idea

about your business first. So, you can discuss it with Chat GBD like this. That is, you'll

tell it to help me draft features, information, and page ideas for your website that

will remove the background of any image in one click. So, I've just told it this, and

my main task now will be to remove the background. Now, I've written "once," which

should be one click. And we'll use the API for that. So, I've given it a little bit.

Based on that, it's giving me ideas about what elements will

be included. So, it's simply helping me draft well. Now, it's

your duty to carefully check whether the information is being provided.

So, I thought he provided the information correctly. So, I

took this information. You'll find his entire chat history. So, in all two videos, I

want to explain everything in a quick, short, and crisp way that you can understand. Therefore, I'll

include quick instructions so you can follow them. Because if you don't follow,

there's no use. If I make the video longer, it's of no use

. So, here you can see the introduction. What

is the problem statement? This is professional software. Expensive editing tools are difficult to

learn. So, manual background removal is done by the person in front. So, for that, we

're offering a background remover, which is our proposed solution.

Target audience, etc., all the information is there. So,

this is just information about your business. Now what do we do? The basic information about this information

is the background remover. What will be its color theme? You can write all that

. But what will I do with this here now after copying it? I

created a website prompt. Okay? Prompt template website generation you are an expert AI Prop bl

bl bl what is the objective what will be the UI UX now what will be the input format of all this

so I created all this on the prompt. Now I will tell you directly that

you should copy this prompt. Copy this doc that I shared with you.

Okay, now I will drop the generated website prompt here.

So what do we do now? Let's take a new chat, chat GPD chat

GPD Gemini, you can use any tool, so I will paste it here.

Okay? What is it? So, I will paste it. Now look, I directly copied and pasted

this prt. I didn't edit anything

, what's the name of the business? Bl Bl Bl. So, now it's telling me, please provide your input in

this exact format. So, what can you do? You can discuss your idea

. What do you have to do? Discuss your idea that I want to build

this kind of business. For example, man, let me give you an example

because I know many of you won't put in that much thought. And those who

do will go much further than those who don't. So, now I'll say,

help me get business

information in this particular structure.

Okay? So in my business.

I'm going to solve the problem of journaling.

Many people aren't able to document their journeys

categorically, meaning I need to categorize them by category and mood. My idea is

to generalize them. Now, I want to categorize them by mood.

How is my mood? How is it on a scale of 1 to 10? How is my health? How is my education

? What did I pay attention to today? So, I

can see the whole thing in a graph format . So, after this, the person can easily

see their progress in an analytical

format. So, I just wrote this and did it once. Let's see what happens. Love

this idea, Vivek, this has the real potential. So, it says business

name, industry, main problem. So, after I've formatted it, I've written it

and it gives me a complete picture of what the solution is? What is the target user? What are the core features

? Now, I'll work on that. So this will help me formulate the exact problem

. Now I need to verify it. For example, I'm actually using AnyTime on the back end

. What will my stock be? I need to decide that. I

haven't decided yet. So, what will I do with the thing I need to decide? Whatever

I'm confused about, you need to read it thoroughly. Because, if you read it blindly, you're

going to build your business. It's not going to be so easy that AI

will give you things so easily. Because I'm telling you the core things. If this

isn't your strong suit, and you've made a mistake in this, you can't build any business.

Business isn't made for you. You're just making a jugaad (scheme). You

want to be successful in the shortest possible time and with the least amount of brainpower.

Okay? And don't treat this as a project. Imagine yourself

implementing something in real life. Think about it in terms of what I'd expect if I read it. So I'm just

making a tutorial, so I

can't go into too much detail. Okay? Because that also has a constant. Just understand, if we ever

go live on the YouTube channel, let me know if you want me to come live, we

can discuss it in detail. But that's not possible, because

a lot of people will watch this video. Mood Track General: You can rename it later. This is a working name. Okay

? Mental wellness is our own industry. People struggle to be consistent. Okay? Okay.

Now we'll look at the stack. Look, React will be the maximum use. Now React

is fine, Next Day is fine. Ask it. Okay?

Now I'll ask it, according to you, what do you think I should use for it?

For it. Okay? Now I'll ask it a question. Great question Vivek. Honestly,

my honest recommendation for you. Nextjs + n10 and subbase. If he's recommending Nextjs,

then fine, you can do it. But there might be a dedicated video on using Nextjs and React.

I'll have to explain that to you, I'll have to educate you,

only then will you understand. But here, AI is talking about it, so

you can use Nextjs. There's no problem. Nextjs is quite good and

is SEO-friendly. React, if it wasn't SEO-friendly, would have been fine. Now, look,

if you don't know what SEO is, you need to know that too. So, there are a lot

of things like that. If you'd like to tell me in the comments what terms you use

when you're coding, what terms are important for you to know? Bring a video on those terms,

and I'll definitely post a video on YouTube. So,

let's move forward here. So I'm starting to understand everything:

what categories are there? What all is going to happen? Cloud sync. So I

could ask you to explain these terms. But what will I do now? I

won't explain anything. I'll simply go to a new chat. I'll drop my prompt here

. By the way, there's already a prompt posted here. The industry

is talking about all these things, so what am I extracting from this method?

Extract this information. Now I'll go and insert this information here. So let's copy it

. After copying, we'll paste our chat here and

press enter. Now our prompt will be ready. So we

'll use this prompt, and you can also select what kind of UI you want. We

'll talk about that too. So, look, we want a good UI.

We'll build a great front end. So you are a Senior Full Stack Developer Yeh Yeh Role

Definition Need Product Architect System Constraint Back End Logic Hosted Self

Host. So Sass Snapkart has explained it clearly.

Okay? So, on the front end, our nexjs app router

wants to use nexjs, reaet query, tst query, shd cn UI. So,

what are we using in the front end? All these things have been detailed. What will be the text tags,

that means which language will be used in coding, which frameworks will be used. Well, it

is JavaScript, but there are framework libraries which

are also used in it. So, in the back end, Na10 will use our super base cloudinary Stripe, all these things

. So, not Stripe, this will be our Razer Pay for payment. We will use Razer Pay. You

can also say Razer Pay in advance. So, I don't think anything about

Demos, Get Actions, Environment Based Configuration, this won't

be required that much. So

tell me more about devs because I

don't think I am implementing it

as I am directly

going to use Na10 cloud. So, I'll be using the official website for N10 Cloud

. That's why I wrote "cloud." It's also self-hosted. That's

why I'm not saying "Docker," so I'm checking. And

don't be intimidated by these terms. Okay? These terms are common. It throws around a few.

There's no need to be intimidated by them. I'll explain it to you in such simple language

that you'll understand. Even if you have a problem, we

can solve it at the latest stage. So, don't be intimidated. I

'm deliberately teaching you this way because no one else explains it like this on YouTube. And no one else

does. That's why people don't develop websites like that, and their fundamentals

aren't clear. My videos are long, but they're such that if you follow them,

you'll learn something and actually create something. Okay? So,

trust me and watch this video completely. You'll understand everything. So I

don't think I'm implementing it as I'm directly going to use any cloud

okay, also, also Next.js. Also, I don't want to use Next. Now,

look, I don't want to use Next. I want to use it. I only want to

React. Okay? Now, I know what Next.js is, React. I

can't tell you the difference. But if you want to work with Next.js, go ahead and

use it. But it's better to use React because there are some things in Next.js

that you have to add a little bit over and over again to solve problems. AI

will solve them over and over again. That's why I'm not going to use Next.js right now because most people

will build on React. So, we're going to use React. Use React only

, later we can switch if we want. Okay? So, I've written it here. Now, what

does "Let's" mean? This is very important. You have to read each and every step of the way. I

can't go through each and every step, guys. I'm explaining it again. The video would be very long. That's why I

'm making it like this. We'll try replacing it with Razer Pay. Razer Pay setup: Checkout front

end: Orders: Ah, WebK, Users click, Upgrade, React calls, Any create Razer Pay

order: Razer Pay checkout opens, Users pay, Razer Pay sees WebK, okay, so whatever it

is, no back end coding needed, anyone handles it, so you're good here. DevOps, you

don't need heavy devops for now, since you're using Elite and the front end.

Okay, Versal, so everything is set up, so we're also creating our API,

environment variables, and understanding what all these things are. So I think we're good

to go with the front end: RIT N10 Cloud API. Razer Pay is super basic.

Okay? So, look, let me explain a little bit about the architecture. In case you're

not clear on it, I'll explain a little bit about how

our architecture is going to be. I mean, what my plan is . Let's talk a little about

that scenario. Okay? If you understand a little about the architecture

, it'll be easier for you.

Now, what's this? Sign up for free. Okay.

Okay, guys, we need your attention here. I need 110% of your attention here. There

should be no distractions anywhere. No phone calls. I need headphones anywhere.

Proper headphones. No noise. Okay? Come on. Now, let's learn something interesting.

What will happen in the architecture? What will we have? A front end. Okay?

What is a front end , brother? What is a back end? What is the role of this superb database?

We'll understand everything. First, understand what our front end will be. The front end means

the one in front of us, it doesn't draw a straight line.

This is what our website will look like. Okay? That's our front end. It

'll say "Upload an image for background removal" here, and there

'll be a "Remove" button here. So, we'll place it this way. So, that

's our front end. Okay? This is our front end. Now, after the front end,

our user who uploads the image here and then says "Remove the background" will

go somewhere. Wherever that goes, that's our N10. So, what is N10? The front end is what's

visible in front. The back end is what happens in the back. So, this will be our back end. It

will be treated like a back end. What is a back end? It's made up of different things.

You have Express, which is your JS. So, Express is JS. Back ends are made up of different things,

but we're going to use N10 properly. We're not going to develop any other back end separately

. So N10 will be ours. Now, after this, we'll have the data of all the users who come to

us. Okay? The data will be used somewhere. Now what all is included in the data? Like it

will be used for user authorization. Okay? Our database

will have its own user auth, that is, the user is getting authorized, that he has to log in,

history, okay? That the other person removed the background multiple times,

you have to store the history of that. What do you have to do with the history? You have to store it. Now

how will that history be stored? You have to store the history also. This

is also our task. Okay brother. We have stored the history. What other tasks are there? There are many

tasks. We will know about it in the next videos. Okay? Now,

there's no limit on images in Super Base, perhaps around 512 MB. If you're uploading images, there's a limit of around 512 MB, meaning they

can't exceed 512 MB. If you're uploading images, there

are a few GB, up to 1 GB or 5 GB. So, we won't upload any images to Super Base.

We'll use third-party platforms like Cloudery.

In this case, we'll use Cloudery, which is our platform.

If you see, we'll generate the website front end from Lovable. We

'll use the "Remove Background" API, which we'll

then send a request to NN. We'll use this API. We'll use Super Base, where we

'll perform authorization. After that, we

'll also store your history and other information using the user's NN. We'll use the image storage

inside the cloud. We'll also have a subscription model for payment.

What will we do? We'll offer a subscription model. Our business here

will operate on a subscription model. Okay? It's a subscription model.

Now, for those who subscribe, we'll use Razer Pay.

We'll collect payments from Razer Pay. We'll also offer some freebies here

. I mean, if you want to remove your background for five months, that's

free. Okay? Let's say it's free for some. Okay? So, we've made it free this way

. And I'll also demonstrate some changes. I'll make multiple changes to the site

so you understand how it actually works in real life. So,

we're going to make this particular business very complicated. Now, I

'm making it complicated so you can learn as much as possible. If you

want to learn the basics, you can watch our first part. Okay? If you

go to our YouTube channel and say MS studio.com

, you'll find the video there. Okay? Here, you'll go to Content

and find a video on white coding. There was so much demand, so

many views. Okay? So, we got such a great response. People commented

on this 2-hour, 40-minute video. So imagine how much value there is in this.

I explained it very basic, and I don't know how long this video will get. I hope I

don't have to make a part two. It's already 17 minutes long. Let's not have to stay awake all night.

It's getting to 123. So, let's see what happens. The rest of it is

for you guys to build on Razer. Okay? We'll take payments through Razer. So,

we're all set. This will be our architecture. So, first, we

'll build a good front end. To build a good front end, we

need some reference. If we have a reference, it'll be fun. He'll build it very well

. There should be a reference, and you can decide on the color. So here

I say, have you decided on the color theme?

So let's ask. Let's see, yes, I'll explain it

clearly. You can trust me. So the recommended color theme is Clean Tech Blue

Neutral Gray. So it's recommending me this. This is color. But do I know

what I'm going to use? I've talked to GBD before on the chat, which is, I

click on the one-click BG one. In this chat, I generated a logo.

I didn't do anything to generate a logo. Whatever the chat was about, it was

based on Prawn. I said, generate a square and professional logo according to my

business. We've discussed looking professional with gradient shade and all. So I just

wrote, "Gradient shade," and then, "Generate this professional." So it

generated a pretty nice one here with this color scheme. So, I think we

can move on to this. So it generated this one, and then

we have two. One is this, one is this. So what do I do? I'll download the one above

. Save it here. We'll refine it a bit with Canva or something.

How do I use it? Save it. So after saving here,

our logo is here. So, look, I generated the logo from Chat GB just like that

. You can use Chat GB to create a logo, or you can use any other tool

. If you want to generate a logo properly,

look at brandmarkio. If I were to go into the details, it wouldn't take less than 10-15 hours.

Okay? It would take me 10-15 hours, and people

build entire websites on an AI-based platform in that time, just by coding. If I were to create one on an AI-based platform, it would take a lot longer because

the concepts are so involved. What do I do? Consider it a compulsion. I'll go to Create My

Logo and write "Snapkut" there. So, we

can generate from here too.

But it won't be as good as the ones you'd get from Chat GBD or something like that

. So, if I type "Snap Cut " here, I'll just randomly add the color, etc. "A Background Remover"

becomes "Background Remover." "An Object Cut." So, I'll just type this. Copy it.

We'll set the color to something like this. Blue. Press Enter. So,

watch it generate. Let's see what it generates.

You can see it's producing a result like this. I

found Chat GBD's to be far better. I wrote the gradient exactly how I wanted it. I gave it the way I wanted it.

So, I'll use Chat GBD's. Let's refine it a bit. We'll

add it to the header. So, we'll go to cv.com and refine it. So, what am I going to do for now

? For now, let's leave all this refinement aside. First, we have to build the website.

So here I say, "Please keep the color scheme." First,

decide on the logo. That means, whatever the logo will be,

develop the entire website according to the colors used in it. Whether you want to do it in blue, green

, or red is up to you. Please help, please keep the color scheme according to

this logo. So, I'll do this.

This is our logo. Let's enter it once. And after this, if there's a reference,

we can see the reference as well. I mean, the UI.

Now, we have Drabble. Okay? So, there's a website. The 'u' is coming down, but

I still write Drabble. Remember, there are three 'B's' in it. Drabble

goes to Drabble.

Okay? Drabble is our website. Now, here I can write

"Background Remover." Exactly, we won't write it, but with one click.

Okay? I'll write it with one click. Some websites that use one click,

which have only one click, have a one-pager.

The UI doesn't seem quite right to me. Or, let's say,

gradient one-pager

Sass, Sass. I'll write

Sass, what Sass was, I forget the pronunciation sometimes. Sass, software as a service.

Okay, so we're building Sass, basically software as a service.

Brother, I don't understand the UI of Sass that well.

To be honest,

I can't understand it even after looking at the reference because it's such a business. Or we

can look at other background removers, what type of background remover they

're making. So, by cutting a pixel in Background Remover, I probably

saw someone's. I found Photo Room or Pixel Cut quite nice, but

its UI isn't that good. It's probably Photo Room's, so I can copy and paste it exactly

. There's no need to do that. But let's take a reference.

Hello friend, I got the reference but I want to develop it myself.

Let's do it. Let's see for ourselves what creativity is required.

Okay? Otherwise, I have a bunch of videos in my head about how

to finalize the UI, how to test multiple elements, how to generate 10-15 variations,

then finalize them, how to extract references. You understand the meaning of dedicated work on that

? A 1.5-2 hour video could be made on that too. What can I say? Boom.

I was missing for so many months, and I didn't bring any videos. That was it, man.

I explored a lot of things. I built a lot. It's going to be a lot of fun. It's going to be

amazing. Videos like this have come out. You'll tell me yourself.

Okay. For now, we'll develop according to

whatever it is. Okay? So the core brand theme of your logo. Electric blue, cyan,

neon. So, he's given the color scheme, etc. So, I'll say it here. So,

provide me the final print for generating the website

in a code block. Okay? So let's see what results it generates.

You're a senior full-stack engineer, product architect, and UI designer. Your task is to create

an application called Snapc AI role definition. What

will it do as a front-end? So, weet react, weet type script, tail wind, shd cn, so look, tail wind

is for CSS, your type script is for JavaScript only, so we

won't talk much about text tags, otherwise it will become very difficult, so our hosting

will be on this, limits maximum image 10 MB, so it has also given the resolution,

what will be the format, background will be removed, auto delete after 24 hours, this

is also there, no permanent file storage, so what will be the function requirement, authentication, image processing

flow, enable download receipts, so right now, whatever it is,

let's do it, what will be there, there is user dashboard, there is payments, there is credits, there

is admin panel, there is public API, there is rate limiting, non-functional requirements,

okay, all good, it is a very big project, friend, project gold deliver, scalable,

monetizable, production ready, AI, background removal platform, okay guys, we

are all set, let's go to loveable, let's drop the prop, and if you have any reference,

UI, then look here, like the theme's, na You can create such a color in the theme

by clicking on Create New. You can also add a color here, which is great. If

you want to add a color, there is a lot here. There are colors here,

there are typography effects. So, what will be your primary color in the color? You can add your primary color here.

Okay, you can search for the color or if you want to customize it,

you can use the hex code here. Now, what is in the hex code? For example, let's suppose

how do I explain it? If I write Google Color Picker here, then each

color has a code. For example, if I go to any of these colors, then

look here, the hex code is there. You can copy and paste this hex code.

Select the one you like here and go to the lovable one and

drop it here and paste it. Okay? There are other options for hex, like RGB, SHSLA

, but I'm using hex. So, look at how it

looks after using hex. You can see here how your front end will look.

It's created a simple front end, showing what your primary color is, what this color is.

So, you can use this, okay? And you get a better result. So, this

is a bit laborious, so I'll leave the laborious work to you. If you

want to do it in this case, try it out and see what the color of the card will be.

You can keep the color of the card different, the base color is destructive and neutral color.

I'd like to do a dedicated video on this rather than this, because

loveable is a dedicated topic in itself. So, if I want to plan or attach something,

I want to use it directly by clicking on Add Files.

If you have any reference, you can provide this reference. So, I've provided this reference

. So, use the attached image as the logo. Okay? Okay? So I'll just give this. If

I need to reference something, I'll reference it. Use the attached image as the logo

and for color identification

and for the website color theme identification. So I

'll write an extra line and hit enter.

So let's go, guys. What's going on? Let's see. Where did the entire thing go?

Okay, it's here. Okay. I get scared quite often. It just disappears. It

happened before, once, and it completely disappeared. So I'm thinking about it now. I'm making something.

Yes. So let's think about it. Okay? Let Lovable think. So what we're going to do here,

or if you want to use a free map, there's a little problem. I'd prefer

you to use a paid one. Use a cursor. Cursors are my love.

I feel better using cursors. So, I'll use cursors. But

I know a lot of you are wondering, what's the cursor doing?

I'll get to that later. But first, check out the website.

Our website has been heavily generated with Lovable. So, all our credits are

gone. It's a credit system. So, who doesn't

like free stuff? We're Indians, guys. Okay? So, we love free stuff. So

what are we going to do? We'll use free stuff. So, we're

going to use a lot of tray cursors. It's basically an ID. So, we'll get to that later

. First, let's run it and see how it runs. So, let's

go here. How did I preview it? There's an arrow at the top. From here, there's a preview. If

you click here, you'll see the code, what all the code he wrote.

So, all the code he wrote is here. He created components, he

created assets. So you don't need to know what components, assets, etc.

are. So, let's just preview what's here. AI-powered background

remover. Okay? Start removing the background. So, the original image, the background

image. So, he's created something. So, already, we can make it even better. We

can also fix the UI and other things later. So,

click on Start Removing Background. Then, we'll drop the Remove Image Background image here. So

, let's suppose it's not coming up here?

I'm double-clicking. Do I have to click on Browse Files?

My folder isn't coming up. Now, look, we need to fix this: it's

not accepting image input. So, there are many things we need to fix. But

what do you need to do now? Let's get to the process. Now, let me

explain it to you in simple terms. This is an online tool where you can generate your own website. There

are other tools like Lovable that you can use. If you

look at tools like Lovable, you have Bolt and Emergent. You can also

use Emergent. Right? There are quite a few. Emergent is also very popular.

I'll provide a dedicated tutorial on it. Emergent is done, Bolt is done, and Lovable is

done. These are all dedicated to their own subjects, you can consider them. So,

we can also create web and mobile apps with this. So, all of these work online

. But what do you need to do now? I need to work offline. Offline means

I want to run it on my laptop. I need the files on my local system.

Right now, if they have the files, I have no control over the business. If

I don't have any control over the business, how will I scale further? Okay? So,

I need code, so what will I do with it? I'm currently on Lovable. Going to Lovable,

there's a simple option for GetUp. Okay? We 'll click on this cat icon

. Then, in Sync Your Project, click on Connect GH

. And here, first click on Connect GH and

connect your GH account. Okay? So, check out my account, it's already connected. Vivek Mishra,

from here. If yours isn't connected, then first connect it and

create an account on GH. If you haven't created a GH account, then let me

tell you, I've already made a video. It hasn't gone live on YouTube yet while

I'm shooting this. But GetUp has already been shot.

The video is approximately 1 hour and 20 minutes long. So if you see the get up, it will be great. And even if you don't know,

it's okay, brother, I will explain it. There is no problem. You are a beginner,

I can understand. I am not worried, but I

am thinking that there are many topics. How can I explain? Half an hour has passed in this. But

if I have time, I will explain it immediately. Come, let's come to the board. So brother, see

what is our system? Lovable.

The name is Lovable, but our actual love, our actual heart,

is near the cursor. Okay? What is the cursor? After some time, you will see that our Lovable is an online way,

online without any dependency, without anything. What

can we do online? We can run our own website in which there is no technical part.

You don't have to build a website online without using your laptop, without

using your laptop's storage, without any dependencies. You can build it.

You have all the necessary tools. But when you need to get a little technical, when you

need more control, you get to use some really cool things for free

. Okay? There's a lot of testing that you want to do locally

. It can't be done online. The next part for those things is

something that pros do. Okay? Normally, small-time people don't do it. Okay

? So, this is the work of pros. So, I'm teaching you the pro stuff. So,

we'll talk about online websites. By the way, if you haven't seen it,

please do. I've explained it in these 2 hour 40 minute videos. I've

explained everything, from the get-up to everything else. But I'm still explaining it. Okay?

I also explained how to use the tray in it. Everything, all the methods, are free. I didn't mention anything

paid. But in this video, I'll tell you about some paid things.

So, this is our online website. Okay? So, we developed it online. Now,

what does this thing do? It shows us a very nice preview

. Okay? What does it show us? It shows us a preview. After seeing the preview, we

understand that our website is built perfectly. Our website

is built very well. But what do I do now? I need its code. He wrote the code. Okay

? Where did he write the code? He wrote the code. I showed it to you. Okay?

Let's go here once.

Go back. And here, you'll remember, I

clicked on this icon for code, where I see all the files

. So, it's loading the file right now because it uploaded it to some system

. It's stored on one of its servers. A server is basically a laptop, or a

computer, programmed to respond to and

receive requests. It's that simple. So, look at public assets, all that.

Now, how will this code come in? That's the main thing. I can read this code

individually from here. But I need it on my local system right now. So, what am I doing for this

? The first thing I'm doing is building a Ghub connection

. So, to build the GitHub connection, first, press the Code button to

turn on preview mode. You can see a preview of how your website will look in preview mode here

. Now, for this, we'll click on the cat icon for Ghub,

which has two-way sync, and connect to GitHub. After connecting Ghub,

the first thing you need to do is connect this account and create an account on Ghub.

Okay? What does GitHub do? It's simple.

You need to understand what GitHub

is. So, if I explain it simply , let's come here. Now, this website, its code, our code,

doesn't give us the option to download it directly. Okay? It

doesn't give us the option to download it directly. Who? You won't find direct downloads on Lovable, Bold, or any other online editor

. Okay? You can't do it directly anywhere

. If you can't do it directly, then what's the professional way?

The professional way is that it's in their system. Where will we upload it from their system

? On Ghub. What is GH? Ghub is the most famous platform, and there are platforms other than GitHub

. But what does GH do? It helps you store multiple versions of

your code base . You can store multiple versions. What else can you do? You can store your code remotely.

Okay? That means, if you need to take a backup, if you want to take a backup, in

case all the files are deleted from your laptop, then your files

are stored somewhere in cloud

space. For example, Google Drive is a cloud space. You

can use Google Photos. You can use iCloud. If you're an Apple user, you

can use Cloud. If you have Google, you can use Google Drive.

That's where you find the photos. All the backups are done online. So,

we keep a storage facility online in the cloud. So, what is it? Is it free or paid?

Yes, if it's free, there's no problem. So what are we doing now? We

're going from Lovable. We'll send it to Ghub from Lovable.

After it's on Ghub, we'll take it back to our local system. Okay? Local system.

We'll get everything called there. So we'll bring it to the local system. So first,

let's push it to Git. So, you can see here, there are

different repos here. A

repo is created with the name of each project I push. So what will I do here? I'll bring this thing here. So,

a repo will be created here. So, let's click on Connect Project. Vivek

Mishra is here. This is my gate. Now, I see a transfer button here. So,

let's click on Transfer Anywhere. So, in Transfer Anywhere, this transfer

is happening here on my gate.

So, look, whatever this transfer is doing, we'll bring it here. So,

there will be some dependencies for it. Let's understand that too. Look, it shows https here

for cloning. I'll explain how to clone. But for now, understand that

if I type here, what was its name?

It was Snapkat. Okay? So, here we write Snapc, Snapcut.

It's not working very well. Let's refresh.

Okay? Snapkut is now available. After refreshing,

you can see our Snapkut repo. Here, the entire thing is coming from Lovel.def. Branding

and so on. So, we'll have to remove this branding and so on. So, everything

is coming here. We have the code. There's a public folder. There's an SRC folder. So,

all the things are in folders. Our Fab icon will be visible in the public folder.

Let's see what it is. Look, this is Bolt's. Okay? The Bolt

logo is embedded here. So, we have to remove all these things and

put them in properly. So, we have the code base. Now, we have to bring this code

to our offline level. For that, we have an https in the code: ghub.com Vivek

Mishra is here. If in this case, you know this technical stuff, you

can skip ahead. No problem. If you've seen my first part, you

can skip this one. But there are a lot of people out there. Now, I'm assuming

I'm giving my best in this video. I'm building something quite large. That's why I

'm explaining the basics as well. So, what are we doing now? Let's go here

and look at Git, Github, and the local system. So,

we have to install it on the local system. So, for this, consider what are its requirements? Now,

let's say you want to run this thing locally. So, you'll

need two things. First, you need to install Git. You

need Git installed on your local system, and the one you should install should be

dot js. Okay? New. This should be installed. If this is installed, anything you

order locally will run. Okay? And then what do you need to do after that? There

's an extra step you need to take, which is your Node modules. So, I

'll explain what node modules are and how to actually run them. We

'll get to these things. From here, it's going to get a little technical. A little

technical, then it's very easy. Okay? Very easy. But it

's actually less technical than what technical people have to study. So, just

believe in yourself. Watch this video completely, implement it wholeheartedly. I can say this

if you implement it wholeheartedly, give it your all, you'll

find it difficult. This entire journey is difficult. Nothing is easy. Okay?

You'll find plenty of people explaining things in an easy way on YouTube. But you'll find one person who explains difficult

things in a less difficult way. That's Vivek Mishra.

Okay? So, please, watch the video. Bear with me. The line was very deep. I mean,

if you pay attention, you'll understand. Okay? It's very difficult, but I'm explaining it in a less

complicated way. I can't explain it in an easy way. It's a difficult thing

. Okay? So what are we going to do now? First, you

have to install two things on your local system. Okay? What are those two things? You know what, right? It

's nothing much. You'll just find the new website. You have to install it from there

. Okay? What do you have to do? Get started. Click on it and it

will download from here. So, if I write down our guide's

prerequisites here, let's say, I'll put a prerequisite here and explain.

Prerequisites, okay? What are our prerequisites?

So, let's do the prerequisites here. Install

this on your laptop. Okay? On your device. Okay? So, what's on the device?

The first one is our njs. I'll put the link to the njs website.

Let's make it easy for you, otherwise where would you be looking?

Okay, nots. Then, second, don't follow this link.

This not js, let's unlink it. Okay, second,

after coming here, you have to install get. Okay, you install

it. This get will help you manage versions. If

you have multiple versions, you can manage them easily.

Okay, so remember, git and get are different, so

we'll talk about that too. So, you have to install these two things. And the third thing,

you have to install ID. Okay, what is ID? Your Integrated

Development Environment.

Okay, this is your tool. Now, you can install anything in it. You have

multiple options. Okay? The classic one, which we call Classic,

is our most classic. Why is this happening?

Let's write a little bit about Classic. Okay? Now, let's

give you pointers here. So, see which ones we have in ID? The most

commonly used one is VS Code, or Visual Studio Code.

After that, you can use your own. You can use Tray. I

'm talking about the free one. The free one has Tray, Anti-Gravity. Then there's the paid one, and this

Cursor. Okay? Cursor. There are other tools you can use as well.

But here, you can use any of these four tools; just search. You'll find it

. I won't provide a link. Okay? You're a little bit amazing. Now, if I

type "Cursor" here, let's say Cursor is simple. You can install it from here. It

's a simple procedure. If you install it from here, it will be installed. Click the download button

. Download and install it. Then your Cursor will work. So, I

want to use Cursor. I prefer Cursor. If you want, you can use Tray.

Tray is free. So we'll go here,

sorry, not here. We'll go to Launchpad, and mine is already installed here.

So, right now, I'll click on this tray, so we can create it. So, we

'll run the tray a little bit initially. Then we'll run the cursor, or I

'll keep the project open on both. But opening the project on both

is a bit of a hassle. Okay, okay. We'll use the cursor and

the tray, both in parallel. Let's do it, guys. Let's open a folder. Now,

I'll create a new folder here. First, let's close it.

And I also have to tell you about the MCB server and all that. So,

we'll create a new folder here . It's called BG Remover

YT Project. Okay? Let's create it.

So, let's open it here. Just simply, now you have to open it. Your folder

is open. Now, what do we do inside this folder? We have to bring all the code here

. Okay? And after bringing in all the code, it should run. So, for this,

make sure you install the two things I mentioned. Okay? There

's nothing much to do. Just install what I mentioned. You just have to install

your js from this link and install git from this link.

This is the simple procedure. After that, you can use any ID. I have a tray here,

so we'll use the tray. We'll also use the cursor.

No problem, I'll open the cursor

in parallel. So, go to the cursor and click on Open Projects. So,

we'll open this one in the cursor. Open it and make it full screen. So,

we'll talk about how to run it. This is our tray. Okay? So, we'll bring it up now

. Look, first of all, you'll find the terminal at the top. Create a new terminal here

. You can do the same in the cursor. Here, go to Terminal > Terminal

> New Terminal and change its view a bit. I

want this view from the top. I like this view better, so I'll keep this view.

So, this way, our exact two are visible. So now, if I want to do something, I

need to clone it. What do I need to do? Run the command: get clone get

clone. And after getting cloned, you need to authorize, etc. If you

want complete instructions on how to use Ghub, please watch the GH video. I

'll provide the link below. Go and watch it. You

can integrate Ghub through the video link

. Otherwise, I'll click on get clone and paste the link here. Where did I get the link?

You can see it by going to Lovable. You can copy this link. Or, if you

Now that you've exited Lovable, you need to go to Git and copy this link. Okay

? After copying this link, you need to paste it here. So, after pasting,

you need to press Enter. And after pressing Enter, the cloning process starts. Okay?

Snapc ai Now, look, all the files are here. What's inside SRC?

There are folders. All these things are here. And you

'll see the same thing here too. Look, it's visible here too. We also made changes to the cursor. The ID

is the same. So, the changes to the files and folders are happening at the system level. So,

they reflect on both. Now, look, I know, my friend, if you still have such a big heart that you

won't believe it. I'll give you the Git guide. So, look, the GitHub guide

is already there. First, you need to install Git, which we've already done

. Then, you need to check whether Git is installed or not. So let me tell you one

thing: if you want to cross-check whether something is installed or not,

what should you do? Simple. It's not rocket science. It's simple.

I'll tell you two things. If you understand easily, that's fine. If you don't, try it and you'll understand, no

problem. So, here we'll search the terminal. First, check

whether you have Gate. So what will you do for that? Get

hfen v. Okay? If you type get v, you'll see the Gate version. This means Gate

is installed. You have to look for the nud. If you type nfen v, you'll know whether Jess

is installed or not. So, you have to enter these two things to know whether

it is installed or not. And how will you check this? In pre-requested sites.

Let me write this down too. Check them by

entering the command. What is your command? Get hfen v

and get, sorry, not get, no hfen v. Okay? This is

what you have to do. It works on some systems. Suppose you're having trouble

. It's not working for you. You're having trouble, then go to the new chat and

tell Chat GBD to "Help me check my GID version and NoDotJS

version on a Windows laptop." For example, if I'm using a MacBook, just

write "Windows laptop." Okay? Simply ask them to check and tell you.

And what else can you do? You can also talk to it. Look, this tray,

talk to the tray. Give it full access. The first thing here is to

keep this setting in the tray as Builder. If it's Chat by default, then change Chat and

make it Builder by clicking on it. The first step. Then,

all the models here are paid. But which one is free? This Advanced model below is

free. So I'll keep Flash 2.5 so I get a faster response. So you do this setup

and say here, "Can you check and tell me if

node.js and get is in tord or not?" I'll just say this. And

what you have to do is just copy and paste this entire get

guide. Okay, just copy and paste it here. No

problem,

okay? Take it all and copy and paste it here. Look, it ran the get version here,

which shows the version of get and node.js. So that

means all these things are okay. That means both are installed. Also, can you check this

guide?

I'm sharing below and tell me if Git is properly setup on my device or

not. So I'll check if GitHub is properly setup on my device.

Okay? So I've given it this guide. So it will install based on this guide. I've

given you the proper guide. You 'll find everything in the chat section, sorry, in the description

. So you can use that. The get-up guide is here. Okay?

Don't forget to switch to the top. Don't think you'll get everything the moment you open it.

You'll have to switch from the left. Okay? So please use this.

So now look, it's looking at the Git config global list. Git is looking at this. Check the

Snapc.io subdirectory, everything. Git installation installed, Git version yes, ghub

is properly set up on your device. Here's what I found. So look, it

ran all the commands and told me that it checked the Git repo status, it has

dot git, it has bg remover, all these things are set, so it has viewed the commit history online,

it has also seen the commit history, so what are all the things, you can ask it

and even I tell it, look, Git global configuration

is also saying what is the username, Vivek, and what is the email, Vivek Official Online,

already set your email, so everything is set up for me, in case it's not set up,

If something's missing, okay, then set it up for me. You just have to chat with me.

You literally don't need any technical knowledge. If you

need more technical knowledge, there's a link in the description.

I explained how to learn GitUp in the previous video, so you should check all that out. Otherwise, the video will literally

be quite long. So trust me, guys. Now, let's actually edit it

and understand how to run it. Now, look, I've told you what an ID

is. You have to run some things in it. Some things are used. Now,

you need some more things to run it. What are those things? For example, if you

go to Lovable, you'll see, go back. Look, there are many things

that have a lot of folders. There's a node module, which has a lot of

folders. There are a lot of files. So, it becomes very heavy

and messy, and GH doesn't allow you to upload so many files.

So, the method we're going to use is going to be a little different.

Why isn't Lovable opening?

Wait a minute. So, it's opened here. Lovable, but the file isn't visible here either

. It's set to No Modules. So, that's okay. I guess it's

working in some other way. Let's close Lovable for now. Okay?

Of these websites that are open, we'll also close the ones that aren't useful

. Okay? So, I guess we're all set. Okay?

I'll delete that one too. This terminal that we've opened. Terminal

is basically for checking whatever you need

to check, like project file settings, and what version it is. It's very helpful for that

. Coders use it a lot. Just understand this for now. So now, look,

what I told you here was, look, we have Gid, we have Note.js,

which can run the code, but it still won't run. To run it, you

can tell this AI tool to run it for me. As far as I know, look, I

can tell you the procedure. I know how it works, so I

'll tell you the procedure, then I'll use the AI tool to demonstrate. So what I'll do is,

first, select my folder snapc.io,

right-click, and select "Open in Integrated Terminal." Okay?

I'll select "Open in Integrated Terminal," because everything is happening inside this folder.

Everything is happening inside this folder. So, I'll go to it. If I click "Get Gate," I

'll leave it here. This is the folder called "Snapc AI Studio." I'm inside this folder. I've

figured it out. Now, what do I do inside this folder? I guess

my phone isn't charging, man. Let's turn it off now. So what are we

going to do here in my Snapkart AI Studio? We're going to type npm. What is npm. This

will install the node modules. Now I'm going to hit enter and see what

happens. Okay? Hit enter. Now, let's see the public

src. Now a node modules file will appear here. Okay? So let's wait

while it installs so you can see it. By the way, I won't cut

the video in the middle so you can actually see what it looks like. And I'll

also create a program here. "Can you make this website run on my local device?"

Just type this in. Take a screenshot. Keep it written somewhere

. "Can you make this website run on my local device?" Just type this in and

hit enter, and it'll be done. Now you can see the node modules here

. They're installed. All the node modules, you can see how big

this node module is. So many things are written in the Xord YML here. So all these things,

dependencies, etc., reside inside it. So it's installed. Now,

look, it can only run after it's installed. So what do I do now?

I'll delete it. Okay? I'll delete it. Oh, don't delete it. It's

not good right now. Let's cancel. I wanted to tell you one more thing. Now, what happens here

? NPM run dev. We use npm run dev when we

actually need to run it. So, we'll use npm run dev, which

will run it on our local system. So, you can see, this page opens directly here.

Now, this is localhost 8080. What do many people do? They copy this link

and say, "My website is live. Go and check it out." So, this link

only works on your local level. That's why it's written localhost. Okay.

So please don't share this with anyone.

Absolutely not with any technical person. Otherwise, you'll be insulted. Okay? So,

we'll deploy this on a live link. We'll discuss how. So, let

's copy it once. You can copy it if you want. You can also find the link here

. You can also open it by clicking here. Copy it from here.

After copying, go to any other browser and paste it.

After pasting, it will start running. Now you can see that your

website is fully functional. Now, if I need to edit anything, I

can edit it here. Now, I need to learn about this thing and how it works

, and gain information about things. So, we'll discuss those things as well. Let's say I

delete the modules right now. Okay? I'll delete them right now. Move them to

the trash. Okay? I just deleted

the one that was installed. Now I'll refresh it. Will it work now? I don't

think it will, but I don't know how it's working. How it's working.

I don't know how it's working. But somehow it's working. No modules have just been deleted

. Okay? By the way, a build file is being created, man. I remembered that. There

must be build files lying around somewhere, so that's why it's running. So anyway, I'll just say it. Let's

kill it right now. There's a delete option here.

So if I refresh here, it shouldn't run anymore. Now look, it's not running.

Okay? Because I killed it terminally. Kill means I deleted it from here.

So, it's killed. So, can you make this website run on my local device? Now,

here, I'll even write "Get." I'm used to "Get." Right-click

. Open in the integrated terminal. You have to click on it. Always remember

this procedure by doing this on the folder. And what should we put here

? npm run dev. This makes your site

run locally. Look, it's not running. Here's

an error about missing modules. Why is this happening? Because we don't have the node modules

. Okay? The ones I installed. So what should I say? Can you make this

website run on my local device? I'll just click on this. Look, we have

AI. AI does everything. If you don't understand a topic and

find it technical, it's simple. Use this AI. It will do everything.

This tray of yours, you can see what it's doing.

We can see everything on the terminal. It's installing. So you can see the node modules

installed here. Install on snapco. Npm install, so the modules are installed

. Now what will it do? It will run the same thing I did. npm run dev

is its script. Just like that, it made the site live. I didn't

have to do anything. So you can do this too. So look, I've explained both methods because I

want you to be a good person with clear fundamentals. Right?

Why waste AI credits on useless things you can do yourself?

So let's move on.

Now, first of all, let's fill it up, to make things

look a little more organized. Okay? We have the background remover in a second. We

have everything. Click on "Start Removing Backgrounds." So something

should happen. And let's go a little further back,

creating a background using N10. We'll do authorization and such.

That might not seem very interesting to you. That's why we'll go a little further back.

As soon as we click on "Start Removing Backgrounds," the image should upload

. So, first of all, its functionality isn't image uploading. So first of all,

if I go to the tray, I can select it here, even if

I am on 'Start Removing Backgrounds'. You get an option here,

after selecting it. You can even select the element here.

After selecting the element, click on 'Add to Chat'. After going to 'Add to Chat', you can

say here, 'Here I am not able to upload any image.' Okay? I am

not able to upload any image. It is important to upload any image. So

it is allowed to upload

an image from my desktop. Look, the first thing is, I want it from the desktop. And

what is the second one? I can also write it here. First,

upload image from my desktop. Second,

here, direct feature to Craig.

And drop for uploading. Then what's the third procedure? Our third

procedure could be directly copying and pasting. Copying also

happens with an image. Directly copying and pasting the

image to a shortcut. Okay, this shortcut is done,

so this is the process to follow. I'll also write this here: Remember, these are

only features, so don't create separate buttons for it, because it might

start creating separate buttons for everyone. I don't want that. So I

'll just enter this and let me know if my video seemed too technical.

I'm not using too many terms. So tell me in the chat section. I mean, I'll

have to make a slower video again. I'm already making a slow video. Otherwise,

these things should be finished in this time. But this is just the beginning. I mean, we have

to build the back end. We have to integrate AI, we have to do authentication. There are a lot of things

that are still pending. I still have to tell you more about the setup. So now, look, it

's editing something. I actually had to do it with the cursor,

but still, let me explain. I'm explaining it from the tray itself. And if you

're comfortable with cursor editing, you can do it with the cursor. We'll use the cursor a little later.

Okay. I guess it's okay, man. But the side is black.

Now, I'll tell it, "The above error occurred in the upload page." Then I

'll tell it, "The page is completely blank." Kindly solve it. So, look,

the console locks appear here. So, if you

click on "Add to Chat," it will become "Add to Chat." So, look, look, whatever error

comes up, add it to "Add to Chat" and then press "Enter." So, this error

solves problems and such. So, this

becomes a very beneficial point for you. So let's see, guys, what's going on?

It's solving. So let's solve it, and boom, we have it ready.

Let's click on it. Nothing's happening right now.

Right now, it's still not appearing, man. Browse

files, it's happening.

If I open any file

like this, look, you'll get a real case study type file. First,

I have to do this.

Okay? So, I'll drag and drop this image here. The image is there

. We're not uploading it.

If I click on the original, and this result, remove background, the processing may take a few

seconds. So, look, the result is displayed as it is

. Nothing has been processed yet.

Okay? I understand. Remove it now. So,

let's check the uploaded files, copy and paste. Once, let's see if the copy and paste is working or not. So, once,

what is the spelling of posh posh? What is this? Posh car

posh. Look, I don't even know how to spell.

Let's copy this. I heard on YouTube that

rich people are the most posh. So I just said Command-V. Okay? So, the copy-paste

shortcut also works. If I copy here, it's pasting.

No problem. If I right-click here, copy

the image, and then paste it here, it's pasted. Changed. Okay?

Remove. Okay? So, only this button isn't working. The other two features are working. So, I'll write here, "This button isn't working."

This particular one

wasn't getting selected, but I want to select this one. So, let me just

say this. " Here When " or "

Browse Files" isn't working. If I click on "Browse Files," I can't click on "Browse Files." Here, when I click

on "Browse Files," it's not opening the "Browse Files" and "

Upload" icons. It's not opening the "Local System" menu.

File manager, whatever it is, I'm calling it file manager, I'm calling it local system. Local

system means the local system of the person using it,

I'm using the term for the system that's open. There's nothing too technical

about it. It's quite late at night, man. What time is it? It's 12:59.

I don't know how long I'll have to stay up. I have to get up early and go to the gym. I

skipped the gym today. I mean, literally, I've been wearing gym clothes since morning.

Well, if I remove my jacket and talk like this, then literally, I'm in my lower third

. I mean, if I'm being honest, you can see

I've made a lot of recordings

for you guys since morning. So, man

, let's wait and see what he's showing himself. So, he's changed something. Has he

changed just one line? He's doing more. You can read it. Even read it completely.

I need to fix this. Now I'll update the upload zone jsx to add the reference to the

file input. I'm not understanding anything. I don't know what it's doing. I

'm not a technical person, but still, it's interesting to see what's happening. Something is happening.

Okay, let's do it. I guess something has happened now. So what was the root cause? bl

bl bl I'm not interested right now, but it'll be better if you read it. If you have even a little

technical background, you'll understand what the root cause is. The file browse

functionality wasn't working properly. The label element wasn't taking up the

full space of the upload zone. Okay? So it wasn't part of the upload zone.

Okay? It's there now. Okay? It's good now. So this is all you need to fix it.

So, here you go. Okay? The upload is working.

If I click anywhere else on the left, it's still working. Okay, it's maintaining the entire area

. Okay. No problem. Anyone will click on this area

to upload. So, click on upload. Click on remove background here.

So, okay, remove your background here and it's done. Now, this

process, as soon as you click on remove background, I have to send it somewhere

so that the process can be done and the background can be removed. Now, I have to do this. This thing, this

thing. Okay? So, let's go to Na10. So, first we need to see the procedure

for Na10. So, let's go to Na10 for a bit. I

'll take a water break. Okay, guys? So, let's search for Na10 here. Okay?

Just type Na10 and the first website you'll find will be Na10. You have to go to this website

, and after going to this website, you just have to click on Get Started.

By clicking on Get Started, you can create your account here.

Let's click on it. So, I need to create an account. So the company email says

"Start automating today." So, we'll just use the temporary email here.

Okay? I mean, I don't want to use my permanent email.

So I won't say much. I'll just keep using this procedure.

Understand what I'm doing, why I'm doing it.

So, an email will come here. Let's copy it. You don't have to follow this.

Enter your original email. Okay? Email is required. Why isn't the email coming

? I'll have to type it manually. Let's do one thing. I'll go back first.

Then I'll go to sign in.

Let's do that. Under sign in, you get the option to start a free trial. New

Year, then start a free trial. Even here, the company email won't copy and paste.

That's the problem. If it

doesn't paste, what's the problem? I'll write it down.

It's literally deleted.

It's not like I'm recording, so my system slows down. KO

FIFI

8818 8818@

GS.com

Okay. Let's submit. Okay, we have received an OTP, so

let's enter the OTP. By the way, I don't have to demonstrate this much, friend. You already know this much,

still see it because maybe many people

are getting to see something new

417676

submit Let's go guys Password

Vivek Mishra Name Password

Okay. Account Name Vivek Mishra and

Vivek Mishra Profit Number Can you enter some good number?

Any random number Start free 14 day trial. Will start 14 day trial.

Hi there Vivek. Answer these questions. Okay? He is asking some questions,

let's do it quickly in onboarding. Only me getting okay,

have you built yourself in the past? Yes, you don't have to give all the honest answers

in the survey, so you just write, "Your workspace is starting up,

wait." What does it say, "

Then Quick Start Official," so the rest takes a little time, so let's wait

for that. And this time, let's leave the mail open for a while. Let

's close the rest of it. So, this is our website. Now,

what are we going to do here? We're going to give it a webcam. Now, here, we'll

understand a little bit about webcam concepts and how to implement it. So,

there's Start Automating. Let's go to Start Automating.

So, in Start Automating, you'll see a button that says "Start from Scratch."

Click on it. After clicking on it, we'll build from here.

There's an option to "Add First Step." So, we should also have an API. So, what do we do first

? Now, I'm going to create a normal one. Without using the website. We're back now.

And I'll create it. So what will I do? Normally, there's a form here. So

what is N10? If I explain N10 to you in short, okay? Every tool

comes with a little explanation. Okay? Let's do it. Now, what does N10

do? It helps you automate. What can you automate?

You can automate any task. You can automate any task. You

can create your own workflow. You can create a workflow. And the most important

thing is workflow, what does it mean? Work will be done in a sequence. So

you can create that sequence. Now, what will be in this sequence? There are different integrations

. What are they? Integrations. Integrations in the sense of integration means

you connect different platforms. Platforms like Instagram

. You can also use Lindin. Now, for example, we're going to

connect Cloudnary. We're going to use the background removal API.

The background removal API is a separate platform. We're

going to connect our own website. Okay? We're going to connect our website

to everything else, creating a connecting point between all these platforms, and

connecting all these platforms will create a workflow. So

how do we connect all the platforms? We're using NN for that

. It's giving us a backend functionality that connects things

and runs in the background whenever a request comes in. So

what are we doing here? To explain it simply, we'll use the N10

form. We'll turn the NN form on. So, understand that you

have two things here. First, there's a trigger. The trigger means when the workflow

will start. When. Okay? You have to decide when. So,

you'll decide when here. When triggered. Now, whatever happens after that

will be your action. Action means what action will be taken after this trigger

? Now, you can choose what other action will be taken after this action, and then

what further action will be taken? So, this is how the workflow is formed. But the first one is

the trigger. So, what have we set up now? In Na10. So,

what is this trigger set up in Na10? This is our On Form Submission trigger. We have a trigger

. Now, as soon as the form is submitted, what do we do? Send it to Cloudnary

. So, does Cloudnary already have a node?

Let me check the spelling of Cloudnary. Okay? Cloudnary,

okay? There is no Cloudnary node.

What do I do if there is no Cloudnary node? If there is no Cloudnary

node, I will use a simple API. So, I

need Cloudnary's API. And I also need its API to remove the background. Now, look, I

have absolutely no idea how to get an API for this. What to do, so I'll

have to read these docs and I'll do it with you so you know

how to develop something in these cases. So, I did a simple search to see

if there was an API, and I found this API, because

I hadn't even created the thing I'm about to share with you before. So, let's see

together what we can build. So, okay. Here we are, on form submission

. What do we have in on form submission? The form title. So, we're

not going to make it anything fancy. Let's make it simple. Okay? Upload your

image. Okay? And here's the add form element. The form element will be labeled "

Your input image." Let's suppose

what is a text input? We have a dropdown, an email, a hidden file. So, right now, we're

not using any of the website. We're building the entire back end within the front end. We

're creating a workflow. Through which we will get an input image and its background

will be removed. So here is our password, hidden file, file. Okay?

Our file is ready. So the form is submitted. Let's click on execute step once.

Click on execute step also. Now you can see that your image has been uploaded.

Let's go to choose file. So after going to choose file, here is our image.

Let's submit.

Our image has been submitted. You can see. Now the image which is submitted, you

have to remember this. It will be in binary format. Our image which will be there will always be in binary

format. You will see four types of output. One shows schema, one

A table is visible, a JS is visible, and a binary is visible. Binary is useful for us right now

. Similarly, there's also a schema. I'll explain the schema table briefly.

What is a schema? Your understanding of the schema is enhanced a little by knowing that the

filename is good. Well, here it's this size. This is this. So you

can understand the concept of a schema a little more clearly. What is in a table? A table

is clearly understood in a table format. There is some data that is

not clearly understood in a table. Right? JSN is your code coding, which

will be in code format. So JSON stands for JavaScript Object Notation

. We'll discuss this later. But

your output and input—most of the communication

between applications is done in this JSON language. So,

whatever data we pass around, it's all in the JSON format

. So, what is JSON? There's a format written in JavaScript

. But it's JSON. So, your input image filename, name type, size,

etc. are also written here. What's the size of the image? What time was it submitted?

What was the form mode? All that stuff. But the image data isn't visible anywhere here.

Image data is always in binary. So, you'll see your input

image in binary. So, this is our input image. So, if we view it, you can see it

's 2.5 MB, so it took a little time, but it loaded. My image is here

. Okay? Your eyes look a little closed because I was already closed. And where did I

go? Tell me quickly in the chat section. And let me tell you, this is AI-generated. Okay?

I generated my image with AI. So, it's generated quite nicely. It's good. So let's go back

to the list. Let's cancel. So, look, the image is here. In the same way,

the image from our website will also be here. Now, how it will be received, we

'll set it up later. I'll show you how to do it. So,

let's click on the plus sign on the node. Now, what are we going to do here? We're going to use

API calls. What are we going to do? First, we'll

connect to Cloudinary. Cloudinary is where it will be stored.

So, now, consider our system. Now, we know that we

have the image. Okay? I told you what format the image will be in?

It will come to us in binary format. Okay? Binary.

What will happen in binary format? We will have the image. Now, what will we do with this image

? In the next step, we'll upload it. I'll

have to upload it somewhere. There will be a link to it. Where will we upload it? We'll do it in the cloud

. Okay? After uploading, I'll get a link generated from there. Okay?

What will happen? A link will be generated, and I'll receive it. What will I do with the generated

link? Through that link, I 'll use the second API where I

need to remove the background. I don't remember its name

, let's look it up. I'll tell you the exact name.

ClipDrop, so we're going to use ClipDrop. So,

remove our API here. We'll use ClipDrop. ClipDrop

. Okay? We're going to use ClipDrop. So, basically, this is the procedure

. The main one is Cloudinary for uploading, and ClipDrop

for background removal . So, these are the two things we need to crack. So, okay?

We'll go to the Cloudinary API. So, for the Cloudinary API, I

'll use another account. So let's go to Profiles. First of all,

why is my YouTube Studio open? It's open for promotion, saying, "Hey, watch this video." After 60

days, almost all of my videos are coming. So, let's come here.

And here I have an account called Zopper. Okay? Okay? I

'll create whatever I have on this only. So Cloudnary,

Cloudnary, here I go to Cloudnary, and I want to upload. Upload

API, so I search for Cloudnary Upload Image API. Okay?

I go to this. So Upload API Reference, I click on this. So if

I want to upload on Cloudnary, look, it could be Cloudnary, it could be any API.

I won't do any research, I'll tell you straight up how things work.

So, open the Upload API Reference, mark down the Upload API rate limit. bl

bl bl, all the things are there.

Dude, look, there are so many things I can't understand after reading this documentation. I

'm not a technical person, I have a little bit, but

it's not purely about signing up for free. First, you have to click on the sign

up for free page. Then, I'll tell this API how to use it. You sign

up with Google. I've used Cloudnary, but it's

been months. I actually don't remember. I've forgotten the procedure.

And if I try to do it completely from scratch and don't provide you with the proper format,

it'll be a problem. So, I'm going to pause the video for a moment so I

can see my old workflow that I created. There's a lot of private stuff in there

, so I'll have to pause it. Let's continue.

Why is this taking so long? Let me check it out in the meantime. Okay, it's done.

My iPhone's battery is very low. I don't know why it's not charging.

Why is it at 10% charge?

So what's your main challenge, man? I don't have any challenges whatsoever.

Next, next, let's do it quickly.

Next, images, next, next, get started.

Okay? Here should be our API. Add-on marketplace. So look, here's

the EPI for installing Cloudnary, etc., upload images, and

transform index. Well, there are some things listed at the code level.

I don't want to do it at the code level, I'll just do NSC.

Okay, so here's a settings option. There should be something in the settings, I'm just

figuring it out. Okay? Look, here I found the ABI keys. So finally,

I got it. I'll have to create an API key. Okay? The API key is already

there. So, I'll have to delete it too. I'll show you guys. So,

upload presets, auto upload, upload defaults. So, these are all the things. So,

we're going to upload using the API key. Okay, guys, I got it.

Just give me a minute. So guys, I was just checking my old workflow here.

I used a different API here too. I didn't use Cloudinary's.

Even if I did use Cloudinary's, I can't find it. So let's

create one from a swatch. So first of all, I know this API will work, and we have this

reference. So let's copy it. So let's go to the chat

we were talking about, Chat GPD, and say there, I

'm using this particular reference. So check the Get End version of ours, and which one was it? This one was,

I guess, build. So now I'll ask him

to help me create an end workflow.

So first, help me create

ah, Cloudinary Cloudinary

STPS HTTP node. Okay? So now, look, let me give you a little more clarity here

so you can understand. So, first of all,

I should close these unnecessary websites that are open.

So, okay, let me explain the API to you first. What

does our API look like? Now, what is an API? What does API mean? Simple Application

Programming Interface. What does it do? So, let's suppose

we have it. You've gone to a hotel. Let's suppose this is a very common example that

anyone who explains it to you will give it to you. You've gone to a hotel. Now, in a hotel, you need to order something

. You're standing at a table, and you have a menu. Now,

what do you actually have in front of you? It's not in front of you.

In the back end, the things that work on the back end are your, let's say, kitchen.

Okay? Now, you don't have access to the kitchen. Okay? Now, what do you do? You

don't have access to the kitchen. Now, you wouldn't go to the kitchen and say, "I

want this particular dish, I want this food." So, what happens in between? There's a waiter in between.

Okay? What happens in between? There's a waiter. You place your order,

and the waiter gives it to the kitchen, saying, "Yes, I want this order. I want it

for this person." He then picks it up and delivers it. So, what can you understand from this example

? The API helps connect two people. There's you, and

after you, there's another user. I wouldn't say "second user." It's better. There

's another platform you want to connect to. That means, if you

want to request a particular item, who do you request it from? The waiter. And the waiter

will bring it back from here. So, what is N10? In between, N10 provides you with this very thing, so you can

You can connect the things in between. But how does N10 provide that? N10

is a platform. N10 is a floor. Now, let's assume there's a floor where all three exist

. But the waiter here is an ABI call. Okay? We

'll use ABI calls. So, to understand this better, let's assume

we have documentation for every platform, like the one we

're using now: Cloudery. So, we have a proper

platform for Cloudery. So, we'll have documentation for that as well. So, what does documentation

do? It helps us learn how to use the API. So, we

won't read this documentation ourselves, but rather copy it.

We'll go to Chat GPD, and I'll write, "Now, help me create an end

workflow." So first, help me create a Cloudinary HTTP node and REST. I've

created it, and I'm receiving a binary file. Okay?

I've written that. Now, after that, read the complete

upload documentation of

Cloudinary and tell me

the next steps. Okay? So, you're going to understand things at a very deep level.

I'm telling you something great, you'll enjoy it, friend.

You're going to enjoy what we call fun. Today, it might seem like you're learning hard, and

luckily, I'll have to stop this video. I know, because this is a very long video,

and I can't skip the gym. It's 132 am. Cloudinary upload: how it works.

REST API. So, if you want to use the REST API, you have to post. So, let's see what

all we have to do. So, what are the settings I mentioned?

Okay. Now, let's come here. We've clicked the plus button here

. What do you have to do here? Just search for http. The http node actually

helps you make requests from another website. If

you click on the http request, you can request anything, like, "

Please upload this image." So how do I say that? I'll

say it through this. So, first of all, who do I want to send it to? What will the URL be? So, first of all,

I need to know the URL. So, what did it tell me? I'll check that.

Whatever information it told me, first of all, I have to send a post request.

Okay? Let's send a post. The method will be ours. There are multiple methods here. I have to

send a post. What does "get" mean? I have to get the information from there. "post"

means I have to post there. I mean, I want to upload an image. So,

I'll use "post." So what do we have here? The file

is binary. bla bla bla. So, first it says, go to Settings. Go to Upload. At a

New Upload Preset. Set it to unassigned for easier direct uploads. Okay?

So your work flows step by step. Create an upload preset recommended in your Cloudnary

console. Okay? So let's go to Cloudnary. Cloudnary. Now here,

our console is saying upload, I guess. So, add an upload

preset. Okay? We're on the upload preset. Let's name the preset here

. NA Direct Upload. Okay? Here it's

sign, unsign, sign, unsign. So what do we have to do ?

Set the upload preset to unassign. Okay, let's unsign it. As a set folder, which is a folder

destination, is optional? Allowed formats: JPG, PAG, WEBP, okay. We're not giving an

asset folder. Auto-generated. Okay,

generated display name. Okay, everything is okay. I guess, let's save it according to me

Okay? Upload Defaults, Upload Presets.

So, we've created an upload preset. Where did you go? Well, we went to the settings

as mentioned above, which are on the bottom left. In settings

, we went to upload. We did this. We left out the rest: file name, false, unique file name, file name,

display name. We left out all of that. Allowed formats, max file

size, this: allow uploading without needing to, generally, signatures, manually upload, set up

NAT and credentials. Add Cloudnary using your Cloudnary API key, API

secret. This allows you to authenticate when using Cloudnary Notes and HTTPS

Notes. So, okay. Here, we

have to add our Cloudnary credentials, the ABI key, and the secret. So, okay, we'll create that too

. Okay? HTTP request node upload to Cloudnary. So,

we have to upload to Cloudnary. So, what about that? So, here, he created this for me.

I've given it. Copying it creates a term you

can use. I can copy and paste these directly one by one. But what do I

do? Now I tell it to provide me

a curl URL

for settings

. Okay, so I tell it to give me a curl URL. What's the term? A curl

URL. Look, you can actually learn this from the video itself. There's nothing special about it.

You have to write the curl URL. So, the curl URL should be given to me in a code node

. You can see this. It gave me the curl URL. Now I'll copy it.

After copying, what do I do directly here? Here

you get an option called "Import this URL." Okay? This is your curl.

I'll paste it here and click the import button.

And as soon as I click the import button, you can see that the URLs appear

automatically. By default,

all the things that will be in the send body appear here automatically. I don't have to select a single thing. Okay? Literally,

not a single thing. Now I just need to make the changes here. This

is the simplest method. Even if I don't know, I can do it because I've

done it many times. I've connected many APIs. I mean, you're sitting with this guy

who's done a lot. So trust me, so many gaps

in videos don't come just like that. A lot of things keep going on. That's why problems arise. But now

let's be consistent. So, first write your cloud name. So

what do you have to write? What do you have to replace? That will tell us this.

Okay? So, okay? Let's come here now.

I already did the above. Is there a curl command here too? Upload with

signature. Okay? We don't have a signature. Verify request order

expected response. So this will be the expected response. How?

Okay? So, let's take a look. Your cloud name, your upload preset, image,

page, test file option one unsign upload easiest use this if you created an unsign

upload cloud name and upload preset so I still don't understand

how to do cloud name and upload preset so now guide me what to do after pasting

after using this burn command okay so paste it here now see

what happens? Great question. If this color command works,

this means cloudnary upload is 100% ready. So first confirm curl works. So no

I am able to see my HTP

note on n10 but I have to change the value as well to make it work so from where can

I change the value

value. So let's go. Let's check it. What happens.

Complete success step nine. You have to hit enter once again.

Okay? So binary property name upload preset value cloud name in url

binary property name ok abc icon go to your htbt

nos binary property data this is all ok upload preset if you typed your upload

preset that will fail you must replace it with your real preset name snapko unsign

so what is the name of our preset this is the name of our preset ok let's copy it

cloud name your cloud name my cloud 1 2

3 where to find where to find cloud name

so let's write the name of the cloud. Method one cloudnary dashboard log in to cloudnary.

ok? console open dashboard home like this account details cloudnary name abi

secret key. ok? so what is our cloudinary name?

oh guess settings

is this ours? I'm not sure. But hope so it should be.

I'll send a screenshot of this. Now I'll send a screenshot of this. You can see

that it's being recorded, so you can see my face as well. It

looks like it's being recorded, so here to click. Now, I mean, I have to ask in this way. You

think for yourself that it's not that things are easy, but I

'm showing you the entire procedure so that you can learn. Look, I'm going to make a long video. You don't

have to skip anything. You can skip and watch the video back and forth. Okay, but I'm

going to make it long so that a lot of people can understand because people actually want to build a business

. If they actually want to learn something, it will be very helpful for them.

Click Home top left. Okay? Find Account Details box.

Home left. Click Home. This is Dashboard. Okay? We went to Home.

What happens after we go to Home? This is Home.

Account on this page. Look at the boss that says something like Account Details cloud in name.

API Key Secret Cloud Name Cloud Name DG This might already be your

cloud name based on your screenshot Looks like this Okay, this is telling me Okay, so

this could be it, so let's take this. So let's copy and paste this exactly

. A D Z Whatever is saying Copy Cloud Name ABI Key Secret

So okay, we come to Na10, this should be your cloud name, so

let's paste it. Okay? It's pasted. So Form Data Upload Preset Upload

Preset Value. So what is our Upload Preset value?

Let's check that too.

Let's go to Settings. Let's go to Upload.

So what is its name unassigned?

Okay.

Form Data Folder snapcut dot upload. I guess this is the folder name. The folder is not ours

. It doesn't exist. So if we want to create a folder, okay,

let's create a folder once

. What is our folder? Snapkut Uploads

snap cut snapcut

uploads Okay. Go to edit and save the Snapkut uploads.

I guess the rest should be fine. What will be the input file? N10 file.

So in our file, in the input data field, you have to write exactly your input

image. So, you have to copy this and insert it in the binary image. So whatever

is written here, you have to enter the same here. Paste it and see if something happens

or not. Go to the execute step, friend, something has happened. Okay? My screen

may have paused in the middle, but something has happened. Let

's refresh here, but this shouldn't be revealed anywhere. Check that.

All my things have been revealed

while creating this tutorial. And there's no problem because this account

is my fake one. So if I go to assets here, it

should appear in assets. I can also do security, though I

haven't secured it, but here, guys, this is it. This

is the tutorial. This is what experience says, this is what confidence says. I

mean, have you ever seen a person so self-absorbed? I've done it. Guys, it's

very simple, it's not a problem. You can find it very easily. And if you

need this NET workflow, or download all these things, you

can tell me; I'll give it to you in the comments section. Okay? So, this is the way you

do it. It was very simple. Now I'll tell him, "Now this is working 110%,

guys." So first, how do I hide my video?

A screenshot of my video will also appear. But let me take a screenshot and upload it

Let's upload it here in the chat GPT and say,

"Now this is working, but how do I make it secure

because this is not using any API?" Now, look at what an API is? An API key

is a secret API key so that no one can use it. So, to make sure of that,

we use the API. So, let's take a look. So, first of all,

congratulations, it's working for you. So, uploading images

will do our work. So, we should get something in return for uploading images. What are we getting

? We're getting a link to the image. By the way, we can see that we're getting a URL

. By the way, if I select this URL, right-click, and choose "

Go to this URL," you can see if this URL is working or not.

So, here you can see that my URL

is working 110%. My image has already loaded and uploaded. Okay

? Our procedure is complete. This is how things are built.

So, let's take a look at the procedure for security. Because

security is also very important. So what is he saying here? Right now,

this is working without an API key. This means it's using an unsigned upload preset which is

public. Anyone can abuse it if they get the endpoint. That means anyone can abuse it

if they get the endpoint. So, we don't want to keep it public. We

have to make it private. So, yes, we must lock this down before production. I will

explain in simple terms and then give you the exact setup. First upload

is preset and direct upload. Assign unassign public ah goal kya hai

humara? This is whatever it is. So first we

will have to generate the Cloudnary API. Security ka na thoda sa aakhti me hum log dekhte hain.

Thoda changes kar lenge security ka or do it now.

Uploading to SD will be a bit more complicated. So I

prefer to do it last. Okay? We

have everything. We'll discuss everything in this chat. Okay?

For now, let's keep it as it is. We can secure the rest

by reading it, and you can do it too. Okay? Everyone has to do this. Now, after

uploading, the next procedure is to connect the background remover API

. For that, we first select this node.

There's a rename option here. Let's rename it here. So, let's do it here.

image to cloud. Okay? Upload image to cloud.

So, we've uploaded it to the cloud. Click on the plus sign. And here, we

'll send a separate http request. So, we've taken the code for the http request. Now,

all the things like posts, etc., will remain in the same gate. But here, let's say, "

What was the name of this website?" ClipDrop, ClipDrop API.

Okay, ClipDrop API. So, we've got this image,

so let's give it a link. In the method, we'll see, "Get," so we'll change the "Get" method, etc.

So, first, we'll do the same. Let's copy it and see how to do it. Here,

we'll ask, "

Leave this security

concern for now and help me

use this ABI after

words." So,

here, let's write, "Read the documentation

properly and then directly provide me with a curl

URL." With the curl URL,

all the settings and so on will come directly to us, so we won't

have to manually set them ourselves. Provide my curl URL and

also guide me on how to use it.

Man, I'm getting so tired of sitting around. I've been sitting around for so long,

and on top of that, there's such a long tutorial. I'm feeling bad. I need to sleep.

Let's finish this quickly. ClipDrop: Remove Background: How It Works." Is the endpoint correct

? It's giving us the endpoint and so on. All the API keys, etc., will be placed here. So,

for example, how it works: send a post with an image file. Include your API key

in the header. ClipDrop returns the image with the background removed. If you want a webpage

instead of a page ad.

Okay. Okay

. I guess ours is ready. So, we're going to make a curl request. Working example:

Your API key. ClipDrop will have an API key. There will be inputs and outputs. So,

we need these things. So, let's go directly to this workflow. Import

curl. Paste the URL and import it. So, what is C? Our endpoint

is our API key. We need to enter the ABI key here. So, this

is our header where we'll put the ABI key. So, form data and it and binary file image.

What is the name of the image file? So, does it accept binary files? "My friend, it seems our

upload effort has been wasted. Well, nothing was wasted. I'll explain later

. If it had accepted this URL in this case, it would have been a problem. So

let me ask it once

. This one, not this one. This API only accepts

binary files, and it also accepts a URL. Okay, let's check this .

Clip Drop removes background image URLs. It only accepts binary

files. Okay, okay, if they are binary files, then no, we

'll use this for the next procedure. We'll remove our upload from here

. We'll hit delete. We'll keep this for the next procedure. Okay

? Let's save it aside for now. Okay? This is our work. Good. So

now let's connect Clip Drop directly. By connecting directly,

we put our file here. Here's our output

. Okay? And it's a binary file, image file. So, we'll copy this and

paste the file name of the binary file here." So all these

things are working. We just need the API key. So it is very simple for the API key.

Whatever we have to go here, there will definitely be an option somewhere. This sign in

option will be useful. According to me, let

's click on the sign in button

. Use your email. Instead of using the official email,

I use email only.

Let's create an account with this email ID. Paste it. Sign up.

Check your email. Okay. We have received the email.

So this gives us around 100 credits.

It doesn't give much. So, we'll use the 100 credits.

So, sign in received your request to sign in, sign in

to Clipboard API. Then we click on this link.

After clicking, it should appear "I guess."

Okay? Verified. Okay? Verified. So here it says "Claim my 100

free credits." So let's click on "Claim." So after clicking on "Claim,"

you'll receive an SMS to verify your account.

Okay? So it's

also verifying our phone number for the API key. Then there's "Purchase more credits." So, man, look, the phone number thing

is problematic. The phone number will be visible here. Let me

do it quickly and see what happens. And this is a fake email, and it's someone else's email

ID. So I don't want it to be revealed. But still, let's do it. So, okay, guys,

I entered my phone number and verified it. So, it's here. The phone

number isn't visible anywhere. So now it's okay. So, if

we click on "Purchase More Credits," let me click it once and see. "Phone, okay, guys." So,

after clicking, the phone number isn't showing up. So, if you want 100 credits,

how much will it cost? You'll have to pay 4670. You'll have to pay this much for 1000 credits. That's quite

a lot. Okay? But they're charging a lot for the credits.

Uncoup one credit cleanup. Anyway, if I were to do it for real,

I wouldn't use this API. There are other APIs I know of. But since we're working on it, let's

use this one. Otherwise, you can research which API will

be more affordable. It's quite expensive. It's too costly. So, let's click on "Reveal API" here

. And I hope this change should happen. So there's a revoke

option. I can revoke if I want. But this API has just

been revealed. For now, this API will work. So, when this video goes live, it

will change. We'll finish it tomorrow. So, let's copy this.

What options do we have after copying it

? Sometimes it goes blank. Let's go here and

paste the API key here. Okay, the edit and work flow we created has been so long,

my mind suddenly goes blank. So, the name of the API is ok.

We'll click on the execute step once. But for that, first, we need to

input the image. Okay? It's a binary file. Let's do the execute step. Let

's see what happens.

Why am I asking you to upload an image?

Okay?

Choose file.

Okay. Let's do the chat with GPD.

Submit.

Okay. It's been submitted. So, it's executing now. Let's wait

for it to execute. Background removed. Okay. So here both the input

and output files are in binary. And in JSON, should we upload an image and

provide a link to it, at least not a binary file

. So, the output.png file is a view. So you can see that

the background has been removed, it's fine. So, look, the background is removed nicely. So,

after the background is removed, we need a link to display. So, now

we'll take this link here and, as a simple matter, for the output ,

we'll rename the data here. The input data field name

is, let's copy and paste it to output. Now

, this will be uploaded to the cloud. So, let's go to the execute step to

upload it to the cloud. Then you can see that it's uploaded. So,

after the upload, we'll right-click on our link, the URL

. And you can see that our

background has been removed properly. So it is 100% working. Now what do we have to do? We

have to personalize this website accordingly. Our API is working and

we are getting the response. So first of all , publish

this NN workflow . Here you will see a publish button. You

will click on the publish button. If you want to give a name to its version, then write the name of the version i.e.

upload and remove check. Then publish it.

So after publishing, everything is okay now. So it is published here.

After submitting the form, we will remove this form submission. After submitting the form, we will remove it.

We'll give it to you and integrate it into our website.

We'll get responses from there. Now, I'm thinking of shooting a separate video for this. It got late last night

. But we'll do it right now. Sometimes we get excited like that. Okay.

If we do it, we'll do it today. Let's finish it completely. I know

I won't be able to do it, but even then, what will we say here on Snapc? We'll

tell the tray, now after the user has uploaded

the image and clicked on the remove background button.

Friend, this versal opens. I'm worried. Click on the remove background button. Then make

sure to click on the remove background button. Then make sure to make sure to make sure what will happen?

Make sure to see, it's blank again. Make sure to

send the image in binary format. Okay?

It needs to be in binary format. Binary format to this particular web. Okay? So,

we'll send the data to this particular web. And look, at the last level, we

'll also take care of security. How can you make it secure? Security: How to

ensure your website has proper overall security? We 'll discuss that too

. We'll make changes. For example, we've got API keys. How to store them

? What are the best practices? We'll discuss those things as well. So,

I think the video could last about four hours. Okay? Let's see how long it

takes. So, here's a particular webbook. Send the image in binary format to this particular

webbook. So, what will be the Vbook? So, I'll explain what a webbook is. So,

now we'll create our own API. For example, right now, I'm sending it. Now,

understand what I'm doing with the data? Now, if we

understand the process, we're building the back end of Na10 using Na10. Okay? Now, what are we

doing here? What were we doing with the data? Whatever we had in Na10,

someone was filling out the front form. We

were sending the data from the form to another place, which was our "Let's Suppose Clip Drop." Okay? Clip Drop is where

we're removing the background. Now,

I had a URL for this Clip Drop. Okay? Was there a URL or not? You tell me. This URL was here

. Let me copy it here. So, you can see that it

had a URL. Now, what am I doing with this URL? I'm sending a POST request,

saying, "Here's my image. Please process it." So, what does it do with this image? This

API point processes it. Okay? And sends me a response back.

Okay? I'll send it the image, and then it sends me a response. Now, it

sends me a response. So, I'm sending it to this. So, what is this? I

'm using an API. What am I using? I'm using Clip Drop's API.

I could create a similar API myself. So we

will also create an API. Using what? Using N10. How

can you create an API using N10? Using Webook. So there is a node called Wbook in which you

create Weweb. So you should understand this way that this is what we are going to do. So now

we will go here and first deactivate the form here. Let's

delete it with this button. Let's keep it somewhere on the side

. What will we do now? We'll go to the plus button and search for "Webook."

This will help us create the API endpoint, and the second

one will help us respond.

This is the endpoint from where people can send requests, and here we can respond.

So, we'll click on "Webook." After clicking on "Webook," the first thing we'll do is set the request

method to "http" and set the path to something nice, like "remove

background." So, I'll put this. This is

the test URL that comes up at the beginning, Vivek Mishra 74, whatever it is, app.N80 cloud. What do I do?

I'll copy it into the production URL. Now, after copying it, I'll

get all the binary data here. So, I'll paste it here. Okay? So,

I've pasted it here. So, after pasting, I

should get a response here. I'll send it. Now, watch it

process the entire process and finally, it integrates like this. People are coming here too

. It's crawling and checking out NN on its own. So, it's thinking. So,

it's doing whatever it takes. Let's just do it. Let's come here now. So, here.

Whatever comes, we have to respond to it. Like this is a post. Okay? I

will connect it here. Now the image will come to us here. So we will do it here.

Write the name of the web.

Image request received

from Snap Cut. Okay? We received the request from Snap Cut. Now after that

what will we do in the last? We removed the background through API. It

was uploaded on CloudD. Image URL and what will we do in the next process

? We will respond. So we click on respond here.

Response: OK, so Response to WebK, so in Response to WebK, your first incoming item here

is "My Field." You have to select it and enter json. Simply, you have to enter json.

Now, here it says "My Field." So, instead of "My Field," I

'll write "A." Let's say "URL," okay. I'll write "URL." And here,

I'll dynamically fetch the value. So, what value will be the value here?

This will be your URL. So, I'll drag and drop it from here. So, if I

drag and drop it here, where my cursor is, exactly,

if I drop it here, it will be dynamically fetched. So, you

can see that the URL will automatically appear in the results. "json dot

url" will appear here automatically. So, here I've applied code that

will work dynamically. Meaning, the URL will be different each time. So,

how will it change automatically? So, it will happen like this. So this is how you can map it. So if I

look at it at the full level, it looks something like this. So it's a little bit wrong.

Let's copy this from here and delete it. These two quotes

should always come in between them. Okay? Remember this. This double

quotation mark will come in between these quotes. Okay? So it should be arranged this way. This should be the structure. Or,

if you're having trouble, you can tell AI Tool that this is the problem. If it's not solving,

it will fix it. So now, I 'll copy this

same structure once in the output . I'll say this here.

Now, in the chat, I'll say, "The N10 will send you the output in this

format. In this

JSON format, if you write this, then process it accordingly." Okay? Process it

accordingly, I'll write this and hit Enter. Okay? Then it will create it accordingly

. So what do I do once? Here you can see that we've set this setting

. Now, what's the next most important setting after this? You understand that.

What did we just do? We confirmed that we're receiving an image request.

As soon as we receive it, what's next? It will send it to the ClipDrop API, telling it

to remove the image. Now, just like I'm creating a workflow on the back end,

they also have a workflow. So, they process it on their end and then

respond to us. After responding, I send it to CloudNary.

Once the upload is complete, CloudNary responds to me, saying it's uploaded

successfully. Then, the next step is this weboc, this

node, where we do what? We respond. So, before responding, we need to tell it

when we'll respond. So, you have to declare it in the first node itself

. Below you get the option to respond immediately.

Immediately means yes brother, we have received it. This is what immediate means. So

what do we have to do? We have to use the Resound to WebK node. How

are we going to respond? We will respond through the Resound WebK node that we installed last. So

you select the third option which will do this work for you. By the way, Na10

is a detailed topic in itself. Creating this API. If you

want a complete and detailed course on all these things, which is not available on the entire YouTube

, just comment and your brother will come and bring it. Okay, such a tutorial in which people literally get interested.

I mean, I have used it so much, what can I say, I have used almost every node,

Slack, etc., Telegram. I have automated so many things in my business,

re-hiring, wiring, offer letter, I have done a lot of things. Okay,

so now let's come to remove background using response, web node.

Okay, everything is set, friend, we will publish it once.

Okay, final work flow

and BG, okay, let's publish it. Now let's see

what happens. So here

we have Okay, so this website has also been made live. I have started it now. Okay, once.

Let's try removing it and start removing backgrounds.

So let's go to Uploads. So now, let's see what we're

doing. As soon as this starts, first, let's make it full screen

and play the executions here.

In the executions, you'll see the entire history of when it was executed. So, this

workflow has been executed four times. So, you're seeing this because this

was a test execution. It didn't happen in real life. So, now

we have to look at the production itself. There, you'll see all these lab things, like funnels, etc., whatever they say, they don't

call it funnel, I don't know what they say, but whatever their chemistry symbol

is, it won't appear. So, let's go to Upload Files. So, after going to Upload Files,

go to Downloads and see my other images. Let's look at another image.

Let's do this guy's. Or whose? Whose?

Let's do ours or someone else's. It

's very confusing. Is there anything a little complicated with this? Let's do it with Buddha.

So here we have our Buddha. So this is our original. This

is our result. Look, the UI can change at any time. Right now it's just functionality. So

if we need to remove the background in this case, we can do it later.

Let's click on Remove Background. So it's uploading. So why did it fail? Failed to process image, please

try again. Syntax failed to execute json to response. So let's add to chat. So,

my friend, our execution must have been completed. But here, maybe let's refresh it once

. There's an error here. What's the error? Let's check it once.

There's some error. Is it from our task?

Look at this, there's an error. It's coming from clip drop. The item has no binary field.

Check that binary field, where you specified the input parameter. Okay, I understand

what the mistake is now. Now look at the name it's coming in. It's coming in the file name. This

is a mistake. Look at how to debug in the editor. Learn how to debug.

I'll teach you how to debug. You have to debug using Na10. So here,

let's click on Debug in Editor. So, after going to Debug in Editor, there

's a clip drop here. Now, you can see it's coming in the file name. And

what am I sending? Your input image. So, we'll create the file with this name. Okay? So, let

's not execute it now. So, let's leave it as it is. Let's publish the file

Workflow Fixed 0.1:

Let's publish it. Okay? The rest, I guess, should work

. This time at least. So, let's click the retry button once.

It should be done now. Just make sure we don't waste credits. I

have 100 credits. That's enough to create this tutorial. Uploading is still showing. So

let's go to Execution. So if it's running, it means the process is underway. Okay, guys,

what should I say? What should I show you? It's done. We uploaded the image. The image

has been removed. There's just a download button. We clicked on the download button.

Clicking on the download button isn't downloading, man.

I 've redirected to the cloud. What is this, bro? What is this? So let's go back.

And what's happening when we go back? It's going completely blank. Is it going black

? Okay? Now what should I call this? Look, there's one thing. Now, understand carefully

the concept concept times. Okay? What's here? Now, if I

refresh a page, this file gets deleted. Okay? So, I want to store it in local storage

. Whatever history I have. I have a history tab for

every image I've uploaded. So now what I want is please also create

one history tab as well to view all

the images with all the image

backgrounds removed.

Okay? So please also create one history tab as well to view all the image

backgrounds removed and

and when clicking on the download

button the image is not downloading automatically

instead it is

redirecting me to the URL fix this to download the

image automatically okay automatically the image will

be downloaded now store

every response on local

storage as well so that even after I have

refreshed this screen I can access

the image and also check my previous

uploads through

the history tab so store tags also locally okay so let me write this

. Now look there is a concept called local storage. So local storage is used until

While I'm setting this up, let me introduce you to local storage

. For example, I'll paste this. So, in local storage, whenever you

go to a website, right-click and inspect, there

's a local storage. If I go here, there's an application. If I

go to the application, there's a local storage. For example, you can see

what's being stored in local storage. Right now, by doing this on Razor, there are a few things that

I entered in the prom. So, by default, it's storing only this much. Now, I

want it to store more. Every website stores this. It's

not just this one. There's session storage. Is anyone using session storage

? So, session storage, I guess, is using one. Okay? So, this is how

we collect the storage for multiple sessions. So,

there's local storage, there's session storage. So, this is what it creates. Okay? So, this

is stored locally within our system. Whenever we need to use the data, we

're not using a database right now. We still need to integrate the database. For that,

we'll create a super base. It will have authentication. Users will

be created, etc. Then, the deployment will begin. There's still a lot of processing left.

I mean, the video will be quite large, and I know I won't

be able to make it in one sitting. It will take several sittings because it's quite late at night. I have to sleep

. I'm tempted to finish it completely.

But let's get things done. So now we'll update the to-do list. So,

only two of the six procedures have been completed. So, should I mention the database as well? So, look,

mainly, only a few things are left. This is almost done. So,

the tasks we're going to perform now will mostly be changes at the front-end level

. Okay? We'll make changes on the front end. Then we

'll integrate the database. After that, we

'll create our user authentication. User authentication. Then, after user authentication, we'll make front

-end changes

. Or I'll write, "Payment integration, payment

, and dividing pre-paid tiers

accordingly." We'll have credits.

How about credit allocation? We'll do all those things.

So, okay, our website is done.

So, let's copy the URL.

It's 800. We've opened this second development server. 8081.

Okay? Look, the history is visible here. If I go to History, "Start

Removing Backgrounds," there's no history yet. So,

let's skip prying, etc., and come to Features.

Click on "Start Removing Backgrounds." Upload Files.

Okay. This time, let's upload our own image in Upload Files.

Let's go to Show All and

upload any image. This is my image.

Let's remove its background. So let's click on Remove Background. Let's see, guys, what's going on

? Snapc ai

is taking time.

The process failed. Why did it fail?

It's actually running. Why did this process fail? Look,

. It succeeded. So what's the problem here? We've also received a URL

. If I check what URL we got?

If I go and check, we see the URL is correct. Okay

. The URL, so we have an OK report for the URL. Then what's the problem?

What's the problem? So, if I ever encounter a problem, it's simple. If I right-click here

and click Inspect.

So why did the process fail? So, it must have sent some error to the console.

Processing Image Quota Exceeded Failed to Execute Set Item on Storage Setting the

Value Snapc Exceeded Quota Processing Image. So look here copy console, if any

issue comes then copy console and send this such screenshot simple. Okay? Send this

such screenshot anytime. This will most probably solve it.

I am getting this issue even if

the response

I have this even

my enben verb flow was executed successfully.

Okay? So it is coming. Let's paste. Here is the console

if you need any

here is the console locked. Okay? So let's put it in once and see. So

look friend, you are getting to know quite a few procedures for testing that

There are problems. Okay? And I actually know what all the things are.

I mean, I must have put a lot of hours into this. 200, 300 hours at least

. There have been a lot of problems in this AI-based development.

I've built very complex things. So what

are the current future flags? I see the issue: the local storage quota is being exceeded because you're

storing full base64 previews of images. Let me fix this by limiting the number of

history items stored. That's what we're doing: this base64 store

history item store. Okay, perfect. I have local storage.

Here I say, a for output. For output, you can

store the direct URL that we're getting online. Okay, so

I'll write this here. Now, look, if I don't copy and paste it into the console. Okay

? What would happen if I didn't copy and paste directly into the console? It

wouldn't be able to identify the issue, and the AI wouldn't be able to solve it. You know, that's why most people's

problems aren't solved and they can't use the AI properly.

That's the main reason. So, you have to work on these things. So, here I've also written

separately that it can also use direct URLs. Now I know

how things work, how it connects. So I wrote it down. Now

you don't know what you'll say? Ask the AI what could be an alternative to this?

Tell me two or three alternatives. What would be the best strategy? So, after knowing that,

you just have to put it properly. I'll update the code to store only the direct

URLs and remove the large base64 original preview from local storage

to avoid quota issues. Okay? So, I gave it a great idea. It also

knows. So, we'll store direct URLs and such.

Okay. I guess we're all set

to process your image. Please try again.

Okay, enter. Once that's done, let me check this too

Why did it freeze? Sometimes it can happen to you that it freezes.

What, generally? Okay? Let's check this one

. The application is now much more efficient with local storage. So, guys,

let's process the image one more time to see if it can

process it properly. So, okay, I

'll run this one now. Let's click on Background. Hopefully, it

works this time. There are no problems. This is the main challenge.

And after running for so long, it should be of some use.

It's showing Successful here. Okay, guys, our background has been removed. So,

download the page, process another image. I'll click on Process Another Image. So, here

we go again, Process Another Image. History. Go to history and see. Look,

I see this is my image. Even if I refresh it, it won't

go away. Boom, you can show it this way. Now, if I click on download, it

's downloaded. If I want to delete it, I can delete it. So,

let's go to download. Now, this is its name by chat gpd. This name also

needs to be renamed. By the way, we can also change the name I'm sending. It's

coming back as the same name as it was sent. So, there's no problem. That's correct,

friend. I mean, it's coming back as the same name as it was sent. It's not something random.

So, that's correct. The background has been removed. So, guys, let's see, we've actually

created a background remover. The only delay

is due to real-life changes, so if I want to share it, it can be shared. I just

have to push to git get up. So, okay, guys, I'll record a separate video for the next session

. Let's keep it that way for now. And you

'll find the combine right after this video. So, there won't be anything new for you. So, see you

with a new setup. Okay?

So, guys, let's move on. It's a new day, a new beginning. So, I told you

how to create this workflow and all that. And finally, we

removed the background here, which was 100% functional. But now we need to figure out

how to handle authorization and all that. So, if I

talk about it, we're done with it. Then we generated the PROM and generated the website.

What were the previsits? I told you about it. Note: We've done all that

. This is a quick GH cheat sheet. And on Ghup, guys,

the tutorial is up while I'm recording this video. If I were to show you, okay?

If I were to show you the studio here, it's already gotten a decent number of views. It

's been a day. Around 35 views. So this is Gib's video. You

'll find the link in the description. Be sure to go and watch it.

After watching Gib, you can come here. I've already explained about Git, but right now the main thing

is that we'll push to Git. Our main target will be to push to Git

. So right now, we'll do it with the cursor, not the trace. We

'll use the cursor throughout the video because you should learn new tools. It's almost the same, but

I'll tell you what those things are. So what we're doing now

is clicking the plus button here on a new terminal. This new terminal opens normally,

snapc.ai. Clicking on it opens the integrated terminal. So, it's on

the integrated terminal. Now, if I check the gate status here,

you can see that many things haven't been added. Now we're going to add this

and actually push it to Git. So, you can see how to do it. It

's very simple. It's not a big deal to do things on it. So, on Gh,

we cloned from Gh here. First, we've seen

how to clone from Git. How to run it. Now,

how will you actually push back to Git? So, first of all, let's go to Gitup because we want

to make it publicly available. So, the process we're going to look at right now is the

deployment process. Okay? What are you looking at?

Deployment. Right now, we have things left. Okay? The back end is left. Our data back

end is complete. The database is left, and the payment integration is left. Mainly, these two

things are left. After that, our things are almost sorted out. So, now we

'll come here. And we'll do a few things here. We

'll do a deployment. For deployment, we are going to use Get and Versal. Okay?

We are going to use GitHub and Versal. So what is Versal? Here

we will go to Versal. We will search for Versal. So you

will find something like this in Versal. If you click on this site, it will ask you to sign up etc., so

you can sign up here. After signing up, a dashboard like this will appear,

you will get the option of Add New. After going to Add New, you have to go to Project and here

your Gib project will be there, like Snapkartai Studio, we

will import it, but you can see that the last one is written j 28, so at this time I guess

I had pushed whatever changes were there, so if we open Get, get github.com, then

here I had told you that repos are visible here. So here, if

you're having even the slightest difficulty understanding Ghub, guys, I told you

to go and watch the previous video about Ghub, then you'll get clarity if you're

having even the slightest difficulty, because it's a 1 hour 20 minute video. So,

I've explained in-depth in that, in case you have any difficulties. Otherwise, you can easily follow it, and you can

figure it out from this video. So, what do we do here?

We had our Snap Snapc AI Studio. Let's click on it. And after clicking on it,

you can see here that I made changes four days ago. It's been four days since I recorded.

Now I'm recording this part again. So, what do we do now?

Now we click on Commits. There are three commits. So,

after going to Commits, you can see that it has imported some of its templates.

That's why Jan One 2025 is showing first. So you can see the template is New Style

Vite React Shen, so it's using a template, that's why it looks like this here

. So what we're going to do now is go back here.

The last commit was on January 28th, so we're going to commit here. Now look at the scene

. If we come to the Git Up guide here. I've already told you

how to check the version. All this initialization, etc., we're

not creating a new file. We're using an existing file. So you don't need to understand this

. If you want to understand, watch the Git video. You'll understand. What is Git Up?

So here, for a single file, get added filename, and for all files, get added. So, it

's written as bl bl bl. So, don't go into this process. You'll find it in the documentation.

You can follow it easily. And you can even call it in chat. Okay? If

I don't want to do it in these cases, I'll tell you about it in chat. I'll tell you about the chat later.

I'll show you. I'm not showing you right now. I'm teaching you. Okay? What do you

have to do? Simply, you type git status, and by doing git status, you'll see many red

files appear. Okay? Now, you can see these red files

are visible to you. What do you do with this? I'll just add a space and press

enter. You'll see it will turn completely green. Now, it won't

turn green automatically. You'll have to type git status to see it. What is its status? git status.

So, you can see it's completely green. Okay? Okay? So, you have to make it completely green like this

. Where do you run the command? This is the fourth stage where you

get the exact command to enter git status. This is your command in the terminal. Then

you can type git add this dot this. Then what do you do after that? Git

commit. Commit your changes. That means naming your changes. So we

're going to name it, in short. So here we go. So here

you can see the Snapka AI front end. So this is a message. A

message of changes. What do we do with it? What's its format? Gid space

commit space hyphen. Okay? What do we call this? Hyphen, which is this dash minus

sign, is hyphen em without any space. Then you have to put a space after that. Then the code

will start with double quotes. And then you write, "I

'll write here Na10 Na10 back end integrated

successfully." Okay? I'll do that. The double quotes

are closed. That's exactly what you have to enter. Take a screenshot. And otherwise, I've also provided a Google Doc here

. Okay? Proper here is the Google DC where

I've written the full command, "Get Commit" inside the V and underscore. You

can type it here. It says version one here, but you can replace it. Now, all

you have to do is press enter. You'll see that all the commits have been made.

Now, when I do git status, it'll tell me to push. You can see that I use git push

to publish. So, what I'll do is enter the same git push. And after git push,

you'll see that if you refresh here and refresh, a new commit will be created with today's date,

which is January 31st and back, and integrated successfully. That's all you have to do

. It's very simple. Okay? If you're having trouble with the process, I

'm giving you a video. I'm giving you the getup video. You can watch that video. In case you have any doubts or

want to learn more in-depth, you can skip any procedure and watch it.

Otherwise, this video is more than enough. If you're having trouble, still, I've told you

to go to chat and tell him to push this to me on Git. You just

type this. AI will do it. Okay? That's all you have to do. So the front and back end are

successfully integrated. Now what do we do? Deploy it.

I'll create a shareable link that you can also use. If I share it with you,

you'll be able to access it. What's the point right now? For example, this is a local host. I

can't share it. It's not publicly shareable. If I copy this,

let's say this is my project, its port number is 8080, so it opens. But

if its port number is 3000, or something like 380, and I open it, it opens like this

. It will open exactly the same way in yours if I share it with you. It

's opening in mine because it's running locally. Now what do I do? I

have to make this public. So where do I go? Go to Versus. And from here, I'll

deploy. So here you can see how long ago my last

changes to the Git repo were made. And in which repo? They were made in Snapcat AI Studio

. So I'll click the Import button here. After clicking the Import button,

all you have to do is click Deploy, and the deployment process

will begin. So, it's currently being deployed. You'll see it here as well. If I

refresh it, you'll see zeros from ones. So what

's happening here? Versal Pending: Versal is deploying your app. You'll see this

once you connect. So first of all, when you sign up in Versal, it

will ask you to connect to Gib. So, make sure you

connect to Gh. You have to authorize Gh, and after authorizing, look, our

website is ready. Now I'll make some changes to it and push it. I'll show you

how. So, again, I'll click on the Visit Website button here. So, you'll see.

You can see our Snapcat AI tutorial here. It's already here. It's very simple.

Remove backgrounds in seconds. Start removing backgrounds, view pricing,

all that. So we can refine it a bit more. But let's move on

. Okay? The background remover is doing its job. So

let's try it here again and remove the background. So

let's use the same image or a different one. There are a lot of images.

Let's try this image once and see what

happens. Remove background.

Let's see what response we get. It

's not too slow, of course. It's quite fast. The

response is there. You can see that the background has been removed properly.

That's all you have to do, and I'll click on the download page here. There

was an error downloading the image. Why is this error happening? Let's inspect it once

. After inspecting it, we'll see

a resolution here on Cloudnary. Okay? This image is our image link, which

is being saved on Cloudnary. So, here

we see an error: downloading image type failed to fetch a new promise. So, I don't know what the problem is.

I'll click on the download page again. This problem is coming up: a versal.app slush upload. I guess

something was loaded over https, but requested an insecure resource. So, once we

copy the console and ask the AI here:

why I have deployed in the website, but

I am unable to download it. Help me fix this issue. Let's

do this console log. So, here I say,

first explain me without

making any changes in the code. Instead of writing this, I can do another process.

Here, instead of the agent, I have the option to ask. I'll ask

. Similarly, if you're using Tray, you'll need to use Chat instead of Builder

. I mentioned Chat Builder here. First, explain me. I'm

using Cursor right now, so I've hit Ask. So, this is where you can switch

. First, explain me without creating an in the code.

Okay? So, here, instead of Grad, I put Auto. Models are selected here,

basically. So, here, I put Auto and hit Enter. I have

Premium Cursor. If you don't have Premium, you can just use Tray. But

for those who can afford Premium, this will be very helpful. Explain the issue

locating where Cloudinary URLs are built into the code base. So, we don't know what to

change. So, okay.

So, it's reading. So, this is how you solve it. Always remember to right-click

and click the Inspect button. And open the console here, and any issues that

arise will appear here. Otherwise, you won't be able to solve it. If you tell it, "I

'm clicking the download button, but the download isn't happening," what

will it do automatically? It will hallucinate. That is, it will automatically think, "This could be the problem, that

could be the problem." But in reality, the problem will be something else. So, this

is the best way to debug any problem. So, you

're not implementing things in the real world, nor are you solving problems in the real world. You're

just learning and giving commands to AI. For this, at least a like is necessary.

What needs to change conceptually? You have two places to fix it. Back and not

the best place in the workflow that processes the image and talks to CloudNary. Make

sure you use and return HTTPS URLs. If CloudNary doesn't return a URL

, use SecureURL and send it to the web.cs response in the dataURL

and configure the integration. So, it always returns an HTTPS URL

when the front end receives HTTPS, and the existing FetchURL is the front

end's safety net. Where you are, okay? So, in short, the download is because the

page is HTTPS, but the image URL is HTTP, and the browser blocks it

. Okay. So, there's a security issue here. So, let's tell you what it's saying

. If you don't understand this English,

okay? So, let's come here and take a look at our

response. We'll go to Executions. After going to Executions, this

was just executed. We'll click Copy to Editor. Let's debug it

. So, let's see what the response we just received looks like.

We have this. There are two URLs here. One is http

and one is https, the secure URL. What was I using? I was using this URL.

I wanted to use the secure URL. So, I can also type "c secure underscore URL" directly here.

I've just written the code. Okay? You

just have to do this, or you can drag and drop it if you're having problems.

You just drag and drop it. This will appear as the secure URL, and you can put it here

. So I've put it. Okay? This is our secure URL. Where the https

is coming. Now everything will hopefully be fixed. So you see, this is

turning out to be a really interesting tutorial. I mean, so many problems are coming up, I'm happy myself

. I mean, it's sad when problems arise. But I'm happy because you're

learning, man. Imagine you've got such a tutorial, I mean, it

's a God-level tutorial. I mean, to be honest, you can just pick it up and check it yourself anywhere,

like on YouTube or something. You won't find anything like this. Okay? So we've published it

. Okay? Now what do I do again? I'll refresh it.

After refreshing, it'll show up in the history.

slash upload.

Okay? Here, it starts removing the background. And by the way, there

's another problem here. When I go back here, as if I'm in uploads,

it opens. Okay? And if I copy and

paste it directly here, you can see it says "not found." So this

is a problem with Versal. When you deploy to Versal, I've

encountered this problem before. I've fixed it. And I'll also say here that there's

some issue with routing. What is routing? Routing basically means

going from one page to another or opening a link directly. So, if I'm

opening this URL directly, right? If I'm using this, if I'm

opening this URL directly, which is already deployed on

Versal, then I need to provide complete information about its deployment on Versal.

Now, take a screenshot and submit it here. Doing

this,

please

check the above screen shot and fix it. Internally, it's working, but if someone

directly clicks on a link, it's not worth it. So, basically, the problem

I mentioned is that if I directly

click on slash upload or anything else, it results in a 404 Not Found error. Okay? So,

this is a major problem we need to solve. So, I've explained this. Otherwise

, the remove background feature should work. And now I'll also show you how to push to GetUp

. So let's do that once. Until then, we

'll move on. So, I've encountered another problem. I've been using it for so long, so

I can't access ClipDrop. Okay? That's mine. Now, I don't know

how many credits I have, but I still have it. I must have 80, 90. So, I

've revealed all the APIs I used. You can use them

, but please don't use them. Okay? As long as you use them after the tutorial,

it won't matter. It's only about 100 credits. So, okay, I

don't have access to the account, but the APIs are working properly, which

I've taught you. Now, the main things that come after the API

are described here: deployment. Now, we'll focus on database and payment integration. So,

what do you need for payment integration? You need Razer Pay. There are many payment

options you can integrate. Razer Pay Cash Free Pay uses

Stripe, PayPal, Ina, PhoneP, CC AEN, and many other payment gateways. Payment

gateways are payment providers. Imagine you

're posting your bank account details on your website. Now, if you

provide your bank account details, consider whether this is a proper way to collect anything. You

provide your bank account details, and they will make the payment. Then you verify them, and then tell them, "Yes,

you've made the purchase." Now, we'll give you access. Then we'll send you an email confirming the purchase.

It's a time-consuming and complex process. But

payment gateways simplify this very process. That's exactly what payment gateways do, like Razer Pay Cash, etc.

We'll use Razer Pay for this video. So, I'm on reserp.com.

Simply search for Razer Pay. Search for Razer Pay and you'll find this website.

Go to this website.

Once you're there, you simply sign up or log in

. Now, let's see what Razer Pay will tell you when you use it for the first time.

Where did our doc for a first-time user

go? Here it is. Okay? Now, when you use it for the first time, understand

what the general charges are. All payment gateways charge around 2%

plus GST. They charge 2% plus GST, and they also charge 18%. So,

net, you'll have to pay around 2.36%. So,

what are the required documents? You can provide your personal PAN card, or

you'll need to provide your business PAN card and GST number.

You can create a Reserve account at both the personal level and the business level. After that,

some common documentation is required, such as a website link. There will be a live link,

a privacy policy, refunds and cancellations, a contact us page, a shipping

and delivery page, and terms and conditions. We'll

create all these pages as well. In some cases, they can also ask for a purchase invoice. For example, if you have a

physical product, ours is digital, so no one will ask for it. But

they can ask for a purchase invoice if you're selling a physical product. And

what's the time required for approval? Look, it's approved instantly.

You can accept temporary payments up to ₹15,000 whenever possible. This is available in some gateways

. You can collect a little bit in Razor Pay once it's approved

. But I don't think so in Razor Pay. So, I just did it for a client

. The payment there wasn't through Razor Pay, but cash is done for free. This

15,000 is available only with some payment providers. Remember,

cashless transactions are available with some payment providers. If you want to use cashless transactions instead of Razor Pay, they

provide cashless transactions after submitting instant documents, etc.

Right? This cashless transaction will be available. You

can also do it from here, which currently charges 1.65%. Now get India's best payment gateway

pricing. So, they're offering it very cheaply right now. Right? You can see that

they've significantly reduced their prices in percentage terms. So you can use them.

So, let's move on. I was telling you what happens next. What happens after that?

It takes one to two days for final approval, and in some cases, it can

take 7 to 10 days. So, you need approval for the payment gateway because the RBI

has very strict guidelines that not everyone can accept payments

because of the rampant fraud in the market. For now, we

'll collect payments through our website. That's why we're learning this.

To integrate payments, we have

all these alternative names: merchant ID, API key, salt key, key ID, secret key, etc., from different

payment gateway providers. You get a secret key and ID from Razor Pay

. We'll use those. Okay? So, this is what we're going to use

. So, let's assume that. We'll integrate payments now. So, based

on this, what do we do now? Click on Login. After clicking on Login,

it will send me an OTP. So, let's sign in once. Whatever it is.

So, I'm already set up. So, you'll have to create all the documentation

I've provided, and you'll have to create the related pages yourself. So, let's

create that once. Let's log in to Razor. You can see I'm

logged in. After logging in, I'll first use test mode

. So, first, we'll go to Payments. After going to Payments,

I'll collect test payments, not real payments. So, what do you have for this

? There's an option. What's showing here? It's showing Switch to Live Mode

. Now, I'll switch to Live Mode. After switching to Live Mode, your

view will look something like this. Good afternoon, Vivek, I'm talking about all this, and below

you'll see some details about payments and other things I've collected. So, I

haven't collected any payments from this account yet, that's why it looks like this. So, there

's a Test Mode option below. On the left side, we'll first select Test Mode.

We'll turn it on and use it as a developer. Okay? If you

want to use it as a developer, if you want to test it, always keep test mode enabled so it works

Okay. So, okay, you see our last settlement here, ₹975. All of these

things are fake, so we're going to work on a fake level for now. How do we work? Now,

there will be some pages for approval. What pages do you need to create? I'll tell you about that too

. So, I'm going to walk you through the entire payment integration process

. So, pay close attention. So, okay. Now, let's

go back to the website where we left it. So, what does it say here?

Request Upload. Okay, sorry, I had it marked as Ask, I

should have marked it Agent. Please implement it yourself.

So, I'll tell it to implement. And I'll also tell it this, friend. And

also, I'm planning

too.

So now I'm planning to integrate Razer Pages for payment

collection through the website.

So let's create a website

, and let's

take a look here. Here

we have a payments section,

sorry, it comes up. I just came back from the gym after taking a bath,

literally, okay. You might be looking a little hairy. The previous video, the previous part of this,

in this video, I skipped the gym for you guys, and in this,

I came back from the gym

. Now look, if I click on the "Start Pro Trial" button, what will I do? Well,

what did I do? I did it normally. Let me explain. First, look at

what happens here. There's a selection option here. Like your tray,

we'll go to this and select the button from there. After selecting this button,

this appears below. So, a button is selected. So

when you click on this button, a pop-up should appear on Razer: "

To collect payments."

And I'll write "&B" here. For this, make sure to create

an environment file. Now, what

is an environment file? It's very important. Very important. Now, if we

talk about security here, if we talk about security a little bit, then

for security, always remember to make sure to store any

API key—you can say any API key—in the environment

file only. Okay,

you have to collect the environment file only. Now, what is this environment file? It's basically a dot env

file that you have to create. Now, how to use it? I

'll tell you everything. But it's very important for security. If you

leave it in the front end normally, it will leak. So, you have to avoid leaking it.

That's why we will always use the ENV file. Build this into your brain. Okay

? A file also for getting Razer approval.

I need these pages, as well, that I'm sharing below

. So, make these pages separately

according to my business and follow all the RazorPay guidelines

by going to their official website. So, look, what do I do with RazorPay

? In general, what do I do on the RazorPay website? I'm going to press @. Now I

'm telling this AI to go to the RazorPay official website and

find some documentation, etc., to see what things should be there,

what should be in your privacy policy, what should be in shipping details, all those things.

So, what option do we have here? We have a

browser option, so I'm going to tell this one to use the browser and go to the RazorPay website

and fetch all the information from there and create pages that our RazorPay

gateway approves. So I'm telling this one like this. You can see, this

is what happens when someone does things a lot, you learn a lot from them. So,

there's no such tutorial on YouTube. I feel bad

giving you this tutorial. I feel like you're getting a very unfair advantage, but

anything for you. So, the camera

is fine. The official website. Okay? Now, we

'll do it here. So, let's give you the list. Here's the list.

So, what do we have on the list? We have

common documentation for the payment gateway. So, let's copy this

. Okay?

Make sure to make these pages personalized for my business.

Only. Okay? Now, it already has all the information for my business.

It'll do it. I'm confident. So, okay. Let's move on. Let's see what

we do.

Okay? We've started creating it. It's

fixing all the routing. So, once we've fixed it, we

'll tell it to deploy and so on. So, look, it's also fetching rpay.com, you see for yourself,

it's doing all these things: fetching website details, checking for existing

APIs, creating Razer Pay flow, order creation, plus the front end. So, look, it

's doing all these things.

Okay? So, this is how things actually work.

We just let it work in the back end, and we were on Razer Pay. Now,

where do you get the API key in Razer Pay? Once you've created an account and

received approval, etc., you have to go to Account & Settings. After going to

Account & Settings, guys, I just skipped a bit. I scrolled down

because the phone number and other things were being revealed at the top. So, all you

have to do is scroll down. You'll see Account and Product Settings here. And here

you'll find the option for API Keys. Click on API Keys.

After clicking on API Keys, I probably already have an API Key created. Okay? So,

I already have an API Key created. So, what do I do here? I

can click on Regenerate API Key. If I click on Regenerate, it will regenerate our test

key. 445

459936

I guess this is our OTP. The phone number is being revealed, so I'm blurring it out

. So, I even stopped in the middle. But I'm afraid we

can do it. So, now the API key will be verified with your phone number. You

'll enter the OTP and so on. So, here it says Deactivate Old Key Immediately. Deactivate Old Key

in 24 Hours. So you can do it for 24 hours if you're using the old key elsewhere. But

I'm doing it immediately because our test key isn't working anywhere

. So, regenerate the API key. After regenerating it, this is our

test API key, which I'll have to regenerate again after this video. So,

I'll put the Razor Bay key here. So, what's our key here for testing

only? So, the test API key

is our test API key. And

after the API key, there's a secret key. So, our test key secret

works like a password and it also works like an ID. So, you

can assume that's the case for now. So, the test secret here

is fine. So, this is our secret key that we're using.

Now, look, we have to put this idea in to run it. So,

I'll explain everything to you right now. So, it says Accept here, so

let's accept it. The process was stopped because of this.

So right now, it's creating a lot of things like an ENV file. It's created this complete ENV.example,

where we need to enter the RazorPay ID. The RazorPay ID and the RazorPay

secret. We'll have to put all these things in. So, okay, we'll put them in

. While this is happening, let's move on.

So, the RazorPay part is over, friends. You can download this

file here. That's all you need to do. Now, any major changes we need to make will be

made at the website level. So, once we've completed this entire code, I

'll tell you what to do. So, guys, the cursor

has created everything here. What do we need to do now? At the end, after completing everything, it even gives us instructions

. It says it's fixed the routing and other things using the Versal.jsn

file. This is the RazorPay integration, which is our post request and everything else

it's written for. Okay? That's none of our business. Our main job is to check

what policies they've created on the policy pages. How do they look? And

then they've also added dummy trademark numbers

to our policy pages. Most likely, they're on the Contact Us page, etc. Yes, this contact

page is listed here. Okay? So, privacy and refunds are all things.

You'll have to check this too. Look, if my actual business, or your actual

business, doesn't issue refunds, you'll have to mention them in the refund form. I don't issue refunds

. Whether it's 7 days, 30 days, or anything. Okay? So, you have to mention that

properly. So, whatever it is, make decisions based on your business and read everything carefully

. Okay? It's not like you have to blindly follow. I'm just teaching you.

I'm not checking things. So you see that for yourself. Okay? The main thing

we have is what you need to do for Razer Pay. So for Razer Pay, it's saying dot

copy.v example to EV. Now, look what happens by default?

All the tools we have like Versailles, Lovable, etc., can't create files.

Okay? They don't have that capability. They don't have that level of permission. So

what do we have to do? We have to click the plus button up top, New File. And

we'll go here. So, dot, we'll just type dot V here.

All you have to do is press enter and it will appear. And this example that he created,

we'll copy it and paste it here. And you can delete it.

Okay? If you want, but I'm leaving it as it is. NV, so what is this here?

Now let me ask you, what is this?

What is this? So I guess this is for white. Let's check the ID of Razor Pay as well. I guess

both are the same.

The user is asking for bl bl bl. Okay. This is the public key for Razor Pay. Check out

the script, use it. wa wiit prefix it's a wiit app only env start wiit

are available in the browser so that wiit razor pay shows your react can read this import.

Okay, so basically we have to enter the ID of both. So we'll replace it here.

So before replacing it, let's come here once and

refresh our locally running app. Let

's go to the bottom and see the privacy policy in the footer. Okay, here the privacy policy is created.

It has written the privacy policy, but what's the problem? Like

going to Shipping and Delivery. If I go here, I'm in the footer. It's not coming up

. So let's write it here. Also,

if I click on any link from the footer, it's redirecting me to the page, but

toward the bottom, and where the footer is there, but in real life

, it should redirect

and show us the header and the hero section. So,

you can also say "hero section" and "above the fold." These are technical terms

. What is "above the fold"? It's at the top, right? Below the

fold, which is below it, right? The above-

the-fold section you see when you open it is your starting point. This is what we also call the "hero section."

This is our privacy policy, all those pages. So, we

wouldn't technically call it the "hero section." But the beginning section of

a page is what we call the "hero section." So, you

can explain it this way: if I hit enter, it will solve the problem,

which I'll show you in a moment. So it

's created the pages, etc., but the redirection itself is wrong. Okay? By doing this, it's redirecting

to the top automatically. So, return to home. I guess it made the changes?

This summary is already making the changes. Okay? So, I'll go to Refunds and Cancellations. Okay?

Refunds and Cancellations is there. Shipping and Delivery is there. Shipping and Delivery is there. Cookie

Policy is there, I guess. So I can ask to create it.

Create a Cookie Policy. So, it's much smoother. I'm going up to Terms and Conditions.

Our Terms and Conditions are already created. If you don't want a smooth transition

from bottom to top, you can also say that. I don't want a transition, but it seems right to me,

so I'll leave it as it is. And let's click on Prying. After clicking

on Prying, this 499 Start Pro Trial. Now, it says "Failed to

execute.json" and the response is "Unaccepted end of JSON input." So, let

's inspect it. We'll see why it's saying that. Look, I know

the reason and all that. But I'm still telling you so you

can learn. So, what will we do now? Go to the console. As I told you

, once you've done this, you get a button here. From here, you

have to clear the entire console. Then click on "Start Pro Trial." So, it says something like this: "

404 page localhost API create order." So, why is this issue coming up?

"Copy console, start Pro Trial." So, I'll say it here. "Take a screenshot and

it's gone before I can take it." Let's do one thing. Let's delete it.

I'll try it again and refresh it.

" Start Pro Trial."

Now, I'll say, "Why is this issue coming up?"

Also, check this console.

And I'll write this down here too. This is happening when I'm trying

to upgrade my plan to 249. So, let's just type this in and enter it once. Let's see

what happens.

If it takes a little time, let's pause, and as soon as I've answered, I

'll show you. So guys, I read this here, and after reading it completely

, what the system has done is that if we want to do it, we'll

have to deploy this version on Versal first. So, what it will do is redirect to Versal, meaning it

will create the order there and then proceed on the server accordingly

. So, it's saying something like this, but I know it runs locally. But

for some reason, it's not happening. So, an unaccepted token on opening. So, I should say, but I know

it's possible to run on both locally and Versal

without relying only on the main

site. So, let

's make some changes so it can run locally. And one thing I also

noticed is that I didn't change the pay key here. Let's change it once. For local

testing of payments, run Versal Dev. So the API create order is available. So, these some

changes mean I can run locally as well, without depending

on the version. So, let's write this here. Now let's see what it does. But we'll

add the API key, etc. While it's doing these things, let's go here. And

copy the API key that I made. This is our key. Let's copy it. And

paste our pay key here. Our key will be pasted here too. And

our secret will be pasted here. So, this is our secret. Let

's copy it once and paste it here. Okay? So, this is our secret too. So, it's still

exploring. It's a big thinking pattern right now. So, okay

. Where do we go next? Snapc.

Okay. Once it's refreshed again, it says "Start Pro Trial." Now

let's click it again. The page is still unexamined. It's still

being created. So, let's wait a moment. I'll show you once it's done.

So, guys, it's made some changes. Okay

? Click "Start Profile" here. These are all the things I've written. So, look,

you have to enter the commands exactly the way I'm giving them. Only then will you actually

be able to do it. Okay? So, just be careful with the terms I'm using.

Keep taking notes, etc. It's very important. Okay? So, after that, I'm done. Now, after

clicking the button, I'll click this button again. So, after clicking the button, it

shows test mode. Okay? Because we enabled test mode. We've enabled its API

. So, everything is working. Now, things are actually making sense. So,

here we can make payments. Okay. Payments and so on are fine. Here we

can scan the QR code and make payments. This is the UPI ID. So here

we just test @ OK S PI and click Verify and Pay.

So let's see the UPI ID and the payment will be processed. You can see

the confirmation of payment. This is a test, so the payment is automatically processed. So

even if I enter a fake UPI ID, the payment will be successful. So a payment of ₹499

was made. This is the UPI ID, so the payment is successful. Okay? So the payment

is successful. And here, he's also created a dashboard. Wow,

after the payment is successful, this dashboard is: Upload History, Billing API Keys.

When did he create all this? I didn't even mention it. Product Image Two Hours Ago

Download. So, that's a great thing. He's done it very well. Upgrade to Pro,

three credits left. So, that's how it's showing things. We'll improve this in a better way

. Now, look, let's iterate on it. So,

we're on the dashboard. We're on the normal page. The normal page looks like this. Look, there

's an option for signing in and getting started free. So,

we have to do all these things, like authorization, etc., so

we'll use Super Base for that. We've already done Razor Pay. So, now I

want to deploy it to the live website. So, I'll tell it to "Please

push the changes to Git." Okay? Now, I'm not doing it myself. Now, I'm telling it

to push the changes to Ghub itself. So, what is it doing? It will run commands on its own,

accessing the terminal, etc. So, let's wait. What are we doing? Staging all

changes to NB. Now, look, at the production level, you

won't be able to make payments at the production level. I'll show you how to do that. At the production level.

How do you make the payment? Pay close attention to what I'm about to tell you.

If we go to Gate and refresh,

you'll see it's currently being deployed. Okay? It hasn't been deployed on Versal yet. If

I go to Versal, Deployments, and then go to Deployments, I

'll see that this Razor Pay app is ready. It's deployed. You can see it

's showing as pending here as well. Let's refresh. Okay, the checkmark is there. It's

green here as well, and it's deployed here as well. So, if we go to our

website and refresh it now, hopefully, the 404 shouldn't be showing. So,

the slash upload 404 isn't showing. This problem has been fixed. So, if we

go back here to the features page, there should be policy pages as well. There are policy

pages. The terms and conditions are working smoothly. But if I

go to Features and then Start Pro Trial, it says "Razor

Pay is not set up, please contact support." So, it's displayed here. Why is it displayed

? Because we haven't added the dot eb file. You

don't have to upload any dot eb file here. You have to add environment variables. How do we do that

? Let's move on to that. So, first of all, you

have to select your project. Like, I'm on Versal. Okay? Now, let's

open the normal dashboard on Versal. Now, you have to click on

your project in Versal. You have to click on it. After clicking, on the extreme

right side, you'll see the Settings option. A: This is the wrong project. A:

Where did our project go? It was right here. Let's refresh it once.

A: This was snapc.ai. This is our project. Let's click on it. Now,

what do we do after clicking on it? Go to Settings on the extreme right-hand side

. After going to Settings, there's an option called Environment Variables. You'll need to go

to Environment Variables. After going to Environment Variables,

click on Add Environment Variable. So, make sure this procedure

is very important. You'll type in the key and then the value. So,

what will go in the key value? For example, this is our key. Okay? We'll call it Key,

and what will our value be? This will be our value. So, copy and

paste it. Add it inside. So, what's in the inside? First, the value is the same. So,

let's paste the value. And this is the ID of the eraser page

. Add it inside. So,

okay. Copy and paste the secret

ID of the eraser page, which is our value

. So, in this way, we've created an environment variable. Let's save it once

. So, you need to add environment variables so that these elements

won't be exposed on the front end. And any hacker

can't misuse them. We use environment variables

to keep our websites secure. Always remember to write in the instructions that you

'll only use environment variables whenever you work on things like Razor.

Now, it says, "As soon as we add the environment file, we'll have to redeploy it

." A pop-up prompting you to redeploy will appear. Click on the "Redeploy" button

, and as it is, keep it selected. Click on "Redeploy

." Once you click "Redeploy," it will be completely redeployed again. And

after clicking "View Deployment," your original version will open.

So, look, in the building stage, the file is currently being built. So it

should almost be done. The previous build took 14 seconds.

It's taking a little longer. Let's come back here and take a look. Refresh

and go to Features. I guess it's ready now. So, going here, let's

click on Start Pro Trial. Now you can see that test mode is coming up

, and to remove this test mode, you'll have to exchange it for the real API. So,

you'll turn off test mode. Go to the same Account and Settings. The same phone number

will be revealed, so I'm not showing it. It's the same procedure. Go there.

What do you have to do? Turn off test mode. What do you do here? All

you have to do here is turn off the test mode below. So, the settings are the same.

There are no changes to any settings. So, you'll have to replace the production level settings

. So, test mode won't come up, and you can basically collect payments.

You'll find it. So, this was the entire procedure for collecting payments on

your website, which you've created using your own coding . Now, you'll collect payments, but

how will authorization be done? How will verification be done? How will you register a user?

How can you send them a welcome email, etc.? At the production level, you'll

need to understand those things as well. So, we'll understand that further. So, I guess you'll be clear on

how to do it. So, we've seen at the full level how to do the payment integration

and we've even deployed it. But remember, if you need approval from the

developer , instead of your Versal app, you'll need a custom domain (like

Versal.com, our snapcut ai studsal app)

. That is, you'll need to set up your own domain

. So, we'll cover your own domain at the end. If you want to see how to set up a custom domain, you

can skip to the end. What you need to do,

if I were to explain it briefly, is to go back here and

click on Snapkart AI Studio. Go to Settings. In Settings,

you'll find the Domains option. So, what are domains? We'll talk about that later

. So, what can you do here? You can add your own

domain by clicking on Add Existing. So, you have to connect your own domain here. So,

I'll show you how to do that. But for now, I

'm canceling it. I'll explain it at the end. Okay? So, if you want to get approval for Razer Pay

, this process is very important. So, you need your own website,

so you need your own domain. That's why this is important. I

should have told you earlier, but now I'm telling you, so make sure. You'll

have to connect your own website domain-wise. So, now, the next procedure is our sub-based

one. So, let's move on to how to connect to Super Base and how everything will work.

So, guys, we're finally at our

database setup, where we 'll create

authorization and user database tables. So

, what are we going to do in this chapter on the database? Basically, our task is

authorization

, and then what will we do after that? We'll store all the user data

. Okay? We'll store user data, etc. Login credentials are complete.

Let's say we've removed any background information, whatever history we have,

and load it into the database and display it. And

we'll use its setup. We'll use the MCP server for this. Without the MCP server, it

wouldn't be possible to use Super Base properly. So, I'll explain everything about what an MCP server

is and explain all these things. I've even given you the

proper code to use it.

I'm going to explain the procedure and how to use it further. From here on, things are

going to be incredibly fun. What can I

say, you'll be able to log in and sign up users. You'll literally store their history

of what they're doing.

We'll be able to do all these things, including how many credits they have left. So, whatever I have in mind, logically, I

'll tell you about it and do it. So, it's very hot. I

don't intend to show off my body, database, or anything else. But yes, it's very hot. So, this jacket

is fine for a day. So, let's get started. Okay? I won't teach like this.

Let's put on a shawl and change my outfit a little. Okay?

The database is a change. We'll study the database a little better now. I'll just

do a little avatar of mine. Now, let's start teaching. Welcome everyone

to the Sanskari Wipe Coding channel. Okay?

Let's get started. So what are we going to do now? First, log in

to Super Base. You have to go to Super Base. Just search for "Super Base," and you

'll find this site. After going to Super Base, you have to follow the first link

. After following it, you'll have the option to sign in. You just

have to click on "Sign In" or "Start Your Project." I'll show you how

to set everything up. I'll explain everything about databases, authorization, etc.,

and I'll explain it to you at the production level. Okay? Not just locally, but

at the production level. Meaning, you'll literally be able to publish and share it. Real use case.

There's no tutorial on YouTube that covers production-level things, and these

things are not mentioned at all. Okay? So what do we do here now?

There's Continue with GH. There's Continue with SSO. So let's click the sign-up button once.

The sign-up button doesn't have Google sign-in, it's GetUp. It says Continue with GH

. So we either enter our email address. Raj D Digital FP

is asking us to create a password here. So let's keep it hidden first.

Choose your own

. Okay.

Okay. Let's click the sign-up button now.

So we're done signing up. So it's asking us to check our email. Let's check our email.

Okay, confirm your email. Confirm your email address. So once we

confirm our email address, we'll create an organization. This way,

there's your email address in the organization, then there's the plan, whichever plan you choose. So, it

'll remain our $. Let's click on Create Organization.

So our organization is created. So here

you can see our project name. What is our project name?

Ah, snapcut, snapcut, our project name. You

have to provide a database password, so remember to store all this somewhere. Database passwords,

etc. Whatever project name you create, store it. It

can be useful somewhere. So right now, I don't need to create one.

Let's choose your own, I'll enter one

. Okay. Click on Create New Project.

Okay? Our project, Snapcut, has been created. Now what do we have to do

? Simply connect to this database. We have

to set up authorization and other things. So how do we do it? I'll explain it step by step. Look carefully.

Okay. Let's click on the Connect button once. What

will happen with the Connect button? The connection string is coming to us in the Connect button. Okay? There are app

frameworks, mobile frameworks, API keys. Here's the MCP. So, we

're going to use the MCP server. In the MCP server, we have a cursor.

There are many other things you can find in place of the cursor. There's Windsurf

, VS Code, and Cloud Code. So, there are different things. We

're going to use the cursor. If you want to add something else in place of the cursor, you can add more. So,

you can see clearly what it's saying here. You need to add this code yourself

. And if you're having trouble with these cases, I'll still show you how

to set up the cursor and so on. So, for now, I want to explain it with the cursor

. But I'll also explain the tray. Okay? Because we've

been using the tray through the video. So, let's go to the tray. So , I'm explaining both

the tray and the cursor, because

you don't see the tray integration in Super Base. So, look, we're still on the tray. I'll explain

both what you need to do after going to the tray and what you need to do after going to the cursor

. Look, on the cursor, if you want to set up an MCP server, first of all

, what is an MCP server? I'll explain that too. So,

to understand what an MCP server is, let's come here. And let me explain it to you here

. Now, what is an MCP server? This is expanding. Let

's take a new doc. And here, let's understand what an MCP server is. Now,

what is the full form of MCP in MCP server? It stands for Modern

Context Protocol. So, look, what do we do to provide context

? We don't use APIs or anything like that. Ah, I don't know what this is? Modern

Context Protocol. Okay? Modern Context Protocol, I hope so

. If I write the full form of MCP Server here,

you can see what is Model Context Protocol.

If I click here, you will find everything here. This

is an open source thing, what do we do in it? You don't

have to talk at the API level. Now, every single thing has a different endpoint. Now, if I

talk here, MCP Model Context Protocol is an open source standard for

connecting AI applications to external systems. AI applications

like Super Base exist. Now, instead of this, there are some other applications which I

want to connect to AI. Now, AI should be able to access, understand and use the tools.

Because what does MCP Server do for you? It provides 20 to 30 tools. There may be fewer or fewer.

It can depend on the particular tool you're using. So, using MCP AI

applications like Cloud and ChatGPD, like ChatGPD and Cloud. And this Cloud,

Cloud's parent company is Anthropic. It wasn't Anthropic

that introduced the concept of the MCP server. So, what's going on here? ChadBT can

connect to data sources, for example, local files, databases, tools like

connecting to search engines, calculators, workflows, and

you can enable these things by providing specialized tools, etc. Think of MCP

like a USB-C port. That is, let's suppose I have something here.

Can I access it through this? For example, let's say this. Now I

want to connect this to my laptop. I have a laptop in front of me right here.

Okay? Now, you can consider this thing here to be USB-C. You can consider it anything.

I want to connect it from here. Okay? I'll connect it here. Now,

what do we do to connect it here? We'll use this wire. And

using the wire, what's my laptop doing? It can use the microphone. This

is basically a microphone. If the laptop needs to use the microphone, I'll connect it. If I

want to use my phone, like if it's connected to a webcam, it's connected via Bluetooth.

Now, if I want to use headphones, they're connected via Bluetooth. So, imagine there

can be many wires. You can connect all four things with a wire. You

can connect all four things with Bluetooth. So, what does an MCP server do? It's a standardized protocol

that includes what? There's a chat interface, there's IDs, there are other applications

. It connects everything in one place. Okay? Everything

gets access. If you use an MCP server, I'll have to connect a lot of wires

. To use Charp tools, I need to use the microphone, use the phone,

charge it. Let's say I

also need to properly transmit its data to another location. So, for that, I need multiple wires. But what happens here?

With just one wire, you can access Charp's tools. Now, understand this.

Superbase has a lot of things going on. You have to create tables, enter data,

authorize users, and do a lot of things. You

have to see details about what entries are stored in the database. What is the user's history?

What URLs does the user have access to? When did they last log in?

When did they last sign up? All these things are stored in the database

. And to work with all these things in the database, you need an MCP

server. Because if you try to do it yourself, the database is very technical. You can't manage the database

yourself. So we will use AI and how will AI talk

to our database. We will make AI and database talk through MCP server. So you

can assume this much. So for more details about MCP server you

can read this. Here it is properly written Model Context Protocol on MCP server

. You can read all the details here. So now let us

move ahead. Look at our main concept here, our concept is

I guess pausing. Are we okay? So our concept is

around our database. So let us go to the database. So, look, to connect to an MCP server,

we have something like this, our code, doesn't it? You mean, if I

go to the cursor, after going to the cursor, I go to File, sorry, go to the cursor,

there are settings on the cursor, and then you have to go to the cursor settings. Once

you go to the cursor settings, you'll find the option "Tools and MCP."

In "Tools and MCP," you can see how many MCP servers I have. Here, it

says "Connect." If you want to add a new MCP server,

click on "Add a New MCP Server." After clicking, you'll be redirected

to an "mcp.jsn" file. Okay? The file will look something like this, and within that file,

you'll have code like this. Within this code, you'll need to attach your super base code

. You shouldn't have attached anything before. You're doing it for the first time.

So, what do you have to do? If you're doing it for the first time, simply go here.

You'll go here. Go to Connect.

Go to MCP in Superbase. After going to MCP, you'll find an option here.

Select the cursor and copy it here. This is complete, and after copying, you'll get this.

The code will remain, and you'll paste it in its place. Suppose you

want to use it multiple times, there's a proper procedure for that as well. There are two ways. Look, there

are two or three ways to connect. One way is to

enter your command, followed by your project reference

and a token. So, this is done this way, and

if we talk about a simpler way, in short, you can do it this way: superbase a,

like CR, and I wrote the URL to enter. So, you

can do it this way too. So, if I press enter here, what we

got from the superbase here is this: MCP Servers Super Base

, and here we got the URL. So, I've given the same procedure here.

What have I done? I've written a different name instead of the superbase so I can identify it. So,

this is the only difference. So, you can type things this way. So what do I do here

? I'll go to the tray and add it to the tray. Look,

you'll have to do the base yourself because a lot of my 'na's' and so on will leak out

. I mean, you'll see them. That would be a problem for me. So I

can't show you. That's why I've copy-pasted the proper code here. And even if you're

having trouble, you can tell the AI to set up the MCP server for me. A JSON

file. You'll have this code file, and what will you say to the AI? Okay,

help me save this MCP server. You'll say it like

this and grab the file. The file will open like this. After opening the file,

select it like this. There will be an option to add to chat. Whatever MCP code is there,

add it to chat. Say, "I want to connect this to the Super Base." Read the documentation

or copy and paste it. I believe you're intelligent

enough to do this. If you can't do it, even after watching this entire video,

you should feel a little ashamed. Be ashamed, brother, if you don't. Okay? Let's move

on to our topic. Okay? So, here you'll find the Settings option.

You need to go to Settings. After going to Settings, you

'll see the MCP option. Go to MCP. Now, you can see I

already have two MCPs installed here. You need to add a new one. Add it here

. Now, what's here, isn't everything in one place? Okay? I mean

, you can see all my MCP server code. That's why I didn't

show it with the cursor, but it's not visible here. So, let's click on "Add Manually." And here

I'll paste whatever I have. So, I'll erase this entire

example from here and paste it here. So, click on the confirm button

. After clicking the confirm button, it says "Retry." Let's retry

. So, something is wrong here. Now let's edit and see what's wrong. MCP

Server Super Base: Please confirm the source and identify the risk. Please confirm the

source and identify the risk. So, there's something wrong here. Let's do one thing: let's add it manually.

So, what did we have here? Example. Server, and here was the command,

argument "Y." We'll delete all these things. Let's paste them here

. What happens next? Let's confirm. It's invalid JSON,

so there's some error in the JSON here. Look, I don't understand what to do. So,

I'll just copy and paste it. Select it. There

's no "Add to Chat" option here. So, let's copy it once, and then

we'll have to ask someone like Google.

So, let's do one thing. Let's go here. We'll go to Gemini. Look, there

's no risk in this. There's a URL. So I can get this set up. This is the MCP server,

and please help me

make this MCP server code work on Tray ID.

So, I'll paste it here, and see if it's not working. So, locate

the configuring file, JSON. So, let's copy this one and see. Apply the

configuration and paste it. I guess it's the same.

The MCP server name already exists. Okay, ah, the MCP server name already exists. Super

base so super base hfn snapcut you can give the name yourself so look a little it

can give problem you have to change the name from here simply

see the tutorial and follow it then confirm snapcut now I guess this

should work the code which he has given me I will give you the exact code by copy pasting it

I'll give it to you if it works. This one still isn't working. I don't know what the problem is,

but this one is working, this one, but it was different. Wait a minute, I'll check

and tell you. So, guys, I finally figured it out that I can't solve this. So,

no, man, you won't learn from these mistakes. So, look,

we made the Snapcut one with a super base. So, look, I know the process

is a very difficult one. I'll do it with that. I've done this super base one before

. I've done it many times. But I want to show you the easy process so it's

a little easier for you. Otherwise, it will get too technical. So, right now,

we'll click on Settings here, where we did it. Let's go to Edit.

After going to Edit, there's the Raw Config JSON. You have to click on it. And

here you'll actually be here. So, you just copy this

and add it to chat. And after adding to chat, say "In my MCps,

Aman, enable to connect, super base, please help me

do this." So, just do this now and I'll hit enter. I guess you might see some secret

information, so I'm pausing, but I'll show you what

the response is. So, guys, I got a response here. So I 'm thinking of

using it, which it gave me. I've chatted a lot above. I

made changes to it. If it works now, I'll let you know. Otherwise, it

'll get too technical. So, let's copy it now.

Copy and paste this structure here. I won't do it here right now. I

'll go directly here, go to Settings, go to Edit,

select it, delete it, and paste it. So, let's see what happens here

. The project reference is calling itself a URL. So, we

'll copy this reference URL from here,

which is the same URL. Let's copy and paste it

and see what happens here. Select here

and delete the paste. Let's see, guys, what happens. Let's confirm. Hopefully,

the client is closed. Why is the client showing as closed?

Go to Settings. Go to Edit. So, I don't think it's working. This

is our procedure. If it doesn't work, what

will we do? You'll have to tell me the hard procedure because it's not working at all

. Okay? By the way, if you're using a cursor, it's very easy.

Click on Add to Cursor. After clicking on Add to Cursor, it will say Open Cursor and

you'll be connected to the cursor. I mean, it's very easy on the cursor.

It's saying Install MCP Server. So, you can type etc.

Look, the name is Superb, your Snapkut. Here, click on Install and this Superb Snapkut will be installed

. It's saying Need Authentication. So you'll click the Connect button.

After clicking the Connect button, we'll copy the URL here. And then

we'll go here and paste it. So, look, that's all I have to do. And literally, I

can't do it. I don't know why it's happening with the tray. I even restarted

it, but it still doesn't work. But it's much easier with the cursor. If you use it with the cursor

. I'll fix it with the tray right now and show you how to

do it. So, there's no problem with that. If I tell Snapcut to

do something, it will do it. So what do I do? I'll tell it. And

I'll turn off all the other tools. Okay? I'll turn off all the other MCP servers

because I want to use Snapcut. And can you check Snapcut Super Base MCP Server

? Are you able to use it? I'll just type this and it will start using it. So, look,

I mean, these are the things I want to tell you. Things are complicated.

Even when creating tutorials, things often become complicated.

Because I want to show you an easy way. Let me connect it and show you.

I could have done it in this time by explaining everything. But it would seem difficult to you, but there

is no way. So, how will the tray that wants to do it for free use

the MCP server? You will get stuck in between, so it is important to tell you.

Otherwise, there is also a marketplace option here. Let's take a look at it,

add to the marketplace, add from marketplace, and here, look at Super Base,

click on Super Base Local Plus. MCP Server

is fine. What is MCP Server saying here? No

need to fill in the information. Please confirm, confirm. Okay? Let's confirm.

So, I've confirmed it. Now what's going to happen? Let's go to MCP. The Super Base

is coming up with MCP. It's showing me configuration errors here.

I feel like it's not doing anything correctly on this side. Or

I'm having some issues with the tray side. So what I'm going to do is I

've already created a Super Base. I'll show you something based on that. So let me do

it for you. Just a second. So, finally, guys, now I've figured it out.

I'll change this Super Base that I created. Anyway, let's go to Settings and go to Edit

. So, this is the actual code I'm going to give you. This code is 100% working

tray code, which I'm giving you here. It's working. I've just checked it

. So, here we'll write "

100% working MCP Server Trade

Code." So, you just have to copy and paste this here. This one. Okay? So if you

use this one, it'll do the job. Just change the name. The name is up to you. What

to use? If I go here, it says "supu." Okay? Here I'll

hyphenate "super base" and "snap." Okay? Confirm.

After confirming, as soon as I enable it, it'll say "preparing" and

ask for a connection, so I'll connect. So, here it is. Now,

I don't want this here. I want it somewhere else. So, first, I

'll cut it and keep this browser open, the browser you want to use. So, just

keep your browser open, the browser in which you're logged in. Then,

go to the tray, and then turn it off and turn it back on. It

'll ask you to connect here.

Now, it's there. It's redirected automatically. Just

keep a window open in this browser. In any tab, authorize the MCP CLI proxy. If authorization is successful, the authorization

is successful. So now let's go and see what happened. Authorization has been successful.

It's showing "preparing." After preparation, all the tools

will be available. So let's see. So, look, this is how it's figured out. I mean, things

have to be figured out. Now, my method is a little different. You guys aren't at my level. So, that

's why you'll have problems. That's why I didn't explain the procedure. I figured it

out. So, it's just hit and trial. I connected my old MCP servers

. So, I figured it out by looking for a similar pattern. So, right now it

's still showing "preparing." Let's turn it off and on.

Click "restart." I guess if it's causing problems, we'll

close it and

turn it back on. BG Umar YT

Super Base. That's it. Hopefully, it

's showing "preparing." So, guys, finally, you can see the check mark here. So, our

MCP server is fully functional. Search dogs list projects. So

it has access to all these tools. So now it can do whatever I tell it to do. So

I'll have to pause for a bit. Next, I'll shoot separately. So let

's set up authentication through it. So first, if we look

at the cursor, I asked if it can use the tool. Yes, it can use the tool. It

can get the project URL. Nothing was found in the list of tables

because we didn't create one. So, first, we

'll say, set up authentication. So, you can use any base cursor. A sorry

cursor or tray, you can use any. So, here we go to [key] and say,

please set proper user auth which includes

How it works. So, we're analyzing right now. And after analyzing,

I'm not going to skip any part of this process. So, now we'll

take a look at what we do after analyzing. We can do the same thing with a cursor

. But using the cursor, I'd like to create some tables and other things. So,

here I'll say, "First, let's go to Super Base."

Okay? And let's take a look at a few things. For example, we have Super Base. So, let's

close it. So, what happens in Super Base? Let me give you a brief overview.

On the left side, you'll find the Table Editor. If you go to the Table Editor,

you'll see all the tables there. There's Schema or Auth. Under Auth, you'll

find Authentication. This is the Authentication option. All the people

who authenticate, sign up, etc., will be visible here. So, once we

As people create it, we'll see it a little better.

Right now, it's just thinking about something. That takes a lot of time. When we

go to the tray, because we can use all these things for free, it's

going to take a little time to get up. And why did this bottle appear? Let's remove it in the middle.

Because I've come here quite late. You can see that 51

was from a long time ago, so it's still in the thinking stage. So let's do one thing, let's

stop it. This "I guess" thought process is taking time, so right now we

don't have that much time, so right now we'll tell the cursor,

I'll write the same thing, let's copy it, and we'll paste the same thing here

. Okay? So things go a little faster. That's why we're using this. So,

I've already explained how to set up the MCB server and so on. If you

use any other ID, there won't be a separate process. You'll

have to use the same thing. It'll be a bit of hit and trial, or you can ask the AI yourself. If you

need to change the JSON file, it will do it. And in the case of the problem, I even tried changing the JSON file,

but nothing happened. Otherwise, if I had spent more time, it would have been fine. So again,

here it is in the explore ring stage of Super Base. Now look, it's running

. It's calling the SnapC ones in Super Base. So, it ran everything and it

's fine. JW is doing a few things. Running the OK command, npm install Super

Base. So look, it's installing some dependencies of Super Base, etc. So

, it's installing Super Base's dependencies. So, let's see what happens later in the process.

So, after auditing, is it setting some things on the envot example? So, let's check

if it set some things. Okay? Throw

v.nv.d.ts, I guess you can see it's added here

. It's added some elements of Super Base so it can run. So

we have to remember that when we work on Super Base, it also requires a secret key

. Like the Wet Super Base URL, and here's the enum key. So where

do we get this? We'll have to ask it. So we

can ask it in a separate chat or search. We can also use an AI tool. No,

we just say here, go to Gemini and say, "How to get this

from Super Base." How to get this from Super Base. We'll just write it down.

I know, but I'm just telling you how.

You can get the URL and other things from the top. Here you'll see this is for your main project. So

working on in the side by two diffs on the left. Look for the settings icon, the gear icon, at

the bottom. Okay? So, look, that's how it works. I'm actually

teaching you how to do it. You're using something else instead of Super Base.

If you're using any other platform, this is the simplest way

to find it. So, okay. Let's go down to the project settings.

In the project settings, we already have SnapC, etc., all that stuff. Okay? So,

inside settings, click on the API tab. Under the project API section,

you'll find the exact API credentials you need. Open the project you're

working on, on the left, and look for the settings gear icon at the bottom. Locate the

API credentials inside settings. Click on the API tab. Okay? API Data API, ah,

I guess it should be this. Okay. So, this is our URL. Okay? We got the URL.

Great. We got our URL. Now, let's paste it in. So, this is our

I don't know where to find it. What should I do? No problem. Let's look at the next one.

What will you do? Implementation. Well, I know where to find it. Where

from? Where can I find it

? So let's write it down. So let's look here too. We

can see it by scrolling up and down. Anyway, let's go to API Keys and see.

What do we see here in API Keys? By default, there's an API Key

written here. I don't know what it's for. So, there's an

API Key here too under Secret Keys. I have no idea what it's for. So, let's go to Google. And let's look here.

You'll go to the dashboard. API in the Settings menu. Click on API. Okay?

There's API. Look for project API keys. You'll see a rower name is N and the

The type is public. A name is name, so there's no JWT.

OK, service role. And here, OK, we found it. We have published in API keys. And here,

this is how you have to find it. Look, I simulated that, I don't

know, this is how you have to find public. I could have explained it simply,

but that's not fun. Okay? So, let's copy and

paste it here. And where do you have to do the same thing? At the production level,

you'll also have to add environment variables. So, let's do that by adding a keep file here

. So, I guess that's already done. Let's accept whatever it's doing.

By the way, did it extract itself? Adding superb so auth words. Okay?

So, here it is. Keep file. Okay? So, this is how you have to use things.

Add env shop super base dashboard authentication providers ensure email is enabled. So,

what do you have to do now? The process is to explain the superb client and auth state, so the superb

client is fine. Expose user session is loading, sign out, log in, email, password.

Okay? Now let's see, guys. Let's go through it. Let's try using our locally run

first. What's happening? Is the entire screen

white here? No. Okay. So, let's click on Sign In here. So

after clicking on Sign In, you can see Remove Background like magic. Okay?

So, here's the email ID, sign in, continue with Google. So,

click on Continue with Google, so our Google Authentication is not set. Okay?

So, let's sign up here once. Vivek

OfficialOnline@gmail.com

Password 1 2 3 4 Let's sign in. Must be at least 8 3. Okay, guys, let

's show it to you guys. You're all friends, why hide your password? Right?

Invalid email and password. I guess I'm signing in. I don't want to sign in. We

have to click on Sign up for free. We haven't signed up yet, so let

's click on Sign up. Vivek,

okay. Great Vivek OfficialOnline@gmail.com

Password 1 2 3 4 5 6 7 8, okay? The contents should also be uppercase. So we

create an account. I agree, let's click on Create Account. I guess if I

go to Super Base, there's an option called Authentication Database,

so if I go to Authentication, you can see an email ID named Vivek. So

it's authenticated here. So I guess, check your email to confirm your account and then

created the account. So if I go to Gmail, after going to Gmail, let's

refresh. Again, refresh. Did I not receive this or

did I enter a different email? Spam is coming up in spam. Super basic confirm your sign up. So

I'll click on confirm your main. You can see it's already confirmed, and it's

coming up here too. Vivek Official Online. If I go to the dashboard, I'm

redirected to the dashboard, and dummy data is visible here. This way I

can sign up, and there's also an option to login,

so this way a user can come here. Okay, so now we

need to create all these things here: Pro users and free users. How can we create them? We'll discuss that here only.

So, for now, I'll close the tray. I've already created the integration section and

explained how to integrate it. So, now we're going to focus entirely on using cursors,

which will help us build things faster. Because when you buy a paid version of

something , you get a comparatively faster service

. So, look at cursors, it's not overpriced. You will go to the cursor

to get the paid version. Meaning, it will be visible on the settings etc. If you want to get the Pro version,

if you want to get the Pro version, then I will search here, cs.com.

You will go to cser.com

and after going to cser.com, you will see pricing etc. There

is a plan for $20 here called Which is More Than Enough. I have taken this plan. So

this is a good plan. The yearly plan is less, though I am thinking

of getting the yearly one, but the monthly one is good, all the work gets done,

so okay, our login is working, we checked that after creating the account, the login

is working, we had already signed up, then after that, header and sign out, so the sign

out is working, let us sign out once and see, I guess I did the sign

out, it is in front of you, so the sign out was also working App & NB App Wrapped in Auth

Provider: So all routes can use auth, okay? So, our

environment file is Authentication, Ensure Email is Enabled, Authentication, URL

Confirmation. So, what this is saying is, confirm that email is enabled. So,

what happens here is that when we go to Authentication, there's an option called

Notifications, etc. Here, there's Email, so you get notifications in the email, so

confirm signup, etc. So, here, there's Password Change, Email Address Changed

, so there are all these options: Notify User When Their Email Address Has Changed.

The user can also change their email address, password, etc. So,

should we notify them or not? This is for notifications. Meaning, whoever

confirms signup, for example, receives an email for confirmation. So, what will their email be?

We can also write the email text, etc. But this is a bit more advanced

. A tutorial based on the super basics alone would take hours. So,

we won't go to such an advanced level. We can also design it.

Basically, this is the HTML body that describes how our email should appear in confirmation.

We can do that too. So, things are done at a very advanced level. And

in Sign-In Providers, you can see Allow New Users to Sign Up. Okay

? Allow Manual Linking Confirm Email. So, we've provided the confirmation email. Third-

Party Authorizations: What's in Ad Providers? So,

we don't need that. Third-Party Providers: Sessions

URL Configuration. URL Configuration will be added later. Auth Users: I

was actually searching for something. There's also a Google option here.

How did we use Google? It's coming out of my mind in the configuration. So,

if I look at New Users Sign Up, we have everything.

Let's search it once. How to enable Google in Super Base? Let's try asking this

. How can I configure Google login in

a Super Base or log in using Super Base? Okay? I'll ask

him this question. So let's see what he says.

For Super Base, I'm going to add Google

login because it's been a while since I've thought about it. Okay? So, Google login with Super Base is adding the Continue with Google

button to the app. Okay? We have all these things. Write a short guide.

Adding setup steps, all right. Okay. He's changing some things in the login page

. But the main thing is how

to do it here? Here I'm asking how to enable

Google login in Super Base.

Okay? Let's search and check.

Google Cloud Console and create a new project. Search Google Authentication

Platform, fill in the post. Let's check this.

Enable Google. Look, Super Base Authentication Providers,

Google is in the list, and Expanded Authentication Providers.

Okay, and the authentication providers are right here. Authentication is right here

in Authentication. In Authentication, we have providers. So, this is the third-

party

ad provider. Is Google here? Select Ad

Provider. I don't see Google's. Let's take a look. I'll have to pause and

look. Okay, guys, I made a mistake, scrolling down to look here

. Auth Providers are right here. You'll see the Super Base Auth right here.

Email is enabled here. Make sure it's enabled. So, it

's enabled from here. What should be the maximum password length? So, I've checked it here,

characters, etc. So, let's cancel all this here once. So,

there are a lot of settings here. You can also do it through your phone. Here you

get the option for SMT (I guess Twilio). Emails usually use SMTB. So,

this is your Twilio configuration. So, I won't go into this. You

can search for anything on Google or YouTube here. So, that's it. So, here

's the main Google menu. Now, how will you do Google's setup after that? Google's setup is also very easy, but this video

will get quite complicated. So, I won't do it again. There's something called Client ID and Client Secret.

It's a big topic, friend. I mean, there's a Google console. You

have to do it from there by creating a Client ID and Client Secret. It can

be done quite easily through that. I avoid it for this video, but suppose

I want to do it, I can do it, but I won't do it for this video right now.

Okay, I'll sign in once and continue with Google. Maybe it'll do something.

I've integrated the action. I guess I've done it, but it won't work

. I've written an unsorted provider, right? So I've added it. What's

already done in the app. Now I'm going to call it also: "Set user details."

Like, if

a user is already signed up,

then a sign-up and registered,

then make sure to store the DZ

URL in history to show him the result whenever he remains,

he opens his dashboard. So that's what we'll do.

Okay? So that's our dashboard.

Okay? Okay. Now you can see we're creating this migration. So

if I go here, there wasn't any table in Super Base yet. I showed you that. You

might remember.

So now let's go to the table editor. So here you can see there

wasn't any table. But now there's a table here. Like, "Flow State Identify," this

is for Auth. I guess, "User Flow State." So instead of Auth, we go now. I Guess

should be in Public. User image history in Public. Okay? So here you

can see that all the history is being created here, where the result will be kept,

the user's ID, the file name, and the created ad. So

the user can do all these things here .

Okay? So these things will be connected at our database level, where the user's data

will always be stored. Whatever that background removes. So now we'll log in

and see how things work. So here we'll create an

official online@gmail.com

and sign in. V 1 2 3 4 5 6 7 8 Sign in.

Okay? So here we have this. So all the history etc. has been removed. I Guess is

fetching. So if you go to History, there's nothing in History.

It's showing three credits remaining. Average time 3.2 this month, so that's fine.

Right now it's showing the time. We're fine. Let's create it. And I

'm thinking we can also make the average time dynamic. This should also be dynamic

in the dashboard. We have to add something from the front

end. So what will we do? The front end means this UI of ours

is our front end. And in the back end, the work is being done at the back end level, which we

did in N10. So what is the average time here? We

will calculate this and this month's credits remaining. So, also in the dashboard, we have to

do something from the front end. First, we give only two free credits after signing in

, and no one can remove the background without

creating their account. Okay? So, without

creating an account, no one can remove the background of their image. Second

, our logic will be if someone purchases Pro, then

he will receive 10 credits

'm not giving you a lot because our capacity is 100. So, we're

assuming 10. You

can change it according to your business logic. So, if someone purchases something, then he will receive 10 credits for one month. So,

it will be 10 credits for one month. Now, what else can we do? We're fine. Now,

after that, we can also do the third one.

We can also rename the file

that you're displaying in the history section.

Okay? What should we do for the history section? Let's visit it and

find out. And this is also the average time. Also, calculate

the average time and the exact time to

generate the image. So, calculate it from the

front end and send it to the database once done. With the URL. Okay? So

I've given it this way , and in fifth, also, count

how many times a user has downloaded an image. Show in the history

section only. Okay? So, history section only. So, that means it will be visible here, and

what will happen is processed images, etc. So,

sixth, make

the dashboard properly link the

dummy data to the actual super base database, which is linked to the super base database

. So, look, in this way, I've

given it complete information about what I need, and I've entered the requirements. Now,

after this, you'll see how well interlinking all these things will make sense

, allowing me to store the user's actual data and

calculate the average time for their activities. So, all you have to do is provide the logic, and it will build things automatically

. You need one thing: intelligence. Even a little bit of brain.

You can install it. So yes, you can get anything built. Okay? So it's that simple

. So let's see, it will go through a complete thinking pattern. It will go through the entire process and

then make a good decision. You can see how much time

it's spending just thinking. So it's not like it will just make any decision randomly.

These things work with a lot of thought. So it thought for 32 seconds. Then it

created a checklist and then it said profile plus history columns time

download account. So it will create all these things on Super Base. Then

it explores. What are the things? Require or upload to free credits. So

it will do it this way and will also make changes etc. according to the Pro purchase. So Pro

is not a purchase in it. So if I click on Upload One,

after clicking on Upload One, it will also show the option to upload. Here it

says Upgrade to Pro. I'm clicking on Upgrade to Pro. So,

I guess there's no popup or anything else. So, a popup will also appear here

after clicking "Upgrade to Pro." There's no need for API keys here, because we're

not providing our API keys, and the history

is just showing up everywhere, like in settings. Okay?

Let's go to the dashboard. And one of the dashboard's colors is strange. You can also change

the history by using the color. But, look, we won't be able to do much work on the UI. You

can change the UI. If you want to make any changes to the UI, it's very easy to make changes. So,

I've already shown you all that.

There will be a separate video on the changes, more in detail on the UI. Okay? How

can you change the UI? You can create a great UI. How to give commands to the UI?

What are the proper methods? What are the variations? Because this

video is already quite long. So, we won't

go into much detail on the UI. So, okay. Let's go to the dashboard. So I don't think it's integrated yet,

but it's working. Actually, it's using the MCP server and so on. And let's see,

it must have created other tables by now. So let's go here

and refresh once. So, has it created any other tables? So

, yes, it's created one above the user profiles. Okay? Our user profile is here.

So, when will the pro expire? Create ad, update ad. And the plan's credits

remain. So, in this way, it's created a complete system, column-wise, to see what's

left. So, everything will be calculated here.

Okay? As for the rest, look, it was just a matter of environment variables at the security level, which

I told you about. Environment variables are the main thing. Now, after this,

we create a separate back end at the security level. For example, we're making calls from the super base

. But we'll explore that level of security in another video, exploring

how to make it even more secure. The rest of the AI, you can call it "

create security," because there are a lot of RLS policies involved.

If you need to know how to do the coding in a way that

makes your entire site secure, and how to execute things,

tell me, and I'll come up with a dedicated video on that. Okay? I'm thinking,

if you tell me, the video will be up soon.

So, let's process it and wait for the results. So, guys, you can see that

the changes I mentioned here have actually been made.

All the changes have been made at the database level, and you can see that the text has also changed,

because I'm recording this on Feb 3rd. Okay? So, I

had to record myself even more. So it's a big stretch, isn't it? So, I can't actually do it in one

sitting. My schedule is so busy because of that. But never mind,

let's go to User Profiles. I even got a haircut yesterday

. You might not understand because we're only doing a little bit. And then

here you can see there's User Image History, User Profiles. So

there's a database of these things. So we'll work in these tables. What's there

? If you don't find these, go to the Table Editor on the left and

select Public under Schema. Here you

'll find all the tables your cursor creates. So here I'm doing it with the cursor.

You can also do it with the tray. So I want faster response and better execution.

That's why I'm using the Pro version of the cursor. So here I'm going to rename the file in History.

Options for everything, like Super Base, are visible here. So, I

'll copy it and open it here. Click on Sign In once. So,

let's do it once here, either on the official or the other one.

I'll also need to check the Vivek password.

I guess it should be this or 78. OK, my account is signed in.

Vivek is written here. I can also rename it, etc. There's a

rename option here. I can also tell it that, for example, I have an account, there

's an Account Settings option. Now, also

implement the Account

Settings option from here. I can edit my profile, change my email ID,

password, and even delete the account. I can delete the account as well.

I need this too, so let's enter it and see what response

we get. So, until then, let's move on to Super Base. You can see Super Base.

First, let me walk you through it a little. Meaning, to see in these cases,

like the image history, the ID is kept here. Whenever someone authenticates,

his ID is created. So here the user ID etc. is kept through which mapping is done

that this particular user has done it and on that basis multiple rose ads are created.

So the URL of the result, file name, created ad, all these things, download count as

I told you, how many times it was downloaded, how much processing time it

took. So we had put these things here on the chat. And it has implemented the same thing

in the column format which we will see here and

based on this, things will be updated on our dashboard like two credits

remaining is saying this month, right now it has become zero, average time seconds, so these

things have not been calculated yet because we have not uploaded any image, so we

have kept the account logged in, so as soon as it is implemented, we will try making changes on it once,

that is, we will upload etc., edit it and I

will show you that finally it has become functional, so okay guys, it has implemented it

here, so it is saying settings in the side bar, in the dashboard settings, so here if

I go to settings, but I want something different, I want

it to click down and this is going down very low when scrolled,

so this also needs to be fixed, so look, when you look at it visually, I am seeing problems

that it is going down very low when slid, so here I am saying please

make sure dead

this bar So here I will explain the problems first. So here

I will have to sign in as well. So let's sign in once.

There is this hassle of signing in again and again.

So now we have signed in. Now look here, the side bar is not visible. So

for this I will close this panel only. Or

I will make the chat section a little smaller. I guess it has opened now. I have switched

the view. So if we go and see here, then I have to scroll it

. Oh, here I write.

Here I select it. Please

make sure that this side bar shows that

in this side bar in this quad

area should be under it without any scrolling okay

without any scrolling currently

what is happening what is happening right now actually when I go to settings and any

other page then it is

page then I have to scroll down for this

my profile icon and text also figure this and as well as

and as well as let's see what I want to say. First let's close this

. This is the section which is coming and this one of ours here we select it

And as well as I

did not guess

as well as when clicking on my profile photo then

ah make sure to redirect to see and even on email and and email name and even if

click on the name then I should be redirected

to the settings tab. So redirect me to the settings tab. This is what I

am saying to it basically. So whenever I click on Settings here,

on this Vivek text, it should be clickable. And then I say "Make the cursor pointed." And also, "Make the

pointer here." So, what is a cursor pointer? For example, if I'm going to "Change Password" here,

my cursor changes to a pointer like this. First, there's an arrow like this, and then

there's a pointer like this. So, we call this a pointer. So, cursor pointer.

Change it to "Rajvi." So, I'll give it these instructions.

And now, let's play around with these things a bit to see what's happening.

Like the name here. So, we've made a few changes to the UI.

But if we're talking about changing the name of this user profile, we'll

go to Authentication. It's created something that

allows for changing names, such as our display name. Now, we need to change this. So, we change it. Once

instead of "Vivek," let's say we write "Rajiv." We save it

and refresh it and see what happens. After refreshing, you can see

the name has changed to "Rajvi." So, we change it here again and

write "Vivek Mishra's full name." We save it. The change has happened here too. You can see it below.

And you can see that it's fixed now. Now, as I scroll down,

the options on the left are fixed. I don't have to slide on this. So, if

I want to upgrade, let's say, right here, I can click on "Upgrade to Pro

." We'll need to create a popup for this as well. It's repeatedly

redirecting us to the homepage. So, we'll need to fix this as well. We

'll need to white label it. So, we'll get back to those things as well. So, okay.

Our email can also be changed. So, we won't change it right now. We'll just change our password. Repeat the new

password. There's also an option to delete the account. If I go to "Delete," it says

to type "Delete." If I click "Delete," my account

will also be deleted from here. Okay? So, we can delete it from here as well. So, you can see a really

cool feature here. So, let's upload an image and

remove it and see if it gets saved in our database. Now,

first, let's take our image here.

Click on "Remove Image Background." And here too, we need to make changes. Four of

five images remaining today. So, here I can also tell the cursor

to calculate this properly. So, if I, or you,

can do these things. Well, you understand. Otherwise, if I were to create it completely properly,

it would take a lot of time. So, let's do it. Look, our image has been processed

. Okay? We can download it right away. I clicked on Downloads,

snapped it, and came back. Okay, you can see that the image has been downloaded here. Now, if

I want to rename it, if anything, there will be an option in the history, I

have a loading image. Okay, here you have the pencil icon. You

can rename the image with the pencil icon, there's no problem. If you want to download it, then you can download it

. How much processing time did it take? It took 6.7 seconds. So, the time is also written here

. So, if I come here and go to the table editor. After going into the table editor,

the user image history should appear here. Okay? It does. So

the processing time is in milliseconds. The download count is zero. So

why is the download count zero? Let's check this once.

The download count shouldn't be zero. Or it will count the download count from here.

Okay. It's counting the download count from here. It's counting only from the history. If we

download there, that should also be counted, actually. So

this also seems like a mistake to me. So you have to figure out the mistake. I mean, you have

to run it yourself and see. Don't assume everything will be fine. So, I

'll just say it here .

Now we need a few more changes here. So what changes do we need? Look,

what is our first thing that we can say right here. Okay?

And first of all our logic is that

your logic behind counting download count is not accurate

you are not sending

the download count done

by just removing background first time you are only counting

it counting it from history tab so fix it and in the second point we

say what is our second one

what was the second one, it is coming out of my mind, this one was we were going here,

I removed this and came to 8080 which is our home page. So this

is our home page. So when we go to start removing backgrounds then

credits comes here when we go to downloads to remove the image and

here we put our image. So here the free credits are

not getting counted properly.

So we did like this here or once again I select

Here the credit remaining is not accurate, kindly fix it, so this was our problem

and let us see what the problem is, we will tell you once

otherwise our credits etc will be lost unnecessarily. So

we will use it. I guess what other features are there? What is

that thing, let us come here to the interface and see. Your processing image history.

Okay? Our prying API page is not our own, that is why it is coming like this. And

if we go here, go to the dashboard, then it is visible like this here

in the history, we are getting redirected. So we want to say that

thirdly also do not redirect the person to the history

page. If the user links onto history from

the login dashboard, okay, instead of

the logged in dashboard, we want to do something else. So, if we

go here, go to the dashboard. So, when they click on history, instead

of sending it to the dashboard, let's close it once so that

you see, instead of sending it into a particular history page, what will we

do? Instead of loading the history into the

dashboard page, only for a better user experience. So, to

ensure a good user experience, we will perform these things. I have

made it clear. Okay, let's see what other changes can be made

. By the way, how many images were processed? One image was processed. One credit remaining

in one month, one credit in one month. What was the average time taken? It took 6.7 seconds.

And this is our image. So, there is also a download button here. So, I will change the color of this download

button. I am thinking about it.

Also change the download button color and make it premium.

Premium both on hover and inactive

state. So what is hover and inactive state? Like I hover on the download button

. Okay? Now look, I will tell you. What is inactive state? Inactive

state means there is no interaction with the download button. If I

move the mouse over the download button. Okay? If I move the mouse over it, its

color will change. Suppose I am moving it over it. You can see its color is changing

on hover. So, that's something that I want premium, so I'll make it premium.

Okay, so the status is completed. When did it happen? It was 6 minutes ago. If

I click on Action View All, all will be visible. But it's redirecting here,

so you can make any changes you want. Otherwise, I think this is it.

Fifthly, let me also mention this. Okay, I wanted to explain this separately, but

now what are we going to do? We're also going to white label the website. So I

'll also say white labeled this website. Worry,

what is the spelling of Worry, whatever it is, Worry, it might be

Worry, the lovable

logo is there, it's removed. And I want one more thing,

I mean, a person's wishes are not fulfilled, that is, I want

an i button to appear here whenever I hover over it. So, here I'll actually

write the sixth point. Let's complete the fifth point. But first, let's

select this one. Also, put an eye icon above this image. If you hover

over it, and click on it, it will open a small pop-up window to

display the image,

so one could see the preview. So, I just want an eye button that I

can click and this image will open like a pop-up, that is, it will pop up and

appear in my window, so I can actually see its preview

. So, this will be mine, and let's complete the fill. Also, at the top level, this

website, wherever the Lovable logo is, is there. Remove it and also change the text and

everything related to Lovable. So that no one understands

that it was initially created with the help of Immersable.

So, where is the Lovable logo? You can see this one above, we call it the Fab

icon, which is visible here. The logo is placed here. Then, let's say

we go to GetUp. Okay? The code we pushed to GetUp and the changes

we made are all here. So, if we search here, what was

its name? BG

YT YT Get Hub in it, was it the same? No, no, it wasn't. I'm

saying its name. It must be Snapc. Snap Snapc AI Studio. Okay

? So, we have five commits on this. So, here you can see that three days

ago, we added Razer Pay, etc. We also deployed it here. So here

There's a Redmi.dot file, which is a Redmi file, basically visible here. Welcome to your

Lovable project's project info. You can see that it has all the "Lovable" stuff

written on it. It's not white-labeled, though. That's why I

'm calling it white-labeled, according to SnapC.

The only thing that should be

there is SnapCat.

Okay, so let's just hit enter once. So,

I've asked for six changes. Let's see what changes it makes. The rest

is accurately tracking how many images have been processed?

How much is remaining from credits? How much is this month? So, it's properly linked to the database. I

can change the name, etc. And I've even shown you proof in the database of how things work

. Now let's wait and see how our changes look. So, okay,

guys, our changes are done, and here it's told me what

changes it's made. So let's try things out. Ah, the first thing is

the download count the first time on the upload page. It fixed that as well. So,

we'll upload another image and check it. Credits Remaining on Upload Page.

So, Credits Remaining will appear on the uploads page and it will also be white labeled.

So we'll check that. Let's refresh it once. Look, the Fab icon

is still there. So I guess I'll have to delete it. So let's see

how to work on these things. So okay.

If we hover over this image of ours, you can see the i icon appearing.

If I click on it, a preview of our image is also visible here,

which I can zoom in a little here again. Okay? You can also see

the zoom button here. By the way, this is an extra feature. You

can ask for it if you want. So let's cancel it out. So it's working fine

for our image. And then, look here, he's made the download button look premium.

So, basically, he's copied and pasted the same style as above. So, if I

go over the download here, you can see it's glowing nicely. And

clicking on download, it's downloaded. So, if I refresh it,

it's not counting the downloads. Again, I'm downloading, so it's not counting. So, I

can also tell him, "Hey, again, I'm downloading, so fix

the logic." So, he hasn't included that. He's only included the download once. So, multiple

downloads should be included. So, I'll keep typing here. Also, if the user

downloaded multiple times, then make sure to count it

as well and display it in this. What would you call it? In this,

I'm trying to select our area.

Yes, done. Select in this.

You make sure to add one column as well

to display the total number of times

someone has downloaded

the particular

image. Okay? So, this particular image option is here.

Okay? Let's see what's left. Okay? Now, if we go to History,

it opens right here. As for History, this

is also correct. The History section opens here. And here we also have a preview

option, which shows all the previews. So, it's all good. So, okay

. What other changes did we make? We made some other changes. Credits remaining on

the upload page. So let's go to the upload page once. So,

let's go here. Click on "Start Removing Background." Here,

let's upload the image. So, let's upload this image again

. And here you can see the credits remaining one. Now, look,

I'm going to do something really interesting. Now, we're going to go to the database. And here, we're

going to go to user profiles. So after going to the user profiles, we

are going to do a very cool thing here and that is,

instead of one in the credits remaining, let's suppose I write five here, so now you

will see that the credits remaining of this person has become five. Okay? I

did a live update and the live changes happened here. Five credits remaining. Think

how cool this is. If I make it 1000 here, then what happens is that

if any technical issue comes up, the technical team will look into it, so what the technical team looks into is

that they make changes on the database. If the other person does not get access or the other person

If the user can't use something, the feature

can be enabled from here in a jiffy. So, if you make changes to the database, the item is available.

So, you can see that 1000 credits have already been received. But you don't have to give 1000 credits

. We only have to give it one credit. Okay? So, we're giving it one credit.

So, by giving one credit, we can remove the background again. So,

let's click on the remove button. And by the way, we clicked remove to remove the image. Otherwise, we

'll remove the background of any other image. For example, let's say I

want to do this. This video of the getup was uploaded. So, we'll

click remove background on it. Now, let's see what happens. How does it count? So, it

's uploading. This may take a few seconds. Let's wait. It

's taking a lot. It shouldn't take that long right now. By the way, we'll also subscribe once by clicking "Get More" and

see what happens. So, I

don't see any other changes. I just think we need to change the Fab icon here.

Also, make sure to change

the Fab icon. Remove the current one

and put the SnapC

logo on the Fab icon as well. So, I'm telling it to put

the same logo on the Fab icon. Okay? Fab icon

as well. Okay? So, I'm just going to tell it this and hit Enter again

. Let's make the changes. Ah, why did it fail to process the image? Why did it

fail? For that, we'll have to go to Na10. Let's go to Na10.

Let's go to Execution. There must have been some problem. So, it was taking about a minute here.

It could have been a problem with our API or something. So, there's a problem with

the ClipDrop API . "This service was not able to process your request." So, why

couldn't the request be processed? An internal error? It could be an internal server error. That's

why we have to add fallbacks and other features. How to add fallbacks

is a separate topic for N10, and how those things work. So,

we won't even discuss those production-level things. Otherwise, the video

would be incredibly long. It's probably over 4.5 hours long.

So, our credits here most likely won't be deducted. So, let's

move on to uploading the image. So, we'll have to do that too. If it fails, there must

be something. So, what do we do now? Let's select another image. Now,

let's say I ate this here, so I took a photo of it. Okay?

What's the background remover for it? My face is visible too. Okay, okay. So

what do we do? We'll pick any random one. So let's suppose I

search for Rolls

Ryce, Rolls

Ryce, and then we'll remove the background. I guess

this one or this one looks better to me.

Okay. Let's give it a little Mr. Bean-esque wipe, as if it were Mr. Bean's car. So

let's copy it, and

that's fine. Where did the background remover go? Here it is.

Let's paste it. Okay? So we pasted it. You'll remember we enabled

the clip-drop feature, so if I copy an image from anywhere on a website

, it will be pasted here if I just press Control-V or Command-V. So

now we click on Remove Background. You can see that one credit

wasn't cut. So it's great that our image was successfully uploaded. So it

didn't cut this credit at all. So that's great. So it's uploading.

Let's go to Execution here. So you can see in the execution. It's taken more than

12 seconds, man. I mean, there's no internal server error.

This one already had an issue. It's taking 21 seconds. I guess some API

issue. The background has just been removed. So, at most, these

things have to be handled. It's a production thing. So, I can't say

anything about it. What will happen now? Uploading this may take a few seconds. So, we can only wait

. We can't do anything. So, remove the public Fab icon. It said all these things,

okay? If we go and copy this and paste it here.

So, what did it do here? It changed the Fab icon. Now you can see

there's no Lovable branding here. There's a Fab icon of our Snapkut,

which is visible here. So, Snapkut is everywhere. Features printing. Now, let's say you

need to change some content. If you want to change the pricing, you can do so. Our 499

You can make it triple 9. Change the content here. You

can easily select it and say. What will the content be? What are you providing? Page as you go. So many

things can be done design-wise. But we're not doing it right now because

I want to release some separate videos on how to design your database,

how to manage more security, and how to make your website more secure.

Here, we're creating our API, creating a web server,

through NA10. We'll need to add security to it as well. There

's no authentication, etc., in it. We haven't added anything like header auth, etc. There

are many other types of authentication, etc., with which we secure these things. So, we

actually need to learn how to do that so that no one else can misuse our ABI.

So, that's what we're looking at right now. So, it's been running for 1852 seconds now and it

hasn't been removed. So, it's there. There was an error processing your image. Please try

again. So, dude, it's not working right now. So, never mind. Maybe

there's an issue with their server. It happens quite coincidentally. But only during the tutorial. Okay, guys?

So, you can see everything is set up here. It's all working

. Let's try the Pro version once. What do we do now

? Now, with the account I'm logged in with, click on "Start Pro Trial."

And let's say I'm not logged in. I've also implemented this logic.

What happens if I'm not logged in? I'm not logged in. And if I click on "Start Pro

Trial," I'll sign in and create an account to upgrade to Pro. So this popup is showing

. If I want, I can show the popup in front of me. The toast is showing below. We

call this a toast that appears below. Clicking "Start Pro Trial" shouldn't

create this. A popup should appear above it. Okay? I have another idea. So

try this yourself. I'm describing it because I now believe you're capable

. I've made so many changes. So I'll click "Start Protocol."

It's not working. So it's asking me to sign in. I'll sign in, create an account, and then

do this. Now it's showing me the payment option. So, this is a test, so I

'll do something. Go to UPI. Here I type "dest@," "

OK," "sbi verify," and click "OK," and the payment will be made.

Let's see,

"Okay, confirm this payment. Our payment has been made,

payment successful."

Okay, so our payment has been successfully made, so the opening is showing. Maybe it

created some kind of thank you page or not? Because when someone makes a payment, a thank

you message should appear. I also want this. So many things. Look,

so many ideas are coming to mind. So I want you to execute them. I'm

just giving you an idea: you can show thank you, you can do this, you

can do that. So many things happen. And if you want to know

what happens at the production level? What exactly

is involved? You have to create a thank you base. What is a complete workflow?

What is wire framing? When we launch an app, any business, any

website, what are the processes involved? How to define the process

, how will the website work, what will be the flow of the user experience? So

what do you need to do for that? Comment. Okay? You comment and tell me if you

want a video on this, and you'll get the next video. Okay? So,

I'm making this many hours of videos. This one, I'm describing, will still be short. So

let's refresh. And this is taking a lot of time in processing.

So these things need to be improved. What is happening right now is that

a person has made a Pro payment but he doesn't understand all these things. And okay. The Upgrade to Pro option is coming here

. So if I am upgrading to Pro Pay, then

it is not able to handle this thing here. So let's fix this also.

So let's look at this also. Also, if someone is trying to

upgrade, then make sure to show a popup for upgrading

showing the highlights and if click from the home page then show

direct payment option, but if the user is not locked in then show popup

to login, so create a popup separately, so

for authorization we will tell it separately, authorization means login signup page, so

when someone clicks on the upgrade button, then we have to make sure how a popup and

Upgrading showing the highlights If someone is trying to upgrade then make sure to show

a pop up for upgrading showing the highlights and if click from

home page then redirect so what I mean to say is this normal upgrade to pro

clicks on trying to click on

upgrade to pro from anywhere then ok pop up separately so this is the thing I want

and also after success total purchase show proper thank you message

message if payment message and

and and update the purchase

in database as well. So

properly handle it in database

using the MCP using the Super Base MCP server so

let's also check this once, in the cursor settings in Super Base, this one

is on, isn't it Super Base Snapkart, so you can see that our tools are enabled here, it

can enable so many tools, it means it can use them, so okay

let's come to the browser tab, I guess this is enough, handle it database using Super Base MCP server

after successful purchase, so after every successful purchase it can handle it, okay

so this is what I wanted and you can change the rest of the content etc. friend, here there

is also 699 three pay as you go credits, here start for free contact sales, okay

friend and I don't feel any changes, this is the main thing that I made the payment and

I did not get any confirmation etc., there is something, that is the thing, and okay

let's click done once and what can we do if the other person

makes the payment If you need to send him a confirmation email, you

can do that too. If you go to N10 and want to create a workflow, you

can click the plus button at the top. Now, if I

go back, let's first open it. Go to Overview. Okay?

This sidebar opens and closes from here. So, here we'll create a new workflow.

Click on Create Workflow. After clicking on Create Workflow,

go to the first step, and you'll see the option "WebClick."

So, here again, we'll select a webclip that's connected to the website. And here, we

'll make it a post request and a purchase.

Okay? After making a purchase, I'll create a URL this way. And I

'll update it there. After updating, I

'll put the data of everyone who makes a payment on Google Sheet. So we'll go to Google Sheets, and there

's an option to "Append Rows to Sheets." We'll do that here. So, we'll do that.

And what else will we do here? We'll do "Append Rows to Web." And then

we'll also send an email. So, there's a Gmail option where we can send

a message. So, this way, this message, etc., will be sent here.

So, we're going to do these three things. Now, look, the message here,

my Vivek, will probably be from the official online form. So, we'll see how

to do that now. But this could also be our workflow, where we

can write a confirmation email. So, let's create this instruction. Okay?

What will our instruction be? Let's go to the web and directly copy the production URL

and call it All Now Also

Send the Purchase Data to In This Web Share Every Information in a Properly

Organized Format Okay

and also help me to draft a purchase

confirmation email. So also help me to draft a

purchase confirmation email. I've written this so that whatever email I send comes

. And here I would like to write the instructions a little more clearly. Make sure to

provide me with both HTML and

the final output. Or what I'm doing

is creating a confirmation email. I'll tell you separately about the purchase

confirmation email here in the chat section only. So, please

provide it to me in the chat itself. In the chat, I want the

confirmation email

to include a link to the website

to remove the background and all the benefits

and features included from

the platform. So,

writing "Industry Grade" will yield some good results

. An industry-grade email that feels super professional.

Okay? So, I'll write this. Then I'll click "Done." So, my

information will be at this level as well. So, man, he was probably just making changes

. So, where the upgrade pop-up is used. Okay? So, let's use it once.

Let's see. So that's what he did. So now let's go here. Let's go back.

Click on "Start Pro Trial." Now you can see a pop-up appears

saying "Sign in to upgrade." So let's click on "Sign in to upgrade." So

here, it's saying "Let me sign in." There are both options for signing up and signing in. If

I don't have a Google account, you can do that.

Okay? We won't talk about the rest of that in this video.

How to sign in with Google, because you have to create an account through Google Console, etc. You'll have to create its

client ID secret, and you'll have to create a web client. You'll have to enable apps,

so that can be a little confusing. So, I need about 15 to 20 minutes

of your time for that. So, to avoid making the video too long, we won't do that. So now you

can see that things are working this way. So, okay, our report is okay

here. Now, let's sign in with a new account and see.

Okay, start Pro Trial, sign in to upgrade. So what's our email address?

Ours here is Raj Digital.

I might have to open the main menu and see it. Or you can see it from the account.

So, okay, password,

okay, let's sign in. Sorry, I had to sign up. So, I'll sign up here. I'll

copy and paste the email.

Okay, I'll accept. Create account. So, after creating the account, let's see

how the whole process works. So, the account has been created.

It's asking to check for a confirmation email. So, let's confirm that the email has come from Super Base. So,

you can make this Super Base your own. Okay? You can personalize these things too.

Let's take a look at that too. If you want to personalize Super Base, like the email

that's being sent, there's a separate procedure for that. Again,

I'd like to do a dedicated video on this. So, it's a pretty interesting thing, if I

can explain this too. So, you can see that two users have already joined, Raj. And if we go there,

there's an email confirmation sign-up. What's included in this confirmation sign-up?

How do I do it? You have to do multiple things here. You

have to confirm your email. You have to add records and other things to DLS, so it

goes through your custom email. The name gets changed. So, for now, it's

going through Super Base. We'll talk about the whole white-labeled thing

in another video. So, let's click on Authorized By.

Auth Application Approval

, or I guess what's this Auth Apps for? Welcome to Super Base,

create your first project. This is from January 31st. Sorry, guys, I

clicked on the wrong email. Here we go to Spam. This is our spam. It

used to come from Super Base. Confirm Your Mail, this email

is quite fishy. That's why it's coming like this. So I clicked on Confirm Mail. So, ours is here

. Okay. We're already signed in. Let

's click "Start Pro Trial." Now you can do this too. As soon as the other person signs in,

if that was their previous step, the payment option should automatically appear

after signing in. We can do that too. So, after opening the payment, it

's asking us to enter a phone number. So, I could have entered the wrong phone number.

Why can't I enter the number? Okay. It's there.

2, 3, 4, 5, okay. Let's try the payment once using UPI. So, test @

OK ICICI, OK access, now we'll verify and pay. But

before that, let's see if he made any changes here. So,

load your API sense on the web. So, I guess he did. So, let's do one thing:

publish this N10 workflow, because if we don't publish it,

we won't receive requests. So if we are doing it then

let's do it properly. So before publishing we will have to solve the problem. So for this

we will deactivate it right now.

Deactivate both these nodes of ours. Okay? Let's publish it

right now. Publish

got it. Okay? So now ours has been published. So whatever data is there, we

will receive it here. So let's pay here

and see what happens. After payment, a thank you message should also come.

So let's do it. Confirming payment was successful. Okay?

Redirecting to one. Okay friend, no thank you message came.

Now see, thank you did not come. We can say that the thank you page did not come again.

So this is a matter of concern. Let's look at the executions.

Is any data coming in on the executions?

No data has come in on the executions either. If we look at the URL I

provided, it must have been the production one. Replace your s.com with your real domain. Okay, so

I didn't even read the instructions. What were the instructions?

It has done everything. It has done the confirmation mail. Subject: your snapchat ai pros active

start removing background. This is the email. It loads your API. Sends your

Confirm Pro API after a successful Pro purchase. You can map these fields into the

confirmation mail. So it has changed the auth URL. Admin user. Fixing the auth API

URL. Superb. Doesn't include REST v1. Adding a web call in the Confirm

Pro API to send purchase data to anyone. Then drafting the purchase confirmation. So,

okay, has it added anything? For example, there's nothing in the key

. There's nothing in the key. Why isn't it sending data?

Let's go back and see in the execution. There's nothing.

So what was our web call? That was it. That's right. I am not receiving any data after making

successful payment. So once we do this also

, successful payment and also

no thank you page is coming as well

and okay

we have to check console log dotb also if there is any error make

sure to include in the console as well according to all possibilities.

So I am asking to add console log. Basically if I

face any problem here then when I make a purchase then I will make the purchase in such a way that whatever

problems are there in the console are visible here. So here we'll look for "unaccepted

end of JSON input." I don't know what it's referring to. So, we'll look for it.

First, diagnose it and fix it properly, and then

I'll check and let you know. Okay, so I'm telling him this. Right now, I'm planning my next

moves. So let's do that. Till then, let's come here. And

after coming here, what I was just telling you, I was telling you, if

you want to send a confirmation email, how can you do it? Right now, I haven't received any data from the web

, but even then, we can do a lot of things.

Why is it saying "connection lost?" So let's check it once. Okay. So, let's

activate it again. Go to Sheets and go to Google Sheets

. Here you'll find the option to create a new credential. My

Google Sheet is already connected here. If yours isn't,

click on "Create New Credential." Here, go to Sign in with Google and sign

in from here. So, the account I'm going to use is Vivek Officials Online.

Okay? In fact, I'm already logged in. So,

I'm not logging back in. But when you log in, it will be created something like this

. So, the first and second ones mean the same thing. So, if I select the second one,

all my Google Sheets will appear here. It says Enable to Sign In

because I canceled it. Let's select the first one.

After selecting the first one, you'll see all my Google Sheets

. Now, what is Google Sheets? Google Sheets is a platform where you

can manage data. You can find Sheets here, just like Excel.

So, if we go here, we'll take a new tab on Google and

go up to Google Apps. So, here you'll find the Sheets option. So

you have to click on this sheet. After clicking on this sheet, there

is an option to create a blank spreadsheet. You can create a blank spreadsheet here.

After creating a blank spreadsheet, you can go here and enter

the date. So, when did the person purchase the item

? What was the person's name? What was the person's email? What was

the plan type? What was the price? We can collect anything like that. So

let's see what comes up. So let's make it bold. Let's make this background

yellow. So, if I map it this way and write here, A BG snapcut

snapcut A pro user data. Okay? So if I

write this and go to Na10, I can select it here. Let's

go back to my sheet once. Let's refresh it.

Look, it's not coming up here. So what do we do? We type in the snap.

Look, it came up after searching. So, let's leave Sheet One here. Now, what about Sheet One?

This sheet is visible below. If you click "plus" here and create "sheet

two," it will appear here. Along with sheet one, you'll also

see sheet two. I'll delete this sheet two here because I do

n't have a use case for it. Otherwise, I'll delete it. So, our sheet two is deleted. So,

here we need to properly map the date, name, and email. So,

our Google sheet is done. Now, after this, our mail is done. We also need to work on the mail. So, let's turn it

on. Under "credentials," go to "create new credential."

Go to "sign in with Google." From where I want to send the email. Which email address is that?

It's Vivek Official. So, we'll send it from there. So let's see what happens.

So, okay, here. It's done. Let's select all. After selecting all,

click "continue." After clicking "continue," it's okay.

We're signed in. Now, which email address do you want to send it to?

You can see which name you want to send it to. So, you select who you want to send the email to.

Once we've created the Google Sheet, we'll do it. So, what

's our subject? So, let's accept it. Whatever this

is doing here, it wasn't accepted, so it

was loading. Let's go upstairs. Let's see the confirmation email

. Your Snapchat AI Pro plan is active. Start removing. Now, you

can personalize it as you wish. We won't go into

personalizing the email too much right now. Otherwise, the email looks fine to me.

I'll copy and paste the subject line. This is our message: Hi Customer, this is

your Pro benefits. If you have any questions, reply to this Snapchat team.

Okay? Let's copy it. And what will I do after copying it? I

'll go to Gemini or Chat GPD. So, as I go to Chat GPD,

okay? I'll draft the email through Chat GPD. And we'll do this

in proper HTML. Okay? Now I'll say, "Properly

draft this mail in HTML. Also include buttons and hyperlinks in

hyperlink hyperlink.

So include hyperlinks. Hyperlink means some text is clickable,

redirecting, some button is redirecting. So that's what we're

doing. So that's what we have to do properly." Buttons and hyperlinks. Properly draft

this mail in HTML. Also include buttons and hyperlinks in the email

theme. The email theme would be in

blue and purplish. You can also write the exact color code if you have a color code. So

I'm just writing this: "Here is the content."

And I'll say: "Here is the content." And if you have any doubts

regarding the link, the exact link is put in it, then just

tell me. Okay? I'll say this. So why am I drafting this in HTML?

Because the email should look beautiful. It should look proper, like it has

buttons. The other person should be able to interact with it. It should look very beautiful, with

different colors being used. So, that's why I'm drafting it in HTML.

The benefit of drafting it in HTML is that the email will look better. So, it says: Logo

URL, your logo, optional dashboard URL, contact URL. So, it's given everything

. Upload URL. So, okay. I'll give it the upload URL, which

is our upload page. So, look, right now it's our local host. Right

now, let's just draft it first and see how it turns out. So, it's

completely drafted our email. So, this is our email. Let's copy it.

Go here and go to Messages. The first thing you need to do is create this email type HTML and

then copy and paste it. And then after that the next thing is that

you have to go to the options here. What do you have to do first in the add options?

You have to turn off the Na10 attribution. What will happen with this? There will be no Na10 watermark on your email.

Go to the add options and write your Snap

cut in the sender name. Okay?

Let's go with the name of Snapcut like Snapc. And to email, we will send it now as Raj digital fb@gmail.com,

so let's send it and see what happens. So for the execute step, it

probably wants to execute the previous step. So let's close the sheets

. So it is waiting for the trigger also. Let's do one thing. For now I

have to try sending the email. So I will take another trigger.

We will pause this one.

Okay? It's paused. Let's turn off the webcam. There

is a manual trigger here. If I write 'manual trigger', then select the manual trigger,

so that you can trigger without any execution. So here we

execute it. In the execute step, let's check once whether the mail has come. It

has been sent. So the mail has been sent. So let's go to the inbox. So you can see that your

Snapka AI Pro plan is active. So in this way you will get an email. Snapka AI

Pro activated. Hi. Now we will show the name here dynamically. Remove

image background, what's included in your Pro plan. Go to dashboard Snapcat team.

Okay? So I guess it is well formatted. You just have to replace a few things.

Suppose you want to put your logo, then we have not put our own logo, those are the things, so

you put your logo in support, in the dashboard, these things will be clickable, so here

you just have to give the link to AI by copying and pasting and I believe that

after watching such a big tutorial, you will not be able to do this, this is a very small thing, okay,

so I don't want to talk about small things with me, so okay, let's come to the cursor,

after coming to the cursor, let's see what all things are there, what to do when

testing deployed on Versal WebK response handling

the WebK call now use dot then to lock the response, okay, if not okay confirm proc

dot cache locked, if an it and still doesn't get data inversely looks for the confirmation

proc, okay, console login ABI Versal server, okay, console logging front end, okay,

ABI base URL for confirm proc and create order, okay,

if get otherwise, so what all has it created, I mean, it has a bit

complex I've done it. I feel that way, personally.

Okay? I'll read it once and then tell you. After reading it, I feel it's

not set up correctly. So, I want to show you this

practically because you might also run into this problem

. So here I say, "

Make this process work on both local and universal as well, but don't link both of

them. Keep them separate

for proper testing and execution."

If I need to update anything in the DE env

file, then let me know.

Answer me properly with valid reasons. So, this way I hit enter. Now it's

entered, and again, I'm late. It's Feb 3rd. It's 7:13. I

've been up since 4:00. Don't miss it. I woke up early after the gym. I sat down early to shoot.

But the tutorial is still taking time. I don't know how many hours the video will take.

I don't know if it's boring.

I'm just trying to impart as much knowledge as possible, because this is something that's hidden. People tend to show things quickly,

saying they cut a lot of things out of the video. They built an entire website in 20-30 minutes.

Now, what problems or challenges did they encounter? Things couldn't be executed.

Things couldn't be understood, but you couldn't learn them. So, I want to convey that feeling

in this video. After this, I'll also make videos in which I

'll quickly build a lot of things in 20-30 minutes . But these things aren't addressed

properly. They don't show that there's an internal problem. They

just show you that the purchase is happening. You're getting a subscription.

But what about the back-end? How will it work? It requires sending email confirmations.

You'll create a web API and interact with the NM. You'll draft a full email.

How will you map it? There are so many things involved. Literally, you

'll learn so many things by watching this entire video. Think about so many things yourself

. So, let's move on. So, I guess he's created it. He

's said to add a local hand for the Post API Confirm Pro in the white plugin. So,

the full front end runs locally, keeping the front end, okay? So, updating the dot env example

document API baseline, removing the optional.

Okay? So what has he done? He's provided something in the example ENV file

. So, he added something earlier. So, we don't

need to add certain things to the locally deployed. Okay? This thing is already added to the super base.

Okay? So, what is he saying now? Again, no white API on Versal, the browser calls the

same origin, and Versal routes those origin server listen functions. Do you need to change the

current.env. If you already have the variables of the local super base URL and

On eraser you do not need to add anything, okay remove API base, it did something,

okay so there is no need to know what was done, who did it, but understand

that we have done this thing in which locally 1v top dev only versa, okay so I guess now

I will delete the account,

go to snapkio, go to the Raj one. Go to the dashboard.

I logged out here. No bro.

I had to delete the account. I had to delete the account only. So okay. Once we

. And here we will delete the account. Delete account.

Delete confirmed, okay. Couldn't delete account

expected. End of js. Now, there's a problem with delete as well, so I'll have to delete it.

So, I'll do one thing. I can also tell it to delete

the account of Raj digital fb@gmail.com

from the database. Now, if I say this, it will also remove the

account. Then we'll make the purchase. Remove it once.

Look, I was making some changes in between. So I thought I'd show you. This is also very

useful. Like here, it was saying, "I can't access your super base

project directly by creating a sequel script you can run." So,

it's asking me to run a script and create it. Then

I said, "Why can't you access the MCP server? You already have to try to call it." So

I just wrote this, and then it called. So, it could happen that the AI won't understand

that I have access to these things, but it does, so you'll have to tell me.

Okay? So make sure to make sure of this, and yes, it did the rest. Super Base MCB

Server Snapkart used to run delete. Okay? So it has run. This first

attempt failed because PUBG Payment doesn't exist in the project. Let's refresh it once

. It has been deleted. I don't think. So it has deleted it.

Let's go to the database and see.

What did we have in the database? Back Authentication, here is our table editor.

What is visible in the user profiles? It is deleted in the user profiles.

In Authentication,

how many users do we have in Authentication? So there is only one user, so this login of ours, I guess there

must be some cache etc., so the rest of our things have been deleted.

Okay, so now we come here,

click on Start Prot Trial, okay, let's refresh, I don't know why it is saying this,

let's click on Sign Out, and here it is telling us,

okay? Click on Start Pro Trial. Now,

even if there's a major issue, I won't fix it because the video is already quite long. Okay?

To fix it, we'll have to look at it in different ways. So, let's inspect it

so we have the console open. Okay?

. Now, our email ID is Raj Digital FP.

Accept create account.

Okay? So, check your email for confirmation. So, let's check the email for confirmation.

Go to Spam. After going to Spam, okay. Confirm your supervisor.

Confirm your email. Okay. Our email has been sent. Confirm.

After that, we sign in again. Digital,

okay,

click on Sign In. Now, Upgrade to Pro. Now, look, the same popup appears as I

instructed. So, click on Start Pro Trial 499. Okay,

the payment is coming. So, it's showing something here. But I guess it's fine.

There's no problem. So far, we'll be making payments through UPI on Google Pay.

Why isn't this clicking? Let's go to Continue.

So, Google Pay. Okay. Clicked.

Confirming payment, so the payment is being confirmed. The payment is confirmed.

It will redirect in a few seconds. Okay? Thank you for your purchase. So, guys, it's finally here.

Post Request API Confirm Pro. I don't know to which page it's

sending the post request. Internally, an error is coming up. Confirm Pro. So, I guess it's

sending it to our local address. Okay, so this local address is our API Confirm Pro. So,

it's not on the URL. Service not configured for Pro upgrade. So, there's some problem.

We'll check it. After uploading, let's copy it to the console. So,

upload an image and go to the dashboard. So, if we go to the dashboard and see, and click here, it

shows two credits remaining.

The payment was made, but the user wasn't upgraded to Pro

, and this was in the console. Okay? So, you have to lock the console like this. You're

having a problem. So, look, I've

explained the testing and debugging steps in a very detailed way. So, just copy and paste this. It

will fix it for you. So, let's check on NA10 to see if our

web is receiving it. By the way, our Webbook is off. This is also a problem.

Okay? But we didn't publish it. So, I guess it must have come. This is a test

. Let's publish it once. We publish it. Just check this first,

our email is checked. Okay? We take this. We open the Google Sheet.

We publish it. Okay? So, our email is draft. Everything

is there. We just need to send it to ourselves. It wasn't sent.

So let's see, guys, what happens. So, there's some issue here. Calling Confirm Pro

Upgrade ID Razer Pay Success, Razer Pay, shows that the order ID,

payment ID, and this has been received. So, once the order ID, payment ID, is received, the same

should be sent there. So, I'm not seeing the post request for

our web app. The one for pro was in the console. And yes, I

should have also noted that the data on the web app didn't arrive, but I forgot to write that. So, let's see

what it's doing. Okay, so it's saying a few things: Restart the

development server. Retest the flow. Run through the payment again. Razer Pay test mode is fine.

After success, Confirm Pro will verify the Razer Pay signature. Update the user profile.

Plan Pro credits have expired. Okay, so this will check it. So,

what we're doing now is we'll go back to Upgrade to pro.

Click on Start Pro Trial. And

here, click on Google Pay. Let's see what happens.

This time let's see that

the payment has been confirmed. Okay.

Here, still in the Confirm Pro field, go to dashboard, upload an image.

Still the issue is coming, so let's copy it to console.

Still the same issue is coming, I guess, and also

also, this is not sending any data

to the web, I told you. So this is the thing. So let's see

what happens here. Let's not go to the web also.

Okay? It is saying one thing that nothing, the super base service role key is empty. So,

the service role key is not there. So, let's go to this ENV file once

. So, it is telling itself that the super base service role key is all there, but

you will have to enter the service role key also. So, we put the service role key. So

for the service role key, we go to Super Base. Here we have to go

to Project Settings. In Project Settings, we will go to Data API.

After going to the Data API, the next place you need to navigate to is not the Data API

, sorry, but the API Keys. After going to the API Keys, we'll go to

the Legacy Non-Non Service Key. So,

we'll reveal and copy the service secret. And remember, it shouldn't be leaked anywhere

. I'll delete the project.

I'll delete or regenerate all the code you see, so you won't see it,

but you don't have to reveal it anywhere. You'll also

have to enter this same thing in Versal or the environment variable. If you keep it, we'll keep it all. So, now

we're done. Let's try making the payment again and see what happens.

I'll pause it for now, just make the payment, and see what happens. Otherwise,

the process will repeat itself. Guys, if I tell you, it's literally

showing the same thing right now. I think I'll

have to restart my development server, because I just added it. So, I

'll restart it once again. Look, there's no need to restart the development server.

Just delete it and it will be killed. So, let's do one thing

. We'll test things at the production level. We

can test things at the production level too. So, if I go

to Terminal here, Snapkat AI Pro opens in the integrated

terminal. Now, here we'll do Get Status.

After getting the status, there are many things. Get Add Get Commit

Hm M Then after that, I already told you this procedure. So,

I won't take much of your time on this. So, Get Commit M, what message do we want to enter?

Final, finalized the website. Okay? Let's check the Get Status. Now

It's asking us to push the gate. So let's push the gate. This will be pushed. So

we'll add all these things. So let's copy it. Now we'll go to Versal

. After going to universal.app/versal.app,

our next step will be to navigate to snapchat ai studio.

Okay, let's go to Settings. Going to Settings, I told you that you

have to go to Environment Variables. So now we'll go to Environment Variables.

After going to Environment Variables, we'll click on Add Environment Variable.

Here we'll enter the service role and the value.

Copy it, the value is also there. Save it.

So it's asking us to redeploy, so let's redeploy.

So click on Redeploy, okay? So the redeployment must be happening. And

if we go and see in Deployments,

this is just Finalize the Website. It's already deployed. Now

we're redeploying it. We're doing it after adding environment variables

. So let's see what happens. This is our final website. I guess it

should work at the production level. Now we've made all the changes. Meaning, everything

is working, functioning. So there's no problem. So, for the overview, just

fix this N at 10 issue and that's fixed. Then I'll integrate your domain and

we'll finish this final video. This

is a pretty long video, man. I have to go to the gym. It's 7:33.

And I'm running super late. It's very crowded at this time.

And I don't know why this whole blackout is coming.

Why is it coming black? This seems like a problem,

do I have to solve it separately? Let's inspect it once.

Console.log: Super Base URL is required Super Base URL.

A Super Base Auth is not configured, and add wide SuperB and wide SuperB NAT.

So let's take a look at what's here: Settings

Environment Variables on Razor. Okay, the Super Base Service Role is

only there. So, after adding Razor, we added the database, and we

didn't add any database-related things. So, we'll have to add more missing ones. So, if you

ever have one, open the console and see. If you don't understand, ask the AI, he'll

definitely explain it to you. So, enter the Super Base URL. Okay

? Super Base URL. So, what were you saying here?

Enter the URL related to SuperB. Okay? Super

. What else do we have? Super Base URL, normal Super Base URL.

is our white, this white one,

I guess, okay, this value will remain the same. Okay,

copy paste,

paste. And after that, we'll also have to enter this.

paste this key. Then, after copying its value,

we'll finally paste it. Okay? So, this is what we're going to do. So

let's save it now. And we'll have to redeploy again.

Let's click Redeploy. Now let's see if things should work. So,

there's a slight problem at the production level. You

have to scroll down and see. So, I hope you've got a pretty good idea of

how things are executed at the production level. So,

yes, it's redeploying. So, let's wait. So, guys, our deployment is complete

. No, the build file is being created right now. But the View Deployment option is here.

So, almost done. Building, hopefully

. So, guys, it should work right now because I'm really frustrated

with this thing not working. And finally, look, it's working. It's loaded

as a preview. Let's reload it here,

and boom, our website is ready with all these things. So, okay. Now, we

'll copy it. Go here

and make a purchase from here. Now let's go to the merceal app. Sign in. Our

account is already created.

Is it signed in? So we have signed in. Click on upgrade to pro.

Let's inspect it once. Okay? So that we get a better idea.

Okay? Console. Okay guys, let's do it. Start pro.

Okay. The cursor is opening. Why are so many issues coming?

Is localhost localhost png taking a lot of pages from localhost? This localhost will

have to be changed. This is our own version, we will have to use that. I guess only then it

will be fine. Let's see. Anyway,

UPI

is fine. Google Pay

Processing.

Okay. Our payment is done.

Razor Pay confirmation done. Then go to dashboard. Look, our

uploaded image is done. Go to dashboard. If we go there, it

's showing Credits Remaining Two. Our Pro upgrade isn't happening. Guys, there's some issue with this, and I'll

have to solve this issue separately. But you should understand that

we've covered everything at the production level, how it's sent. And you

can do that on this too. I'd like to add a small part on this. This ending

means this is part two. We'll add part three. So guys, this video has literally

become very long. I've explained everything to you. Now I'll have to figure it out a little bit to see

what the mistakes are, where the mistakes are. So I will bring the answer to this

and will explain to you why this did not happen and how to roll it

and plus we are going to complete the deployment by sending an email to any10. So

the deployment has been completed but

we will work on the things which have to be deployed by connecting to the domain at the production level. So some things are pending which we

will cover in the next video. So we will end this video here.

Thank you so much for watching this video. So you watched such a long video and

heartfelt thanks to those who watched till here .

Click on any text or timestamp to jump to that moment in the video

Most transcripts ready in under 5 seconds

One-Click Copy125+ LanguagesSearch ContentJump to Timestamps

Paste YouTube URL

Enter any YouTube video link to get the full transcript

Most transcripts ready in under 5 seconds

Get Our Chrome Extension

Get transcripts instantly without leaving YouTube. Install our Chrome extension for one-click access to any video's transcript directly on the watch page.

Add to Chrome — Free

Works with YouTube, Coursera, Udemy and more educational platforms

Get Instant Transcripts: Just Edit the Domain in Your Address Bar!

YouTube

←

→

↻

https://www.youtube.com/watch?v=UF8uR6Z6KLc

YoutubeToText

←

→

↻

https://youtubetotext.net/watch?v=UF8uR6Z6KLc

YouTube TranscriptPreparing your results…

YouTube Transcript:Vibe Coding Complete Course | Frontend, Backend, Database, Deployment, Payment Integration and more