Hello and welcome back to another

exciting tutorial of greatest tag.

Nowadays, most businesses promote their

product using UGC video ads. These ads

work well, but they are expensive and

timeconuming to create. So why not

automate it? In this video, we will

build and deploy a full stack AI

application that generates UGC style ad

videos using just a product image and a

model image. To build this full stack AI

project, we will use Postgress, Express,

React, and NodeJS. We will use Google

Gemini API to power our UGC ad video

generator. So, let's take a look at the

project demo. So this is the homepage of

our application where you can see the

navigation bar. Here we have the welcome

message and then we have the features.

Then we have the pricing and after that

we have the FAQs. Then CTA and this

footer. Now if I go to create here we

have this form. Using that we can create

the image and using that image we will

generate the video. Next we have this

plans where you can see the different

plan. We can switch to different plan

and get the credits and we will get

different features. After that we have

this community and in this community

user can see the post added in the

community. It means user can create the

ads and they can also publish it in

their community. Now let me sign up on

this website. So I'll click on this get

started. So it will open this sign up

form and if you already have an account

you can click here to login using your

existing account. So let me login with

my Google account here.

After login you can see here we have the

available credits and if I open this

here you can see we have the generate

button my generations community plans

manage account and sign out. If I go to

my generations. So you can see we have

already generated these ad videos. If I

hover it, you can see it will start

playing this video. This video has audio

also. Right? So this is the UGC ad video

generated using a sneaker image and

model image. Let me move here in the

second one. So you can see this is the

second video generated using a product

which is the handbag or trolley bag. And

here we have a same model, right? So you

can see the used images also in this

circle. We have the suitcase or trolley

bag. And here we have the model image

which is used to create this video. And

here we have other details also like

product name, created date. Then we have

the description. And here we have the

prompt also that is used. After that

here we have the option to publish or

unpublish this ad. So if it is published

it will be added in the community. So

the second one is published that's why

here we are getting the unpublish button

and in the first one we have the publish

button so that we can make it public it

will be added in the community. After

that here we have the view details. If I

click here so here we have this result

page. We can play or mute this audio.

And in this one we have the option to

download the image and download the

generated video. Correct. Now let's

create a new ad. I'll click on this

create button and here we'll add the

product image. So let me add one

product. Let me use this handbag image

as a product. Now we'll upload the model

image. So here I'll choose this model

image.

After that here we have to add the

project name. So let me write the

project name my new project. Then we

will add the product name. So the

product name is handbag. After that here

we have to add the product description

which is optional. So let me write the

product description handbag for women.

After that you can also add the prompt.

So here we will add this prompt.

Showcase the handbag in dynamic and

fashionable way. This prompt is also

optional. So we have added the details

here and added the product image and

model image. Now click on this generate

image. So it will generate the image

first. I'll just click here and after

generating it, it will deduct the

credits also. You can see right now we

have 70 credits. So it will deduct five

credit for generating this image and

after generating the image we will

deduct the credit to generate the video.

So just click here.

It will take few seconds to generate the

video because it is generating the

content using AI. So just wait for that.

Now you can see our image has been

generated. And now you can see in this

model's hand we have this handwag right.

So we have uploaded the separate image

for model and bag. So now we have the

combined image and using this image we

can generate the video. In the right

side you can see we have this download

image button so that we can download

this image. Correct. Now we have this

button generate video. So let's click on

this one. So it is generating the video.

Just wait for that.

Now you can see the video has been

generated.

So I'll pause this audio and uh after

that you can see we have this

UGC video that is generated using the

product image and model image and by

adding small details right and here we

have the download button using that we

can download this video and use it for

our ads. So this UGC ad generator is

working fine. Let me just come back to

the homepage. In this project, we have

added the user authentication and

subscription billing using color. Color

makes it easy to handle user signin,

signup and account management. With

color subscription billing feature we

can provide advanced feature and credits

to our member. Then we have used sentry

for error tracking in this project. It

is powerful tool for error monitoring

and performance tracking. It helps you

to find the bugs in the real time and

understand why your app is slow. Instead

of guessing, Sentry shows you the exact

errors, a stack, traces, and performance

issues.

To store user and projects data, we have

used Neon. Neon is a Postgres SQL

database that helps developers build

reliable and escalable application

quickly. After building this AI powered

UGC video generator project, we will

deploy it online using Hostinger VPS. It

is affordable, fast and perfect if you

are serious about building AI tools. So

if you are also excited to build your

own UGC ads video generator, just write

down I'm going to build UGC ads video

generator AI tool in the comment box. I

will recommend you to build this project

and add the live link in your resume or

you can also use it as your college

project. Now let's get started

to create this UGC ad video generator

project. We have divided this complete

tutorial in different chapter. First we

will create the front end which is user

interface. After that we will add the

user authentication. It means we will

integrate the sign in and sign off

functionality. After that we will create

the backend server where we will create

multiple APIs and after that we will

connect our backend server with our

front end.

At the beginning of every chapter we

will discuss the technologies and

thought process also. So first we will

start with the front end. If you already

have a good experience with the front

end then you can skip this part and you

can come to the user authentication. I

will include all the timestamps in the

video description. But for creating the

front end also we will not take much

time because instead of creating the

front end from scratch we will use

pre-built UI template. So let's open web

browser and search for pre-built UI

template. Open this link. You can see

the website pre-builti.com

and then path. You can also open the

homepage using this URL pre-builti.com.

And here you can find different

components.

So you can easily integrate these

component in your react project. So

let's come here in the templates and

here you will find lots of beautiful

template. So I'll just scroll down and

you can see here we have multiple

templates that we can use for free. So

I'm going to use this template which is

pixel.io digital agency website

template. We can preview this template

from this link. You can see view demo.

Let's click here.

So you can see this template is looking

beautiful. Here we have the hero

section. Then we have services. After

that we have pricing.

Then FAQs. Then CTA and footer.

Right. So we will create the homepage of

our application using this template. And

here you can see the details also. If I

click on this view details.

So you can see it has the dark UI

gradient glass effects and uh after that

you can see

we have some screenshot right and here

we have the list of features. So we are

going to download this template. I'll

just click on this button get for free.

Here we have two options. We can

download this template for nextjs

project and we can download it for

reactjs also. So I'm going to create the

front end in reactjs. So I'll just click

here.

So you can see we have downloaded this

template. Let me navigate it.

I'll place this template here.

Pixel io reactjs. Now let me extract it.

I will extract this zip file in a

separate folder. So I'll extract to this

folder name.

So here we have this

pixel io reactjs

like this. Now in this one you can see

we have the complete structure for react

project. Now we have to start this

project. For that we will use VS code.

So first let's create a project folder.

I'll create a new folder here and I'll

write the folder name UGC

project and after that in this one we

will move this downloaded folder. Let's

move it here. Now in this one we have

this pixel io reactjs which is the front

end. So let's rename this. I'll rename

it as client.

We will create a full stack project

where we'll create the front end which

is the client project and we'll also

create the back end. So here we have the

folder name client and in this one we

have the template that we have

downloaded. Now let's right click on our

project folder and select open with VS

code. So it will open this project in VS

code and uh after that

we will start this front end project. So

right click on this client and then

select open in integrated terminal.

So you can see here we have the VS code

terminal and in this terminal you can

see we are at this path client. So here

we have to install the dependencies. So

let's add npm

install.

So it will install all the dependencies

which is used in this template which is

the ReactJS template.

And after that we have to start this

project. So let's add npm

run dev. Add this command.

So it will start this project and we can

open this localhost 5.73 URL in the web

browser right. So let me just copy this

link and open the web browser.

So in this browser you can see we have

the same template and it is running at

our local host as you can see here. So

we have downloaded the template and it

is running on local browser. After that

we have to customize this template and

after customization we will also create

our custom pages or new pages right that

will be helpful for our project. So I'll

just come here and we'll start with our

index html file. So in this one you can

see here we have the title. So in this

title I have to add our own title. So

let me write

UGC AI create AI generated images and

videos

like this and after that here you can

see we have this link tag and in this

link tag we have the fabicon.ico.

So if I open the web browser you can see

the title has been generated here. It

means the title has been updated but the

icon is same. You can see the fabicon

icon in this tab. So to update this

icon, we have to insert our own images

and icons. So you can download the asset

file from the video description. You can

see here we have the UGC assets. You

will find this

link in the video description. So just

copy everything from this assets folder

that you will find in the video

description. Just copy everything and

open our project folder. Then go to

client and assets. Inside this src you

will find assets. And here let's paste

