How to build full-stack applications with Bolt

Amie [0:09 - 1:34]: Everyone, welcome, welcome, welcome. Thanks for your patience. Have a big group today. This is definitely one of our more popular expert workshops. I had to actually upgrade my Zoom plan this morning to account for everyone, so I'm glad you guys all made time in your busy schedules. Clearly, Bolt is a popular tool right now. I personally have been using it every day. Finally made the leap to upgrade to the page. Back a bit. A little bit. All right, if you're not on mute, go ahead and mute yourself. All right, today, for those that don't know me, I'm Amy Pollock. I have been helping Ben with content and running some workshops and office hours. So some of you recognize from office hours, which is kind of a more casual hour where we talk about AI. Today we have an expert with us, Paul. And no, no pressure, Paul, but let's jump into it and I will keep admitting people as they come in. Right. So Paul, why don't you give us a brief introduction who you are, what you do, how you got involved with Bolt.

Paul Gosnell [1:35 - 9:12]: Sure, yeah. Hi, everyone. Nice to meet everyone. I'm Paul. I'm. I describe myself as Bolt's biggest fan. So I, my. I'll start at the, I'll start at the beginning. So my background has been spent working either freelancing and agencies, consulting and consultancies, or trying to start my own startups. Failing at starting my own startups. But I spent 20 years probably straddling those two worlds. Startup world, agency, consultancy world. So I love shipping product, I love building stuff, you know, something I'm passionate about. I love that sort of idea to something stage. And we all know that, you know, failing fast and trying to kill something quickly is key. And I've spent, you know, either for, for clients or for myself, you know, building stuff. My story, I won't give you the full 20 years story, but the last sort of year I had some time out living over in Dubai and I was thinking about my next sort of, my next thing, my next project. And I had an idea. The idea was around called Chilled Tools. So my thing was that all tools like analytics, CRM, crmss, all those tools that we have to use for business I find are quite complicated and complicated and over engineered like HubSpot and Google Analytics, those things just stress me out. You know, the thought of even logging into Google Analytics stresses me out. So the idea was to create a suite of tools which are chilled out. So that's where the, the name came from, Chill Tools. So I sort of had a blank canvas. So the first thing I'm going to do is put together a team. I need, you know, maybe a designer, a developer. I will just say that a long, long, long, long, long time ago I used to be a front end developer. This was when HTML4 was a thing and I was building, you know, templates, eShop email templates for agencies. So that's how far back it went. But once you've sort of been on the tools in code you sort of some things you never forget. So I would never profess to be a developer nowadays at all. So it's accelerated me and it's gone far into the distance and I can't even keep up. So I've always been one of those people that sort of gets the tech but doesn't is not so hands on with it but can talk about it. And in the agency consultancy world that's pretty key. So looking to put together a team, trying to find a designer or a developer and I'll project manage it because I can do that. Maybe you need a UX guy, you know, just trying to find a small team of people to put together and I sort of put myself, you know, maybe six weeks, eight weeks timeline and we can ship a product. As I'm sort of just starting to think about that and in parallel track I was keeping an eye on AI tools like us all sort of been interested in AI for a few years now and was very sort of aware of gen AI and image and video and music sort of accelerating. But Codegen, you know, wasn't really keeping up and I was sort of looking at tools like cursor v0biversal and still to me as a, as I still class myself as a non developer, they were still using Cursor is still too complicated for me. I just haven't got the time, energy or patience to even try and start to relearn those things. So I would give up on those tools and would be, you know, keeping an eye on. There must be a tool coming which is going to take a lot of the legwork out of development. And as I say, literally the day I decided to start this project for Chill Tools, Bolt launched and it came up on Twitter. I went in and literally after you know, three or four prompts realized that this is, this is incredible, it's blowing my mind. And that was whenever Bolt launched, you know, back in, was it October last year or something, I can't remember now. And I literally from the day it launched probably spent, you know, three to four weeks solidly from the moment I woke up until the moment went to Bed, just, just using it, just coming up. And then I was remembering past projects, startups that have failed in the past, and I was managing to spin them up in like a couple of days and just, it was just incredible. So, yeah, I mean, that's ultimately got to a point where I wanted to start building Chill Tools. So Bolt did that for me. I managed to sort of build the first version of Chilled. The first chill tool was a CRRM called Chilled CRM. So I managed to build that with Bolt in probably two weeks, three weeks at a push. And, and yeah, I was sort of, like I say, blown away by it, but. But felt I could actually get a lot out of Bolt quite quickly. And I realized that maybe I was able to get more out of the tool than other people could. And I wasn't quite sure why. Maybe maybe because our backgrounds or experience, maybe because I used to be. I don't know what it was, but I was able. Just the way I was thinking or, or writing about my, what I was expecting, I was getting the results pretty quickly. And, you know, I managed to build the CRM system with stripe integration, Auth connected to Firebase to start, then migrated to Supabase. So I think we've all been there, we've all made these, these, these mistakes and then, and then, yeah, got the, the product stood up and it's live and it's has paying customers now and it's, it's running. The problem for Chill Tools is that I'm so obsessed with Bolt, I sort of just end up working on anything to do with Bolt. And in the, the Twitter community for Bolt, I'm there trying to help people, trying to, you know, give back. I see people tweet stuff and I, I know the answer because I've been there, so I can't help but, but, you know, go in and answer the, the question and try and help people as best I can. And I guess just. I will finish this long sort of story about how I got into Bolt and actually do something in a minute, but the point is that that sort of got me on, I guess, Bolt's radar. And I met Eric, CEO of Bolt, and we were chatting and we got on. He's a new dad, so am I. He's a, he's a. I'm a runner. So is he. And we, you know, he's an awesome guy. So there was something there and I just said, look, if you allow me to, I'd love to keep going and be. And hang out with the Bolt guys and hang out and do stuff with Bolt and so, yeah, I sort of now just hang around with those guys as a, as a, as a user. I don't know if I'm their number. I was the number one power user for some time. I don't know, I might have lost that crown now, but I was for some time. And just, yeah, just try and help people. Sometimes I'll get connected with someone who's struggling with a project and I'll go and try and help. I can't always help, but I can guide them a little bit and we eventually work our way out of a, of a, of a bug loop. But yeah, I guess that's enough about me. I, I can, I guess I just go on.

