Building a SaaS Startup — Day 2

if that is if this is live hello everyone um I'm testing a new mic a new setup every day uh so please let me know in the chat if things are working or if

something is wrong if you can hear me well let's see okay I think that's okay that's the stream I think we're live on YouTube to upload a little thumbnail if you're joining from Twitter

uh I will a link to the YouTube channel yesterday for some reason Twitter did not give us a good bandwidth so the quality sucked a little bit go live on Twitter

too see how that goes Channel yesterday for some reason okay at least the sound is okay this time for the

YouTube better quality check YouTube all right congrats hey yo

Ken okay I think we're live this is working oh 20 okay 28 people hello hello everyone um we get Ken we get see I see all the messages okay they're

here uh yes I am Live on YouTube the link is below the broadcast on Twitter uh the quality is normally better so check it out and not on Twitch yet I

think I need to uh step up uh I'm not a streamer so I'm I'm learning as I go I think everything is is is working all right here we go um well

hello everyone good morning it's uh 11:00 a.m. here in

11:00 a.m. here in

Bali and uh if you are coming from YouTube and you have no clue who I am my name is Mark I live here in Bali I build little internet

businesses I have about 20 uh micro micro websites uh live now most of them are not making money some of them are making money and are paying the bills uh

I've been building uh those startups or those websites in public on Twitter so I share um everything I learn everything I do everything I also earn uh there and

I'm trying to um do the same for YouTube so having those live stream where I share what I do in a day and uh and see how that

goes um those are all the little websites that I've made uh the reason why I'm doing this live stream now is because um among the six uh businesses

that are making money um all of them are using stripe by the way and the two most common uh questions that I have on customer support is can I get an invoice

uh usually this happens when people do their accountability by the end of the month and they uh didn't download the invoice they get when they made the payments and they forget it and then they would uh ask me by email uh so I

would have to go to stripe I would have to find the right stripe account among my six uh stripe accounts uh find the customer download the invoice send it back to the customer which is uh a bit

annoying and it's uh especially boring so uh I'm trying to automate that part by having one link you one having one link uh

like this where customer can input the email retrieve the invoices edit those invoices and download them there's another part that's important um some people when they check out they don't

know you will generate an invoice automatically with stripe checkout so they would NE they would not necessarily input their business details there and then they will later email me that says

oh I forget to um I don't I my company details or whatever so I would have to go back to that striped um invoice I would have to download it screenshot it use Photoshop to change the customer

details and then um take a um make the edits and send it back to the customer um again this is quite boring um not everybody has this problem but as a stripe account owner I found this very

annoying and so this is it we're going to be building uh Zenvo I already bought the domain name and this is what we're going to be working on today um as a

final part I am um working so so I do everything from the coding to the marketing to the brainstorming to sometimes the psychiatrist or whatever oh I have friends for that but um

nothing is perfect uh there might be some bugs um it's not the best um marketing I'm not the best at writing headlines I'm just trying to do a little bit of everything and ship those

startups um so I'm not very ambitious I have no intention to build a unicorn my goal is to keep building those apps having fun building them launching them and then um either moving on or adding

features if if you know users are interested in um that's pretty much it so no much ambition just uh sharing my code and we are going to get this live stream up and running until the product

is done uh so that includes um finishing the product that include making a ling page doing the copywriting The Branding the colors um pretty much getting everything

ready before the product hunt launch um as a final yeah okay uh we yesterday we went stream it was a bit chaotic some

people try to sneak into my garden and steal my trees so we're back today hopefully this is going to be more uh peaceful and calm um what we what what

we did yesterday we have uh set up a user dashboard so this is a private dashboard where I'm connected I'm authenticated I can uh as a user I can

add stripe accounts here so I add um I get restricted API Keys um if you don't know what are those there's pretty sick uh these are stripe API keys but with

restricted permissions and so users of my app could say oh I give you access to this specific uh object but not that one and then they can create a key an API

key and that would let me do some uh operation on their behalf on their STP account without giving me the full permission this is much safer than sharing API keys and this is what we're

going to be using because when people get a link from oh yeah of course you're not seeing my stream I'm still not a streamer so here we go okay now you can see this

the yeah I guess you can see this the screen okay okay so I was talking for uh I was talking about what we've built yesterday so uh it was a short stream uh we have

this private dashboard people are logged in uh they log in with email they can add their strip accounts they just pass their restricted stripe API key here and

that will create um a special link for them here that's it yep um they will have a special link here that they can share

with the customers when the customer inputs their emails um is going to query all the stripe uh accounts the user has and search for customers under that

email and then it's going to display all the invoices the customer had under their email uh with a link to download the

invoice Yep this is finally working uh this is the stripe hosted invoice link and um the second part we want to do is to let people update those

invoices uh the details so now I'm going to focus on the part where I I I will have some kind of like invoice editor I'm going to get all the invoice details

and let the people change some details of them like for instance their uh home their home address their business details or any of that and then it will be able to redownload the invoice and have an updated

invoice um yeah I think that's pretty much it uh let me think yes so this is day two of the Stream So This is the really beginning uh this looks really ugly as

you can see there is no it's not responsive it's not beautiful there is no themes um this is just the raw data I'm going to finish the product first and then we're going to do a little bit

of branding change the phones do the copy do the landing page and all that things to make sure that everything is working

here okay nice question yeah um if so if you guys are on Twitter um check out the YouTube link

below I think uh the quality is much better there I have no idea why Twitter is not that good but yesterday it was recurring thing so check out the YouTube

instead all right I'm just double- checking on my phone that uh because that happened that I was streaming for like one hour and I realized that I was not streaming the right screen so I'm

just checking making sure okay this is this is uh meia I think so

we're good okay um right if there's anything let me know in the chat the sound the quality uh I cannot do much for Twitter I think it's uh it has to do with their

API check check the YouTube link below it should be much better nice okay okay go so

um let's get back at it so yeserday so we have this we we have uh stripe account that are connected to the user dashboard um and we

want we want we want people when they input their emails we want them to be able to edit those invoices so this is a data straight from

stripe um I'm I'm going to have to recreate some kind of like invoice editor I think I will have to

actually I will have to recreate this page with HTML like a display to the user have this place here where people can it will be a text area or input or

whatever where people can what is going on oh okay it opens my mail okay um these place here will be editable

so that people can change their names um everything and this will not change this will not change as well this will also

not change so yeah basically recreate this page have this part here as a editable form and then I think I'm going to use a

canva HTML canva and turn that canva into a screenshot I think this is let's see what we get HTML 2

PDF there has to be an MPN package node see yeah that's going to be tricky I

think I think I might have to go with an image you guys have any any clue on how I will be able to I should be able to turn let's say whatever this HTML thing

into a PDF um if there's a nice way to do it otherwise I think I just going to make a screenshot like a PNG screenshot oh maybe this

right he's not so good I don't know if you can do something about yeah the man the quality I have no idea it's I think Twitter yeah the quality on Twitter is

not really good um yeah guys go I think go there's a YouTube link below go on YouTube I think it's for some reason it's just so much

better yeah it's so much better on YouTube let's tag Elon Musk and ask what the what the heck is going on with uh Twitter live

streams it's probably the Mad scientists here that make the live stream bandwidth go wrong okay um right let's recreate stripe invoices now