everything. So in this assets I'll paste

the data that we have copied. It means

the files and this logo. SVG. Then

favicon. SVG. Here we have assets.ts

file also. So in this assets.ts file we

have added the dummy data also that will

be displayed on front end and after

creating the back end we will replace

this dummy data. So here we have all the

assets. Now we have to place some assets

in the public folder also. So

I'll just copy

this fabicon.sbg SVG

and uh after that

let me just come here in the client

project in the client we have public and

in this one you can see here you can see

we have the favicon ico so I'll paste

the file that is favicon ssvg and remove

this ICO file

like this so here we have favicon ssvg

now we can use it in our project so I'll

just close it and Open the VS code and

here let's provide favicon

dot SVG. Save the changes and open the

web page.

So you can see the icon has been

updated.

Correct.

After that I'll just come here

and in this

HTML tag we will add one class. So let's

add the class property and here we'll

add the Telwind class name that is

scroll smooth. So it will scroll the web

page smoothly. Right. After that let's

close it and uh we will come here in the

src. In this src you can see we have the

home.tsx

because this project is created using

typcript. Now in this file you can see

we have hero features pricing faq and

CTA and uh after that if I open this

main.tsx

in this one you can see we have this

app. So first this app component will be

loaded right and then we will open

app.tsx.

So in this one you can see we have this

soft backdrop that will add some

gradient color in the background. Then

we have this scroll and after that we

have this nav bar. Then home and footer.

So this nav bar will be displayed

everywhere. Then we have the home. So we

will change the home in different path.

Instead of home we will display other

pages like generate my generation. And

then we have this footer. So first we'll

start with the navigation bar. You can

see here first we have the navigation

bar and then we have the content that is

available in the homepage. Right? And at

the bottom we have this footer. So first

we'll start with navar customization.

For that I'll just come back here in the

VS code and open the components. And in

this components we have navar.tsx

file. Right now in this one we have to

update the

link name. Right. So you can see here we

have the nav links which is home. It

will be there. After that here we have

this

features. So let's update it. Here we'll

add create. After that we'll add the

third one that is community. And in the

next one we'll add the text called

plants.

Here we'll add the path also. So let's

add the path that is

/g generate in this create. After that

we'll add the path /

community and uh in the next one we'll

add the path called plans.

Save the changes and scroll down. So

here you can see first we have this

div and in this one we have a logo right

and here we have the a tag. So instead

of this a tag I'm going to use link tag.

So let's replace this a I'll write link

and uh after that we have to import the

link from the react router DOM. So we

are not getting the suggestion here. So

let's scroll down. I think react

routerdom is not there. Let me open the

package.json file.

And uh here let's see the dependencies.

So here we have

Telbind framer linucid

react react react to and telin css. So

we don't have the react router dom. So

let's install it. I'll just open this

terminal at Ctrl C to stop the project

and here let's add the package name that

is react router DOM. So simply write npm

install

react router DOM

and after that I start the project again

using npm rundev.

So now the project is running again.

After that let's come here hide this

terminal and open our navar.tsx file and

here if I type link

we are getting the suggestion to import

the link from react router DOM. So here

we have imported the link tag and uh

after that here we have href. So remove

it and we'll add two. In this two

property simply add the path slash. So

it will open the homepage when we will

click on the logo. Here we will add the

onclick property. In this onclick

property let's add one arrow function.

And here we will add a scroll two. And

uh in this scroll to we will provide 0

comma 0. So it will scroll the web page

to top. After that here we have the

image tag src. And in this src we will

add the logo that is available in our

asset file. If I open the src then

assets and assets.tsx. So in this one

you can see here we have all the

import statement that is importing the

images and videos and we have exported

it using this assets object. So we can

simply access this assets object and add

the file name like logo product one

product two like that. So I'll just come

here and here in this src let's add

curly braces assets. Let's click here to

import the assets. Then dot logo. So we

have added the logo in this img tag.

Then we'll add the alt tag logo. And

here we have the height 8. Save the

changes. And now we will open the web

page. Let me refresh it. Here we have

the blank screen. So let me see the

issue here.

So we are getting this error because we

have added the react router down. But we

have not added the support of react

router in our application. So let me

hide it.

And after that just come here and open

our main.tsx file.

And in this one here we will import the

browser router. So let's add import

kalibresses

from package name react router DOM. And

from this react router down we will get

browser router. After that we will use

this browser router to wrap our

application. So instead of this

reactrict mode here we will use the

browser router opening and closing tag.

And inside this we have this app.

Correct. Now we remove this unused

import statement from here. Save the

changes. Right. After that if I open the

web page you can see here we have the

updated logo then we have the updated

text home create community and plans

which is the menu title or text right

after that I'll just come here in the

navartsx file here you can see we have

used the same nav links and map that is

displaying all the links but right now

you can See here we have the a tag. So

instead of this a tag I'm going to use

link tag again. So let's add link. And

here we have the link closing tag. In

this link tag we have to add the

on click. So again copy this same on

click property from here

and paste it here. So it will scroll the

web page to top. After that instead of

this href we are going to use two

correct. So let's add two here

and in this two let's provide link dot

href. So it is coming from here and then

we have this

key then classes and here we have

link.name name save the changes and

after that I'll just come here and now

if I click on this create it is opening

this path /g generate you can see the

path is changing if I click on this

plans you can see the path is

localhost/plans

correct now I'll open this web page in a

smaller screen so you can see if I open

in a smaller screen here we have the

menu icon if I click here it will open

the navigation menus like this. Here you

can see we have same navigation menu

home, create community plans, sign in

and get started button and this close

icon. Let's close it. So it will again

display this menu icon. Let me open it.

Desktop screen or desktop view. So we

have updated our navigation bar. Let me

just come here and you can see here we

have the button that is sign in and here

we have get started button and here we

have the navigation menu for a smaller

screen. Here also we have the same nav

links and after that we have the same

sign in and get started button correct.

Then we have this button using that we

can close the mobile menu. So we have

updated our navigation bar. After that

let's close it. And here we will open

our home.tsx. In this home, first we

have the hero, right? It means we have

this hero section that contains these

data in the left side and this image in

the right side. So to update the content

here we will come back open the sidebar

components and in the components we will

open hero.

TSX. Here we have hero.tsx. tsx file. So

now let's update this file. So we will

update the text first. If I just come

here, you can see we have div and uh in

this div, we have this text called

trusted by, right? So let's update this

text. I'll write

I'll write the text trusted by 10k plus

creators. After that here we have other

text B design and build. So let's update

this text also create vital UGC and here

we'll add small text that is in seconds.

After that here we have some description

like this. So I'll update this

description text also.

So I have added this text.

Save the changes. And after that here we

have some other text. So you can see we

have

primary button and the button text is a

start your project. So let's update the

button text here that is a start

generating it's free

like this. Then we have another button

and here we have text. So let's update

this text also that is watch demo.

Correct. After that you can see we have

other text in this div. So here it will

write

seconds to create.

Then we'll add

another message in this div that is

optimized social formats.

Right. Scroll down. Here we have another

div full service delivery. So let's

update it commercial rights. Then we

will update the second text that is use

anywhere

like this.

After that here we have the right div.

So I'll just save the changes and come

here. You can see these

text and uh description has been

updated. We have updated this button

text also. Correct? And after that let's

update the data in the right side. So

I'll just come here.

Here you can see we have this main image

URL and then we have this text

branding web and growth. So we will

update this text.

Correct. After that we have some text

here in a span tag that is Case studies.

So here we'll add preview

like this and after that scroll down

and uh here you will find this text 20

plus completed projects. So here we'll

add

plus 20 more. That's it. And after that

here you can see we have this logo.

Let's save the changes and come back

here.

You can see here plus 20 more. Then we

have this preview button here.

Here you can see we have the text social

ready. And then we have the ratio,

right? And if you want to update this

image that is in the right side, you can

update it from here. I'll just come back

here. So this is the main image URL. And

this main image URL is available here.

So we have the image coming from this

Unsplash.

Right? So if you want to change it, you

can update any new URL here. Now I want

to update these images also. So I'll

just come back here and here I'll update

these image URL. You can find the images

on unsplash.com. Just get the image URL

from there and replace it here. So let's

replace these images. I'll replace this

main image URL. I'll add this one. And

after that I'll update this gallery

strip images. So here we'll add three

other images

like this. I have updated all the URLs

here. And after that here we have the

trusted logos. So if I come back here

you can see the image has been updated

and these small images also. And here

you can see we have the trusted brand

text. Right? So let's update this one