Amie [9:12 - 9:42]: Yeah, it's great. You know, it's interesting you say like now you have all these ideas because I also find the same thing that like, the more I've been using these tools, like when I'm like, you know, cleaning up the kitchen or whatever, all of a sudden all I'm like so creative again for the first time in a long time. I'm also a relatively new parent. Two kids under three. Um, so I feel like I lost a lot of time to like explore and create and these tools are kind of giving me some of that time back. So totally identify with that feeling of what else can I do?

Paul Gosnell [9:43 - 10:29]: That's it. Yeah. And like, I guess for so long you're always, whether you're a solo founder or a designer or a non tech or a no coder or loco whatever, you're always normally reliant on another human being to help you, you know, build or multiple or teams of people to help you build. And now that, that, that's gone, you know, there's no, we don't depend on anyone. We can literally fire up, you know, Bolt and within hours or days have a product, you know, which would normally have taken weeks and teams of people to do. So yeah, it's, it's just, yeah, just unlocks the creativity and means. It does mean that we have lots and lots of. I've got probably you. I don't know how many projects now live that I haven't finished. But. But yeah, it's awesome to. Yeah. To, to build.

Amie [10:30 - 10:54]: Yeah, awesome. All right, well then let's jump into the tool. I think you should be able to share your screen. Let me know if you have any issues. And yeah, and I put in the chat. But if you aren't paying attention to that, if you have any questions that pop up, go ahead and drop them there and I'll weave them in for Paul and then towards the end we can have like a proper Q and A and all that jazz.

Paul Gosnell [10:56 - 11:32]: Let me just see if I can share the actual tab rather than my whole. Apologies. I can't figure it out. I can do Window, Chrome tab, but I can't select the actual tab. This opened. Okay, I'll just do entire screen and then I won't be able to see you, but that's fine.

Amie [11:32 - 11:33]: All right.

Paul Gosnell [11:34 - 11:54]: Yes. A shout if you want me to stop because I can't see anyone now. But. Yeah, so look, I don't know if there's anything that you want me to build or I can sort of. Basically we can just pick something random or, you know, something relatively simple to sort of work through. I can.

Amie [11:54 - 12:21]: Then, yeah. Anyone have any suggestions? Drop them in the chat and maybe we'll go from there. Out of curiosity, how often are you like crafting your own prompts using like Plot or chatgpt outside of Bolt? How often are you using the enhanced prompt button within Bolt? Oh, also you're on the, you're on your zoom screen. So it's like this meta.

Paul Gosnell [12:21 - 12:22]: Oh, sorry, views.

Amie [12:23 - 12:23]: There you go.

Paul Gosnell [12:25 - 14:23]: Sorry about that. Yeah, so I mean my style is. I tend to, I don't overthink the prompting too much. I'm yet to find some solid proof about, you know, there's these different services that are spinning up where, you know, they'll produce a PRD documentation, there's various different MD files that can be created and you know, I know curse is quite big on that and you can copy them into the directory and Bolt now and there's all these different things and I'm for me the verdict out on whether they're actually, they're definitely doing something. But ultimately if you take a step back, what they're doing is just being very clear with our language to the LLM so it truly understands what, what we're trying to get out of it. So that's how I tend to think of it. There's this. I tend to say that Bolt is like a, a 10 year old genius with amnesia. So you're just constantly talking to it like a child. It's way more intelligent than me. But it just forgets you by the, by the end of the conversation it's forgotten, you know what, you know the context window is full and it's forgotten what, what we started. So you just forever, you're forever just trying to give it, feed it context and, and, and you know, you tend to forget that it can't see what your human eyes looking at on screen. So yeah, the way you describe the location of items and what you want that thing to do is, is quite key. And I guess for the last 20 years communicating with developers, designers, uxers, clients u. You just have to sort of use a language which is fairly universal that all of those different people understand. And that's sort of the language I use just naturally now. And it just seems to go bode quite well with an LLM. So yeah, anyway, are there any requests?

Amie [14:23 - 14:58]: Yeah, and you can pick, you know what you want to do obviously, or some hybrid version. All right, so we have a kids AI visual story book product auto repair helper for mechanics iOS app for improving one's health and then yes, it'd be awesome just to see how you go about planning this with Bolt Storybook. Simple ordering landing page. Yeah, whatever you feel like is a good use of everyone's time from your experience and from the suggestions.