so I think um okay this is it we're going to make this a small neutral my server is still running it

is okay none of the invoice and here so I think we will need to have a mo some kind of model let's see if I want to edit the

invoice I pop up a model have some input forms in it okay right let's try let's try this so we have these button we're going to have

another which is edit oh yeah we're going to be using some icons um this for download oh maybe mini ones

oh they have Micro now sick okay why not and then edit okay we have those

buttons and I think this will uh here we're going to say edit invo so yeah we'll need to have a model somewhere

invoice to edit right and when we going to put the invoice number into this this is going to show a

model yeah yes oh well I think I'll need I'll get uh finished my stripe if I keep calling

their API just to test I'll have to download the data and where is it yeah console like

this give me that copy and we are going to put this in here so we don't have to carry the stripe API every single

time is it going to work yes it's working I think okay it is working so we have a couple of doesn't

matter okay we have a couple of invoices pre finded okay we have going to have to create a model somewhere so I'm going to be reusing

some of the code a from that component oops and here we're going to do

something like if uh okay invoice to edit yep and here we go when we close the model we want to do set invoice to edits to

no same here set invoice toedit so uh well actually we don't need that so perfect we need to do show

when give me something copilot that invoice no work uh maybe this

oh um appear appear show how do I show it I'm going to do something dirty it true or false

for some reason I don't remember how to do that nope still oh okay yeah yeah invoice to edit yep

okay and here and boom okay and we have the model now okay um

I think this is a 16 by9 invoice see how many pixels are there

566 34 34 56 six oh this is not we're going to find the ratio of

stripe invoices so I recreate the same ones okay interesting oh I think it's A4 a A4

[Music] okay can try let me try to do a little something let me try to do a little something here so I can because I don't

see you guys chatting when I co when I code so maybe maybe I can share that just one one second I'm trying to share this with see if I can see that on

my phone let restream see something on my phone but I don't see any messages um have you ever been to Canada

no I haven't been to Canada I spend most of my time in Asia in Europe is it b h cable beats yeah it

this is 100% um a a clone of sh I mean not clone but like a using ship fast uh boiler plate that I build things on top of it

you see all right I'm uh can anyone send a message on the chat just to see if this uh little thing here will update so I

can see what's going on in the chats from my phone so I can see the messages when coding this chat Mark oh that's thank you thank

you buddy yep okay I can see the messages it's extremely tiny but I can see that hello

world message okay there we go something see work test this all right this is working okay okay okay so at least I

see I have to really zoom on this is very tiny but at least and see something right let's get back to it so

um in this model here we are going to display the invoice data we get from stripe recreate this PDF that's right here

okay wow this is oh maybe I maybe we can do something fun here maybe I can ask [Music] chpt well I'm I'm I I suck with it maybe

you guys know I'd like to get the code the HTML code of the I mean the react or the jsx code of this invoice so I don't have to code everything by

hand does anyone have any idea how we could give this PDF or this PNG to an AI and the AI will give me back the code

okay oh wow BF HTML HTML online oh sick let's see how good is that

thing action for today okay this bit of work my God if this is working oh God okay this is not

bad let's see yeah yeah this could work this could

work I see a happy man right now yeah I yeah I thought I would have to recreate the entire the entire uh invoice that would

be really helpful I think I need to I haven't upgraded to uh GPT plus I think I need to you guys know we fight well should I do

that can I just maybe use oh okay wow man Legend I see yeah I'm see I think I'm I'm a boomer somehow I'm too old I don't think of those smart

what idea so maybe I can uh can do something like this copy and transform screenshot to code okay right

okay I'm going to this is uh this is going to be fun I'm going to try both I'm going to give the HMA to GPT and ask it to transform it to react gs6

pleas oh boy here we go feel like I have an employee working for me this is so nice

you know there would be that much among you okay almost finished here we go exactly I just discovered fire I don't even have chpt membership

yet this is my content so probably going to sit here what do we get sick okay at least we get the

HTML is a bit off M model invoice all right I think now I'm going to finish with your Halloween

CSS okay I will need to console log what do I get from the invoice z um

just discount nope discount discount sure bunch of things going on here okay yeah okay I think yeah um I'm going to

do some uh tail thing now we have this cutting

okay uh okay we want to have those two things we going to have a div let's define between

invo and we're going to have so this is going to be say invoice and here we're going to have I think it's called

invoice. account name probably

invoice. account name probably we don't have the invoice oh okay yeah invoice select it selected what was it how did you call

it invoice details invoice to edit okay do account name what do we

have okay this is it oh I think well actually I think I don't need to prefill this I can just give this thing

[Music] to here uh wait we going to give this here okay so we have something prefilled

okay this is oh this is um this uh I think this this is going to be a separate startup um if there is

anything new like any new component that I create for these maybe like let's say some cool components for the lending page uh I would add those components to

ship fast but this very specific thing about uh creating special links for people to download their invoices they will be a separate startup Voice new Voice number

okay issue I think this is will be invoice to edit that

probably what is it yeah looks like it looks too beautiful to be true oh that was

it date of issue where is that thing rated do add effective

ads here there are so many variables Web book delivered ads here's how many sales you had for the

ship b um it's on it's on the website just go uh there's a link in the description just go there and the counter refreshes every hours so you will see exactly how many

customers just transition made at date of issue so I think that's the creative date created okay

okay we're going to what is this S2 things sping top 17 what did you do

CH what is that thing this is pretty bad why have pting left and all that all right maybe maybe actually we

didn't we shouldn't have give this to CH view date date you is it du date there we

go damn this is going to be long okay now we have information about the business so let's see we have a section here you're going to do something like

this maybe space y four give it a little space um we have this thing then we have

this here okay then we have uh information okay there will be two sections here one will

be editable so first the business information we have so we have two sections I think this will be a greed greed calls

two the first one will be business data so we're going to reuse the accounts name and then the phone number and the email if it

exists phone number nope uh country oh maybe well actually I gave

co-pilots so show the account number maybe it knows country no not phone number

no where's my phone number 747 where is it oh maybe that's not part maybe that's

not on the invoice okay that information here it's probably not on the invoice okay I know okay so we need to fetch some Data Business Like stripe

account data which means in the API call instead of just returning the invoices we should also

return some of the data from the strip account I know it's it sounds tricky now but it w make sense so strip account SP user ID for each strip

account invoice push we are going to for each rep account for each noise

okay so for this and we're going to say try account and here I'm going to give it account. extra so this is coming

straight from when the people added their business the St businesses which fch the colors the support email

okay okay deci stop Revenue sharing for IND page is n yeah um I didn't um my Indie page is not working right now because I'm transiting from my

previous strip account that are registered in France where I pay uh 24% taxes on Revenue I think this is

yeah Revenue income yeah 24% taxes on revenue and um I'm transiting to a new country so I had to set up stop all all my STP accounts in France uh cuz I

closed my business there and I'm doing the transition now which is uh timeconsuming boring but I still have to do it and so I will reconnect my Indie page as soon as this uh this is done

because now I have basically two strip accounts for each of the startups that you can see on my Indie page support

email see rep account extra maybe go back to it

I don't know I don't know where I am supposed to be oh wa here CL this and we are going to console

log see we got something normally I should get some more information about the business

now strap accounts okay and we have at least we have the primary color so it's because it's a test mode account there's no there's not there are not many