also. I'll just come back. Here you can

see we have the

add a. So let's add the first brand name

Adobe. Then we'll add Figma.

After that we'll add Canva.

Then we'll add Spotify.

And after that we'll add one more brand

name Web Flow.

Save the changes and come back here. You

can see we have updated these brand text

also which is animated.

So we have updated our hero section.

After that here we have another section

that is services. So let's update this

one also. For that I'll just come back

to the VS code

and let's open this home.tsx. Here you

can see we have the features section. In

the second one we have features. So open

the sidebar then go to components. In

the components you will find features

dot tsx file.

Now in this one you can see we have the

title and in this title we have added

the text

services. So instead of this services

I'm going to use features.

After that here we have to add the

heading right in the heading we will

write built for modern brands. After

that here we have to provide the

description also. So let me provide the

description like this.

After that if I open the web page you

can see here we have features then this

small title and then small description.

Now update the content in these cards.

So I'll just come back here and here you

can see we have the features data dot

map. So we have the features data in

this assets

correct. So let me update the asset

file. If I open the sidebar assets

and in this assets we have dummy

data.tsx.

Correct. In this dummy data we have this

features data array where we can see the

icon title and description. So the icon

will be same upload icon. After that

we'll update the title. So let's update

the title. It will be smart upload.

After that we will update the

description also. So in this description

let's add the text. Now here we have the

second icon. So the icon will be same.

We will just update the title and

description. So here we will add a new

title and a new description.

Now in the third one the icon will be

same. We will update the title and

description. So here we will add a new

title and add a new description

like this.

After that if I open the web page you

can see these data has been updated

correct after that we have another

section that is pricing

right so

I'll just come back here in the VS code

here in this sidebar you will find this

components and

then open pricing tsx file now in this

one you can see we have is title and in

the title we have

pricing then we have the heading and

description. So in the heading let's add

the text called pricing plans

and uh after that we'll add the

description here. So I'll update this

description also

right and after that you can see we have

the plans data do map. So it is

displaying all the plant data from one

array right and uh after that here we

have plant dotpopular

right and in this popular we have

primary button and in the other one we

have the ghost button right and the

button text is same that is get started.

So let me update the button text here.

Here we'll add button text called buy

now. And in the second one also we'll

add the text buy now. Correct? And uh

after that

I'll just come here in the web browser.

Here you can see we have this updated

text pricing pricing plans and

description. And here we have the button

text by now. Now we will update these

data that is here. Right? For that I'll

just come back here in the VS code and

again open our dummy data.tsx file in

this one after this features data. Here

we have the plans data. Right? So let's

update the plan. So first one is a

starter. In this starter we will add the

name starter. Then we'll add the price

that is dollar10.

Then we'll add the description.

So here we have added this description

for this first plan. Then we'll add the

credits. So here we will add

25 credits. Then we'll add the features.

So here let's update all the features.

So first we'll add 25 credits.

Then we'll add

a standard quality.

After that we'll add no watermark.

Then we'll add

slower generation speed. Then we'll add

email support.

Right after that come to the second one

which is pro. Here we will add the plan

name that is pro.

Then we'll add the price that is $1.29.

Then we'll add the description. So here

let's add this description

and after that we'll add the credit. So

let's add 80 credits.

Then we'll add the features here. So in

this features let's update all the

features like this. We have added 80

credits,

HD quality, no watermark, video

generation, priority support. And then

we have added one more property here

that is popular true. So the second plan

will be marked as popular. After that we

have the third one which is ultra and

the name will be ultra. Then we'll add

the pricing that is $99. And after that

we'll add the small description for this

third plan. And then we'll add the

credit. So here we'll give 300 credits.

Then we'll add different features of

this plan. So here we have added these

features. 300 credits, HD quality, no

watermark, fast generation of speed,

chat plus email support. Update this and

after that we will open the web page. So

here you can see we have updated data in

this pricing table. Correct. After that

scroll down here you can see we have the

FAQs right. So we will update the FAQ

data also

right you can see here we have what

services does your agency provide. Do

you work with a startups or only large

companies if I click here it will expand

it and display the answers also like

this.

So we will update this data. I'll just

come back to the VS code.

And uh let's open

home.tsx. So here you can see after

pricing we have FAQ right. So let's open

our FAQ.

TSX file correct. And uh in this one you

can see we have this title. So in the

title we have FAQ. Then we have the

heading that is frequently asked

questions. And then we have description.

So let me update this description only

and after that let's come here in this

FAQ data. So this FAQ data is also

coming from this dummy data file. So

let's open the dummy data file and in

this one you can see we have FAQ data.

So here we will update the

questions and answers. So if you want to

change it you can change it from here.

So this is the first one.

What services does your agency provide?

So let me update the question and answer

from here.

I'll update the question and then we'll

update this answer.

Similarly, we'll update other FAQs.

So here I have updated all the data in

FAQ and after that I'll just come here.

So you can see these data has been

updated correct.

After that here we have the

CTA or call to action. So I'll just come

back here in the VS code open the

sidebar.

In this one you will find the components

and CTA.TSX file. So in this one you can

see we have the text

ready to grow your brand. So I'll change

this text ready to transform your

content. After that here we have the

text in P tag which is this one. So

let's update this small description

also.

And after that here we have one button

start your project. So let's update the

button text start creating now.

So it's simple to update the content.

Let me just come back and you can see

here we have the updated title,

description and button text. Correct.

After that here you can see we have this

footer. So in this footer we have this

logo. We will update this logo. We'll

update the description and you can also

update the footer links. So let me just

come back to the VS code. Open the

sidebar

then components footer. tsx file. So in

this one

first we have this div and in this div

we have the img src and this logo. So

let's replace this logo. I'll write

curly braces assets dot logo.

After that here you can see we have this

small text. So I'll update this text

also

like this. And after that you can see we

have footer links

right we have footer links dot map. So

in this one we have data from this

footer links array that is imported from

another file. And at the bottom we have

this copyright message that is the

current year and then we have this text.

So let me update this text. Here we'll

write great stag

then dot all rights reserved

correct and uh from this text we can

remove the a tag also so let me remove

this anchor link

we can simply use the text like this

save the changes now let's come back and

here you can see we have this copyright

message at the bottom we have the

updated logo in the footer and then we

have this text and if you want to change

the footer links you can come here

open dummy data tsx file and here you

can see we have the link title and links

so in the title I'll write

quick links then we have the links here

we'll add the home then after home we

will add

features

Then we'll add pricing and then we'll

add FAQ.

Right after that we have the next title

that is legal and we have the link's

name, privacy policy, terms of service.

Then we have the

connect. In this connect we have

Twitter, LinkedIn and GitHub. Right? And

if you want to change it you can update

the name here. And you can also place

the URL or link correct. And uh after

that if I open this footer.tsx

you can see here we have the link dot

URL and link dot name.

So it will be displayed on the web page.

So you can update the footer link title

and link text and link. So we have

updated our front- end template. So till

now we have created the homepage only.

Now we have to create the other pages

also. In that page we can create a UGC

add video or image and we can get the

list of generated content and we will

also create the community page and we'll

also create the plans. So let me just

come back to the VS code. We will open

this sidebar and uh here you can see we

have the pages right. So in this pages

folder let's create all other pages.

Right? Now we have only home.tsx

right. So

in this

pages let's create a new file and uh

write the file name generate or we can

write generator.tsx

here let's add our AFC to create the

complainer structure

and let's remove this import statement

from here. After that we'll create the

next page that is community right. So in

this pages create a new file community

dot tsx rightfce

and it will create this component

structure. After that let's create the

next page. So here we will create the

loading page also. Right? So create a

new file loading dot tsx and write r a

fce and remove this import statement.

After that we'll create the next page

that is my generation. So here let's

create a new file my generations dot tsx

and write r afce

and remove this import statement. After

that we'll add the next page that is

plans. So create a new file plans dot

tsx and here we'll add rafce

and remove this import statement. After

that we'll add one more page that is

results where we will display the

generated content result. So create a

new file that is resultsx.

Here also we will write R A F CE and

create this page.

Remove this import statement. Now we

have to set up the routes so that when

we navigate to new route it will open

the new page. So I'll just come here in

the

app dot tsx file. Right in this one you

can see we have this navar and then

footer. And within this navbar and

footer we have home right. So this home

will be displayed on screen but it will

be displayed whenever we will open the

home path that is slash. For that here

let's add opening arrow

routes. Use this routes tag. Just click

here to import it from react router DOM.

Routes tag has been imported. And here