Paul Gosnell [14:59 - 15:45]: I mean I'm drawn to the kids AI Visual Storybook because I could use that with my kids, but I think might be too easy. Auto Repair Helper for Mechanics. That's quite interesting. So I'm like straight away think. So I start, you know, I'm reading these and straight, straight away thinking about what the product is and the auto repair book. I'm thinking like is there an API that we could just tap into which gives us the car, make some models and information and just something like that. We can, we can use some data iOS app that's interesting because the whole I, I think we all know the iOS app scene is about to change. Like Replica just launched something and, and you know, watch this space with bulk because something's big is going to happen there as well.

Amie [15:45 - 15:50]: So yeah, it looks like they're teasing something in the app based today on Twitter.

Paul Gosnell [15:50 - 16:15]: So I, I have tested it so I can. All right, there is something coming so I'll avoid that now. I don't want to ruin what's going on. Storybook guy agent for product teams. I'll go over the kids AI because yeah, by the time we found an API for the auto repair we might have. So yeah, the kids AI Visual Storybook product.

Amie [16:16 - 16:24]: So I think that would also like just you know, show some of the basics of like integrating an API and stuff like that.

Paul Gosnell [16:24 - 24:51]: So yeah, okay, so I'll go back to sharing my screen back here. Okay, so I normally just use like notes. Oh and I, my, my Mac updated the other day so it's now got all these, you know, messages you get when the apps are okay. So yeah, I'm just going to use this to make some notes really. So that first prompt obviously is fairly key. I think you sometimes you can over prompt, you can give it way too much information or I again so before I get into it. So I think that sometimes because I end up talking to a lot of users and a lot of people, you know, I read what's going on and stuff like that and a lot of it is feedback and how people have problems or, or where they struggle and sometimes you start to spot patterns really in where people struggle. I sometimes think when you've got a real high expectation or you have an exact design that you have a figma design that you want to replicate like pixel perfect but sometimes pretty tricky to get right. It's not impossible but you're just cane load of tokens trying to do it. So when you don't have like a pixel perfect design, you just have like a bit of an idea. I quite like leaving Bolt up for interpretation for Bolt to decide how it looks. I will sort of say, you know, I, I'm gonna, I'm telling it the features and the functions and the nav items and, and a user flow and all those things, but the detail of the look and feel, I sort of, I will say I'll give it a couple of sort of pointers but I'll try and leave it up for grabs and nine times out of ten it like you're okay, that's. That looks cool and we can tweak it from there. But I think when you try and get it to really, you know, match a design, even like screenshotting or you know, screenshotting a figma and uploading it, trying to get that pixel perfect is really, really tricky now, you know and to do that now on this demo would be near on impossible because it will take some time. Like I say, it's not impossible, just quite tricky. Anyway, so kids are Visual Storybook. So I'm thinking about the user in the parent parent with this book. Are they. Is it on an iPad or a laptop or a phone and are they actually showing the book to the kid at night for bedtime reading or kids AI Visual Storybook product or is it for education? It could be like a book for educational reasons. I'm overthinking this already but just this, this helps is what I'm trying to do is obviously frame what this product is and this will be part of the prompt. Visual Storybook product. I think I'm overthinking it. So we're just going to keep it like a, you know, a tablet friendly, iPad friendly style book. Okay. So let's create. I say iPad. Yeah, iPad friendly when you're typing, you know, got people watching is when you can't type at all, isn't it? Let's create an iPad friendly children's storybook preloaded with some educational reading. And I've just. And some. And some videos. Some YouTube videos maybe. And some kid friendly YouTube videos. Good old Grammarly. My spelling is terrible so this is not the final prompt obviously. But I'm just. What I'm trying to look back. Okay, so we're already giving it like a device. So we're telling the, you know, bolt, we're going to build this for. For iPad. So straight away it should start, you know, the components will be different. It's not going to build this for web. So it's going to be built and put together differently. We're saying it's kids, it's going to be pre loaded with some educational readings. We're saying it's going to be content. You know, there's going to be some content there and some kid friendly YouTube videos. So I will probably have to go and find some videos but it will more than likely throw some samples in. You know, we don't want to mention author login or stuff like that maybe just yet. It's Grammarly helping to make this prompt better, which is great. I still want to talk about. I'm still imagining how it's going to be used so I want to cover off that. So the parent will be guiding slash using the iPad whilst stories to the kid. There should be a read mode. So I'm thinking actually, you know, when we go into like a read mode I'm thinking that if there's any controls or buttons or icons, they should disappear and it should go into this read mode. There should be a read mode option. Read mode slash, full screen option. Yeah. Then I want to talk about. I'm avoiding sort of logins and authentication because I don't want to go down that route just yet. I think that's okay to leave that later. Will we use Supabase for authentication? We use Supabase for database, any edge functions. But I'm just still just thinking about the user experience. That's all I'm thinking about right now is just trying to make sure I get enough covered off. So there should be a way to easily navigate different stories a user. The parent can search, filter and save stories to their profile. So I'm thinking that that could easily be done with local storage. Even saving stuff could be done with local storage in the browser. So we haven't got to worry about a database still. So I think, I mean, I'm not sort of defining the pages, how many screens we're going to have. I'm sort of going to let Bolt decide some of those things. But I've said, like initially what the experience is going to be, the user experience is going to be. And yeah, I'm going to let Bolt. I'm going to mention, like, I want the design to be a bit playful, a bit kiddie, bit friendly like that. So I do want to mention that. So, yeah, design style should be kid friendly. Good use of bold and bright colors. Large font size. I know it's must be really boring just watching some guy figure out a prompt. Large font size for easy reading. Okay, we're near there. Easy reading. Always nice to give it a name. I don't know what we can call it. Any ideas? Because it would just call it Kids AI Storybook. I can't think of anything to call it right now. We'll see what works. Yeah.