information for now but in live mode I should have the support the business support email and all those information that we will

need going back to this here account name TR account dot it's called I think call

it support extra support [Music] email oh and then also one thing there should be where is

it think and then we need to add the style of the Border I think it is primary okay so we replicate the that

little thing from stripe so it looks legit okay voice support maybe we need to get also the

support number try account API this type company we don't care

email what's the name of it business Prof um okay business profile this is what we want and we

oh wow you can't get the annual revenue okay you didn't know that once the estimated Revenue only accepted for press

okay support email support phone there we go SHP account and here we're going to add a new field for that called

support restart server that should be populated when we go live events page support email and here

[Music] support now it's going to be empty going back at this invoice this is the information we have

about the business um now we need to have this build to and here I think we're going to have

a big text area or something I'll have to see later how we do this but this is pretty much where people will input their customer email and everything so

so for now we're going to leave it empty I'm just going to leave a placeholder customer [Music] email

refresh all right yeah this is what this is this is going to be the editable form might be couple maybe we don't want people to edit their email maybe just

their address we we see that later so probably something like address

maybe multiple things City Country let's just type one there's nothing I might have

messed up okay the city is new just the country for now okay next part

um is it why this one is due I think was it paid right I'm going to have to fetch some data here what is this

status made okay maybe maybe we can update that because that's kind of strange that it

says due and not paid and he has a link to pay online amount due it doesn't say paid anywhere maybe I just a new with

invoices I'm missing out something so here we want to have a little badge uh near the amount that

says invoice do status stus and we are going to give this a badge

badge see how that goes okay this is it yeah okay so back to the invoice here um now we need to display

that this is a big line with where does that goes invoice paid okay download receip download invoice

I have no clue what's the difference between those two STP shows okay there is a payment method it's roughly the same

okay okay so we need due date we're going to replicate so the here there will be line yes is it

working sweet due date okay this is good invoice du

date perfect um and now we're going to recreate this little table here think I'll be using so okay I think there could be multiple items

here sub total total uh where could that be is it line thing no give it to

me L me this are your thoughts in Mark are your thoughts in English or in French man this is weird

it's I sometime because I lived abroad for a while now and most of my friends are American my wife is Korean so English is the language I speak most of

the time even though I'm not good at it but it became somehow like one unified language like French and English would become just one thing and is so weird

and sometimes I would start thinking in my head in English and and I would transition to friends this is really this is really strange okay now we have it

data okay this is it we are going to display all the lines the data and need to show name quantity unit

price an amount so description is here quantity should be quty here

okay back to Daisy UI e and Yep this is what we want we don't want to overflow though CU

we're getting to screenshot that thing so think we can remove all that here go back description quantity unit

price amount unit unit [Music] price amount

okay this should be good and here for each

oh oh boy oh my God I love copot when it does this kind of things holy this is exactly what I

wanted very sweet um do we have uh the description okay the quantity

okay the price unit amount I think this is it yeah this is so nice Okay

um and then we have this thing sub total

discounts total amount do okay we have the table here where table

so think as they do it it looks like it's a a GRE

yeah is a greed read calls to the first one is empty and the second one I think it has a

divide Y and sub total discounts total am

this uh live stream should be called I let copilot right make my new startup give me some magic no might not

work probably not is okay you're giving me the download invoice button no no no don't go too far this is for another

day okay what do we have so yeah these sub total

total oh yeah okay so these there should be we get something better here sub total discount no total do

not bad not bad okay nope yeah we want to replace all those with this one

two this should go here okay that looks like a little bit more as a stripe thing I think it didn't

understand the discount um let's see what we got here discounts give me data

okay okay we have the discount here which is an object so we need to show probably there need to be a minus sign

somewhere yeah and we need discount coupons

in discount discount C amount of uh okay

although if there are no discount so I think invoice toit the discount that if there are no discount I think we

should not show that just in case that would look like this okay okay good we are almost

done okay they show the currency here let's let's do it let uppercase okay yeah if there are

any extra information to add in the footer I think it's somewhere here yeah footer here we want to display it it's going to be

total tter oh I think we need to make sure if there is a footer that will be for another day okay I think there could be other stuff

there they could be headers or something forgot robino okay I think it's no not a big deal here

okay and then finally the little the real food not the user generated one border border

up or is it going to be um give me some magic you're almost

there here we go boy is it is that it almost let see we want to make this upper

case all right I think this is itate okay all right I think the invoice structure is

done now we probably need to yeah we need the styling so we are going to go back there to

export going to be a light theme invoices um big big this is going to be text

Exel no where is it text XEL on Bold

and here I think it should be plus six gray 700

maybe and also the background here is actually White here we can see think I'm going to have

to change this later but yeah this is pretty much it so invoice she Fest okay think we'll need a pading of

eight order top eight that's good a y I think we're going to be six

better um then the text here I think it's medium looks like medium text actually we can do a little more no no okay no

one oh okay I see what you did here those are two separate columns yeah so we have class greed GRE calls to

[Music] isue yep and finally you in here okay this should be maybe we'll have a

little bit of a um B maybe we want some g y 2

one just a little yeah okay then last

pH think this look like okay B so my B I think and B two should be also

okay description un need amount this is okay sh as welll okay okay okay

then we have the subtotal amount due so this here should be leading relaxed I guess right

we put this should we should should we maybe how does it look on a bigger

screen yeah I think we should make this phon a little bit smaller like just like strip okay the total here

we do that prob we should do what do I done oh no here

okay next area should be now we're going to say um this is going to be editable here and

then yeah the footer is I think it exist we need to give it some extra margin at the

top six and finally this should go they should go at the very bottom of oh we'll need to change the entire lay

layout of the page I guess to give it a whatever 1.2 ratio aspect ratio here I think it's a text

XS text great this probably what it is yep I think next grade

right I think we have an invoice here we replicated a stripe

invoice need to for to finish the layout but this is this is a stripe invoice um [Music]

see what was the first programming language that you learned man uh it's a

long Dreadful story but I learn I unique I think they still exist yeah they still exist but they changed their framework I learned

this as my first language and I didn't know how the web work how Javas script Works how web pages or HTML or react

works and I jumps straight into ionic and I had no clue what I was doing I was just Gathering components and trying to make an app with it it was a disaster I

spent a year on something that nobody ever saw nobody ever used and the app was not even working by the end and then I made another mistake by learning react

native as my second language without knowing JavaScript and I spent another six month on something that was another total disaster and finally I realized

that you started first to understand the foundation how HTML and web pages work and then JavaScript and then you had um component library on top of AIDS and

framework and so I restarted learning from scratch after probably two years and and here we are today but yeah it was it was a pretty much of a

disaster hello good morning from Ubud neighbors Do you have a job as a developer uh I don't have a job as a de

I had for six month a job as as a software engineer developer I I worked actually for with the Lopez maybe some

of you know him this uh gentleman here I spent six months working for him I didn't know I would actually work for him uh I applied for a software engineer job when I was not at the best time in

my life I wanted to do something different I had failed entrepreneurship for for like 3 or 4 years before I was like a I got to change I got to do something new I applied for that company

and at the end they the HR asked me if I wanted to pass on a message to Ty Lopez and I was puzzled because I knew him from his YouTube video the Lamborghini