we'll add closing tag like this. We have

routes opening and closing tag and

within this routes open and close we'll

add this home. So we have added the home

here but now we will add the path for

this home. Correct. So here let's add

opening arrow

route and let's click on this

suggestion import route from react

router DOM. So you can see route tag is

also imported and in this route tag

we'll add the self-closing tag like

this. Here we have route and

self-closing. Now we'll add the path

that is slash and after that here we

have to add the element and in this

element we will simply provide the

homepage. So just move it here

like this. So whenever we will open this

slash it will display the home and if I

open anything else it will not display

it. It will only display the navbar and

footer because this navbar and footer is

outside of this routes. So if I open the

web page you can see we are at /path and

here we are getting the homepage

content. Right now if I change the path

like /

plans you can see here we have the

navbar and footer only nothing else. So

just come back to the homepage again and

let's come back here. Now here we'll add

other routes. So just duplicate it. In

this route we'll add the path called

/ generate. And here we'll add the

element or page. So just add

generator. So generator page has been

imported. Now duplicate it. In the next

one, we'll add the path called result.

So here we have added the path result

and we will display the result that will

display different content. Right? So

here we have to add the project ID also.

So just add slash colon and provide the

project ID. So on the same page we can

display different result using this

project id using this dynamic route.

Here we'll add the element also. So in

this element let's add the

result page. You can see result page has

been imported. Correct. After that just

duplicate it. Here we will add the path

that is my generations where we will

display all the users generated content.

So let's add the page

my generations. It has been imported.

Now duplicate it. Here we'll add the

path community.

So if the user makes their project

public, it will be displayed in the

community. So let's add the page also

that is community and click here to

import it. After that just duplicate it.

Here we will add the next path that is

plans. And let's add the page also that

is

plans. It has been imported. Now let's

add one more path. So just add route

path is / loading. And here we have to

add the loading page. So in this element

let's add loading and just click on this

suggestion. So you can see the loading

page has been imported. So we have set

up the routes for each page. Now if I

open the web page

and if I type /

plans it will open the plants page.

Right now we don't have any content in

plants that's why it is blank. So let's

add the data in different pages also. So

let's start with the first one that is

generated. So I'll just come back here

and uh open the

pages. Here we have generator.tsx

file.

In this generator page we will create

the title and after that we will divide

the content in two column. In the left

column we will add the input field using

that user can upload the product image

and model image. And in the right side

we'll add the input fields. Using that

user can enter the details for creating

their content. So in this div first

let's add the

classes. So just add the class name

property and here we will define the

minimum height.

After that we'll add the text white.

Then we'll add the

padding and padding for medium and above

a screen size and margin from top. Now

after that here we have to create a form

and after that let's remove this action.

Now in this form we will insert the

title. So in this components you can see

we already have the title component. So

let's mount it here. So in this form we

will mount title component import it

from components folder and uh after that

in this one we have to provide the

props. So first we'll provide the

heading. So let's add heading and let's

add the text here. After that we'll add

the description also. So just add the

description property. And here we will

add one small description

like this. So we have added the title

for this generator page where user can

create the content. Now in this form tag

also we'll add some classes. So here in

this form we'll add the class name

property and let's add the maximum

width.

Then we have added the MX auto and

margin at bottom.

Correct? Now in this form we'll add the

div so that we can divide the content in

left and right column. But before that,

let me open the web page. So I'll just

come back here and go to this create.

So here you can see we have this title

and then small description. Correct.

After that I'll just come back here and

here we will add a div like this. And in

this one we will add another div.

So in this first one, let me add the

text called

left call. Duplicate it.

Let's duplicate this div only. Here

we'll add right call.

So if I come back here, you can see here

we have left and right call. Now let's

add the classes so that it will be

displayed side by side. So I'll just

come back here and start with this div.

Here we'll add the class name and let's

provide the flex. Then we will add the

gap and after that we have added the

flex column items start justify between.

Now after that here we'll add the

comment also. So let's add the comment

left column and here we'll write the

comment right column. After that I'll

just come back here. So you can see here

we have the left column in the left

side, right column in the right side.

Right? Now let's start with the first

one that is left. So just come back

here. In this div we will add some

classes. So I'll write

class name property here and then

provide the flex

flex column width full. Then we'll add

the max width. then gap then margin top

and margin bottom.

Right? Now in the left side we have to

add the input fields. Using that we can

upload the images. Right? So there will

be two input field for uploading product

image and model image. Right? So for now

I'll write the comment only. Here we

will write product image and duplicate

it. Here we will add the model image.

After that if I come back here you can

see here we have product image and model

image. Now to create both input field we

have to use the same layout. We will

create the input field that accept the

image file and we'll add some properties

here. So let me create a separate

component for that one. So I'll just

come back here and come to the

components folder. In this components

folder, let's create a new component

and write the file name upload zone dot

tsx.

Now I'll write

and remove this import a statement.

Now in this one here we have this div.

So we'll add the class name property and

provide relative and group.

Correct? After that here we'll add

another div and in this one

let's add class name and here we'll add

the dynamic class. So we'll add curly

braces back tick and here let's provide

these telin classes

right and after that we will add some

dynamic classes based on the state. If

the image file is already selected, we

will add other classes. And if the image

file is not selected or not uploaded,

then we'll add the other classes. Right?

So here let's add the props. So just add

curly braces. We will get the label.

After that we will get the file. After

that we will get on clear.

And then we will get on change. So we

will get these data in props. Here we

will add the type also. So just add

colon and here let's add type for these

data. So let me define the type in

separate file. So here you can see we

have this src. In this src I'm going to

create a new folder. So let's create a

new folder here and write the folder

name types. Right now in this folder we

have to create a file. So let's create a

file in this types folder and write the

file name index dot ts

correct and after that here let's add

export interface and write the name

upload zone props like this. Here first

we'll add the label. So the label will

be a string.

After that we will add file.

So in this file just add the file

or we will add null.

After that we will add on clear. So here

just add the add a function that is

returning void.

After that let's duplicate it. Here

we'll add onchange.

And in this onchange we have this

function where we will add event and

colon. And here let's add

react import the react.

You can see it has been imported. Import

type react from react. Then we'll add

dot change event.

And here we'll add this

angle bracket. And within this we'll add

the HTML

input element like this. So we have

added the interface here. Now I'll just

copy this and come here in the upload

zone.tsx file. And here after this colon

we will provide this upload zone props

and just click on this suggestion to

import it. It has been imported.

Correct. After that here let's add the

dynamic classes. So just add dollar sign

curly braces and we will use

this file

question mark. So if the file is

available it means the image file is

uploaded. So here we will add different

classes and if it is not available then

we'll add colon and provide different

classes in this

quote. So in the first one we will add

border color then background and after

that in the second one

let me provide

different border color then we'll add

the hover effect and we will change the

background also when we hover

correct after that I'll just come here

and add curly braces and we'll check the

file if the file is uploaded. So in this

case we will add this parenthesis and

this fragment and after that here we'll

add colon another parenthesis

and in this one we'll add the fragment

like this.

So if the file is uploaded it will be

displayed and if the file is not

available this second fragment will be

displayed. So if the file is already

available so in this case we will

display the uploaded image file and if

it is not available then we'll display

the upload icon. So let's start here

we'll add one image

at this image tag in this image src.

Let's provide the

URL

dot create object URL

and after that we will provide our file

here. So it will create the URL for our

uploaded file and it will be added as

src for this image. Now we'll add the

alt text. It will be preview and after

that we'll add some classes also for

this uploaded image. So in this one let

me provide these tailwind classes. Now

after this image we have to add a button

also and using that button. We can

remove this uploaded image.

Correct? So here let's add a div.

Within this div we will add the button

and in this button we'll add the cross

icon. So just add X icon and import it

from Lucid React.

Right now we have to set the position

for these buttons. So let's start with

this div. In this one we'll add these

classes. After that we have to add the

button type. So let's add the type

button.

After that in this button we will add

the on click property. In this on click

we will provide this on clear.

So it will clear the selected image and

then we'll add the classes also. So we

will provide the class name and here we

have added these TIN classes. Now we

will set the width and height for the

cross icon. So we'll add

class name property and set the width

and height. Right now after that we will

just come here after closing of this

div. Here we will add another div. And

in this one we will add the file name.

So let's add the P tag. And in this P

tag we will provide the file dot name.

Right? And now we will add the classes

also to decorate this text. So here we

have added the class name property

provided these classes and we'll change

the font size and uh font weight. So

here we will add class name text small

font medium and truncate. Save the