Amie [24:51 - 24:53]: Sometimes it comes up with clever names.

Paul Gosnell [24:53 - 25:45]: Yeah. For you it does. Yeah, I will. The other thing I like to do, so sometimes Bolt has a. I like to react is the language I prefer to use. I will just say, like stack, react at the end, plus super base not needed for mvp. I say not in MVP just because I think that the LLM understands what MVP means. It means that we're not going to, you know, so Supabase is not. I'm going to define that again. This is where you have to be super, like explicit. So Supabase not needed for mvp. And I know that MVP to the LLM will mean like the first version, the minimal viable product we're going to release in this session. But I just wanted to find it up front. I think that's enough for now.

Amie [25:46 - 26:03]: I have found with the Supabase rollout recently that if you don't specify that you don't need Supabase right away, it will automatically focus on trying to configure that and you get caught up in setting up your database before anything else. I don't know if you find that.

Paul Gosnell [26:04 - 28:13]: Yeah, I'm just trying to think now. Yeah, I've not got snarled up yet, but I know, I do know people have been 100. Yeah. So I will just. Explicit superbase. Not need of mvp. So leave out for this first version. Yeah. And I always get it. Just you know, I like. Does that, does that make sense? Please ask questions now. Questions now before we start. So yeah, literally gonna throw that in here, see what happens. Literally see what happens. And this is to me the exciting bit about Bolt is just that now what's gonna. What's it gonna do? You know, I've got a slight, you know, visualization of this and I wonder if Bolt shares that. I don't know. So yeah, I'm just going to read back what it says. I understand what to create. Could any story app before proceeding clarification. So this is good. MVP without your face. How would you like to handle the initial stories? Should I include a few sample stories directly in the code? Create a mock data structure. So yeah, we'll create mock data because. Because it'll be easier to swap that out for Supabase data later. So yeah, so just number one, create mock data structure. So I'm just. Copy that straight in to answer number two. For YouTube videos, should each story have an associated video? Should VO's be optional per story? Do you want parental controls for go optional because we haven't got time to find videos of your story. For reading mode, do you want text to speech capability? Oh, text to speech. Do you want text to speech capabilities? Don't know why I get caught up.

Amie [28:13 - 28:18]: On this stuff too. It starts suggesting things that I'm like, oh yeah, maybe I do.

Paul Gosnell [28:20 - 34:09]: When I first read that, I was thinking, oh, I want it to. I want it to talk to me, tell me the story. Then I'm thinking about like whisper and other ways of like you. I want this actual product to start reading me the bedtime story in a nice voice. Anyway, that's, that's, that's phase two. Should we include reading progress tracking? Yeah, yeah, just. Yeah. What? Might as well. That sounds quite interesting. Just. Yes. Should the videos. Sorry, let me put in these. Yes. Create more structure, just to be very clear. Yes. For navigation, do you want categories, age groups for stories, should there be difficulty level system for navigation? Don't think we need to worry about it just for now. So literally going to put the number four for navigation. No and no. And it will figure out. It will match up my answers to these questions, I'm sure these details. Yep. Let's go again. And off we go. Yes. This exciting bit. So hopefully it's gonna do something creating some stories there straight away. You know, this layout should be quite familiar now to people. You know, it does obviously follow the same template and same layouts, same folder structure, the same names. So sometimes it's a bit hit or miss, you know when it first finishes whether it will just go straight into a preview or it might error and normally errors on an icon, if it's using icons it will sometimes error because it hasn't. This might. There we go. Okay. So yeah, I mean we sort of take it all in. It's the first glance at something. This is the bit I guess in our heads we're like trying to match up my prompt to what I'm seeing. How far off are we? And. And that looks okay. I mean yeah, I guess age. I'm just thinking age group like with my. I've got a six year old daughter, she might quite like this. I've got a four year old son, he might quite like the space adventures. But it's not as kiddie or as I. I guess car. I could have put cartoon or illustrations could have been some words might have used to describe the. The visual look and feel of it. But I think that as a first go it's all right. So yeah, I can obviously click into these and yeah. Okay. So it's going straight into the text is obviously flowing off the side there. So I don't know what's going to happen if I go next. I'm assuming they should be flowing down so I'll correct that in a minute. But if I go next. So it's just three pages. Yeah. This is just a test. It's just throwing in some. Some dummy day dummy text data on a real book. Obviously there'll be more text. Maybe some pictures. Need some pictures really. But the text is definitely needs to be clipped or whatever the right word is for that. But it looks good so far. There is, you know, I know that's going to go full screen. That's going to close and go back and there's no video. So I wonder what that will do. Huh. So yeah, you again. I don't want to teach anyone suck eggs but you know that there's certain things because we're building within a web container here which is basically, you know a server within our web browser. Certain things just get blocked and won't run. So YouTube videos don't. So if this was live, I think actually if we push it up to the preview tab I'm not sure if it would. It does play so the preview tab. So there we go. So again you don't want to teach. So these icons top right here, you might well know this one is to go full screen. One is look at mobile view full screen. It will reload you can change now the different, you know, phone size, which is really handy. So if you, if you design, if you're building for mobile web apps, then then that's cool. There's responsive modes. You can grab this and slide it in and out, check the responsive mode or go back to full screen mode and then the web container, this preview mode is like basically as close as what it's going to look like once, once it's deployed. And you can, then, you know, you can't share this. I mean it would be lovely if you could share this URL with, with somebody else and they could fire up and have a look and you could use it as a dev. It doesn't do that. I think that will come. So you could share this with a client, for instance, or somebody else and they could preview it. But for now, for us, this is going to give like a real. It's outside of the web container inside a Browser. So the YouTube video will. Will play. And I've been recastly so just add insult to injury there. But yeah, I mean, so far Bolt's done a good job and it's still nailed that. And yeah, there's no video available there, so it's not going to show the icon. It's probably automatically doing that and if I click that, it will go back. So. Brilliant. Couldn't see. There's no way of me liking a video. I'm expecting that my liked videos would appear if I click that. So I can't see how I like a video. So anyway, rambling on. I'm just going to say when clicking into a story, the words are. I should know what this even means, but the words are not.