video that I had no clue I was applying for his company and then I ended up getting the job uh working for him for like five or six month and I got fired

uh later on and then I jump straight back into an um solo prorip old are you I am I turned 30 last year that's scammer yeah he has bad not

really good reputation I also didn't have a good impression of him and he's not the kind of person I

want to have you know in my house uh every day but he much is is very smart you can tell he's

a really smart dude he knows what he's doing he's not just pure luck or Randomness he knows exactly what he's doing and he's I don't know I had mixed feelings

before and I liked him more after working for him if that makes any sense but still not the kind of person I want to be friend with

I think he's still around I don't know if he's how big is he has pretty big YouTube channel people

change that's pretty fun hello ex employer all right so we have a strap invoice here I need to clear the formatting um but we need to get rid of

the padding around we probably we need to get rid of this yep we probably don't want to Mo this

rounded and I think we need a literally zero petting yeah all wait we need to make this button sit at the

top so this here should be fixed top four right

four we don't need any title uh we going to make this think we're going to make it a button button neutral

people know there is a way to K to close that make a button do a look on

desktop it's ugly yep it fixed but it's looks like it's what is the difference absolute and

fixed why is not that thing on the top right I'll fix it I need first to fix the layout

um we need so max width I think we need an aspect ratio somewhere yep okay

um how are we going to do that so max with 3 XL these look like like uh it enough SP no maybe we give it

4 XL 5 XL maybe all right well actually do we care about the format of the invoice no we don't really care about that we just

want yeah we don't care about the format of the invoice yeah doesn't matter as long as oh maybe they need no we don't care no as long as it's clean it's okay

so we probably won't to have some spacing here oh yeah nothing4

just want to add a little divider somewhere so maybe it's a bit too much so maybe we don't need to go also that's Max

width make it a little bit shorter okay uh maybe we want to give it full height oh

yeah because we are in a flex container I think mean damn I forgot you guys remember how to I

am in a flex container let me try to show my screen a bit better it's not showing up anymore oh yeah okay I know it's because I have this thing

here I would like so this is a flex container and I want this thing here the only elements inside of it to be full

height so that the top here goes there and the bottom here goes there anyone is a clue how to do that oops

sorry knowledge the Ty Lopez oh maybe it's because I have item stretch let me

see relative with [Music] full the flex oh yeah okay it's because of this I

think probably item stretch is it nope still not it's it's a

roll I have this thing here and I want to make it X and here I am on the live stream trying to debu some flex

stuff one codes no man I have no Discord Community um uh there I mean I do have a little Discord Community for ship fast members but that's it that's pretty much

it he what am I trying to do uh good question I'm trying to make this thing here this div I'm trying to give it a

full height where is it yeah it's here it's also here okay this is the one I'm trying to give it a full height knowing that it's inside this

Flex container I'm just trying to make sure the bottom touches the bottom of the screen if that make sense

it's hello Amed thanks man I appreciate it yep I could yeah I could position it absolutely uh just don't I I don't know I I just

just wish I could keep the code like this and I know it's a little thing about the flex just a tiny thing I think it's stretch made a tweet

one regular videos actually this is I'm actually I'm still using a green screen for this one as you can see uh on the planet

Marth yeah no this is yeah this is uncut it no no reflection no script just pure uh coding and I'm not really good at

thinking and cutting at the same time so I'm pretty slow at the moment try something else invoice

number going to be shooting [Music] you nice 5 a Maro time man I want to go Maro so

bad guys have the best waves in Europe I think and probably the delicious food hello Philip congrats for your uh

your latest backlink product M so so good to see that square maybe just drink something out overflow visible and we want to show

the Overflow here um right I think I'm lost so I'm going to use the typical CSS uh fix okay you want to do something else then

0 we want to do this uh probably

um think this is not the correct X ratio isn't it ratio how big is that oh actually know that was

correct wait I'm a bit puzzled here what have I done what have you done Mike could this

be oh yeah Fed Up the ratio she couldn't all right that should be enough

and yes okay probably we need to do something like this get six okay and this thing at the

bottom where is it Mr footer yeah this you should be margin Top Auto so you really sit at the bottom

nope oh yeah I need to make you hide full background gray you should be full height

okay um this thing here should be display somewhere okay here we go okay we have a tribe

invoice op is it crawlable yeah it is crawlable but there's something really strange here uh oh yeah had four

oh yeah yeah the formatting here um think this should be hidden it should be hidden

too and probably overflow yes okay so we can scroll the invoice until the bottom or maybe

[Music] overflow oh yeah okay this this is the proper way of doing it nice okay see if that works okay still working so this is a copy of a strip

invoice now we need to fix the form users should input their details here um yeah also I think this is a bit off I need to fix

that it should look like this so read next yeah it should be a flex okay yeah I messed up F Gap

four one two um the first and the second invoice number date you

is it going to work okay this is better we even going to give six okay and that looks like a stripe invoice

okay uh I think it's time for me to get a little te little refreshing see make the parent yeah I make that

books Child leave height yeah thank you Kumar uh I wish I had read your message a little bit earlier took a little bit of a of

time when we'll start n startup maybe when I will stop uh mastering procrastination right I'll be U I'll get myself a little tea and I'll be back in

two minutes it's fun think welcome back everyone little T's ready so we can finish the product

so um where were we so here we are okay we need to move that close button and we need to add a download button that's going to make a screenshot of that

H this links blah blah blah these buttons should be somewhere else it should not be

here this is TR maybe it's because of that is it no yeah just put this at the wrong place let's see

well okay I don't get that they should be fixed no with currency time fix this um why are you here little

button you're supposed to be fixed so why are you not just at the top right okay maybe I'll just move you there okay

oh you're going to be sitting there instead okay have no clue why this is it oh and then this

thing this should be Z 50 okay

currency Cod is recard what is that little bug we have here oh ceny code is required number format

69 see code um tting that oh by default we're going to give it

the USD currency it looks like it don't mind anymore I have a nasty error though default value oh yeah because of the text area okay but this will be an easy fix

after okay so we have we can close that we have our invoices we can edit them um I think we want to be able to okay we need

to make the download button uh what was I using for logo Fest right first logo

first it tools logo fast yep we are using let me check the packagea um oh HTML to image I think yeah let's try that

thing um probably need you ref yep input ref what is that oh yeah input ref okay and here we going to have a invoice

ref okay and on the section that's I think to download here we will give it the ref of invoice

ref so in those buttons we have a second button here um the name of it hero

icons we going to search a download button go it here uh this is not a square button it's going to be just a regular

one four and I think this should be a primary button the best UI ever for now this will do the work um so here we say

download in invoice maybe we're going to say screenshot invoice because these were not going to search the stripe API screenshot

invoice we already have I think uh yeah we know which invoice is open here we're going to do screenshot

invoice and I think we need to import I'm going to reuse the codes from logo Fest editor where did I store that thing

logo a little fast to PNG Buton export PNG here we go um invoice ref H

Mage export options we're going to have to PCH this thing invoice. PNG

invoice. PNG G up options where are they export options you are here okay yep

transparent keep F yep and we finish this where did I mess up here

then oh here okay HTML to see what we get

um yeah it's probably not the right don't f uh yes

okay we inverted the buttons up we going to get more chins here something happen or invoice to

edits still a little bit of work that needs to be done here oh holy moly um

