สรุปเป็นขั้นตอนๆอย่างละเอียด และมากกว่า1000คำ

Introduction and Session Overview 
Claude you're doing amazing this worked perfect this is a really good session this has all been one chat we've done a 
lot of great work in this so I'm continuing my mission to become a senior developer without writing any lines of 
Code by the end of 2025 and I've actually made some progress on my notetaking app I've added three AI 
New Features in my Note-Taking App 
features and I'm going to show you what I've been working on and how I'm actually making changes to my code using 
Claude to give it the context of the entire project so it has a firm 
understanding of what I'm doing and then I'm going to use Claude to actually edit the code and we're going to make some changes so I can add a new note plan for 
the video make changes to the sidebar I've just kind of outlined some of the 
things that I want to change about the site a new feature I added is 
this so one of the things that I really want to add in this site is a calendar 
integration uh so I have a site that is in react and typescript the back end is 
in Python I inan day 30 of becoming a senior developer without writing a 
single line of code and using AI to fully manifest my ideas and so we can stop it and it's 
immediately going to save this in voice notes right here at the top now one of the features that I added is this new AI 
feature so I can type in SL slash and this allows me to directly access Claude 
tell me your thoughts on this plan is it 
doable and then once I do the Clos sandwich basically where I add in these 
second level of slashes that triggers The Prompt and it will use whatever you 
put in as the main prompt and then look at the context of the note and then it will generate a response using Claude so 
this is Claude talking to me directly in my note it seems doable to integrate the calendar into your typescript front end 
and python back in sight I got rid of if you saw my last video I had a little calendar thing here I got rid of that 
because I actually want to do a full calendar integration I actually want that to create an event on my actual 
Google Calendar and then I want to create a widget on here that is calendar that I can actually quickly see my calendar so I'll be able to add things 
to my calendar reminders etc etc and I want to be able to do a lot with my voice but anyway let's make some changes 
to the website using only AI to write code and edit code the first step and 
how I always get started is I open a new project in Cloud I just put in the date 
Setting Up the Project in Claude, planning changes and the first prompt 
here and then I just drag in the entire file structure of whatever I'm working 
on the way you do this on replit is you go to your file section you're just going to hit these three dots and you're going to go download as a zip this will 
allow you to download all of the files and you can upload them with the exception of a few files if you drag one 
in and it says it's super large file you should probably delete that file because it's just a library file you just need 
your main source and components at least that's how Claude codes and that's how Claude has organized their files so 
therefore I've been doing it like that and so far it's working and I always start off with this prompt I posted this 
prompt on Twitter I've been using this a lot and this is a good stage setting prompt because it allows you to 
understand what Claude understands about your project and it allows you to 
actually get a second look at your project from a user experience perspective it's going to outline it in 6 to9 Bullets and then it's going to 
list out three things that we can do better about this code and then list three things that you would change to improve the user experience right so 
this is I think a pretty good prompt let's go ahead and run this thinking deeply 
standby so this is my site right here and I want to start off with one that I think will just kind of complete the 
aesthetic of the project I want to add some features that will make it absolutely epic okay so I really like to spend a lot of time on my first prompt 
here but I'm going to say I basically divide it into two problems I want this button gone because we have this 
recording button and I just don't like the red with this whole vibe and I don't think we need two recording buttons so we can get rid of that and these tags I 
want to them to snap right below this topic button because when you scroll like there's something going on here 
that's causing this so I basically just outline the issues and said okay this is the sidebar that I want to have I want 
it to look good I want to remove the white on the sidebar when scrolling so let's have the tags right below the ad 
topic button which is right here so it should basically be replaced this should move up and it should be like a toggle 
down and then we can add more widgets on the side if that's something we choose to do later with that said let's just 
see what Claude does here and I always include generate full code and there we go it only gave me one single file so 
First code editing 
that's good I wonder if that's all it'll need to change I'm guessing this will 
work but we will see so I'm going to go to the sidebar file all and let's paste this 
in pretty good let's run this full screen it go to the web view so here we 
go we have our new sidebar so exactly as we said we wanted to get rid of that red button we did we now have these super 
lined up here now we're going to scroll and we still have that white so we still have this white section so we need to 
figure this out what if it just changed the sidebar component maybe Claude didn't originally take in the full scope 
of the project so that it doesn't know where to look for the problem so sometimes you might need to give it some 
other ideas it might be in the app. TSX file which is the main typescript file 
and let's give it some ideas here I'm going to first start off by telling it what it did correctly and so I just had 
another realization I realized that the sidebar isn't snapped to the side like most websites that have a sidebar it's 
going to like stay locked in this position so I'm just going to tell Claude to do that and so there we go and 
now it has two files for us to change so we're going to change the library layout which we will paste right here we're 
going to paste this new one in here and then we are going to go to the next one 
which should be sidebar I would imagine yes now we're going to go to sidebar 
copy or we're going to paste that entire thing in here now we're going to stop it and we're going to run this thing to see 
what it looks like we're going to run this go to web View and we're going to full screen it now let's take take a 
look let's see if it did the job boom now we are rocking all right we have it all the same color and it is snapped to 
the side so we removed a button moved everything up here perfectly located and we now have the sidebar perfectly locked 
and let's make sure the other features work and nothing got broken in this process so new note still works still 
opens a new note this is a new note and we are rocking and we can still use the 
AI features just making sure I'm I'm almost positive eight line poem on 
LeBron James boom eight line poem on LeBron James right there this is a 
coding project believe it or not say so now we can go to coding project see that it's right here and we can go 
#the King and we can see hash the king shows up here in the tags and then let's 
do one test of the record feature this is a test recording to see that if what 
I am saying out loud right now translates to a brand new note in my 
voice recording section or voice notes folder or topic whatever you want to 
call it right here we can see that it's saved to voice notes test recording to see that what I'm saying out loud right 
that is the exact thing that I said a few days ago I added in authentication you can sign in with Google I forget 
Profile Page and Authentication 
what account I was just signed in with because you don't actually have a profile page so that's what I want to do next so when we sign in I'm going to 
sign in with this email right here this is my email yes okay so this allowed me to sign in and we can actually press 
this button right here signs you out it does it immediately it doesn't ask like are you sure you want to sign out so for 
now it's fine I don't want to have to I'll do those small fixes later like I think this view is pretty solid I don't 
know if I would change anything about this view like maybe this trash icon can be more modernized but like I like that 
if I'm in the top of the file like underlining something it it makes it very noticeable and I think that will 
serve well for kind of organizing my notes I want to put just like a person icon to the left of this sign out icon 
and then create a profile page so let's actually create page here so I'm saying Claude you're doing great the changes you've made look amazing in the site is 
set up to Firebase database and storage 
and uses authentication right now you can't tell what profile I'm signed into 
once I'm signed in actually now that I'm thinking about it let's do this at the 
bottom of the sign bar I think it should just be the same color as tag so let's make it look like this I want it to be 
just gray I don't like when there's a bunch of buttons that are like super aggressive here so let's go ahead and 
we'll come back to Arc let's open this up profile button that looks the same as 
the all topics button this should take the user to a new page that has their 
profile information all of the data stored about them on Firebase should be 
listed there this won't be the final thing I just want to make sure that it works for each profile so I can sign 
into one profile see what information it has on my account now or or my other account right so make sure that we keep 
all the data separate make sure that it's operational and then we can make changes and then we can add the feature 
of being able to edit their profile picture actually I think we can do that actually that would require storage 
rules uh and storage settings we're going to get there in this video don't worry but let's first let's create a 
profile button right below tags actually let's do above tags don't add the option 
to change any of that information so 
keep that in mind when you're designing 
the layout it should match the vibe of the rest of the site and then we're 
going to type in GFC I changed this a little bit make the necessary changes and generate the full 
code for whatever I need to implement full code entire Code full code all right all right so this one's going to 
be a little bit harder this will definitely have to we're going to have to create a new page it's probably going to have to edit just the sidebar and 
then it's probably going to create a new file I would guess called like profile. TSX which will go in the components 
folder which I would guess because I've done this over and over and over again this is my seventh site that I've edited in the last 30 days so you start to 
learn the patterns learn what Claud does learn why issues pop up that's one of 
the big things you just kind of learn write everything down and so right now I'm in Exploration mode but pretty soon 
I'm going to go into hardcore study mode where I'm basically just studying all of the errors that I get why certain things 
happen I'm going to take a look at all of the functions what's the purpose of the function I'm not going to learn how 
to write the code but I'm going to learn what each function does CU my thesis is that I'm not going to ever have to 
really learn how to write a single line of code I just need to learn how the lines of code are talking to each other 
or the chunks of code not the lines of code man that's my focus here so we are 
going to copy this over to sidebar so let's go over to repet we're going to minimize this real quick let's go to 
sidebar we're going to paste this whole thing in and we're going to create a new one called profile. TSX so we can come 
back into components and we are going to hit add file profile. TSX we are going to paste this 
in here now we're going to keep coming down and we're going to go to app. TSX and let's make sure that this is right 
app looks pretty small so this is we will see and remember anytime you see 
this right here which it says like npm or pip and then it has like random words 
and you're just going to copy that you're going to come to Shell and we're going to paste this in boom and this 
should do some magic stuff that will allow us to do the thing so this looks 
like it's running here in the window let's see if it added that profile okay so it added the profile but in the wrong 
location so we have all topics we definitely want profile to be below the 
ad topic or at least not here we don't want all we don't want all topics right let's see what happens when we click 
profile so we click profile okay so look at this last login it has my email and 
user ID and that's pretty cool right I can actually add the ability to um 
upload a profile photo which this is in a social app so I actually don't think that will matter I'm going to just screenshot this right here and when 
we're talking to Claude let's go ahead and copy this screenshot paste it in right here and I'm going to say Well 
done again Claud this looks great except the button is in the wrong location I 
want this button to below the list of topics not above as you can see here 
okay so it looks like the only file that we need to edit is this side bar component we'll copy this come back to 
the sidebar and we will replace them both there we go it immediately made the 
right change so now we have all topics which works we can click on the individual notes here and we can add a 
topic right now we can actually change that experience so it created this new topic I like when there's variations of 
colors I like this yellow color that it uses I wish it did that more but we can click this button we can change the 
topic we can say vibes you can add a Vibe section can we still add a note 
here new Vibe note B yes this is cool 
okay let I'm just testing to see oh yeah that's something I want to add right now 
actually so when I just added that note it automatically goes into no topic what 
I want to have happen and obviously when I'm on The Vibes section and maybe it should say notes SL Vibes I think that 
would be cool I think that's called breadcrumbs I learned that a few days ago talking to Chad GPT on one of my walks but what we can do here I want it 
Adding and Managing Notes 
to when I add a new note it I want it to go directly into the notes file and so that's what I want to do all right so 
this is what we've done so far we made uh changes to the sidebar we got rid of the second button we locked the sidebar 
and we fixed the white rectangle and then moved up the tags and then we also 
added a profile page and so the next thing I want to do is add a note to the 
topic that is selected so I want for when a topic is selected and I'm viewing notes with that topic I want for a new 
note to automatically be added to that topic when I'm on all topics or what 
does it say yeah all topics and I press new note then yes I want it to go to no topic but if I'm on the tasks topic and 
have it selected and I press new note then it should automatically create the note in that topic I think that's good 
could actually be more complex than I think it is so in this case I think this is good and we can just do GFC and run 
this okay so it said it's making some changes to the library layout let's see 
if it gets it right we haven't ran into too many significant errors in this one which is good but you're going to run 
into a lot of Errors you will run into errors Library layout paste this in here now what we're going to do is we're 
going to click on Vibes and now we're going to press new note boom right there 
and has Vibes automatically selected this is a viby note 
hello test okay save that I want to see what happens when we do record I want to 
see if they're treated the same is a new note treated the same as voice record I'm pretty sure it's not I just want to 
make sure that everything looks good hello this is a voice recording of a 
test that I am doing so it's transcribing it is done so it did go into the voice note I'm not going to 
worry about this right now I'm going to determine what I want to do with these later because I do like the idea of all 
the voice notes going into one location one of my big plans is I want to use this on my phone and so I want to be 
able to just really quickly record voice notes and I'm actually going to have this be like if you click on voice notes 
it's just going to have in the middle of the screen it's going to have like the record button and then just a list of 
these notes right here so like the main thing is like when I'm on my computer that's when I'm reviewing the notes when 
I'm on my phone it's most just like a recording device and again I'm making this app for me yes I may allow other 
people to use it and I might even charge for it because I'll have to because it'll cost money to run and it's a good 
first project but ultimately I'm making stuff that I would want to use so right now I'm focused only on making tools 
that are good for me then I can start worrying about other users once I have the skill set down and become a senior 
developer without having to write a single line of code which I will do inevita and I know I'm not close but I 
will just day after day I'm going to get better at this the AI is going to teach me how to do this and I will do it I 
will undoubtedly do it okay I just realized the something I need to change 
Creating a Clean Note Viewer 
prior to being able to add videos and images to notes I want there to be an edit icon which opens this up where I 
can edit it I want a clean viewer right like I want this to open up in the same 
color that this is and just be a clean page that I can view with the option to edit and what we can do actually is 
let's let's go to Claud right here let's just record what we want so what I want to have happen is whenever I click on a 
note and I just click on it normally I want it to open up to a viewer a viewer 
of the note in the homepage each note has a different color and so I want the 
note to kind of open up in that same color and load all of the things that 
have been added through the editor so like there's a view of the note and then you can press a button to edit the note 
what we have currently when you press on a note I want want that process to happen when you hit the edit icon so on 
the homepage on each note there's a little trash icon to the left of that I 
want to have an edit icon and when you press that edit icon I want the process 
to look exactly as it does now when you just press the note I want that process to be identical however now I want the 
process to be when I press the note normally it opens as a normal view of 
the note with that icon present somewhere on that screen right I want to be able to view the note and then I want 
to be able to to press the edit button and immediately edit that note let's 
talk about how we can accomplish this okay the note I just recorded was all over the place so what I want to do is 
let's just go ahead and use Claud take I just recorded this with voice turn this 
into a clean outline of my re Quest include all of the things I said and 
then we can close this off and hopefully it'll immediately just kind of outline what I just said wow look at this this 
is super clean let's see if this works so I'm just going to add a little bit of additional context with this and then at 
the end it's we're going to just type in GFC okay so now we're changing the note 
editor we're just going to copy and paste it in and we're going to have a new file called not view. TSX with a 
capital V in there so we're going to add a file note view. TSX and we are going 
to paste this in let's try and rerun this real quick okay so now wow if we 
got this on one full prompt ooh look at that that's pretty clean so we have this 
clean notes right here let's add some stuff to it actually I want to see what it looks like when it's further down 
like if it's extended so I'm going to just talk to perplexity do two of those slashes and say tell me all of the lat 
on the Olympics and we'll close those brackets down and this one takes a 
little bit longer it has to access the perplexity API okay so we added some 
stuff now we're going to hit save and so this is where we added it let's click on it so we see here we have this clean 
note like this topic Vibes ooh I like this this is almost looks like like a sticky note kind of vibe to it this is 
clean so now we can add images and I think it's going to look really cool if 
we hm I can't figure out how we should do this yet but we can very quickly switch to the editor I know I I I'm 
going to the editor the editor was actually difficult to set up it uses something called react quill which I'm 
still not fully figured out yet so I'm going to worry about like the format of the actual editor later right now I just 
kind of want to focus on this stuff right here I really like how clean this is I wonder if the is it keeping the 
font so if we go to the editor mode I don't don't think it's keeping the font 
that I'm using like Gil Sands I don't think it's maintaining any of that for example let's try Bolding this I have a 
feeling it won't maintain this oh okay so it maintains the Bold I can't tell if that's the right font we'll see I want 
Adding Images to Notes 
to be able to add images and videos at the bottom of this note so what I'm going to do is I'm actually just going 
to screenshot this and I'm going to catch the corner of my recorder right here I'm going to copy this image now 
I'm going to come back to Claude and we're going to say once again you were 
successful you have done well let's continue before you get all teary try to 
remember that as a robot I have to do anything you say hey key light's broken 
I'm not joking this is really good chat normally they doesn't go this smoothly okay so this is the prompt that I think 
I'm going to start with and I'm actually going to first start with videos so like I'm going to say or images so first 
start with images and I think this is a pretty good prompt so let's make these changes and so I'm actually stopping 
this in its tracks here because it's not doing full code I don't want to to generate any more code I don't want it 
to waste things here I'm actually going to give it the full code for types just because we're getting deeper in this 
thread this is actually important if you guys want to do this it's a lot longer but it's doing so well that I just don't 
want to go to a new note and don't want to go through the trouble of creating a new project however Claude is fixing 
this problem which is going to 10x my productivity I swear when they add the new file sync but I'll make a full video 
on that I'm just going to do types file and I'm going to paste it here and then I'm going to do Firebase and I'm going 
to paste the or fire yeah firebase.com 
Beyond this or there was additional instruction so after I get these three I will then ask Claude if there's anything 
else it needs to do Firebase is looking long it doesn't usually happen that's probably not a good sign but we'll see 
Cloud response was limited I'm just going to say continue generate the full 
code for the rest of the files in this 
step okay so now we have an updated note view let's bring this over to note view 
paste this in all right look at this so we just tried to run it and it looks as 
though we can upload an image and so let's see if we upload one image what happens error uploading image Okay cool 
Debugging and Code Adjustments 
so we have an error message this is good we like errors so we can actually learn okay so here is the error when I 
uploaded the image should I give you the 
existing store storage rules or is there 
anything else I should do and this is the first question where we're not telling it to generate full code I 
prefer an answer just to kind of see if they be like oh what you should do is actually blah blah blah okay so here's 
an updated version of the not view. TSX so it's just giving us this additionally 
make sure that when you're calling the note view component you're passing through the correct user prop with the 
ID for example okay let's give this a try we can see live here on the edit um 
so we can see the problem so if we go new note ah so we're getting some font issues as well but again we can debug 
this all later and then we we will add the ability to add the images directly on here but that's okay for now we don't 
need to do that so this is text here test so we can create this note and 
actually that's another thing I want to add as soon as we're done with the editor and we hit save it should save it 
into this mode right here and then we can press press exit to get out of it cuz I just think this is so clean now 
what I want to do is test the image here so we just made some changes let's try 
and upload this okay so we're getting some errors going to copy the errors aha 
Firebase Storage Setup 
so I just went to Firebase to my note taking app I uh and so yeah so if you 
guys remember from the last video anytime that like if we go to a new user we see that the the two users that we've 
created we've created we've SE a bunch of different notes here and these are all the notes that I've created that get 
edited and changed every single time here we have categories what are some of them daily builds what are the most 
recent ones podcast create. Inc new folder etc etc etc but what we can do is 
we actually need to add storage so there this is a separate thing so we can do storage and we can press get started we 
are going to do it in test mode and we're going to hit done I just realized I didn't have the storage enabled on 
Firebase I just enabled that feature and now have storage set up how should we 
proceed okay so it's said to basically update the rules and I know it's in test 
mode we're going to want to go to the rules here within storage and we're going to go ahead and paste this in publish now what I want to do is we will 
go back here and I'm just going to say generate full Firebase note editor and 
note View full full full okay so let's 
grab firebase.com 
[Music] 
this right here it was almost done with the note so we can just copy this and paste it in I don't know if the 
alignment matters I think it should look like that but anyway it looks operational and then we have the note 
view so full note view note view should be right here 120 lines before 144 after 
now we can type this in make sure that the user type in your types. TS profile 
so export interface now let's go ahead and try this so what we're going to do 
Testing Image Uploads 
is we're just going to click on this note right here okay let's click upload 
image [Music] boom wow look at that upload 
image oh look at how clean that is let's 
go oh my check this out 
so we can just upload those those should stay but look at that so we added the 
images to this note right here 
and oh wow that's pretty clean actually so we can click on 
this so we can add images and so these are screenshots so this one's higher 
resolution you see that and we can exit out which is perfect right so this is 
the resolution so we can see the images that are right here so now we can upload these images right here and we can 
actually go into the back end and we can see that this note taking app if we go 
into files we have users so we click on users and so we have this user this user 
is this name we can click on this there should be four Images so there should be notes okay and now it has different 
folders and so it has all of the notes with images I'm assuming this is how 
this is working because I have way more notes than this but I have two notes that I've added images to let's see what 
this looks like on the back end this is a good learning moment I think this is important so we can go right now it has 
the entire thing right here so this is the back end right we click on 
users and we click on this first user which is someone right this is my 
account but it's just any account that if we did this o we should do this with a different account account right after 
we test this so then we go to notes and there's two notes that we added images which we just did and we click on one 
and now we have three images right here and it worked with a webp file and a PNG file so that's really encouraging now 
let's go to this random note right here let's upload another image let's make this like a screenshot let's see how 
skinny screenshots show up the whole entire uh image shows up right here we 
can exit so now let's go back to Arc now 
if we click on users we now have one user still we have the notes folder and 
now we have three different notes with images and we click on this one the 
bottom one okay so that that it should be the top so if we go notes this one 
with one image should be this all topics image which absolutely makes sense now 
Voice Notes and Multi-Account Testing 
let's test with my other account so we're going to sign out and we're going to sign in with Google okay good so now 
let's sign in with this other account so let's just test and make sure 
everything works right so like oh we have to allow on the browser okay so this is me talking I am 
speaking this should go directly into voice notes okay wow and so all topics look at 
that so like you can have voice notes I feel like we could actually make make this cooler like this could be a drop 
like there could be a drop a voice drop down and I could press that it starts recording and then whatever one I press 
like it automatically goes into that file or something I just love the color like the different colors based on 
topics and the thing is we could use AI to retitle this and we could use AI to 
like add it to the right topic maybe that's what the main feature of the app would be would be to look at your list 
here and then it'll decide based on the title you give and the description so 
I'll have you put a description for what that topic is and then if it doesn't know it'll go into the voice notes 
folder so it'll that might be the feature but if we go to all topics it's just super clean like yep so this is my 
second account this is all separate from my first account so I can post this voice note boom stop automatically adds 
it right here and now let's see so if we upload an image here we're on a 
different account so now we upload this image we click on it right here we have the image in this account now what we 
can do is we can go back to fire Base fire storage or whatever the it is 
and we can go to users there should be two users now there we go the bottom one 
is likely the old one is this me so this one has three notes so this is the other one so we want to go to users and click 
on this one if this one has one note in it yep because we've added one image to One Note and it should just have this 
one singular image in right and again once again this is good for me like I'm 
I'm I'm actually just doing this over and over again just to make sure that I fully understand what's going on on the back end but yeah we can go to this 
random wait no no no no this is my old account this is my old profile I'm I'm so I'm currently signed in on the 
browser as well so I'm signed in currently as two separate users and so 
jeez I like this color I really like this green color super clean but which 
one so we added images on this oh another one feature I want to add is like a little arrows right here or maybe 
I can use the side Arrow to just go to the next note view really quickly but for now this is fine we click on this 
upload an image click on this right here and we have this Halo image right here 
remember that's low resolution that's just the resolution that it downloaded at um let's try another screenshot this 
is a screenshot of the note taking app earlier that's looking good I really liking this oh my God I just thought of 
a really good idea that would be so useful for Content being able to add little numbers 
on these so that like let's say I'm typing a Content script this new app 
that I just created lets me use my voice I can use my voice to create a note and I can also add images to the notes and 
I'm going to be able to add videos in the future it's going to be an awesome cool feature it's going to be sick I'm 
using AI to do this completely in full this is actually true and I'm going to do this until I become a senior 
developer without ever writing one single line of code because as you know this code movement is going to get better so I want to get understanding of 
how to direct the code right I don't need to learn how to write it why learn how to write it that's boring 
unnecessary so imagine this is just a Content script that I'm writing right it's going to go straight 
to the voice notes in No Time Boom like let's say we uploaded an image imagine 
Idea for new features 
if we could highlight part of the text right here and then we connect it to 
that image so it'll turn it into special formatting where it'll have a subscript of one so if I'm sending this to my 
video editor this is with a script to my video while I'm writing this as I upload images I can connect the lines to the 
right b-roll or the right video or the right files or the right links I just really like this a lot 
okay so here we go Claude you're doing amazing this worked perfect this is a really good session this has all been 
one chat guys look at this we have seven chats left and we've accomplished so 
much just in this chat this is a historic chat for me this is actually 
crushing this we've done a lot of great work in this like every 
1.5 prompts that I've put in we've had a solid change to the website that is very 
good we're doing well well in this chat I'm not going to lie now I want you to add the same thing for videos it should be identical should be in line with the 
Adding videos to notes 
images the same thing change nothing besides the ability to add 
videos Claude it's getting lazy on me full code Claude I don't care we're 
going to use all your chats here we're almost done with this session that I I needed to take a break and and gather 
all the information and and make sure that everything's looking good and we can do another Power session and maybe 
even like finish the first official version of this app before I start thinking about security and certain 
things that I haven't learned yet but this is going to be cool so we're going to go we're going to copy the Firebase 
so we're going to go to note View and paste this in now let's update 
the types. TS file and okay so this is just one singular um snippet so we 
should be fine here we just got to go to the type types. TS and we are looking for the export 
interface note so we can do export interface note and it looks like we can just paste that in right here uh 
remember to update your Firebase storage rules to allow video uploads okay so we 
can go to the storage rules right here and we can open this up we'll go to storage rules and paste paste these 
rules into here okay the last one is Firebase 
where is it there we go paste that in should be good all 
right this is a video upload test wow there we go we have a second button 
upload image upload video and so we can click upload video and I'm trying to think of what 
short little videos I have let's just see what this is 
wait okay so we got to take that error so we got this error button was 
Debugging 
there but we got this error what is problem and we probably 
don't want to do too many more chats this is the last thing we're to do on this chat because it's getting longer 
and it it starts to struggle the longer it gets but it's done very well so far so we'll see if it gets this final 
mission here I mean we've done like five or six solid updates just in this one chat um like that's really good and I 
think if you're trying to create websites without coding what the hardest part is getting started which is a problem I want to 
solve I want to create templates so people can get started because once you get started it gets a lot more fun 
because you're adjusting you don't have to deal with the libraries the getting started part is just the really really 
annoying part let's grab this code here and we can go to note 
view note View and paste this in now we 
can go to hopefully this finishes come on finish finish hold it got stuck here 
so I just always like to copy this paste this in here finish the job start from 
the last start from and include the line 
above just because I don't know if that line is done yet so I'm just going to say that and then we're going to copy 
this code for Firebase so we can go to repet now what we're going to do is we're going to go to firebase.com 
and we'll just save this as a new note here go video upload we'll upload this 
MP4 here and we got stuck okay I'm going to call it right here and I'm actually 
going to I want to take more time on the video anyway so in summary today the 
Summary 
things that we did we did a lot today in this chat we basically made we added a 
profile view where you could see your profile information we fixed the sidebar 
that used to not be fixed on the side we also added obviously the profile button 
moved the tags from the bottom to right below this profile button we also made 
it so that when we clicked on tasks if we did a new note within tasks it will automatically create did a new note 
within the task we also added the ability to add an image and 
we only had like three chats left to try and get the videos option to work and it 
doesn't quite work it'll let you select a video however there is a A Minor error 
that I think it's going to take like four or five more chats to get but we did all of that today and and one of the 
like the most important thing is we added this new viewer we added this new clean view I mean look at how sick this 
is so like we can go to one that is a little bit longer we have this super clean note view right here that has 
images in them and then you can very quickly go to the editing View and so you can switch back and forth between 
the view the editing View and the main View and I just think this is really damn 
cool and again you can upload multiple images let me see if there's a limit on 
how many images we can upload I'm can add a lot I like this 
this is clean right across the middle and one of the next things I want want to do I want to be able to like see them 
or something on here that shows that these have images and there's a lot of features that we can add and we obviously have this voice recorder 
that's super sick and one of the things that I want to do is if I'm recording a audio recording and I'm in one of these 
I definitely wanted to add to this I'm just now realizing that because right now it still just goes straight to the voice note or we can use AI to just 
determine what folder it should go to I'm not sure yet but it's really cool and it automatically added hasht voice 
interesting but yeah I mean that's pretty damn cool we're making a lot of progress and I just think the interface 
is coming together really clean I'm going to change some of these colors like this recording this recording note 
is not the best color in the world because this blue doesn't match like this kind of purple color I still got to 
decide on the main colors of the site but I mean for now I mean I just think it's clean and 
yeah you know that's immediate I