Amie [34:12 - 34:14]: Say like make sure they get wrapped.

Paul Gosnell [34:14 - 35:28]: That's it. Line wrapping. Yeah, that's the one. Line wrapping. Yeah. Yeah. Because the words are not line wrapping. So. And some. Yeah, so it's almost. You have to be. So I know this is a very simple one, but it's when clicking into a story, the words are not the story. The story words. Because again, to the. I'm always thinking the Lmm. What lot? What. What words am I talking about? Am I talking about the magic garden? Am I talking about the next. So it doesn't know what words I'm talking about. So I'm saying the story words. The story words. And it. I mean it should know that they are the story words in my mind. So hopefully they are in the in bolts. I'm not line wrapping so. So please make sure they do. I mean, sometimes because that's quite A simple update. I don't want to just like hit that. Wait. I'm thinking that. Are there any other updates we could do at the same time? Because it can handle, you know, three or four, you know, updates in one go, as long as they're small and on the same page on the same area. You start updating different things randomly across. It's gonna, it's not gonna manage that and we'll start making mistakes.

Amie [35:28 - 35:36]: But what about adding, adding a favorite icon or functionality to the card while we're here?

Paul Gosnell [35:36 - 44:01]: Yeah, also we should. So and this is the other thing of the I've gone into we but I like to sort of use, you know, like in product management you use. The language you use is in user stories and it's all about user centered thinking and design and bugs are reported from the user's point of view. So I always find that language tends to work quite well. So I'll put also the user should be able to like a story from the story page. So please always polite to the to bolt because you know, he mustn't forget our manners. But please, please add the like heart used on homepage to allow the user to like story. I mean, I think I can't make it anymore. If it gets that wrong, you know, we're in trouble. I think that's it for now. Just send those two. And this is the only sort of the bit that's slightly, you know, don't want to say boring but you're waiting. You know, you're watching what's going on. Just going to have to say it. I'm sure everyone is doing it but in settings you've. You have to have diff turned on. So diffs again. Again. I don't know if you. Again, I'll just say it. But originally, before this feature was there, whenever you made a change, the bolt would rewrite the full, you know, the full page of code. So it would literally. You would see this page here, which is the page we're updating and it would start from the top and rewrite every single line, even if it was just one small change. And so it was painful when you want to work on a big site. It was just painfully slow and obviously just eating into your tokens every time. So yeah, when they created that diffs feature it now just literally pinpoints the line or that, that one area and we'll just rewrite that piece which is much quicker and saves a lot of, a lot of tokens. So it's done that. So let's go in brilliant text is done and we have the like. Let's see if it works. Doesn't work. So I wonder if the other. And there is no if I go back. I mean from a user's point of view, I'm thinking that to X out to go back doesn't makes sense, but if it's on an iPad, probably does make sense. So we'll leave that for now. You know, there's no go back but this is iPad, so I have to remember this is for tablet, not desktop. So actually that's okay. So let's go back and see. So there's no way of liking these, but I can like them here. But it's not happening. So I'm going to. For now, for this demo, we're going to use local storage, you know, which as we know local storage or you might not know, local storage can basically act as a mini. As a mini local database in. In your browser in Chrome. So things aren't important. Temporary things can be stored there and then when you revisit and come back to the site, the storage is still there. So we can use that in this instance because you know, favoriting stuff is. Is not that sensitive or important. So when a user clicks again, I want to say taps. I just want to get it right. Because it's not clicking, it's tapping. Because we're iPad. So I just want to use the right language. For me, it just makes more sense. When a user taps the like slash heart icon, the story should be saved to the users liked list which is accessible via the home screen. Just so it knows what I'm talking about. Because although we're looking at this page, it might not know that there's. You can access it from the home page, bizarrely or it might, but I'm just going to cover that off because you. You can get into trouble. It will start creating, you'll go back and there'll be two like buttons because it. It's forgotten that there was a like button there already. So again, just using that opportunity to put it in brackets to remind it that there is a like button which is accessible on the home screen. So don't go and build one again. So when a user taps the like icon and again because we're looking at the story doesn't mean that it knows looking at story. So when a user taps the icon when reading a story, the story should be saved to the users like list which is accessible via the home screen. And then I'm going to define the local storage for now. Let's use local storage to do this. I'm going to sort of sometimes when something's a little bit technical or something and I'm. I'm questioning it, this is where the prompt enhancer comes in. I don't use it a lot to be fair because I forget about it. Maybe it's the position of it is it gets missed. But I'm going to. The other thing that I've learned is once you click enhance prompt and if that enhanced prompt is not right, you can't undo it. So as a rule I will just copy this just in case and I just want to see what the enhanced prompt looks like to see if it does a better job at describing what I want to happen here. So I'm going to click that once. Wow. I mean create a story liking system that. Okay, yeah. Listens for a tap click events on the light because sometimes straight away I'm thinking this is sort of over over engineered a little bit but let's hear it out. Listens for a tap click events on the light icon while reading story when tap save a story data to users like listen to local storage toggle with a heart update. I mean it seems over engineered but it's probably not. It's probably what is needed. Unique story ID story title story thumbnail author date likes okay. We don't have author data, but the rest seems present. Okay. Implement like story section that retrieves so it's saying implement like story section and this is where it trips up because we already have that or the start of it is already there. So I'm hesitant now if it's going to just do two. We'll see. We'll leave it and see. Implement like story section on the home page that retrieves and displays without strokes in your stories. Persist. Yeah. Okay. Include error handling for local okay. Technical requirements. Yeah. Store data JSON format. Yep. Maintain. Okay. Let's give it a go, see what it does. But yeah, I mean that just demonstrates what we thought was quite a simple prompt is actually pretty complicated in terms of coding the thing out and off it goes. Not going to profess I know what is being written in the code right now but I will still stare at it because you can. Okay, so there's not two light buttons. Maybe it has. Okay, so it's worked. It has used that. So yeah, I have no like stories. So it's showing me this. It'll be nice actually here if there's a little message saying you've not liked any stories, go and go and like some stories Again, just from the user experience, you never have empty states. That's the golden rule is when you design something and build something, you need to design it with nothing in. All the empty states have some prompt or some nice words or, you know, something for the user. So now we'll go in and. Like this.