for some reason oh I think it's a react thing it doesn't know I need to use call back somewhere

okay oh yep the way on the loaning yep yep sorry sorry sorry here invoice RI invoice to

edit let's see what we get Yep this is not beautiful explain explain explain yeah it is react

uh TR something and 159 49 okay this is

it let's see okay no I think I'm missing out something here oh okay oh yeah it's a react

um it's taking a screenshot of before fragment

show be see me oopsy doopsy what have I done okay there is no inv to it that is why are you closing the

model oh would it be it's weird let's just try

this okay okay it was not in the M okay um at least we got something working at least we get the invoice yeah

that's pretty clean um I need to understand why with full this is

fixed this is literally fixed so this should be sitting on top of everything they should they should be at the top

right we will just Center it think I'm missing out something here no time scrip no Arc browser I'm a old schooled person I'm 30 years old I'm I'm already

old uh in time what time is it it's in belly Time 1 p.m.

20 time for a little little lunch 2.1 y Nigeria is waking up but we can download the invoice

that's pretty cool keep pH maybe we can [Music] keep let me change something here

that make any difference oh no wow that's even better we have the phones now oh sick

okay what else what options do we have skip quity okay yeah this is good enough

um what else do we want although I might have a little troubles if customers don't know the invoice on this oh he's not going to screenshot yes of

course maybe it's because that Tricky Tricky Tricky yeah he going to make a screenshot of exactly what I see

here which is not perfect um I need to fix those buttons first why why they don't want to sit with food like s this

pixman if I try something like a less related absolute I guess this would be absolutes then um

why image and not PDF um I haven't found a HTML to PDF Library if you do I would love to trade you think you headlights brother before

you control di mission that would be nice that'll be nice um that'll be nice but that would take a lot of time I

think yeah and headless Brothers on nextjs are pretty tricky to handle all right need to understand what is going on here here logo Fest

maybe where is the code that I used to have um I'm just going to leave it as it is all right I'm going to leave it here

okay all right K yeah if you have a better solution I would love to give it a try and team W react PDF HTML okay

man react PDF HTML react let's see what we get here [Music] HML I can give it a try um rect

compies oh okay do you think it's going to work uh with elwin CSS though because it looks like I need to inject those

Style document Fe oh okay maybe I would have to re render those components uh Rea server

elements sh yeah okay yeah I think it's it's going to spend a lot of time on this um

the the entire internet should be using laptop devices only so that will fix it right okay uh if anyone is joining right

now uh the download invoice feature works but not on mobile because just crop like the cropping is wrong yeah I just make the text a little

bit smaller they keep the same aspect ratio see what we get here that could

work we don't see the screen hey yo we meet here Rea okay rect p

you don't see the screen you guys want see my screen we just gone the entire Bali fiber connection is uh is over

right thank you to correct I think I'm going to stick with yeah okay I'm going to take it very simple I'm going to make sure this is

responsive on mobile so so we can have the invoice without going too crazy

um people think oops the name of it table EXs May SM maybe

table is that it no step somewhere where is my T here you goil maybe the table as doesn't exist

um let's see what Daisy UI says it does exist where did I go wrong then oh maybe it was already a table small

table let's see oh yeah I think that worked oh yeah okay that works well pi 12 pixels okay this is

working we probably need to have this separat yeah let's make it responsive and I think we can give this a go so the text

area here this should be

okay and there should be probably G up six yeah should have a little Gap here x XL xlg

MD is the other place I think it was somewhere at the top um invo

it than you better attack yes yes yes yes the table um think we also want this on mobile to probably be a little bit

bigger in case it's a higher price it might mess up the grid so think we might want to do this

yeah probably yeah okay definitely okay oh yeah so normally on mobile I download it

this is not the exact format from stripe but yeah this is working the invoice all right I think this is

good no can't access the sh G the shif has G Breo um there's a to get it it's it's a paid product so you will have to go on the

link someone's coming in my house sorry you would have to go on the link somewhere in this chat and uh purchase the the boiler plates and then you can access the repo if you did access the

repo if you did purchase but didn't get access let me know your email how long we've been on uh it's a short one yesterday I did 3 hours and

probably today is going to be a bit longer hopefully we can launch this thing here this week should be done by the end of the week might not be perfect but should be

working okay the text area now B two this I think will not be changeable what do we want to change in those bills we want to

change should we let the user change every information just prefill with the customer name customer country and

customer email and then just let them yeah I think yeah we're going to let them okay yeah we're going to let them change

everything they want so we will need some customer info what was how would I STI

this think I did this for Indie page uh what do we have here T placeholder herec

F right let's customer uh so every time we're going to change the invoice the customer is currently uh

seeing we will have to reset those information and prefill customer details we'll need a use effect

somewhere like a cleanup function customer details think we're going to see this

um and we're going to say that when the invoice to edit uh reset customer

okay if we CL here oh wait oh yeah okay if we don't have any invoice to

edits then we're going to set it to nothing else we're going to set set customer details and here we're going to

prefill okay yeah there we go customer name customer email okay I'm going to try with with this first and see I get something working and so here in the text

[Music] area or should we have this in maybe we should just change well actually

maybe no okay no it's going to be a m yeah I'm going to have to change this thing um let's see what we get for IND

page for getet how to set this up in react T area get a text area like this

text the value okay nothing special here custom details okay let's see so Okay we prefill okay we prefill with

that probably we want to do some text area width I think we're going to make it [Music]

full yeah there we go margin top we want to do to we probably want to delete the email as well build to and yeah this is

editable form so leading CSS takes car change ser oh yeah

okay relaxed build to okay so normally now if I download this invoice I will get whatever this is I

type in here I will need to I think I'll need a bit of CSS there yes okay yeah

[Music] 12 is three okay we probably can't do that later okay more guess it's time for a

little lunch break um thank you thank you buddy the are you micro start get your hair wouldn't let me manage a

hamster let me manage a hamster this camera right now doesn't even own a com no that's I that's actually true I don't

even own a comp all right it's going to be a lunch time for me I'm going to leave the stream on I'll be back in an hour probably less and I'm going to be

streaming for I don't know probably until 5:00 p.m. my time so for two more hours after that um I'll leave the screen on and I'll be back cheers

all right uh are we back on I think we're back on hello everyone if there's still someone

in the Stream been off for an hour went for a little um lunch break still streaming on YouTube okay okay we'll still there at least okay

this good um well okay so um this is uh this is the the second part of the stream for

today uh I'll be streaming for probably two more maybe three more hours something like that if you have no idea who I am I am

markl uh I uh I create mini startups in public on Twitter um have a few online internets many businesses running and I

often get customers asking for invoices uh and then I have to find their um profile into stripe I have to uh get the the information get the

invoice downloaded it send it to send the invoice to them and sometimes I would also get uh questions about like how do I edit my invoice forget to add my business details to it and so I'm

trying to make a very tiny app to fixes to fix this um this is called Zenvo this is the day two of building it the IDE is that for stripe business account owners

um you would connect all your stripe accounts with restricted API key Keys you would get a unique link that you could send to your customers customers would input their email so that they can retrieve the invoice edit the invoice and download the

invoices pretty much it it's a very simple app we started building yesterday um where we are now we are here we have

uh we have created a dashboard for people to be able to um add the extrap accounts this is ugly uh I'm uh I'm just doing something