changes. So we have added the

image when the image is available.

Suppose the image file is not available.

So in this case we have to add the

upload icon in this one. In this else

statement right here we have added

turnary operator. So this is the else

case. So in this one we will add a div.

Now in this one we have to add the

upload icon. So I'll write upload icon

from Lucid React.

Now for this icon we have to provide

some classes. So we'll add the class

name property and provide these classes.

Now we will add the classes for this div

that contains this icon. So let's add

these classes for this div. Now after

closing of this div here we have to add

the text also. So we will add the text

in S3 tag. So in this text just provide

the label right. So the label will be

upload product image or upload model

image. After that we will add some

description in P tag. So here let me

provide this description text

and after that we have to add the input

field. Using that input field we can

upload our file. So let's add input type

will be file and after that we will add

the

accept property. In this accept property

we will add image/ a star. So it will

allow you to upload any type of image

file. Now we will add the onchange

property also.

And in this onchange just add the

onchange that we are getting from the

props. Then we will add the classes

here. So just add the class name

property and here we will add absolute

insert zero width full height full

right. So it will use the entire space

available in this div correct. So that

we can click anywhere and the opacity is

zero. So it will be hidden. When we

click here it will just open the window

to upload the image file. And we have

added cursor pointer. Now let's add the

classes in this title and description.

So in this title which is in H3 tag, we

will add the class name property.

Provide these classes. And uh let's

provide the classes in the P tag also

like this. Now we will save the changes

and after that we have to mount this

component in our main file that is

generator.tsx

file. So I'll open this generator.tsx.

And here you can see we have added

product image and model image. Right? So

I'll replace this one and simply provide

upload

zone component. Let's

click here. You can see upload zone has

been imported from this components and

uh after that here let's add this

closing tag and we'll provide the props.

So first we have to provide the label

and in this label I'll provide product

image.

So the first one will be product image

and the second one will be the model

image. After that we'll add the file

here. So in this file we have to provide

the uploaded image file. For that we

have to create one a state. I'll create

it later. And after that here we'll add

on clear equal to curly braces. So in

this one also we'll add the setter

function. Using that we will clear the

uploaded file. Right? And after that

here we'll add

on change. In this on change we have to

add a handler function. Using that we

can add the selected file in a state. So

let's create these state and function.

So I'll just scroll up and here before

this

return a statement let's add some space

and here I'll create all the state that

is required in this page. So let's start

with the project name. So I'll simply

use name con name and the setter

function name is set name equal to use a

state and let's initialize it using

empty string. Now duplicate it. In the

second one we will add the product name

and after that we'll add set product

name. After that just duplicate it. Here

we will add product description and then

we will add the setter function set

product description. Duplicate it. Here

we will add aspect ratio and then we'll

add setter function set aspect ratio.

Duplicate it. Here we'll add product

image that we are going to use right

now. And then we'll add the setter

function

set product image. And here we will add

use state and uh initialize it using

null.

And here we have to add the type also.

So let's add this angle bracket and

provide the file.

Let's click here. And after that we'll

add or and provide null. So it could be

file type or null. And here we have the

aspect ratio. So in this aspect ratio

also we have to update the initial

value. So let's add the initial value 9

is to 16. Correct? And after that let's

duplicate this. Here it will add model

image and the setter function name will

be set model image equal to use state

then file null and null. Now let's

duplicate it or I'll just duplicate this

one. First one copy and paste it here.

Here we'll add user prompt and the

setter function name is set user prompt

and after that we'll add use state and

initialize it using empty string. Now

duplicate it. Here we'll add one more

state that is is generating and the

setter function name is set is

generating and by default it will be

false. When we submit the form it will

become true. Right after that here we'll

add the handler function. Using that we

can handle the file change in the input

field. So let's add con

handle file change equal to

add a function like this. Now in this

one we'll get the event provide the

colon and write

react then dot change event

and then we'll add angle bracket and

provide

HTML input element. Let me correct it.

It will be HTML input element and after

that we'll provide the comma here and

here we'll add the type also. So in the

type we will either provide product or

model. So let's add a string that is

product or we will provide model

like this. Now after adding the type

product or model let's come here within

this curly braces and here we'll add the

if statement. If e.target

dot files and

e.target target dot files index zero.

It means when the file is selected. So

in this case we'll add the another if

statement and we'll check the type. So

I'll write type equal to product. So if

the type is equal to product. So in this

case we will use the set function set

product image. And let's add e.target

target dot

files index zero. So it will store this

selected image in this set product image

or product image state. Correct? Then

we'll add the else statement here. So

here let's add else setter function set

model image. And in this one also we'll

add e.target target dot

files index zero like this. So here we

have added the handler function also

handle file change. Correct. Now we'll

add the handler function that will

handle the form submission. So let's add

const handle generate equal to

asynchronous add function

and in this parameter let's use e dot or

we'll add e colon

react dot form event and add the angle

bracket and provide

html

form element

and here simply provide event dot

prevent default. We will complete this

function later after creating the

backend server. So for now we have just

created this handle generate function.

And now let's link this function with

this form tag. So in this form tag we'll

add on

submit and provide this function. Now

just come here

in this upload zone. So in this upload

zone you can see we have added file. So

here let's add product image.

After that here we have onclear. So in

this on clear we'll add the add a

function like this and it will call the

setter function set product image and

provide null. So it will clear the

selected product image. After that here

we have the onchange. So in this on

change just add one arrow function.

Here we'll get the event and after that

let's add handle file change function

and in this one provide the event comma

and provide the type. So the type will

be product like this. Now we will

duplicate it

and in the second one we'll add the

label. It will be model image. So the

first one was product image. This is the

model image. After that here we'll add

file. It will be model image. After that

here we'll use the set function set

model image. It will be null. Then we'll

use handle file change. And here in this

string simply provide model. Save the

changes. After that we will come back to

the web page. So here you can see in the

left side we have two input field where

we can upload the images. You can see we

have the hover effect also. So the first

one is product image and the second one

is model image. Let me upload the image

here so that the uploaded image will be

displayed at this area. Correct? So we

can click here to open the

window where we can upload the image or

we can also drag the image here. So let

me just click here on this product image

and let me upload any product image from

here. So I'll choose this bag. So you

can see the uploaded image is displayed

here and after that if I hover on this

image it is displaying this cross icon

so that we can remove the uploaded

image. So if I click here you can see it

has been removed. Now again click here

and I'll choose another image. I'll

choose this one. So you can see this

product image is added here. And here we

have the name also for this uploaded

image.

Now let's upload the model image also.

I'll just click here and choose the

model image. So I'll choose this model

image. You can see it has been added.

So we have added the input field. Using

that we can upload the product image and

model image to generate our content.

Next we have to create the form in the

right side where we will add the input

fields to get the project name, product

name. Then we will get the product

description and we will get the aspect

ratio and after that we will collect the

user prompt. So let's just come back

here

in the VS code and we will come here in

the right column which is this one. So

in this right column first we'll add the

class name to set the width of this div.

So we'll add class name and width full.

Remove this text from here. Here we'll

add a div.

And in this one we'll add the label tag.

In this label tag we'll add HTML for

name. And uh after that we'll add the

label text that is project name. And

then we'll add the class name here and

provide block then text small and margin

bottom. Correct? After that here we'll

add the input field also. So let's add

input type will be text and after that

we'll add the id here. So in this id we

will use this one that is name. After

that here we have to add the value. So

in the value we will simply add the name

that is the project name. After that

we'll add onchange property also in this

onchange add the add function like this

and get the event here and after that

here we will use the setter function set

name

and in the set name just add e dot

target

dot value. So the available text will be

stored in the name state. After that we

have to add the placeholder also. So

we'll add the placeholder and here let's

add the text called name your project.

Then we have to add one more property

that is required. So this input field is

required to submit the form. After that

we will add the classes to decorate this

input field. So just add the class name

property. And here let's provide these

TIN classes and we'll add the classes in

the div also which is here. So here

we'll add the class name and provide

margin bottom four. That's it. After

that save the changes and let's open the

web page. So in this one you can see

here we have project name and this input

field. After creating this input field

for the project name, let's come back to

the VS code and I'll duplicate this div.

And in this second div, we have this

margin bottom. And with that we'll add

text gray 300. And after that here we'll

add the text called product name.

Instead of this project name we will add

product name.

And after that here you can see we have

this HTML for. So in this HTML for just

provide product name. And in this id

also we'll add the product name. Here

also the type will be text. And here we

have the value. So we'll add the value

here that is

product name and here let's add set