Amie [44:02 - 44:16]: Yeah, I've been asking it to put in some dummy data sometimes and it actually works quite well and sometimes it helps with like building out some functionality. But it's pretty good at populating like big data.

Paul Gosnell [44:17 - 45:08]: 100%. Yeah, yeah. Like, I think we'll probably just now once we get this sort of solid, we can get it to write a full story. You know, just throwing a lot of dummy data here which could be stored into. I don't know if there's a limit on local storage. We don't be storing too much in it. But yeah. Now looking at this screen, I'm sort of questioning. I remember in the initial prompt it asked me around, highlighting the word. But it's because I can click the words. I'm thinking that actually as a parent reading to my kid, I'll be tapping these words. Maybe, maybe that's useful to call out a word, you know, if I want to spell it out. We want to do like sounding with, with the kid. Maybe that's. That is useful. I was questioning if it is. But yeah, we'll leave it in for now, I think.

Amie [45:08 - 45:21]: Yeah, it seems like technical, but you could do like flowers or garden and when you click it up, a picture shows up of what that is. But that sounds a little like a rabbit hole that you could go down for about an hour trying to figure out here.

Paul Gosnell [45:22 - 46:32]: Yeah, but I love, I love it though. Yeah, that's really nice. Yeah. Or, or even I was thinking that like garden, for example, that word, if it's clicked, you then have an option to sound word out and then the garden word, sort of like, you know, is. Comes bigger and it goes, you know, good. Ah, and sounds out as it should. But anyway. Yeah, yeah, that's another rabbit hole. So. Okay, but I think the full screen, that doesn't work either. But let's go to this full screen. No. Okay, so yeah, we're just going to go back in. And also when the user clicks the full screen icon, I'm not going to define the page we're on because there's only one full screen icon, so it should get it this time. USER CLICKS FULL SCREEN ICON Nothing happens, happens. Please sort. Sometimes you just get a little bit, you know, casual with your language and yeah, just fix it and it will functionality. Yep. So it's going off to do that.

Amie [46:33 - 46:59]: I think what's happening now with like this build is like, kind of just very representative of like the experience of Bolt is like once you start getting like your working idea, then it becomes about testing all the different buttons and features and then project managing that, like, for example, connecting the search bar to the cards and all that. So you start thinking about how the whole thing works and then it becomes like a Q and a, you know, coding project.