for now and then I will add The Branding um people can add their strap accounts um add their secret restricted API keys they would get a unique link that it will share with the customers and then

the customers could input their invoices just like this um the customer will be able to see all the invoices they've made for any of the businesses owned by the person and

they will be able to edit those invoices so this is a stripe invoice and here there is a form so customers can say like hey you know my name is not ASFD

but it's actually marloo and then it can download the invoice normally we should have something that's working okay here we go and then we have invoices like this

one and that's pretty much it um I'm building solo so I have no um no employees so nothing is is perfect I'm

not a good marketer I'm not a good programmer but I do a little bit of everything and by the end of this uh series of videos in this stream we should be able to have a little startup

that's ready to be launched on product tent um also I am not a streamer it this is the third time I stream my

programming it's very hard for me to think when I uh when I I uh code so I might suck at it sometimes I might say

things that that don't make any sense um so sorry about that uh that's the best I can do all right uh we're connected okay generation James okay the

chat is back nice what are you using for the PDF generation man I'm I'm so if customers don't edit the invoice I'm using the stripe link this

one is going to C it's just going to use the link posted invoice link by stripe and if they added invoice then I just made a copy HTML copy of

destroy template invoice templates and when they click download it takes a screenshot of this and download it in the uh person's file

storage yo Melvin it's a end of your uh something like four to six hours of

productivity time where uh you you joined the world after your launch time here with us this is it um

okay okay we'll need to fix this uh by default I think it prefills yeah the customer name the customer email we need to organize this so that it looks like

that uh we need to fix the margins as well CU we're going to take a screenshot of this thing so we need to make sure the margins are

right uh we are back here margin should be minus two I think it's probably not enough oh yeah I think it should be minus three actually yeah okay we're aligned with

that okay we'll need to prefill with some information so this should be around okay

here this is working if I search an invoice okay it's putting this on the line this is good what else do we want to show

name what El stripe shows actually customer see customers or maybe invoices that will be simpler let's Download a pdf

invoice right so what we have here we have the name of the person the country address whatever and the email of the person so back to the code we're going to

prefill with customer email customer name that makes sense then here we need to prefill with the customer address which which which which which which I'll find

[Music] somewhere really nope customer address there we go or should we display that um well

maybe I'll go back to devices see with a real world example of that okay so customer customer address

[Music] um I would make sense uh probably line one postal code

State invoice see if we get some more examples real examples of that yeah this not helping

um okay that is good okay right this is what we look for oh there's a text thing we didn't pay attention

to okay all right we'll see this later invoice number invoice blah blah blah here we have something so we have

first the line address the name same line 6B what is 6B exactly line

one C probably line to and Country City oh City

address oh wait maybe I'm going to ask chpt is going to probably much better than me for that going to say something like

customer and email like this then oh no I cannot copy p give me some magic

chpt yeah not so good let's see maybe this nope think I want the city here oh wait maybe the state should be

before what do we get here so I think it's an empty invoice though so it will probably look like nothing

here I'll have to fix that uh in one city and state are is feel

no I have to go through all that oh it still creat a space here okay I think I'll I'll will use JavaScript for that

have okay CT State also coding country we going to filter everything that's and we're going to

map oh yeah we can join see how that works okay Yep this is good we need to convert the country code

to uh country codee converter japt actually maybe I don't need to do

that so I can ask my co-pilot format here maybe you can say like a entry code

to to like to country name ah [Music] us there we go get it we want to

[Music] convert Indonesia yes okay this is working um let's say it doesn't exist making sure I'm not let adding yep invalid

arguments here if this we need to no return

no okay is working so line one line two city state line one line two City uh is it

the city maybe uh it's very L too okay oh yeah number seven vat

data additional field um customer address customer email customer

name okay customer Tex exam ideas pay increase in yeah we want to add the customer vat somewhere uh

Tri invoice API going to go to the customer where is it is somewhere here okay it's here customer sex

ideas is it what we really want recipient V8 IDE sending a voice to another busr this field if it's

in maybe not customer taex IDs Euro V8 it is it is it is it x t t t

[Music] 11 invoice Line itex This is always required it's sufficient to display perc not required to display the cash amount

you're not require okay um where is the text part see the mod of Texas

voice oh I think it's in the line thing where where did we uh I think it's per a trip to the moon

voice line item yeah SC issuer lines okay some more here

yes to dat see USD she has plate discount ID live mode perod amount excluding tax that's

interesting data and the that's repr the amounts for this is excluding old ACC we can move on with

this isue it's okay we might have just to check the recipient's V8 number where could we get

that tax ideas European bet the customer

tax will contain the same taex ID as customer value of the text ID okay okay I think we need to display

that customer idel array object with and

value we show GB vat which I guess is this GB

okay okay so here f it it has to be under okay okay we're going to display it

here if invoice to F again customer text ideas that's

length length here to [Music] zero we're going to

say DG no no no this is not this this is supposed to be here say return well actually we don't need yeah we should have only one so X

ID zero here it should be okay is it so if we have the value for the text ID we're going to

display the value and just before we're going to say it's type

type and for that it's always the same shapeit yeah there's always a underscore except here so we're going to split if

uh some help jgpt no split want

good okay my chpt is dead there you go case words okay this I hope you're

right um I'm going to try to make sure that this is working so I fake that invoice and I add

somewhere a customer text ID and I said type yeah okay okay yeah this is working nice although I might want to change

everything capitalize no right okay working V and here we have a invoice

that looks like a strip invoice okay it's good

yep can update anything that is good okay I need to make sure the size of the text matches I think it does not on

size T area area T area have an invite here [Music] um

my invoice I think uh I think we need to get rid of the borders and stuff when there is a screenshot yeah because we don't want to

show that um I need to turn on some kind of Boolean see is is loading is

screenshotting loing [Music] it and finally okay and we will the input

border here we'll have to do um is is it working of course it's not

working and Dam it okay I am in the wrong I was in the wrong field input bordered X area okay yeah this is where we are

it's gone off okay maybe I need margins maybe four yep okay that was it to increase that

okay uh I'm testing something real quick we have okay UI so it looks like a proper

invoice no it does not oh yeah that's the wrong one okay still [Music] nodes

with this okay remove that we can edit now we need to get we need to handle the case where

um yeah if the person screenshots when it's like this this will not look like a good screenshot yep so we need to sure the

height of the text area is the same as the content do that make any sense we need to create a ref Co

um call it uh this details ref with screenshots it's a tricky one we need to when we

screenshot we need to get the ref okay here get true

set the height of the Tex area to craw height see if I'm think of something here okay yeah this is

working scroll bar try mess up anything here it's my favorite thing

so something what did I do what have I done left oh okay

the height to the light of it content not bad we add this extra

okay still have the scroll bar um I the scroll bar sweet

okay next area carrot color yeah see

nope resize handle it's good back um

see if we get this working on Safar okay that will do it okay let's try now if I go to

different pages so here I am this is my invoice Mar clue and I putr download

it it's my new invoice okay and this one we want to

lose lose the focus on Mi area righty that looks like a stripe invoice I think we're good

um when it's large we can make a little bit bigger petting yeah oh no okay yeah that looks

better I'm get all right sick invoices M Ling boy what is

that loing boy what did you use for the authentification um I use ship fman so it's next oath yeah next

