Building my SaaS, The One-Stop Toolkit #1 - Building in public

yo yo yo what's going on everyone i hope you're doing well let me know if the audio quality is fine because i haven't done this in a while so my setup slightly different everything might be in a weird place but everyone's doing good what's up rannagudy it's been a long time got my guy i hope you're doing well max programming how's it going man yeah hope you're good hey everyone let me know what you're doing how's your day been hope everything's going well all right let's just shut that lid over there move that out the way and i think we're good so guys uh i'll i'll get to the video or the actual uh stuff in a second just about me one sec um i hope everyone's doing well though and yeah okay all right let's swap to a different screen how's it going everyone i hope you're doing well let's go to this screen while we're here how's everybody doing how is everyone are you all enjoying yourselves you all had a good time you missed me it has been a long time since i streamed or made a youtube video because i've been super busy so just to explain myself been doing a lot of things been working on this project the one stop toolkit and a bunch of ones for work so it's it's a bit um a little over the place but hopefully we're a bit more calm soon so we'll be able to get back to some regular streaming and some regular uh content making should we say so hopefully that's that's where we're gonna be at um so yeah so what's the one-stop call toolkit so the one-stop toolkit originally was for developers designers and creators but it's now for everyone so the scope has changed just needs updating so we'll probably do i'll probably do this off because it's just so small um and then yeah just a simple it's basically asset setting the name the one stop toolkit it's a bunch a collective of tools um which are super useful can be super helpful stuff from like because i normally have like tiny png open confer case so these are just two of the features i've got in already i've got like tiny png confer case uh we've got like um google uh what's called the google lighthouse um so like i'm always using lighthouse this isn't actually you know it's in dev tools now but yeah you've got like lighthouse and all these features but they're all over the shop you know they're not in just one place um you have to have multiple tabs open you know and some of these feed like this is great don't wrong this is great this is this works i mean the ui is a bit a bit hard to uh see but you know it's there and then you know i always have like lorem ipsum generators so you know when you're a developer you have a lot of tools open and we thought you know we want one place with all these tools everywhere imagine one place you can get your uh you can convert your pngs you can convert your text you can even get character accounts and stuff like that so if you're working on a twitter thread i might even have a specific twitter thread feature so you can it can cut break it down into separate threads for you um you've got lighthouse pretty much built in a lorem ipsum generator built in all this stuff in one place you don't have to go anywhere um so i hope that is where oh my god guys i've had my chat so guys i had my chat on top chat and for some reason it only showed these and max's messages i now see them all i apologize um so let me just read some of the chat quick so x e i n all good yeah i'm happy that you're good good to your good d uh learning nlp empire torch that sounds interesting dude uh what is your hobby uh gaming to be fair and watching anime is my actual hobby and then coding as well obviously uh if those uh let's do it yes let's do it max i missed you guys too uh chaos i love you you know that right yes i know that curse we love you too man who else loves the english accent in which tyler speaks it's so good to listen hey i appreciate it and i'm happy to speak it charlie's amazing in general are you on the disc kid already are you on the discord already am i on it i'm always on it i'm just you know in the background chilling uh there's a swedish uh lorem ipsum generator which is amazing i did not know that was a thing that's cool um short paragraph disc i didn't know how many this is but these are the sort of things i want to put all into one place so this is what we've got so far guys this is the one stop toolkit uh dashboards uh you can see it's known connor but this will have like your latest used tools it'll have like a list of a few tools there'll be a few things on here let me show you the designs quick um so i'll go through the login pages on the actual thing soon we'll got simple login uh create an account payment stuff all in here you've got your one-stop toolkit dish for your dashboard most use tools then you have all tools i'm actually thinking about changing this to saying kelso instead of all tools maybe some analytics on the some of the some of the stuff i feel like all tools is going to be here anyway um and then you've got the text manipulator so this one's one of the ones i've done page speed testing so we can test page this is the sign is half finished need to add some graphs in there um but yeah there's that there you've got settings page again blank i'm not 100 sure what i'm doing with that yeah but i know i'm going to need sayings in the future maybe some color theme settings i don't know you tell me what you guys think you'd like to see we've got the account page here so this is um uh this is just simple things you can update your like name you can update your email and password payment details subscription you can see the edit details box there just some simple things there so this is currently where i'm at uh there's a lot of other designs here i'll give you a sneak peek at the actual design for this they're saying uh aaron's building not me someone else is building this uh which nice you can see here you've got a one-stop toolkit a little thing here these will be different images they won't be the same you've got uh all this here again all the same image because i just copied one screenshot you can see it goes through what we're going to be adding and then there'll be even more features here so these are the features we're planning to add i'll go through that again with you in a second uh and then you can see here so this is this is just sneak peek at you know you know just a sneak peek into into the behind the scenes this document what myself and um aaron are working on uh so let me just read a chat i was talking to max and tyler stuff oh yeah no that's cool chaos uh i have a different name there though oh yeah and you oh nice who are you who are you i just sent a gif in chill chat cool project thanks i personally like his sass idea a lot thanks max i appreciate i wish i could make such designs by him so bad hey dude i was terrible at designing when i first died this is just off this is actually using tailwinds this is a win tailwind like basic theme so i've literally just gone with the tail with colours it takes time it does take time to learn but once you get there you'll get there quite easily to be fed it's quite a straightforward process i think but yeah that's currently where we're at i'm currently using notion so just shout out to notion this tool is amazing um and basically you can see here there's a bunch of things i'm not actually using this uh command board i just had it for the features list now so you can see the features list here so i've got an image compressor optimizer i've already done that but i want to add some features like for image manipulation too i want you to be able to like change the size of your image um stretch it minimize it you know do some little image tweaks um so that sort of thing all there uh placeholder image um basically so if you've ever used uh what's one of the things what's placeholder image placehold dot t placeholder dot com ego so literally something like this but maybe a bit more customizable actually i think this is super customizable we might even use the api for this i mean it's not too far down because it's quite simple this simple stuff and this is really good um so yeah that's one of the cool things we'll add our own placeholder functionality in there um url shortener so why the things url tracking i notice a lot of people need urls like you nee a lot of people have a lot of things and adding some url tracking and stuff like that to this application is just one of the things i i see done everywhere a lot of people need to be able to track a url so that's that's what i've done without having to use google analytics and stuff you know what i'm saying um rest endpoint tester so a lot of developers obviously you'll know what this is you'll be making an api you need to test it there'll be one built in so you don't need a separate app for it uh you've got page speed tests um i think i've already spoke about this one but yeah literally we're going to be testing the performance of pages giving them a breakdown and stuff like that so i still need to build unit converter so stuff like you know pixels to rem and m and stuff like that all that stuff needs to go into a place tech text manipulation i'll go over that in a second note so a simple place you can keep your notes but also a quick clipboard feature so you can add you can dump your clipboard into a into a area basically on this site and then you can copy back that clipboard for later use uh laura ribson generator self-explanatory fafficon generate again self-explanatory a page screenshot so we'll be taking be creating a page screenshotting tool so you can screenshot a page if you need that quick screenshot it'll be there um font finder so i'll be just a google font finder just so you don't have to open google fonts you'll just have a google font finder uh markdown tools i'm not sure what i'm doing with this yet there's just a guess clip color palette generator so that's gonna be uh uh well it's self-explanatory again you're gonna be able to generate color palettes but also create your own and store them so you have them saved for later so for designers there and like again content creators anyone who has a brand could use this uh an seo crawler so this will basically give them a report on the seo what they see so where they rank on google and stuff like that just some just an unbiased sort of seo crawler and that's kind of where we're at right now so that's that's that's the planning that's that's kind of what i'm doing uh so let's just reach out yo what's up mr def how's it going dude because i'm not defending websites normally though i want to learn app and game development but i'm very bad because i'm too lazy to practice dudes i'm i'm pretty i'm wet there with you uh once sometime passes off the program we get lazy that's a fact that is a fact i remember i was a lot infused when i said yeah i was saying here definitely i was way more motivated when i first started i'm not young enough to be lazy i need coding in a few years i get that man i get it but yeah no so that's where we're at so i guess the next steps is to start building this so let me actually show you the tool let's close all these extra tabs we have open here boom boom boom don't need open anymore i need that open for soon but let's let's log out let's start from the beginning so we've got this simple login page you've got a little password reset here you can see that back to login um and we can create an account let's create a new account i'm just going to call this tests or let's just put my name in tyler pot uh just be test 102 at test.com i don't know how many tests i've got so i did it and we'll do the password as test one two three four uh and click proceed i'm currently using stripe for the payment system so once this creates the user you'll see bam it opens up the payment bit and because i'm using stripe i'm going to use their test card details here uh obviously this won't work for the real ones so don't put these card details in there not real make a payment it'll process the payment and once that's done payment successful and logs us in there you go uh save no thank you but you can see here now we're logged in we can update our details if we wanted to um we can update our payment methods there's a bunch of little things we could do what database you're using i'm using mongodb because i'm using nodejs as the backend and nuxjs as the front-end so this is all built in next and node.js um i hope that explains that so yeah let me again sayings for a full pages it doesn't exist yet but we've got image optimized you can see here we have this image optimizer we can drag and drop or we can just select some so let's just grab uh dixie thumbnail one of the thumbnails i've done for a friend another one let's do the website and that one let's just upload these you can see they come here now just click compress and we're gonna have some options later but they're not available yet but you can see here we say 49 so it's it's cut it down by half it's cut this one more down by morphing half so it's 61.5 percent down to 350 kilobytes um and 41 so from 500 on that and same here you can see it cuts it down quite a lot like almost 50 so you can cut your image's size in half by using this tool and let me just quickly like download this and open it up you can see the quality is pretty much intact obviously this image isn't good quality in the actual one but the rest of this it cuts it down really nicely you can see the text is still crisp um and let me open up the original for comparison because i'm not gonna like that image was quite made you see here this is the original image um and i have actually just uh so there's the original image and then let's go to downloads um [Music] this one and this is the new one so you can see they're basically the same i mean like you can't actually tell a difference but this one's just half the file size so bam there you go i didn't realize how bad that uh image was there this one that's fine but you can see that no no difference in it really it's really good it works really well and you can see and then we've got a text minute player so let's go to laura remove some generator just so we can get some text let's copy these three paragraphs and paste it in it so you can see we've got a text so we can come in here i'm obviously just going to highlight if there's any errors in that and you know there is but obviously this is lauren ripson so it's it's it's it's well you know we have some counts down here word count 211 words there is nine sentences there is 15 000 or 1562 letters and there is five paragraphs well that's wrong so somewhere along here there's an error uh so that needs testing five power that's three paragraph oh wait cool so when there's a double spec i need to trim white space for this it looks like you can see here it's it's adding a paragraph for these blank spaces too so new lines it looks like there's a new line which causing it that's fine we can work with that we can make it double we can fix that in a second let's do it let's go now let's go to this um here close this second one to work on there if we drop it let's go to text manipulator and you can see paragraph count let's just uh double slash so we're looking for two breaks because that's how car now it is but although if someone had triple break it's probably gonna cost more but let's let's just go here let's paste it back in and there you go three paragraphs that's correct but if someone was to just keep paragraphing it's gonna it's gonna add more paragraph which is wrong so we need to trim the white space before we actually do this so let's go in here and just go before we split let's just go trim and there you go and now oh not analytics over here uh paste that in and you can see there now if we keep adding spaces below you can see paragraphs don't go up let it count does but that's because it counts spaces as well so that's fine we actually needed to count the spaces which is fine um so bam there you go that's kind of how that works um let's just read some of the chat sorry you guys are asking loads of questions aren't you using surface functions in next um no and yes i was going to obviously i mean they're not surface they are surfer based um it's built in node um but i could have but i found separating and works better because then i have an api so if i want to turn this into a mobile app i'll have the api split ready to work um it's if it is possible it is possible yeah like not to handle a separate backend then i would love to add suggestions for tools for your sas app yo max please do feel free to tweet at me send them in the discord i might even create a discord section for it so you guys can do that um by the way guys if you're new around here don't forget to check the description there's a discord link and you can join us there and you can follow me on twitter tyler underscore parts underscore lovely not shameless plugs um i would love to add suggestions for you yeah i was in that stream i even saw the thumbnail being built oh yeah you were weren't you you was we were oh was it i did it on discord didn't i yeah uh gotta go now internet is gonna go away bye all y'all see you soon max thanks for stopping by i appreciate it so yeah that's that's kind of what we're doing there so you can see there's still a few things anyway let me show you some of the other features so we've got the uppercase set so you can update all the text if you needed a title fully updating you can do that you can lowercase it so you know sometimes you're copying out of the sign and you need for some reason it's come through like fully uppercase like they have they haven't used the tools they fully update it and you you don't want that so you go you can lowercase it you can capitalize it to each letter you can title case which just means letters like single layers like a will not be capitalized and you can uh sentence case which basically is it'll set it'll capitalize the first letter of every sentence there you go just like that so it's pretty simple and then you can copy that there i need a toast that pops up but i've just copied it and bam you can see that pastes in just proof it let's up case it copy it again and paste it in there you can see it's cop it's it's it's done so that's that's pretty good that's that's what we're working on so far so this is just a simple text media player now site speed is another thing i need to work on but there's one thing i need to do today which is really bugging me and that's this side menu now this side menu is hard coded and it's very very annoying um to work with because i will show you oh i've just upped my sensitivity and we're back to normal and let me show you the sidebar so the sidebar here this is it's a mess you're gonna see it's got no components it's just one big component built like this so i kind of want to put these these nux links into um well into its own into their own component now we've got to do a couple of things we need to be able to pass through um a nux link um so we need to pass through a url we need to pass through uh let me just see here we need a password svg and the name so there's a few things we need to pass through so let's go to our store so this is a few x store and in state we can finally make use of this we can create a what we call it we call it menu navigation sidebar items um let's call it navigation items let's call it now gation it's going to be an array off let me just go to this quickly yep i knew that was going to error tyler why didn't you think that oh that's the api there shut that cool let's go back here and i think these should all have the same distance between them the dish should have a margin top off 16. yep that's fine that push then that push there so that's fine we can have an array of item or array of objects kyle brazile quack yo what's up kyle how's it going bro quack um so yeah so that's that there um and let's go to okay so inside navigation we're gonna want well basically it's got a name for this aren't we so let's go back here so we're gonna need mains let's create one called main we're gonna kill main and this will be a name and it'll be main and then in here we'll have path i guess we don't it could just be that makes sense name and then in here we'll have uh it's gucci my brother just laying in bed nice yo paulo what's it go what's going on dude how you been um cool so we've got navigation let's um we need items don't we so we need the actual list items which would be enough array and this will be named home it's actually what it's called what if i name it dashboard we're going to go to dashboard let's call this a dashboard uh url which will be slash um we also need svg or icon and that will be we'll call it dash board dashboard that makes sense right that should be fine dashboard cool i think that's good so let's do another one let's go in here and we're going to have the third one which is that's not it let's go to uh account and settings so we need an account in settings section so we have name account uh url slash account perfect and icon account circle no just account for now um and then we'll have one more i'm great been so long since i saw you live paul it's been long it's been a very long time since it's been live i've been super busy how did noah wanted sex that was creepy but yeah it's been such a long time it's been uh it's definitely been a while but i'm starting to calm down with some of the work i've done at the minute so hopefully we should you know we should be all good uh but yeah so we've got this first set here but then we want a new object and this will be named this will be called tools and then and then we need items and this will be enough for one of these name calculator i mean the calculator is a good idea i mean don't get me wrong everyone has calculated but why not build one in here with extra functionality who knows okay so items oh hello uh what's the first one on there it is image so we need a name and it's the image optimizer we then have the url tools image optimized i think that's correct uh tools image optimizer it is correct um back to code and then in here we're gonna have name image resizer no that's actually gonna be a part of the image optimizer um we're gonna have site speed site speed yo what's up coding desires how's it going dude are you allowing members to build out features or just you and aaron uh we're kind of doing it just me and aaron because it's gonna be it will be a paid for application people have to pay for so i don't want to take any like i'm not i'm not gonna hire anyone i'm not gonna do it because i'm not gonna be paying anyone else and we're just is this how it works we're going to me now works a good team and we like the way we code so we won't be asked anywhere else but if you do have any ideas or anything you'd like to see inside this uh collective of tools or any tools you think would be super useful then please feel free to drop me a line on discord or twitter or anywhere like that i'm happy to take feature requests all the time i even create a feature request submission website just just for it hey tyler finally got to watch again dude it's been a it's not that it's you know it's i've been i haven't streamed in a while so yeah hi how are you doing it's me nathan your admin it is nay for my admin um i also need an icon for this so this is going to be icon and we're just going to say image optimizer or just image i think that'll do um we're then going to have another icon which will be site speed or lightning bolt like lightning and then one more tool which is the text manipulator which we've got so far tex manipulator maybe text converter we can rename it when we want it's fine it's while building this a url text manipulator and icon text yeah text that'll do cool there we go that's that's let's just do this as a base space right now um and let's go to sidebar sidebar and let's come in here so let's just comment out all of these comment these out i need to offer for now because i actually has functionality to this one and i just tried to comment them out and that did not work because i have comments in between good let's just go up here let's comment out this section first then comment that out and then comment how did i miss that there we go that looks about right cool yep so now if we go back to this it should be blank on the left that's fine um corey rodney hello everyone tyler been following you for a while on twitter but this is my first time at being upbeat being on the stream being in the stream yo what's up corey how's it going dude how's uh welcome to the stream we're just we're just we're building we're making stuff we're currently working on new navigation workflow because currently this is a mess and i wanted to make it a bit more a bit more cleaner so first thing i'm going to do right is we're going to go we're going to basically boop and go well actually saying that we need we need what do we need we need to be able to loop through each section so each section is going to need some sort of diff i think um and then we're just gonna say fee for and we're gonna say store is it dollar store dollar store dot state navigation what do we call it navigation store.state.navigation ass section a section or as a menu am i doing wrong here why it's broken if e4 store is it just because this is wrong uh store dot state on navigation ass menu or in oh yeah it's in course so it's it's the opposite way around i just think this is a lie i'm pretty sure i've done something wrong here let's say um what do we call it so we've got navigation uh sub menu sub in the sub in store oh um sub install oh yeah server's fine and then we'll just say oh we need an i as well and we'll just pass through the index here because that's all we have we don't have an id or we could go sub dot thing and then we'll go we want to still this here so h5 we want this here we're going to say tex gray 500 texas perfect well let's just see what that does quickly see if it works and main main perfect now let's get the actual title so it's called dot name so it'll be sub dot oh we'll go ahead and just say sub dot name and then go back and there you go we've got main and tools perfect perfect um cool what is everyone saying just quickly are you going to build this one out in public is what i meant to ask oh how am i going to build the features in front of people um just i'm not going to build a load of features i'm just going to um i'm just basically gonna build just some small features i don't think it's risky i mean i plan to build this out to be super feature rich and super complex as in by complex i mean i'm gonna be building features that not everyone's gonna be able to build like if someone wants to still decide they can go for it but you know i've got my own plans i've got the my own ideas and i won't be building everything on stream i mean i've already built the foundation off stream like i'm not going to be showing how i built the login or authentication systems or anything like that the api separate you know i have no worries about building features in front of people people can learn about this prop product it's a i'm building it in public anyway so i'm building so everyone else can kind of watch me if i can i'm going to tweet about it all the time just so people know how to you know to help other people if they want to build their own sas that's kind of the aim so build a product so people can enjoy it so we've got sub name anyway let's let's get back into this and then in here we're just going to have the the list so we're going to have a diff and it's basically just going to be this nux link let's copy this paste this in here and then bring this i am going to actually create a component for this but for now this will do there we go uh and let's just go well i need to do the opposite way why not you know let's create a component for this now i was on i never end up doing it we'll call this uh [Music] enough item dot view now if i um dot for you uh let's just use the few default template and let's paste in this here bring that back and all you buy one and that should be good let's get some props going in here we're gonna have a url we're gonna have a name and we're gonna have an icon uh icon i think that's right that's right isn't it so in here there's gonna be two it's gonna be a url and then we'll have or path i don't know how would justify that say that um this will be the svg code so here i want a diff with v html and this is where we need to install certain moves let's stop this here quickly let's go here and this is why i had this open so i need nux svg let's copy that come back to the wrong one to this one and we're just gonna say mpm install npm install nuts svg let's install it so this is a tool which allows me to just get um svgs from um a file and we need the assets where's the ass do i not have an assets folder i'll create an assets folder in a second let's just click npm uh no i should probably do it before i run the software again so i have to re-run it uh assets and then we're gonna have icons slash uh what was this one dashboard dot svg and we actually go designs actually only got rid of it but we're going to go in here this is the dashboard icon maybe who knows i might change a copy svg code and let's go back here and just paste that in bam i just want to be able to import that basically and then let's run our server i'm going to say html is equal to oh it's require let me just uh go and look at the documentation because it'll tell me it's actually at the bottom raw loader it's actually the ferry bomb this one is what i want require this let's go to where we going back to code god my brain is like a sif today boom assets is that right shouldn't there be an at sim card i use at is that how it works in this i don't know but this will be icon dot svg raw oh wait assets and then it'll be icons icon svg raw there we go so that should hopefully display the icon right and then in here we're just going to say name let's break it down so it doesn't look so messy and that's not how you spell name tyler that m shouldn't be there are we working with you three or two this is nook so this is few two i believe it's still a few two um i yeah it doesn't have to competition api anything like you can actually add it in if you wanted to um via a module or something but for now that's that's where we're at so let's go back to code naf item here we are um fee html require assets icon svg raw that should be right i think we've done that right that should be good remove that we don't need that we're using tailwind here by the way that's why there's so many classes everywhere uh nav so let's go back here let's remove this and let's pass naf item we're going to pass through a name which will be bound to so oh we need to actually feed for this so it needs to be a fee for and we're going to say uh sub dot items did we call it items let's double check items um in no wait wrong way round in item and we're just going to say item dot name and we need a key because elsa is going to complain key is equal to we need to make an i or we're going to call it j because we already have an i we're going to say j and item name there we go key let's break this down as well there's so much going on here make it look a bit cleaner we've got a key a name we then need what else do we have a url so let's get our url in here our url item dot url and then our what's the other thing i should just pass through the whole item probably would have been smart but it's fine what are the separate components oh yeah icon is equal to item dot icon there we go and break that down just make it look a bit cleaner there we go and i'll making bold moves error well show the airbag unfortunately text.svg cannot find module.txt.svg go back home i need to do a 404 page i'm going to write down a sticky note um cool index let's have a look so tall text oh of course there's d stone exist yet so it's gonna throw errors um is there a way to say if it if it exists i guess we can can't we so let's oh i don't know will it no we'll just create we'll create them now uh let's go icons we need a new file this will be text.svg we can leave blank ones in here for now we can fill in a second uh what else we need is settings svg uh what were the other ones we needed should we all be in there so we need image.svg image.svg um lightning dot svg svgs everywhere i wanna eat a pair uh close these useless to me text what do we have settings settings text text lightning uh image we're gonna need an account one let's do that oh hello account svg close you um count the svg dashboard i just thought i have a 404 page why would i add that uh let me just read team uh attention good afternoon bud glad to see you're back to youtube hey thanks tenshin only we've been away for a while but we should be getting back into it now oh top united kingdom's top 10 list thanks netflix go away um romeo's romo are we working oh yeah you always said that uh tawwa aereo hey yo hey yo how's it going nathan death i think i've asked you already but what keyboard switch do you have uh it's just cherry red i think um yeah i think it's cherry red i think let's have a look is that everything so we've got account dashboard image settings lightning text we have image we do one two three there should be six that's six cool let's go back to here uh refresh oh it's inlined it as text that looks that's interesting looks great let's go to this page let me read this thing again look here it says dynamically important requiring text name is it not raw i think i'm supposed to use inline instead so i think that's what i'm supposed to do uh so in the naf i um say raw type in line wait how's that working uh oh but that's only when you're doing this maybe let's have a look let's have a look we'll see no that's still giving me that hmm anybody anybody in the chat someone's saying me daily meow what's up dude how's it going um i can't employ like this because it needs to be dynamic so it needs to be in here kind of needs to be how this sets but i've done it exactly that diffi html have a look let's have a look we don't write if fee html require the path which is correct as it'll throw an arrow we've seen that happen and then in line i feel like that should work i feel like we should be working now that should be working but it's not someone someone who is smarter than me please send a send a messenger um in order to module upgrade default.svg next webpack rule gets replaced with this handler uh i have just thought do we have to include the module yep yes we do and did i do it probably not they do it automatically now that is the question next config modules build modules build modules um well that's now you're doing it give me give me this oh there we go is that right i think that's good all right let's restart the thing oh it's it's stopped anyway good let's go now let's bam r starts with it's not a function where are you getting this error from uh ah that starts with tailwig tailwind i pull it in the wrong place uh toast nooks svg a buff is my build modules yeah it's oh module thank you i'm an idiot i thank you sir thank you for saving me from my own stupidity thanks guys look at buff modules thanks benno i apologize you guys are probably you know the worst part is because the stream's behind as well it's like this is it's going to have taken me a while to see your comments mvm run dev let's r starts with fungal okay well it's now in the right place i think build modules that is correct and r starts with it's not a function why are you erroring where is this error resolver j it's not in that i read it wrong details to google wait copy that copy to the google unless anyone in the chat knows what the error is let's just i reason value keyword that starts with keyword because parameters yeah but i don't use starts with do i oh i probably do say yeah but it should have aired before if that's the case it should be in tools and text manipulate if i did use it i'll start with no it's not how that starts with uh are you using blitz.js no i'm not christian i'm using nuxjs and a few other packages um there is you can see the packages here we've got axios we've got off nux pwa toast uh google fonts tailwind css and svg um i think you might have taken something out of modules when adding the new one i probably did yeah no let's undo all this and then let's just go in here and add at night.js forward slash svg save go here let's try running this again give me some good luck hey it's building that's good that didn't happen before i think you were probably right i probably broke it somehow along the way like an absolute idiot and now we're we're back on track i've thanks benno i appreciate it ben oh thank you beno beno i was gonna say uh no we still have near it no that's fine it's it's a different era though so let's have a look let's go here it should tell us on the screen module build failed cannot read property children off undefined target client node svg to few so this is a different one let's uh nuxt svg looks this it nice it might give us the same result it doesn't like the okay nope don't wait uh all right let's have a look at this one next what package we're using next at next at nook's faucet svg and what's the actual error that's not that one back here we've got we're just checking there's definitely no children asd okay that's not there that's just in the actual thing children ast children length reserve white space yeah i don't know what anybody i know you got any other solutions i'm i'm it's account.svg in oh is it because it's blank i actually think it's because i've had i have blank files you know let's just do it properly let's just go here account grab this copy svg code let's see if it gives us we'll do this one and if it gives us the error for a different one this time that probably means there we go so what's is it giving us the error for saying else this time set yep it's because they're blank it's all good we've got it we we're on track again i was mistaken uh copy svg code let's go here this is pain probably should just done this while i did it originally i am special we're gonna go for what else we got we've got image optimizer it's just a little image icon copy svg codes um here image bam what else we got we're gonna have a text manipulate which is this one i need it let me go up here because it won't be right up here bam copy svg code back to the code um text.svg paste that in there uh what else are we missing now uh lightning we need the lightning uh this one rpsvg code [Music] image account i think we're good give me no errors give me no errors okay we have no errors but we have an error uh can i just can i inspect this what's it displaying functional true oh we might need to use raw again because i did change it to you saying else we go back to raw save there we go we did it i mean you guys helped a lot did you change the role back yes yeah thanks benno i appreciate your help benner you have been an absolute trooper shout out to benno guys ben oh capitalo don't forget the capital o um cool oh no but now now the actual oh i think i know why um this i think that's it copy wait if we just unscope this and give this a class aside let's just target this with a little id call it sidebar copy that go down here just go hashtag sidebar um there we go that's working again hey oh wait i said i did have a 404 page wow look at that it's kind of doing something weird boom did that do that before or is that just me it's fine you might guys probably don't know what i'm on about but it's like a hold on look it's outlined it's not actually what did i what have i called it set to let's have a look um let's go to here svg path stroke oh get phil as well tyler oh no because that's gonna that'll probably break so oh yeah look if it does break saying everything needs to be stroked or outline stroke everything needs to be allergens this should be stroke fill i think um so we'll sort that again i'll add it to a sticky note look i'm writing it down i mean you can't see but i'm writing it down a sticky note svg icons svg i oh that's lit cons icons fix dot dot um stroke outline stroke there we go it's going on the monitor boom enough is sticky note i could have just wrote that down in my to-do list but i'm using sticky notes for some reason because i've i've i've gone back in time but boom there we go that's another thing done so you know small small wins um i think we can remove these now ah god this was a mess i might even get this working i might even add like functions you can add in which would be nice um let's have a look so there we go refresh oh and we're missing mt16 uh my 16 i know mt16 so here we'll go mb16 oh there we go that works and there we go we've got the navigation menu and now we can update it by simply going to our store and just adding a new one so if we wanted an additional settings and call it settings 2 with a hyphen 2. and go here boom settings 2 is now there there you go so that's much easier to handle than constantly copying and pasting code um so that makes me happier uh remove stroke cone replace with fill current yeah i think i need to actually change the so i know what you're saying let me go back here so let me show you so if we go to fill current instead and we come here and we refresh you can see it only works on ones which are outline stroked so you can see that it's filled to the inside fills the inside so i need what i need to do is i need to outline stroke all the ones i stroked so like this one um like this one anyone was using an outline or borders i need to basically like if we go here i need to just see it's using a border there i just need to go object uh path outline stroke and then just copy svg code again go to here what was that lightning there we go and go back to here and now when we click on it you can see that works the fill stroke so fill currents what we need but i need to i do need to i need to make sure that all fills are not strokes what kind of satin you're building it's okay let me go let's start from top so one stop toolkit is going to be a toolkit or a collective of loads of useful tools such as image optimizer site speed optimizers text manipulation you can kind of see here so let's just get some laura mipsan uh laura mipson give me that copy copy copy copy uh anybody else do that spam copy you could just gen you know you can do all this you've got a bunch of different stuff here copy it back out uh you've got word counts different things down here there's loads of living features image optimization so let's just drop in this logo drop it in click compress you can see that was 1.6 you can see now it's over half done so let's download it and there's no down play to the actual quality what this does it's kind of like how tiny png works it basically combines the similar colors together so you don't have as many colors without compromising the the look and feel of it if that makes sense so there you go and that's that's what we're building it's loads of different tools built into one so we're gonna have site speed generator here's the designs um and it's basically just gonna stop people from having like a million tabs open it's going to give you a place to store stuff there's going to be more features just as you can see here we've got uh url tracking uh it's going to be spelt tracking not sure let's place all the images page speed tests page screenshots all this in one place basically it's it's it's a multi-tool it's like you know a builder's multi-tool it's it's that for people who use the internet you know those those technical people who have the power of writing content on the web it's basically for those guys uh it's for anyone who has a business online anything like that i mean if you're if you're writing a blog post like you might need to manipulate text i don't know this is just a guess but there bring more features from just this again we're gonna add in loads any feature suggestions you guys have just you know farming the discord again guys if you're new around here don't forget the discord link it's in the description below um i had to update the link because it was broken um so there's a new link in there so my old videos probably have the wrong link sorry about that but you can join our discord and uh get involved with chat and you know what let's go to the discord right now hopefully we're in the right place hey chill chat what's everyone saying uh hey everyone uh-huh yeah here you are um so we you know this is the discord come join us have fun um we should probably create a room we might even create a little category no project uh where can i put this in the lounge in the news i don't know we'll create a room where you guys can gift your ideas for the uh the sass i'll i'll do some more updates you know there'll be little things coming on uh but that's that's that's where we're at a minute so yeah yeah anyway let's go back to i gotta stop the stream in like five minutes how about we do a mini quick q a will any questions you guys have for this or any feature ideas you have i'm i'm i'm all i'm all eyes i'm all eyes yo rehan sensei the freelancing community has been inactive for some days yes rehan i have um i have not been pushing it as much recently because i've been super busy hopefully in the future i'll be able to push it more but right now it's going to be it's on our hiatus so i will hopefully help more freelance in the future um but right now i need to take a mini break from that because there's a lot of work going on and especially this sas this sas is one of them so yeah so hopefully that answers that duck said um so yeah yeah that's that's what i'm saying um cool any other questions got anyone got any questions anything you want to ask me you know far away i'm just gonna i'm just gonna put my phone here i'm gonna i'm gonna blu-tack my phone to the ceiling i'm not really that would be crazy imagine that uh i'm gonna take a sip of drinks i haven't drank this whole time ah nice very nice yeah guys oh wow guys don't forget to like don't forget to like this video because i i appreciate the likes definitely appreciate likes uh uh was do you want to create a static page from that sas a static page no no no you want to create a static page from that sas what do you mean by that uh explain do you mean am i gonna you am i using a static am i using static generator because if so no i'm gonna be it's gonna be built with um surface side rendering it'll be ssr sr surface side ssr ssr are you gonna make the sass freemium no it's gonna be paid um i haven't thought about any free features uh i was originally gonna do it completely free um but then we decided against it we thought you know what we don't wanna add we don't wanna i don't want anything where it comes up like you can do this but you can't do this because you have to pay for this uh feature because i feel like it's not a massive tool it's not going to be super expensive for it's going to be like super cheap um if that makes sense so yeah hopefully that makes sense because there's going to be a few features in there that will be probably you know which will compare to paid platforms such as the uh url tracking like url shortness it'd be kind of like how bitly works uh in a similar way uh to give some analytics on url she posts to social media she can track stuff and she's uh you know we'll try and do privacy free as well we aim to make it so it does not take away for privacy for any of the users you know it just gets the basic information and stuff like that um so yeah uh that's that's that basically that's that's that information um any other questions guys far away far away far away your questions to me i can send myself money apparently according to my phone send yourself some super chats now uh i'm okay uh by the way i know the chat is slightly behind so i apologize if you guys messed say anything and i'm just here blankly staring at my phone uh because we have two minutes guys two minutes if you have any questions feel free to fire them away at me any question you have i will try and answer um but yeah so this is let's just close this and this uh so dashboard i need to get like some i think i'm gonna start working on some extra bits here which will be good any deadline for this one i want to release it uh an mvp of this so i have a list so let me read this out to you so um i want five or six tools on the left here these are the tools i want to be done for october for the minimum the mvp release date i want speech site speeds i want to be able you guys to be able to track speed you know we've got image optimizations i want that all done and ready uh oh excuse me uh text me ablation that's fine simple you know it's already there um so i want these ones i want the url tracking so you're able to track urls i want endpoint testing and placeholder images so a bunch of tools morally for developers to start with uh that's the goal on the mvp but once those uh are all released i'll be each week i'll be trying to bring out one of the new features um so let me show you the feature list here it's on the left here you can see image optimization play doh placeholder image i want to be bringing out these top ones here these top five are the ones i want to have for the mvp and then after that i want to have the rest of this you know just out there like quick clipboard so you can drop your clipboards drop it out dump it somewhere and you know bring it bring it back around uh so if you need it again you've got somewhere to store clipboard your you know your your paste bim uh notes uh you know simple note taking uh lorem ipsum generator which is quite simple to be found might even have that in favicon generator page screenshot font finder markdown tools color palette generator seo crawler and then anymore maybe you can think about uptime checker for websites that is something i was going to build as a separate tool but because i'm creating the one stop tool i think it may have to go in this you know what let's do it look i'm gonna add it here this is this is this view we're gonna say uptime uptime integration website uptime integration although it probably won't be as advanced as like uh uptime spider one of the things i was also going to build which is this is enough for sas guys here let me show you this one there's a sass we were working on it's an uptime it's an uptime monitor as you just said you know to up test um you can see it looks really good it was actually really nice it was really nicely built also a little thing here if we refresh page colors change every time um you can see it's gonna be 99p for every monitor you had um and yeah it was really good but unfortunately we've we've had to step back from this because of other deadlines but you know it's fine um yeah we won't speak about that that died quite quickly but it's still on the back burner in case we want to you know launch at any point um but yeah that's why there'd only be a minimalistic version off this in here but anyway guys i am going to have to end this stream here so thank you all for tuning in you've all been a absolute dream team you've helped me out you've asked questions you've kept the chat lively i appreciate you all so thank you all for tuning into this stream and i will see you in the next one oh what do you do for design inspiration i i look up for websites and i just do it i just look up for websites ben oh that's it i i just see what looks good and then i just go for it that's kind of that's my whole that's my whole thing anyway thanks for tuning in guys and peace out

Channel: Tyler Potts

Views: 919

Rating: 5 out of 5

Keywords: webdev, javascript, css, sass, scss, js, vuejs, vue, reactjs, website development, website design, app dev, app, app design, app development, mobile app, native, web developer, app developer, developer, programmer, saas, build in public, building in public, nuxt js, nuxt, nuxtjs

Id: rQTlT-gxf2Q

Length: 63min 20sec (3800 seconds)

Published: Wed Sep 08 2021