product name correct and uh after that

let's update this placeholder text also.

So in the placeholder text we will

provide enter the name of the product.

That's it. After that you can see here

we have second input field for the

product name.

Now just come back and uh here let's add

another div. So I'll just duplicate it.

And in this one you can see we have

margin bottom text gray 300. And uh

after that here you can see we have

label tag. In this label tag we'll add

the HTML for product description. Right?

And here we'll add the text called

product description.

in this label tag. After that we'll add

the aspan tag and in this aspan tag just

add small bracket optional and after

that here we'll add the classes also to

change the color of this span text. So

we will change the color and size. So we

have added text extra small and text

violet 400.

After this label tag here we have the

input right? So I'm going to remove this

input field from here. And here I'm

going to use text area. Let's use the

self-closing like this. Now in this text

area just add the ID which is this one.

Remove this name. And after that here

we'll add rows. Let's set four. Then

we'll add the value. So in the value

just add product description state

and after that we'll add onchange. In

this onchange function let's add the add

a function and get the event in the

parameter. And here we will use set

product description and provide e.target

dot value. Right now after that here

we'll add the placeholder also. So let's

add the placeholder and enter the text

here that is enter the description of

the product and then we'll add the

classes here. So just add the class name

property again and uh in this one we

will add these TIN classes. Now save the

changes and open our web page. So here

you can see we have this product

description which is optional and here

we have the text area input field.

Correct? Now after that we have to add

the aspect ratio. So I'll just come back

and uh copy this div just this one and

paste it here.

So just paste this div here and add this

closing div. Here we have margin bottom

text gray 300. Now in this one let's add

the label tag. In this label tag, simply

add the class name and provide block

text small and margin bottom four. And

here we'll add the label text called

aspect ratio. And after that we'll add a

div here. And in this div let's add the

class name

and provide flex and gap three because

we have to add two aspect ratio. So it

will be aligned side by side using this

flex. So here let's add one icon

rectangle

vertical icon and click on this

suggestion to import it from Lucid

React. If I scroll up you can see

rectangle vertical icon has been

imported from Lucid React package. After

that here let's add this self-closing

tag and then we'll add the on click

property. In this onclick property we'll

add the add function and provide setter

function set aspect ratio. And here we

have to add the value 9 is to 16. Right?

Then we'll add some classes here. So

I'll write class name property and here

we'll add the dynamic classes also. So

we'll add curly braces and back text.

Here I'm going to use these TIN classes.

So it will be applied in all cases but

here we will add the dynamic class using

this dollar sign curly braces and

provide the aspect ratio state. Then we

will check the aspect ratio that is 9 is

to 16. So if it is true so in this case

we'll add question mark and provide

ring violet 550

and then white 10 that is the

background. After that here we'll add

colon if it is false. So in this case

we'll add empty string. That's it. Now

just duplicate it.

And here also we'll add the icon. So

instead of rectangle vertical icon I'm

going to use rectangle horizontal icon.

It has been imported. Then we have the

on click set aspect ratio. So in this

set aspect ratio just provide

16 is to 9.

And after that again we have the same

classes. And here you can see the aspect

ratio equal to

9 is to 16. So let's reverse it. We will

add 16 is to 9 like this. And uh now

save the changes. After that we have to

add the text area where we can enter the

prompt. But before that let me preview

the web page. So I'll just come here and

you can see here we have the aspect

ratio. And here we have added two type

of aspect ratio that is vertical and

horizontal. If I click on second one,

you can see it is highlighted. If I

click on first one, it is highlighted.

It is working fine. It is because of the

dynamic classes. Now I'll just come back

here

and uh I'm going to copy this div that

contains the text area. I'll just copy

this and paste it here. So in this one

we have label HTML for so here we'll add

user prompt

correct and in this text area we have ID

so it will be user prompt after that

let's come here in this

label tag let's add the level text

called user prompt right then we'll add

the span tag and in this span tag we

have this optional it is correct and we

have the same classes here we will not

change it and then come to the text

area. So here we have value. So in this

value simply provide user prompt. Then

we will provide the setter function set

user prompt. It will be e.target dot

value. Then we have the placeholder. So

in this placeholder I'll enter this text

describe how you want the narration to

be. And after that here we have the

classes. So I'll use the same classes

here also. We will not change anything

just save the changes and we will open

the web page.

So you can see here we have the user

prompt.

Correct. So we can enter the details

here like project name then product name

then description. We can choose the

aspect ratio and we can enter the

prompt. Right now in the first input

field also we'll change the input text

color. So I'll just come back here

and uh just copy this text gray 300 and

paste it here in the first div.

Here we have margin bottom. Then we'll

add text gray 300. So now all the colors

are same. Now let me just clear it. And

after that here we'll add one submit

button so that we can submit the form to

generate our content. So we'll come back

to the VS code and here we have the

write column. Just come here

and it is closing here. Then we have

this div that close both column right

and here we have the closing form tag.

So just before this closing form tag

we'll add our button. So we'll add a div

here

and in this div we'll add the class name

flex justify center and margin top.

After that we'll add the primary button.

So if I open the sidebar and buttons tsx

file here you can see we have the

primary button and ghost button. Right?

So I'm going to import it. Let's come

here. we will write opening arrow

primary button. So you can see the

primary button has been imported here

from component/b buttons. Now let's come

here and uh let's add closing tag also.

Primary button opening and closing tag.

Correct? Now in this one we have to add

the text called

generate image or we will also add

generating

right. So here we'll add turnary

operator. So just add curly braces

is generating property true. So when it

is true we'll add this parenthesis and

provide this fragment. And here we'll

add

colon this parenthesis and this fragment

like this. So in the first case let's

add the loading icon. So just add

opening arrow. I'll move it here. We'll

add

loader to

icon and import it from Lucid React. And

uh in this one we'll add the class name

to animate it. So let's add size and

animate a spin. After that we'll add the

text called generating

like this. And after that here we have

this second case. So in this one also

we'll add the text and with that we'll

add the icon. So let's add this icon and

uh after that we'll set the size. Here

we will not add any animation and after

that we'll add the text called generate

image

like this. Now we will add the classes

in this primary button and this primary

button will be disabled when is

generating is true. So just add disabled

and provide is generating and then just

add the class name property and here

let's add these TIN classes.

Right now save the changes and we will

open the web page.

So here at the bottom you can see we

have this generate image button.

Correct? And if I just come back here

and I'll make it true.

Instead of this is generating here we'll

add true instead of this false. Save the

changes and come back here. So you can

see here we have this loading animation

and the text is generating and right now

this button is disabled.

Right? So when the content is getting

generated it will display the loading

animation and the text will become

generating. And after that if I make it

false you can see we have the text

called generate image

right. So now we have completed our

generate page where user can generate

the content using this product image

model image and adding the product

details and prompt. Next we have to

create our other page. So I'll just

click here on this community. So here in

this community page we have to display

all the content that is saved for

public. For that I'll just come back to

the VS code. To create our community

page we will open sidebar.

Here you will find community.tsx file.

Now in this one we have to display the

generated content. For that we will

create one state and in that state we

will store all the created content data.

So before this return a statement let's

add con

and then we'll add the state name

projects. Then we will add the setter

function set projects

equal to

use a state.

And here we will add the initial value

that will be empty array. And after that

here we will add angle bracket. And here

we'll add the type for this data. So

let's define the type. Here in this

types folder we have index dot ts file.

Right? So here we will define the type

for our

project. So again copy this export

interface and write project like this.

Now in this project first we will add

the id and the type for this ID will be

string. Then we will add the name that

will be the project name. Here also

we'll add the type string.

After that we'll add the user ID. And

here let's add type a string.

In this name we will add question mark.

And uh let's add it here in this user ID

also. After that we'll add user question

mark. And here we'll add the user and we

have to define the user type also.

You can see we have added user here. And

let's define the user type also. So here

we'll add

export

interface

user and in this one we'll add the ID.

So the ID will be a string. Then we'll

add the name and it is a string. After

that we'll add the email

and uh for this email we'll add a

string. Here also we will add this

question mark. ID, name, email and the

type is a string. And here we have added

user property and the type is user.

After that let's add

product name and for this product name

we'll add the type a string. Then we

have to add product description and in

this product description we will add

question mark.

Then we'll add user prompt.

After this user prompt we will add

aspect ratio. So the type will be

string. Then we will add target length.

It will be number. Then we'll add

generated image

and it will be type a string.

Then we'll add generated video.

So the type will be a string. Then we'll

add is generating it will be boolean.