oath call why someone STS you're brave man the this is fun because it's actually really hard I'm uh it's my

third time streaming and and I I have I I'm so much slow slower now that I I know that you guys are watching so yeah I'm huge respect for

the streamers out there because it's really hard and also trying to keep the stream engaging so it's not you know boring and it's just just not just a random guy coding this is really

hard yo what is that M loing boy did you make that new Twitter account or

is I need to investigate that thing this could be could it be Stefan oh sick nice all right so this is functional I think

this is really ugly I think we now that we have all the pieces of information yeah there's nothing people can add accounts remove

those Add accounts get a special link give the special link to customers customers input email get all the

invoices and edit all those invoices um I think this is good think I mean yeah technically you could do

that which means first you would have to get the unique link of the business and the second part uh if you already have 20,000 emails from the business you

probably have way more information like there's no way you hack a 20,000 emails we cannot hear you okay are you

sure actually this my mic shows return let me checks actually I hear it could be on your side I think

because I can hear myself on my phone so yeah no um I mean there there's definitely a security concern but at some point if you have those 20,000

emails uh this is I don't know you you've already done you've already hacked the business so much I don't think uh having the addresses is something that would be tricky to

get yeah but that's a good that's a good point I might I might double check the what information do we send back I think we

we don't actually send any information that's sensitive here the invoices are it's meant to be public it's meant to be shared with your accountants

and let me see I don't think there is anything that's uh yeah all right um yeah I think it's time to style the app a little

bit so we don't have just this this thing here um I think I will be reusing the fonts from bu

disput it's pretty neat fonts and also it's a beautiful fult see enter

[Music] garito yeah there we go yeah that's a beautiful font like it let's explore if there is any and I

think that's my favorite thing while doing a new project is it's finding the right font it's it makes such a big difference with such a little

work um make sure sure we have at least at least five there's anything trendy right now it's always the same o well

nope oh yeah we want to make sure we use sensory phones hey is quite nice you guys have any font in mind you

want to give it a try easy to do that that's a beautiful one too bullish try this little

bit why not why not I think I still prefer the previous one this one look more like stripe see this one or

garito oh damn I love these phont I think I'm going to go for that one yeah it's a very beautiful font y zmg I am also in Bali I not in chungu

though I am inasan in the South part of uh the island think we're going to change the theme color I think I'm yeah I think by

disputes theme was nice compared to the defaults

uh yeah I think I'm just going to change that no yeah okay it's not your fast [Music] yeah I think I'm going to reuse those

colors that's a nice should we should we try green just for fun of the name of the

startup think that would I don't think that would look good but who knows it's way too much it be

green bour menu yep the font is called gabarito which color little more

oops we go with that of like the green see if first one looks like was it called get ready to use refactoring

UI yeah man this is a really good good idea yet kind of like the green though because the name of the app is Zen

voice this Zen thing to make a logo Zen what do we have for Zen relax piece

no here it could be this one oh maybe just something like this where

we do that background color X not sure yeah I think the green is not

really good it's too too bright oh well let's see what do we have menu legendary designer back what do we have

here that could be the black I guess we would have something like this on top of it or maybe not what do you think oh sorry bro I didn't see your

color RGB 2184 need to convert that 20 184 166 [Music]

1846 okay it's a mix in between get this one here too which one was it second one I

think yeah second one we have this one too I think I like this one but it's probably a too sad for the

app like too too dark too cold ah T Choice T choice yeah both are

nice I think this one has a better fit with the white it I think it has more contrast the dark blue can beate that is very

true oh that is very true okay well happy to give it a try here we go I think I think that was the one right is it was it no no I think that wasn't the

one back to the chat yeah okay well I think this is good do you think the uh the white yeah

I think the white has enough contrast with darken this instead yeah I think there is enough contrast I said was still 5

okay green okay I think we I think we can go with that um I I don't think there will be much secondary color anyway but I like this one it's a nice greenish

color it sounds good for an app called zen zen voice peaceful let make a little logo for [Music] it is working here

okay Zen voice can we explore for icons maybe that could be the I think I'm going to go with that one or maybe that look

good I think we're going to round the corners a little bit button five R how much eight pixels yeah okay that's not going to help

probably rotate oh yeah no fight that works why

not bit Shadow no I think we don't need Shadow for now cuz we're going to with that something we have

here it's not a unicorn startup logo but I think that that works it's a nice logo simple going drop that um call Zen voice

public ion okay it's a cute dep to later this [Music] I think this neutral color is a bit too

much as [Music] well what is it St yeah base content I

think neutral and neutral contents neutral neutral yeah yeah that could

work maybe we make it a little bit uh slightly dark dark here too much I think I kind of like it

simple think I'm unconsciously copying what stripe is doing where is it see there buttons oh no actually their buttons are

more they're white okay oh oh wait actually we can do that um

I think we can do the entire app with those show you a bigger screen of this

here yeah I think that'll do it bring the strip data with email you and I been oh man it's been a while uh yes I

did um actually I query so I query all customers first that have the email that's provided here and then from those customers I query

all invoices under the SHP account that have the customer IDs that we just got from the email and from that I'll get a list of invoices

here and then now U we can edit the invoice download it and here we go customers have their own invoice where

they can add any information they want here by typing this is Interactive this is it of course I remember you

buddy you've been joining most of the streams I've been doing for about a year Super Active in the community and all that so yeah I'm very grateful for

that not too gray said menu okay mix between those two then is be working I'm really tweaking tiny details

here that should be good okay okay I guess it's time for a little bit of refactoring all that we

have oh I think I made a little error here I shoulding slightly bigger then I can down

again yeah I think this is it we don't want the padding yeah okay we have the logo yeah we now have the little logo it's fun because it's then I

don't need to make a five econ for some reason how come it's fun it's

why I could oh that be is this thing here the next we'll

add if I have an icon on PNG is going to overwrite the five cone I think this is all right this is cool no need to make any Fon

anymore all right it's time to style a bit um so this is the data we're going to get uh page

contents invoice to edit there will be nothing in here okay so we're going to have this little page I

think yeah we're going to we're going to be very going to do things really simp simple here but uh in the least okay I need some

bad yep okay okay we got um status for

status prob of there this draft open

paid open paid void okay going to say that if normal

and invo Status equal paid and badge

success or nothing and I messed up somewhere yep here uh yeah this is supposed to be a bad

right okay those are not the most some the stripe handle that yeah CU they don't have all the colors we have those invoices

um I get banned from from the stripe API for quering so many times uh invoice number created ad download

edits I think I'm just going to make this just a random I'm just going to Center that I think should that should be enough

uh so we are [Music] have Max with excess

think Max with 5 XL mxo photo I think this big enough oh no no no forget it's supposed to

be yeah this is here me height screen okay you want okay here you have all the invoices that

you might may have made we're going to Center the buttons on the right [Music] two we on this at the

okay case X six that was good okay f love the content you make

mark thank you buddy I appreciate it just reading the chat on my phone is a super tiny the best way I found to read the

chat best to just amazing to work yep yeah tail wi is a game changer so much easier um

think here we will need uh some kind of scroll make sure that doesn't overlap

f um this Fleck stable is not displayed properly maybe shrink zero I have no idea what I'm doing oh all right we can add this

I I think being too picky here I think there should be enough all right model opacity of