Paul Gosnell [47:00 - 48:13]: That's exactly right. Yeah, exactly. But, you know, the core basics are there. You know, we've got the functionality which we requested in the first prompt. It's definitely here. Just for the hell of it, I'm going to sort of say, you know, let's add some images to the stories that align with the story titles. And as we know, like, Bolt loves unsplash. I think it's in one of the master prompt files to always use unsplash for. For placeholder images. So I'm expecting it to find some, you know, space. A space adventure. Let's add some images as heroes. And again, you know the word heroes Again, I. Is the hero image on a. You know, it's not. It's an old sort of advertising and marketing word really, but Hero is the. Is the main leader hero image. So, yeah, I'm expecting it. If I say hero, it knows what I mean. Let. Let's add some images as heroes to the stories that align with the story titles. Yeah, just see what that does after this.

Amie [48:13 - 48:34]: Given that we only have about nine minutes left, if you have any projects that you could share, that looks like some people are interested in seeing kind of like example, like one of your finished products and understanding how much time it took you to finish it. I know you have some client work too, so if you need to unshare your screen to find one, that's fine too.

Paul Gosnell [48:34 - 50:46]: Now, that's okay. Just on that it's updated. It hasn't updated the Hero image, what I was expecting. I should have said on the story page. It's updated, you know, these images. So. But yeah, we would have gone another step. So, okay, that's where we're at. We'll leave that there for now. But yeah, if I go in here, try and think what I've got here. This is quite an interesting one. So I've built a full. It's turned into a bit of a beast really. So a friend of mine, friend of a friend, sort of runs a. Some salons back in the uk, they've moved to Dubai. They wanted sort of like a, you know, a full on booking system which allows their salon to, you know, have a public facing website which would show you the services and products and the ability to book an appointment. Then we had this great idea of like actually why don't we sort of, you know, there's a, there's a tool called, there's a business called Fresher which is like salon bookings and they're massive. So we like, they use Fresher now and, and we're like actually well it wouldn't take long to try and not copy Fresher but I could give you some of the functionality you get from Fresher. So and then it was like, okay, well why don't we sort of open this up and you can sort of offer it to like other salons so we could have you know, like a super admin view. And so anyway, this is sort of, it started off something small and turned into something huge. But now this is all hooked up to Supabase. You have this sort of like you can add appointments, it's hooked up to stripes, you can, you can require a deposit up front when someone. So I'm adding an appointment to the system, I'm logged in as if I was a member of staff. So you have all these different services and you have different customers and you can set the staff, the appointment time and create an appointment. There's the ability to add team members. So you can add team members here, their role, what they specialize in. You can add different ones when they're available.

Amie [50:46 - 50:59]: How long did it take you realistically to like build this out? I mean this is quite robust so I imagine it wasn't simple but like roughly how like many days, how many tokens do you think?

Paul Gosnell [51:00 - 51:24]: I mean I get bored really, really quickly so I never solidly sit down for a day at a time and work on something. I'll just like jump around on different things. So it's hard to sort of say one week, but it was less, less than a week, less than five days, you know. Yeah. But more than three token wise? Yeah, it's hard to say because I don't really. Although I'm showing here.

Amie [51:25 - 51:31]: Yeah, I know it's a tough one to quantify, I feel like.

Paul Gosnell [51:31 - 54:12]: Yeah, yeah, but it's quite a complex site. It got more complicated. More complicated. And the thing with the thing I found is when you try and pivot or introduce a big feature or large piece of functionality when you're in deep, that's when Bolt struggles because it's. Especially when you've got a database and a scheme already set and you're trying to like. So this was, this was a classic case. I had to bring teams in. I had to bring you know like sales in and then you have to create the date and it forgets that there's another table already created that's not called Teams, it's called Users. And then you have this clash of user data. Then you forget that Bulk can't see although you're connected to Supabase, it can't see the table names. So you're forever having to check Supabase, copy the table names, remind it we have a data, you know, table called Teams. Let's use that for xyz. And it's the worst way. So I know it's sometimes not possible to have the full vision and have the full sort of function list and everything you want at the start. But yeah, trying to introduce large chunks halfway through or pivot sometimes it's worth just stopping and starting again rather than trying to pivot something and go again because you'll just end up burning so much trying to get into know bug holes and, and recorrect your path really. And that's it. So the last thing is I'll just, you know, chilled CRM is this was the, the first product I built. This is way back in October. Feels a lifetime ago now. But yeah it's a fully functioning CRM system and there mobile View I integrated AI so it has open AI integration. So it uses the data that you upload to Spot Patterns. So it might say you've uploaded all this customer data. Did you know that you know 70% of your customers live in this city? So why don't you target something and, and it will then it will create some messaging for you to use in WhatsApp or email and AI does that for you. And this is hooked up to. Yeah, super base stripe. Yeah. And. And obviously Bulk built the whole. The other cool thing is always build your marketing site at the end of the. Of the project because I built the dashboard first and in the end said now create the marketing site. And it created it based on all the features and functionalities that it, that it could see and had built. So it just built like the best marketing site ever and just nailed all. So all of this I had no. It just did it by itself. That's all these panels. Yeah. Everything is incredible.

Amie [54:12 - 54:25]: Super impressive. Someone asked about how you go about solving errors and when you get stuck in like a kind of an error cycle and the attempt fix doesn't work. What are your go to solutions?