And then we'll add is published. It will

be boolean. It could be true or false.

Then we'll add error. So the type will

be a string. And after that we'll add

created at. The type will be date or a

string. Then we'll add updated at. It is

also date and a string. Then we'll add

uploaded images.

and we'll add a string array. So we have

added the type for the project and after

that we will come here in our community

dot tsx file and in this angle bracket

just add

project and click on this suggestion. So

you can see the type project has been

imported from types correct and here

we'll add this

array.

After that here we will add one state.

For that we'll add con

then loading and the setter function

name is set loading equal to use a state

and initialize it using true. So by

default the loading state will be true

when we open this community page because

it will take some time to load the

project data. So till then we have to

display the loading a screen. That's why

I have added this loading state true.

After that we will add the function that

will get executed and fetch the project.

So I'll write con fetch projects

equal to

a sync add arrow function.

Now in this function we will add some

time out so that we can display loading

animation for few seconds. So just add

set time out add this function and here

we'll add the time delay

3,000 milliseconds that is 3 seconds and

uh in this function just add the setter

function set projects and here it will

add the dummy data. So let's add dummy

generations and you can see the dummy

generations has been imported from our

asset. And after loading the dummy data

we will set the loading

false. So just add set loading and make

it false so that it will hide the

loading animation after 3 seconds. Now

we will add the use effect so that

it will execute this function whenever

the component gets loaded.

So here we have added this add a

function and dependency array which is

the empty array and in this function

let's call the fetch projects that's it.

So when we will open this page, it will

call this fetch projects function and it

will fetch the projects

and it will wait for 3 seconds then it

will display the project's detail and

for 3 seconds it will display the

loading animation using the loading

state. So here you can see we have this

return. So in this return I'll write

loading question mark. So when the

loading is true it will return this div

and if it is false then we'll add colon

and then parenthesis and here we will

add another div

like this. So in this first div we will

add the class name

and here we will add some classes to set

the

minimum height and width. We have added

flex item center justify center and

minimum height is full screen. Then

we'll add the loader icon. So let's add

loader to icon and import it from lucid

react. And then we'll add the classes

for this icon. So here we'll set the

size 7 animate aspin and text indigo

400. You can see loader icon has been

imported. After that, if I save the

changes and open our web page

and refresh this community page,

here we have the loading animation

and after 3 seconds this loading

animation has been removed because it

will fetch the project's data after 3

seconds. Now just come back and we have

to display the project's data. So here

we have this div. So in this one again

we'll add the classes. So we'll add the

class name property here and provide

these TIN classes. Then we will add

another div here and in this one let's

add class name and provide the maximum

width and MX auto. So it will fix the

width and it will be aligned in center.

It will add equal space from left and

right side. After that here we have to

add the title and description and this

title and description will be displayed

in the left side. So here we'll add the

header tag.

Here we have header opening and closing

tag. Now in this one we'll add H1 and

write the text called community.

Then we'll add small text in P tag. So

here we have added this text. After that

if I save the changes and come back here

you can see here we have community and

this small description. So we'll add the

classes here. So let's start with the

header tag. In this header tag we'll add

margin from the bottom. Then we'll add

the classes in the title tag which is

H1. So here we have added these classes.

And then we will change the color in the

small description. So here we have added

the class name to update the color. If I

come back here, you can see the

title and description is looking good

for this page that is community page.

After that, we have to display the

projects list. Right? So, just come back

and after this header, I'll add comment

that is

projects list.

Correct? Now, we'll add a div.

And uh in this one we'll add the class

name and provide the classes

like this. And after that here we have

to get the projects list from this

projects. If I come back here you can

see we have the projects

state. So let's add cyl.

And after that here we'll add the add a

function and then add this parenthesis.

And in this one it will return the

individual project data. Right? So here

let's get the individual project in the

parameter and here it will display the

project data in this div. So for now let

me provide the project ID only. Here

we'll add curly braces

project do ID.

If I come back to the web page here, you

can see we have these project ID.

Correct? If I change it, if I add name,

you can see we have the project name. It

is not available here. Let me just come

back. Here we are getting the individual

generated project, right? So, in this

one, we have the ID and then we will get

product name. Let's add it here and open

the web page. So you can see here we are

getting all the products name correct.

So now we have to display these data in

a card. For that we'll create a separate

component right. So I'll just come back

here in the VS code and uh we will

create a new component called

project card. So here in the components

folder create a new file project card

dot tsx. Here let's add R A FCE to

create the component structure and I'll

remove this import statement.

Now in this one we will get some data

from props. So just add curly braces.

We'll get gen that is the generation.

Then we'll use the setter function

set generations. Then we'll get for

community it could be true or false. So

let's add the default value false.

Right? Now we have to add the type also.

So just add colon and again curly

braces. Now in this one just add zen.

And for this one just add project and

click on this suggestion to import the

project type.

Right? Then we'll add comma. And here

we'll add this one set generations.

And here we'll add colon provide

react dot dispatch. And then we'll add

this angle bracket.

And uh in this one we will again add

react dot set a state action.

And in this one again add this angle

bracket and provide project and array.

After that here we will add the comma

and provide this for community

and here simply provide boolean

and here let's add question mark.

That's it. So we are getting these data

as props. After that here we have to add

the functionality so that when we click

on the card it will open the new page

and we will also add some action buttons

like delete project or we can also add

the

buttons to download the image or video.

For that we will create the menu and

we'll also create the navigate function.

So before this return statement

here let's add const

navigate

equal to

use navigate and import the use navigate

from react router DOM. After that we'll

create the state for menu. So let's add

con open menu and the set function name

is set open menu equal to use a state

and here we'll add false. So by default

it will be hidden right after that let's

come here in this div. So in this div we

are getting this

generated content right. So here we will

add the key property.

In this key property provide this

generated content dot id. So it will be

unique. After that we'll add the classes

here. So just add the class name

property and I'll provide these telin

classes. Then we'll add another div here

and uh in this one again add the class

name property and here we will provide

these telin classes

like this.

After that here we have to display the

preview of our generated content. So

let's add the comment here preview and

uh then we'll add a div here like this.

And after this preview we have to add

the details also. So here we'll add the

comment details and add a div. So first

we'll display the preview that will be

image or video and after that we have to

display the details. So after adding it

let's come here in the first div that is

preview. So here

let's add generated content image. So

let's add curly braces. We will use this

gen dot generated image. Right? when it

is available. So the generated image is

available. So in this case we'll add

this parenthesis and uh here I'm going

to add the img tag

like this. We will add this img tag

image src and in this src simply provide

curly braces

gen dot generated image. After that

we'll add the alt tag. In this alt tag

simply provide gen dot product name. And

then we'll add some classes for this

image. So I'll provide class name

property. And here we'll add the dynamic

classes also. So just add curly braces

back text. And here just add these tele

classes. And after that we'll insert

some dynamic classes. So just add dollar

sign curly braces and use this gen dot

generated video. So if the generated

video is available then we'll add

question mark and here we'll add group

hover opacity zero. So when we hover it

opacity will become zero and else we'll

add colon provide group hover a scale 1

not five. So it will increase the size.

Right?

So after that if I come back to the web

page it will display this card. But we

have to mount this card first. So we

will open our community.tsx file. Here

you can see we have added this div. So

instead of this div let's mount our card

that is project card. It has been

mounted here. And here we'll provide the

props. So first let's provide the key.

In this key just add this project dot

id. After that we'll add the gen. And

here we'll add the project. After that

we'll add setter function set

generations. And in this one just add

set projects. And after that we'll add

for community. And here we will provide

true. Save the changes. And come back

here. You can see here we have these

images but it is using the entire space.

So I'll just come back here and come to

this project card.tsx file. And uh in

this one we will add the classes

for this div right where we have added

the preview. So in this one we'll add

the class name property

and in this class name property we will

add curly braces back text. Then we'll

add dollar sign curly braces. And here

we will add this gen question mark dot

aspect ratio. We will check for the

aspect ratio.

equal to

9 is to 16. If it is true, then we'll

add question mark. And here we'll add

the aspect 9/16.

Right? Then we'll add colon. And here

we'll add the other aspect ratio that is

aspect video. Right? And after that here

we'll add the extra classes like

relative. And we'll add overflow hidden.

That's it. Save the changes and come

back here. So now you can see here we

are getting these images

that is generated

content right and if I hover it you can

see it becomes hidden.

It is because the video is also

generated and when the video is

generated we will hide the image on

hover and we will play the video.

Correct? So let me just come back here

and uh here we have added this curly