70 what all right resize the window a little bit see what we

got so scrolling nicely okay okay I think we're done with the link for the customer from the customer side might not want to Index this page

though think um we know is exactly my question okay robots index

exports I don't remember how I do my own code terrible terrible there we go um oh yeah export okay tile um

robots index dat next yes yep index false follow true no cash true everything in there

here what do I have here going on can't resolve yep probably this should work yep

and here we want to do a no index making sure robust no index follow

okay I want to Index this content okay so the customer side is done I guess here my page get your

invoice here and I have all my invoices okay oh I need to do a try with this oh yeah

oh no okay so it is time to go to the

dashboard um so here this is the dash the dashboard of people who register and that's how they going to

create their strap accounts their link where they will be all their strap accounts connected so that people can search their email so we need to have this little thing somewhere like login

log out we need to have this as well the link to Cy past it and those cards here to add and remove trap

accounts um not going to bother too much I think I'm going to copy what I did for B disput this okay yeah I think I'm going

to redo something similar there the little dashboard all the Trap accounts will be displayed here there's nothing much to do on them just adding more accounts

so every we going to copy that all right I need a little te in order to keep moving

on I'll be back in a few minutes cheers get gold welcome

back there we go so yeah 4:30 I think I'll be streaming for another hour or so yep I think we should be done with the user dashboard and then we can move

on to um deploy lab um adding a pay wall and designing the landing page and the

copywriting um if you are tuning in right now we are making a stripe invoice generator editor so that customers can download and edit and download their

invoices simply without uh stripe business owners like me like myself having to go to a stripe accounts search for the customer's invoice download it send it to the

customer um trying to make this a little bit simpler because that's the pretty much most of my customer Supports is uh is for this kind of things so I'm trying to autom

it wa it's scen time here we go okay um voice is here think here we'll need uh

copy everything that I've done for this startup and reuse it because it should be very

similar oops type anymore page right I'm going to explain what I'm doing in a second I'm just where for now I'm uh

just copy pasting some code God damn it D it's coming back is those guys my neighbors I don't know what they're doing but they're pulling the trees from my garden

D it can't I focus what are you doing brother okay I have to come back okay

yep so I have the link this is what account um okay all right has

uh is it all right so we have the user accounts I think at the top here we will have a buy button button account can be a bit

smaller case okay we have small smaller l in log out probably yeah that will be available after after the first

purchase here there will be a way for people to purchase this thing have no idea how we're going to handle the pricing but we'll see that

later um we also have this yeah here link and here we also have a

link you pass my linkit the key I think I'm going to remove that part and make it simpler here I'm going to say something like button

stels and had a little description underneath will be able to search invoices oh I forgot

something I did forgot something we want to display the business here somewhere we want to tell the customer Which business it is so I

think on the page AG [Music] content on the amount

section here we will need business and we'll add a new role I

think that will be name um.

stripe account forget how it's called yep not name it's strip account

not accounts see it again memory color oh yeah that was Tri counts oh I think it's because it doesn't have a name because I'm in test

mode yeah so normally we should see the name um yeah well there should be a name here because in my

model it is here name so rep account yeah okay here that will

be that will be the name of the business okay going back to the dashboard on the page add a strip account so button strip

count next pleas content um search customers are able to search for invoices and download

there these accounts so first right so we wanton model we want to take this thing here it's

uh generates a restricted AP key restricted API [Music] key do not change any res

[Music] permission change resource information and click create key at the bottom right of the page right

page copy the P the keyow so generate a restri thep key key

input and we go and pass the new AP All right so that should be a bit simpler add a new strap account your

customer will be able to search and edit download invoices under these accounts generate a new restrict IP key here not change any permission c key at the

bottom right of the page op pass this key below think this a bit clear is my Wi-Fi still okay are we still connected

yep how long do you usually work for 99 hours and sleep one do you usually work for um I work for I don't know it really depends I work

almost every day um I sometimes work 10 hours and I sometimes work 4 hours it really varies I think I started this morning around

10:00 and I probably log off around 700 p.m.

p.m.

today and the framework the language it's um the classic nextjs react tail wi CSS stripe Okay so

he I think this is what we want B B okay here get get a

rep play with y the button here oh yeah a button

we toast l we have the thing here here we go any Bo

think custom Reeves re from the here word

um I'm finishing up these uh where is it let do again yeah I'm finishing up the dashboard from the user side um going to

to remove that they're going to be a simple one two three step uh here is how they get people get the link and here is how you add or remove accounts to

it yeah it looks doesn't look good for now on yeah this okay yep

d for here we can close some windows Yep make some space there work this thing that is not being

shown uh where are you Mr you

are oh you're here okay why are you not being shown oh think

o serial killer reborn hello um you still around Gill he been it's the second day I'm working on this

project I hope to be done by the end of the week and launching on product hun maybe next Monday uh why are you stuck here mister he

I guess I'm tired damn it why this is displayed under if anyone has a clue of what's going on here okay that doesn't make

sense you are AIT who are you and why did you do that to me TR this

this is work okay it's working there why isn't working underneath it because it's in the in a leas

maybe NOP oh maybe that's the because yeah that's probably because the display of the

grid we remove this it can work no let's give it another try so if remove this and

that still not working we transform this into a div this is not working if we remove

that this is not working think if I I put it here is it working oh okay

okay there is something with this list it doesn't like to be in this thing

loog CL n if remove the steps and step vertical let's see okay it's

working okay so this is that thing display inline grade oh maybe that's the thing overflow he hey here we

go overflow SLA not oh yeah

okay here we are one two and me that top account see how that flow go

okay a restricted API key for a new account um I think I might have already this one so I'm using another

one my disputes okay Zen voice permissions are already set real money won't be charged as a

nice add onto the stripe T mode thing invoice okay we go back do

this okay and now it's adding a new account here fix the I think we need have some kind of flex

Flex wrap or just not no WP just Flex yeah we want to display them like as a column um probably we to have a fixed

width Maybe [Music] 64 at eight yeah that should be enough and we want this one to

be margin left Auto got to have all the straffic accounts here oh yep I still need to work on that touching the wrong

one still not uh we also might want to give it is that actually 64 how many pixels is

that and where did I put 64 we want it's full okay better it's full

WID getting tired think my brain is a bit fried not thinking a good

track all right I think I'm tired wow nothing is working um it's probably going to get these tomorrow you can squeeze six more

minutes your son is jutting in and out yeah yeah yeah I think it's it's uh probably because I'm I'm tired in my my voice is uh also getting tired

here we go trying everything where is this being plate all right uh wifey is calling so I guess

it's time for husband to be uh time for husband to to be um good husband

um oh Dan is that Dan uh man the way you talk I'm pretty sure that's Dan mindre from Twitter and not the terrible Dan that is's trying to bully all developers all right um I'm going to log

off for today um thank you everyone for joining uh we are uh almost done with the user dashboard uh the product is almost fully done as well the big part will be the pricing page the pressing

thing and also the landing page copyrighting and all that uh so we're going to leave this for tomorrow and the next couple days hopefully will be done by the end of the week um thank you

everyone for joining in feel free to drop anything in the chat if uh I don't know you have questions if you have requests for the stream I'm going to show up around tomorrow roughly a

similar time so um I will catch you up tomorrow cheers