Paul Gosnell [54:26 - 56:19]: Yeah, I mean we, it didn't happen to us like fortunately, because I think it was quite a simple project. But yeah, I mean it happens, it happened. I was doing something this morning and I got caught up. Sometimes before we used to have to copy. I don't remember you, we used to have to copy, you know, errors from the terminal back into Bolt. I have to do all these different things. But now, you know, Bolt detects all this automatically. So there is a point of me just hitting the fix, fix, fix, fix and I'll give it, you know, a while. You will see, Bolt will say, you know, if I attempted this five times now and at that point you're like, okay, I need to, I need to look, one thing that really works for me, one thing that works for me is I, I say and sometimes I can get pretty frustrated. I just, you know, you just, you're swearing at the thing like, Christ, and you know, you, I don't know if it feels a frustration. It must do. It mustn't sense that you're getting, you know, frustrated. But I'll say to it, let's take a step back, let's. What did I say? Take a step back, look at the entire code base, truly understand where this error is coming from and try a fix we haven't tried before. And I think because sometimes the, the AI is so focused on the fix and it's not thinking about the rest of the code base or how it's all pinned together that it is just, it's fixing one thing and causing another bug elsewhere. But if you sort of just remind it, take a step back and look at the whole code base, it nearly one or two fixes later, it's done. So I'll definitely try that. Just asking. I don't know why, but I always say take a step back as if it was a human, you know, take literally. Let's just look at the whole project now, like, why are we not able to fix this bug? And that, that nine times out of ten, does, does, does the job. The other one is, is gone.

Amie [56:19 - 56:21]: No, no, the other one is what.

Paul Gosnell [56:21 - 57:03]: I would just say. The other one is where you just haven't just stop to close the project down. You know, I've been doing well, I've been stuck on a bug and it's, I just want to finish the bug so I can stop working and go and do something. But in my head I'm like, no, I have to I have to fix the bug. I have to keep going, have to go and going. Sometimes if you just stop, close it down, you go back an hour later, nothing's changed. It's not like I've helped, but it seems to just reloading the project, something else happens. Maybe it's in the reload. It's like taking in the context of the code base again and it will just fix it first time. So yeah, I don't think there's.

Amie [57:03 - 57:19]: On that note, actually I was gonna ask when you're done with a project for the day, do you do anything to like kind of help with the context window and memory? Like do you have it summarize what you've done so that when you come back it's not like you like catch a reprompt or anything?

Paul Gosnell [57:19 - 58:01]: No, I, I literally leave it as is. But I will, when I come back, I won't. I won't start assuming that it remembers anything. Even like here. Like imagine we've just start tomorrow we've come and we're going to finish off the storybook. I will start talking as if it cannot see this or it hasn't has no memory of what we've done and you know, we'll start the. The prompts from. From fresh again. It might not need that, but I found it just to be safe and sorry because yeah, I have you start from scratch. It would just like replicate screens, you know, there'll be two screens with the same name. Well, we've built that already, but it just forgot, you know, because it's out the context window.

Amie [58:02 - 58:24]: Awesome. Well, this has been super helpful. Appreciate your time and bravely doing a demo on the fly that takes a lot of guts. If anyone has any questions about, you know, what you got, what you do and Bolt. What's the best way to get in touch with you? Is that like on Twitter and Bolt. Discord. Discord. Or don't bother you.

Paul Gosnell [58:25 - 59:57]: Yeah, no, no, definitely please bother me. I'm. I'm not really in Discord because I'm not. I always think Discord such like a dev thing to. To go and hang out in. So I, I tend to avoid it. So I'm on Twitter so you'll find me. And there is a, an unofficial Bolt community on Twitter which is run by a guy called Wes who's. He's a cool guy, I know him, he lives in the States. But I'm normally on there trying to help people or just email. I've got a stack blitz paultackblitz.com I shouldn't have given that out. But yeah, if you want to help or do anything, my role at Stack Blitz, actually I've just, I've taken on. There's a new thing called Bolt Builders. So it's a new project that we're launching soon, which is a way of doing what I'm doing really, but on, on a larger scale. It's just to help and support vault builders out there who are getting. Who potentially. And it's not necessarily getting stuck with a bug, it might be stuck with a marketing idea, getting stuck with revenue model, getting stuck with. How do I, you know, I always say it's what's next. So you've built something, how do you monetize it? How do you, do you want to get introduced to investors? Do you want to sort of grow this thing? Like what are the next things? And within the bulk community there's lots and lots of people that can help. So we're trying to sort of bring that into one central place to help the, you know, the bulk community really. Not just for, for getting unstuck in their projects but for, for that and beyond. So yeah, watch this space because we're working on it now and I'll be sort of leading that too.

Amie [59:58 - 1:00:24]: Awesome. You seem like the perfect person to lead that and I really appreciate your, your time. I'm sure we just scratched the surface of questions from people but if anyone has any follow up questions as well. For me, I am not as experienced as Paul but I am on my way so I'll be in the bins Bites community. If anyone has any questions you can just ping me but otherwise thanks so much Paul and I hope you have a good evening. I believe where you're at.

Paul Gosnell [1:00:25 - 1:00:29]: Yeah, pleasure. Nice to meet everyone. Thank you so much Amy, having me and yeah, cheers guys. Happy building.

Amie [1:00:29 - 1:00:31]: Bye everyone. Yeah.

‍