braces. So just after this we'll add

another curly braces and in this one I'm

going to check for this video. Let's add

it here. We will add gen dot generated

video. If it is true, it means the video

is also generated. So in this case here

we'll add this parenthesis and provide

the video tag. So let me provide opening

arrow

video and use this closing tag. Now in

this one we will add the src.

In this src just add curly braces

gen dot generated video. Then we'll add

the muted. After that we'll add loop.

After that we'll add plays in line.

Then we'll add the classes. So here

we'll add the class name property

and I'll provide these TBIN classes.

Then we'll add the mouse move event. So

here we'll add on mouse enter.

Here we'll add the arrow function and

provide E and it will be E dot current

target

dot play. Right? So when we enter the

mouse it will start playing this video.

Correct? And after that let's add one

more property here that is

on mouse leave.

Then add the add function and event. And

here we will add e dot

current target dot

pause. So it will pause the video when

we remove the mouse. So after adding it,

we will come back to the web page again.

So you can see when we move cursor over

any image, it is playing the video.

Right? If I go to other one, you can see

it is playing the video. Let's move here

again. It is playing the video. So,

initially it will display the image. And

when we move cursor over that image, it

will remove the image and play the

video. Let's see other content also. You

can see it is playing the video.

Correct? Now, after that, we have to add

the badge here like it is generating or

generated. And we will also add if it is

published or unpublished. So just come

back to the VS code.

And uh here after this curly braces

let's add another curly braces. And here

we will check for the generated image

and generated video. If the image or

video is not generated then we'll

display the loaded icon. Right? So here

we'll add parenthesis not of gen dot

generated image

and let's copy and paste it here. We'll

add generated video. So if the image is

not generated and video is also not

generated. So in this case we'll add and

and here we'll add this parenthesis. And

here let's add one div.

And in this div we'll add the loader

icon. So just add loader to icon import

it from lucid react and for this icon

we'll add the classes and set the size

and animate a spin and we'll add the

classes for this div that contains the

icon. So here we have added this

classes. So it will be displayed when

the image and video is not generated and

after that we'll display the badge. So

here after this curly braces

here let's add the comment

a status badge and we'll add a div. So

in this div let's add the class name

property

like this and within this div we will

add the text. So just add the span tag

and the text is generating

right but this generating text will be

displayed if the status is is

generating. So here let's add curly

braces

gen dot is generating property and

operator and then we'll add this

parenthesis and in this one we will move

this aspan tag

like this and let's add the classes also

for this aspan tag right and after that

we'll add another curly braces so I'll

just duplicate this one and in this

second one we'll add the is published

property gen.published is true then

we'll add the span tag and here we'll

change the color. So here we will add

the green color. So you can see we have

added background green

and here we'll add the text called

published

like this and uh after that here we will

display the action buttons but this

action buttons will be displayed in the

other pages not in the community. So for

now I'll skip this one. Let me fold it.

Here we have the status badge. Right. So

after this a status pad we'll add the

action button later and after that here

we will add the source images that we

have uploaded. So let's add the comment

called source images and here let's add

the div. Now in this one we'll add the

position absolute. So we'll add the

class name and provide absolute right

three bottom three. And here we'll add

two images that will be product image

and model image. So I'll write img tag

here. img src and in this one we'll add

curly braces gen dot uploaded images

and index zero

right and after that we'll add the alt

it will be product

and after that we'll add some classes

here so we'll add the class name

property provide these classes then

duplicate it

in the second one we'll add again

uploaded images index 1. Here we'll add

alt tag it will be model. Now we'll

update the classes here. So we will use

the same classes but at the end we'll

add minus margin left 8.

That's it. Save the changes. And uh

after that here we'll add the animation

delay also. So in the second one we'll

add a style property. And in this style

we'll add curly braces. Let's add

animation

delay and it will be 3 seconds. Save the

changes and come back here. So here you

can see we have the product image and

model image over this card. Right? For

other one also you can see the product

image and model image. Right?

So we are getting the same

model image and product image for each

card.

Here we have headphone. Here we have the

camera. Then we have the headphone. Here

we have S and model image. So it is

working fine. Here you can see the

status published.

Here you can see generating

right here and also generating batch.

Here you can see generating batch.

Now after that we have to add the

details of this generated content like

we'll display the title date and we'll

also add the buttons buttons will be

displayed on other page not on the

community to add the generated content

details. Let's come back to the VS code

and scroll down. Here you can see we

have this details and this div.

Right now in this div we will add the

class name and provide padding four.

After that here first we have to add the

project title. Then we'll add the date

and aspect ratio. So let's add a div

that display all the details.

In this one let's add the classes. So

we'll add class name property and

provide flex item center justify between

and provide the gap. Now in this one

first we'll add the product name and

date in the left side and in the right

side we'll display the aspect ratio. So

we'll add a div here that will be for

the left side. Here we'll add the title

in S3. So just add jen dot product name.

Then we'll add the description in P tag.

So in this P tag we'll not add the

description. We'll add the date when it

was created. So just add created

colon curly braces and here we'll add

new

date and provide

generation dot created at property then

dot to local string and call this

function. Correct. Now after that here

we'll add curly braces and we'll write

gen dot updated at. If it is updated

then only we'll add this new data. So

just add and operator parenthesis and

here we'll add another p tag and in this

p tag let me just copy this and paste it

here. Here we will write updated

and provide new date gen dot updated at

like this. Now let's save the changes

and come back here

on the web page. So here you can see we

have the details like headphones then

created at correct and now let's update

the CSS also. So I'll just come back

here and uh in this div that is for the

left side we will add the classes. So

just add class name and provide flex

one. So it will use the entire space

available in the row. Now we'll add the

classes in the title which is in S3.

Then we will add the classes in the P

tag which is here. Now let's add some

classes in the second P tag that display

the update time like this. You can see

it is looking good here on the web page.

Right now after that we have to add the

aspect ratio in the right side. So after

closing off this div here we'll add

another div. And in this one let's add

text right. So it will align the content

in the right side.

And after that we will add a div. And in

this one just add the span tag. In this

span tag just add aspect

colon curly braces. Then gen dot aspect

ratio.

Correct. Now we will provide the classes

here. So let's add the classes for div

and then we'll add the classes for this

as span tag. So we have added these

classes for a span tag. Now let's come

back here. You can see here we have the

aspect ratio 16 is to 9 and here we have

9 is to 16 right

now after that we have to add the

product description if it is available.

So just come back

and uh we will come here

after this div

here let's add the comment that is

product description

and uh here also let's add the comment

like product

name

date aspect ratio. So here we have added

these details. Let's move it here. So

here we have the details like product

name, date and aspect ratio. Let's fold

this div. And here we have the another

comment.

And uh in this one just add curly braces

provide

generation dot

product description. If it is available

then only this parenthesis will be

displayed and uh in this one we will add

a div

and here we have to add some classes for

the div which is margin

top. So we have added the margin top

here and after that we'll add the text

inp tag that is description and let's

display the actual description here. So

we'll add a div here. Add curly braces.

Then gen dot

product description. Let's come back

here. And you can see here we have the

description also. Right? So we have to

change the size and color for this

content. So I'll come back here and uh

we will add the classes in the text

which is the description text. So let's

add the classes here and after that

we'll add the classes in this div like

this. Save the changes and come back

here. So you can see this description is

looking good. After that we'll display

the user prompt also if it is available.

So I'll come back here

and uh

here we'll add the comment that is user

prompt

and copy this curly braces paste it

here.

Now in this one we will check gen dot

user prompt.

When it is true then we will add a div.

And in this one simply add

this div that display gen dot

user prompt and here we'll add the text

size that is extra small and text color

this one save the changes and uh after

that come back here. So here you can see

we have the prompt also right. So we

have completed our community page.

In this community, anyone can see the

generated content image and see the

video also. And then they can see the

product name, date, aspect ratio, then

description and user prompt.

Next, we have to add the similar card in

the my generation. But in the my

generations we will also add some

features like we can download or delete

these data and we will also add the

feature to go to view page so that we

can view individual project to create

the my generation page we will open that

page first. So if I open the VS code and

go to

app.tsx you can see the path / my

generations. So let's open it here. In

this browser we'll write localhost col

5173/

my generations. So this is the my

generations page. Right now we have the

navigation bar and footer. So here also

we'll display the same card with added

features. So just come back here in the

VS code and uh let's come here in the

pages and my generations tsx file.

Right. And in this one we'll add the

similar content. So I'll just copy the

data from here in this community.tsx

we have this state and functions. So