Lovable.dev Tutorial & Full Site Build w/Supabase 🔥 (Step-by-Step Guide)

so I'm going to be doing a live build on lovable. deev it might be a bit of a long video so I'm going to have to cut some stuff out but this is how I would build a site and use SEO in 2025 I still love WordPress I've built a bunch of sites in WordPress but with the flexibility of these no codish tools and the things that you can build the way you can structure the site from an SEO perspective it's an opportunity not to miss and then of course you've got all of these tools

that you can build into the site structure uh to make the most of SEO and I think that's again a huge opportunity so this is what I would do this these are my exact steps I would talk to Claude or chat GPT first with my idea I would figure out the free tools that I'd want to put on the site and then I would start to prompt so I've already asked that what tools we could put on the site I've told it the text stack I'm going to be using and I think lovable dodev by

default it that's the text stack that it goes with right so the first thing that I do is I get clawed to create a file structure that I will then give to lovable dodev so this is what it's doing here I've told it to follow best practices for the text that that I'll be using so that's Vite react Tailwind CSS and Shad CN UI so I don't know if they I've used that with nextjs so I'm I'm not sure if this is going to if this works with um right and react let me see okay

looks fine so we've got the source components split into three main categories we've got the UI uh we got the layout we've got shared for reusable components Source Pages used as a feature base structure blah blah blah blah blah and then it's going to tell me what to do but of course I'm not doing this this is for lovable. Dev so I'm going to save this we can also just copy it as it is but I'm going to just save this just in case Fitness website project structure I'm going to also take this part because

this is going to be part of my prompt and we'll leave this here for now but back over here I'm going to let this I'm going to let chat PT know what I'm planning on doing which was building this website uh adding these tools so I'm going to let it know now I am using an a code generator uh what to build to build the site help me um plan and create a prompt for it following best SEO practices and implementing some of these tools we uh spoke about later down the line later down the

line I will be adding super base super base for users and and storage but for so now I want to want to create a beautiful looking beautiful looking uh UI you looking and um again I've already said following best SEO practices uh I don't think I need to say that needs to be fast I've already said following best SEO practices so I'm creating an AI I'm create I'm using an AI code generator bot to build this site help me plan and create a prompt for it following best SEO practices and implementing some of these tools

we spoke about down the line I'll be adding super base for users and or and storage but for now I want to I want to create a beautiful looking UI in ux and um footer which has which uh links to links to the tools and resources page uh landing pages and things like that I can add after let's give it a name I want to create beautiful looking I've not really given it information on the color scheme but I'm going to say uh black with baby blue accents want to create beautiful looking UI in ux

foter footer which links to tools and resources Pages blog component blog component because I'll probably end up doing the blog back end so I can build the internal linking and I'm G to go crazy with that I'm going to build perplexity into that but that's we'll get to that so all right so footer which links to the tools and resour resources blog component there was something else I was thinking about um Pages um I think that's the main thing cuz I really want to focus on the tools for now um beautiful looking UI ux there

was something that I've forgotten that I know I'm supposed to add okay let's see what it does um Navar on ages oh a color scheme we'll do light and dark so we'll do color sche color scheme will be um black or dark gray with maybe blue accents um contrasting contrasting c2a ctas I can't spell contrasting ctas there was another thing I've just that popped into my mind and I forgot oh and and the site will offer online ging as well as local classes the name is jpx Fitness I think that's it let's go so this

is going to give me the prompt it's got the text stack we've got the the logo the tools the blog the about the online coaching local classes contact sign up of contrasting CTA color responsive responsive design adjust to hamburger menu on mobile menu these things are very important because when you don't build them initially you have to build them after and then it starts to create secondary um nav bars which is a pain then your code gets all messy and all kinds of things so you want to make sure that up front you've done all

of the heavy lifting at least from a design perspective and to set the tone going forward so having the blog understanding that it's going to need a Blog so highlights preview the latest 3 to five blog post of titles awesome now granted I'm going to give the sort to lovable dodev it's not going to do all of it these are things it's going to need to come back to so this helps when you are creating a a change log or document you can tell it to add this to the documentation or create a road map

that it can refer to so here we go I'm going to take this and I'm also going to tell it what I just said so what's this example code for the prompt we don't need that ask the AR chat to generate react I think we we we could future proofing for super Bas mention play okay I'll take this I'll take this and I'll say um and then I'll put this with with the file structure so the file structure has to be let's see how it's going to come up if I copy it um let me

I'll just just take it like this see what it looks like if it's going to take all of it yeah okay and I've got the name of it so Fitness website project structure I'm going to take all of this put this aside in case ites doesn't do well and I can also give this to Bol to compare the two so I think that will be an awesome experiment to do but I'll do that later I've just saved that in my notepad so this is the exact prompt I'm going to give it and let's see what

it does all right let's see this is always so exciting for me the big reveal what's it going to do what's it going to look like how much instruction has it taken let's see okay we've got the logo the accents the color scheme I think it's gone with a gradient we've got the contrasting button which if you check on canva uh canvas's got a color whe tool which is awesome I've used it many times and then it gives you the contrast for the CTA so definitely recommend using that if you don't tell it to you

don't want to go with blue it's very common that people do that so you choose the accent and then you make the button the same color as the accent but no the contrast and color works very well so looks like it's kept it very simple with the landing page I would want to put um probably cards here uh with the different services and images so if you've got like a boot camp image the PT himself doing the things and then another image I'm not sure like a mill plans and things like that then we've got

an about section y choose uh here I would have the testimonials so we'd add testimonial section just below this bit so I'm going to actually tell it this let's add some cards here let's add testimonial section here and then you've got some of the tools which is awesome I know if I click on these they're not going to take me to anything working let's see nothing's working yet so it builds the wireframe of the site and and then you go and then you start to build out you iterate did it build anything for the blog

no it didn't so I'm going to now tell it that I want to I'm happy with it that's cool none of these things work so yeah expected so I'm going to tell it to create a road map SL change log of things that we want to do and that we've done and then I'm going to tell it to add the things that are missing so great now let's now let's create a change log to um that that we can maintain maintain as we update and um a change plug that we can maintain as we update

I cannot spell we update and a road map with the information I have given prevy of things things we need to implement as we go it's making the road map MD and then the change log has it done the change log already change log and road map yeah so it's done both of those so said what we've done and we've got phase one phase two blog system so I can say so it's uh done phase one it's got a tick next to it feature tool feature tools preview and now we're into phase two so I'm

going to go ahead and tell it to start building out phase two as a matter of fact I'm not going to to copy this I'm just going to refer to it as phase two so let's see let's uh let's begin with phase let's see which focuses on tools implementation let's start by creating the tools page layout and the BMI calculator as our first tool see what it's doing add it to our routing create the BMI calculator component update the navigation to include the tools page awesome so we don't have to tell it to do this

it knows we give that a try so still doing it that's not working let me click on the okay so the tools page works and we've got these coming soon which is cool so let's see there we go so it's made the first tool what it has hasn't done is link to it from this part here but we can do that after tools um so that's cool so it's going to keep adding them all here so free calculators and tools to help you track and achieve your fitness goals so we got the BMI calculator and

let's see okay cool that works that's the main thing TD all right so I'll help you implement phase two of the road map which focuses on let's start creating the tools page okay let's go back over to the road [Music] map we get back over to the road map and phase two tools page okay let's just get it to make all the other tools mobile responsiveness for tools so it needs to check these off okay so make sure we complete phase two make sure we complete phase two and check them off in the road map

as well as updating the change lock it did actually say the next steps in phase two would be to implement the TDE calculator so it takes very very B siiz steps so you don't miss anything and I think that's a huge problem typically in these tools is they try to do too much in one go and you're expecting them to do too much because they they try and then you realize things are broken Roots don't work things haven't been built think things like uh on the main page it's not linking to that tool just yet

these are things that we have to tell it so this is going to be able to be used once they've built it and then I can get it to build all the tools and again from an SEO perspective my angle would be to build all of the tools because the tools are what people share what you can share very easily they're very easy to rank and they bring in a lot of traffic to the page as it's a local Fitness website it's not very it's not that necessary they're not making a crazy amount of money

off of um tools and website traffic but it does present an opportunity because they can offer online coaching they can offer um different servic that you can that are not local so it's still very important to get that search traffic that isn't just local search traffic so that's the aim here we're going to build it Build It Up from an SEO perspective and local SEO which will be done with the landing pages that we'll do after uh once we've got the template ready the the build was unsuccessful I'm going to just copy that cuz I

think it's still working on it I'm not sure let's implement the remaining tools for phase two and update our documentation files accordingly okay try to fix it's had an issue it knows what the issue is and now it's trying to fix it the interval variable in the workout timer okay still having an issue okay can we fix it okay it says it's fixed it but we need to continue okay let's see let's uh refresh no okay let's continue oh right so it looks like it's built the tools we've got four tools and it's changed into

um a 2X 2x two grid cuz we've got the four tools and we've got the TDE calculator let's see if it works put in my stats there we go all right that's what we're working with 120 kg don't do any exercise what's my TD okay so this is how many calories I should be eating a day let's see cool all right that all works perfect perfect perfect so that's another tool and then it looks like we've got a back to tools button but it looks like it's getting caught under here let me double check if

that's just because of yeah so that needs to fix we've got some overlap with the Navar let's check out the workout timer so work time set your work rest intervals and number of rounds for your workout so okay okay let's say it's going to take two minutes rest time 10 seconds uh I think this needs adjus in okay I think a minute a one minute rest is fine and the number of rounds I think it would have to be sets I don't know if people call it rounds it works that's awesome round one did I

say 30 seconds is that is that working right reset no it says 100 where did they get 30 seconds of 2 minutes round one of five okay cool that's awesome that's really cool especially if this is truly it's mobile friendly looks good yeah cool all right so other than the Navar being a bit of a pain cuz we got back to tools here let's check the progress tracker track your weight and and body fat percentage over time I I'm not sure how this is going to work because this is one of the features I said

would need to be behind the user wall so let's see 150 kg body fat body fat percentage oh that's really really cool but how would we check this over time so it's got the date here yeah this is this this is a membership this needs to be behind the a user wall which is fine because that's what we're going to do we're going to build out a bunch of tools um that are free tools and then a bunch of tools that are still free but behind the membership wall so I can tell it to start

building the membership component but no we're going to stick with the road map phase two is now complete with all tools implemented including progress tracker which allows users to log and visualize their okay let's move on to three and then we're going to go through and correct these things blog listing page individual blog post templates blog post categories and tags search functionality related post features social sharing buttons awesome so with the blog I'll need to attach it to super base and handle all the blog content in super base now I've done this already but I

also know how much of a paint it can be if you do this too soon so we create the templates the blog page the uh slug structure and then all of that uh sorry the category structure and the slug structure and then all of that gets set up in super base so that is a bit more complex because I choose to use a a built CMS rather than than attaching it to a headless CMS somebody has recommended using a WordPress for that but I am liking the fact that we can build although you can build

plugins in WordPress to do the same thing I'm liking building these very very uh personalized CMS options because the limit there's the sky the limit with what you can do that way and as a service having everything built completely inhouse I think this is more valuable rather than having to use other tools or depend on other tools it might not be the best way of looking at it if something already exists and it's going to save you time do it by all means but I like the learning opportunity it offers me having to do some

of these things um so before we start implementing phase three I recommend breaking this down into smaller manageable steps would you like to start with creating yeah let's do that okay yeah start with step one hopefully I can get far enough to connect it to super base so there we go so we've got the blog structure being put put together you'll definitely want to have images in the blog cards I will tell it that now so it can put some placeholders there and let's see add some images into the blog cards and the categories and

things like that I'll let it I'll let it run through all of these first so let's go with step two continue so this say featuring mock blog posts let see yeah no you can't click on this it's just given some dummy data and that is SL blog awesome um Okay add featured images to blog post cards okay okay okay let's go following best SEO practices so it will be blog let's do thece category name c name I don't think I need name category page slug uh when connected to super base where all blog data will

be stored and feted very important if you don't want any issues I'll Implement these features while following SEO best practices since superbase integration isn't connected yet we'll structure the code to be ready for it later thank you very much got local classes online all right and then I going to so the thing is because I'm building it for local I'm going to be building landing pages for local terms however I feel that this is something best done in Wind surf with python so that will be a whole different video because of the complexity of the

actual thing and we're moving over to a different uh tool and I wanted to keep this lovable based because lovable is what I'm using and without diluting the uh the the message of this video which is doing it from scratch once I've got it to a certain point there are things that I'll need to do that I'm going to have to do in Wind Surf and adding those landing pages is one of those things thing so I could get lovable to build the template for those landing pages and explain to it what I want to

do which I'm doing here now with um the whole blog thing so it's it's already acknowledged what I want to do which is make sure that the URLs are clean so we've got blog category and Slug it understood that it knows I'm going to be connecting it to super base later which is why this is important because if you cannot Fetch and store the data properly you're going to have a lot of problems you're going to have so many issues and it's going to be a headache so having leared that I know to tell it

up front before it builds the thing what I want it to do and I'm going to have to do the exact same thing with the landing pages let it know I'm going to be using python to do this later make it so I can do this very easily with that method so this is where we are we've done that if I head over to blog now we've got the space it's now added okay it's added some um very very unrelated placeholder images which is cool we get to see how it would be what it would

look like and we click into them now yes we can so sample blog post it's got the rounded um the rounded card and we've got the category we've got the title we've got the date and then we've got the content so awesome that's done so I think are there any more steps in this phase let's proed with next steps and update change log accordingly looking at the current state of the blog implementation I'll enhance the individual blog post slug with proper content layout styling and metad data awesome it will also I'll also update the change

log to reflect our progress course so it missed something with the SEO so it didn't have the meta description and okay cool looks good it looks like it's changed um it's made no that's completely different what was that it just changed the image it wasn't happy with the with the image it chose and it started writing some content I'm not sure if I would have it scrollable like this I don't think that Mak makes much sense but I could tell it I don't want that and it's got these tags I would make these tags active

so more detailed but clickable so people could click and go to different posts or see the different tag pages so I guess I would need to tell it to make sure we have category blog category landing pages and tag Pages not sure how we would word that uh archives that's it so let's also create blog category landing pages archives and tag archives so any uh collection so any collections uh can beess from those respective Pages for real content integration with super base cool I'll help create category and tag archive Pages for the blog this will

allow users sbras collections of post and category by category or tag perfect so step by step we are working our way into the delightful look at this just added that that's cool so you can search for blog posts and then it's already done that so I was telling it to do that but it's done done this already but this is um these collections are not individual pages I think that is actually a better way of doing it because I wouldn't be indexing the category Pages anyway so this wouldn't be a bad idea however let's see

category and tag archive pages have been added with SE friendly URLs responsive layouts and proper navigation H these are not clickable they're not where do I find these category Pages that's interesting okay um I'm going to select I'm going to use this element select feature they've added recently wherever it is it used to be here let's see so they had element select before and now I cannot see it nonetheless okay this homepage is underwhelming let's add some cards to them homepage below the hero section on the homepage let's add some cards for uh services offered

such as online classes local classes and online classes online coaching sorry online coaching local classes uh Fitness guides I guess guides and then we will add the testimonial section be after the about section uh there was an element toour it looks like they've taken it away which is uh which is interesting cuz that was a really good feature where you could select the specific thing you wanted to add cool this is nice nice touch got to get those working as well tools are stacked animated love it love it love it okay um nice really really

like this yeah so we don't have that anymore which is a shame cuz I I'd really like that feature but nonetheless we'll work with what we've got okay we've added the cards of hero image still it's still a bit big because there all of this space but our services choose from our range of professional definitely need some images going on here I guess that would be there and online coaching classes Fitness guides uh these look like bad ads so can we use CN for some it's going to know that I want to go in those

Services cards or something if you hav like yet animated Lucid which is integrated with h so shadan recently added these animated icons that's what I was hoping to use but I don't think it knows that so won't be able to unless I go and do the heavy lifting okay I can't see them let's refresh fresh no I cannot see them they are not showing up it's uh no nothing oh they are there okay okay stop stop stop sorry sorry I was being too eager okay stop stop stop stop stop all right that's cool that makes

a difference they're pulsating so there's that not quite the animated icon I was talking about I was thinking about but nonetheless they are there it looks better and we can start to see it forming out now we need to add now after the um about about section add some testimonial cards make it um um contrast and a bit more eye catching and exciting with a nice and animations we love animations we love animations it's something that we've got in uh 2024 in the new I don't even know what to call it web 3.0 is it

is it what we we have separates us from the websites of the of the olden times I'll add an eye-catching testimonial section with animated cars after the about section we'll use sh and components and animations to make it visually appealing thank you very much nice nice nice nice nice nice then we got the images from the the people the testimonials we want to have um confirmation what's the word brand um what's the word proof social proof social proof Andes uh as well as a Google My Business Review section I mean the testimonials could do that

but it's fine we'll just connect it all together um yeah let's let's let's let it figure it out it knows what we want to do what our clients say I could tell it to include it within this part but let's see Mike Chen amateur athlete Emma Davis busy professional what do you do for a living I'm a busy professional I need training cuz I'm a busy professional oh love it love it love it love it yes yes yes that will be the Google logo view all reviews will take you to the Google my business page

loving it let's open this up properly still need that image there to make to bring it all together I could get it to do a place holder image for now but this is this is what I'm going for and we it's still keeping up with the contrasting highlights and all of these wonderful things we'd want to have what whatever certificates are there if they are if there are some logos for some certificates CrossFit level two active classes years of experience professional Awards satisfied clients love it cool so my next thing would be that but I

don't think that's that important it's just that it's it's bothering me not seeing an image there but other than that let's tell it to and continue with thead I'm sure what's on the road map at this point and then we need to build the landing page template let it know that I'm going to be doing that with python so prepare it for that I guess and yeah it's going to update the change log and the road and the road map see yep it's actually it's been doing it needs to update that oh no we've not

we've not this there are things missing in the road map this added other thing I that's to change log okay so for the blog system individual blog search functionality related post social sharing buttons okay so we need to do this now let's continue with phase three I leave we still need you add and then we've got phase five so phase four is user authentication and profiles wow I think I really want to skip this to the last minute I really do um but it is something I'm going to have to do so and it also

understands that we need to implement this before we do these because those need to connect to the database and everything so if I can do this all within hair before I have to bring it to wind surf that would save a lot of trouble I reckon because it's got super based integration it will just be a lot smoother and um we can send all the migrations over because again from experience these are where the biggest headaches come the migrations the integration uh all that Ro level security the middle wear the or all of that presents

so many other issues so if the AI know that this is the order to do it I'm going to trust it we have an error try to fix it syntax error okay should be easy social share nice nice nice nice all right so this is what it's added we've got the author card and the who is going to John Smith it's already added that cool all right John Smith's LinkedIn yeah there he is that's him John Smith and Twitter John Smith on Twitter I'm guessing yeah John Smith cool so we we've got the author uh

card added which is perfect we'll have the offer image so name of the personal trainer and then their credentials so this will show up because this is the template of the blog post this will sharp on every page and again hopefully that is all connected this will all be connected to superbase so these are things we won't need to do we won't need to change it will have the author in the data base and the offers information it will and then what we'll change out is the things we add in the CMS which is the

name the date will automatically be Set uh the category these things these social share buttons will link copy to clipboard awesome share on LinkedIn we don't want to do but good good to know these all work um we'll have to change that Twitter logo to X but nonetheless perfect and we've got subscribed to our newsletter put the email in hit subscribe this needs to be set up and then they can add comments which will be interesting because I'm guessing they'll need to be a user comment posted yeah they need to be a user to post

the comment and then related posts L all right so okay continue continue let me give it some looks great looks great continue all requested features of fa phase three of the blog system have been implemented all components are now working let's see okay he needs to update that off of profile comment system yeah I already did so I'm going to tell it to update the change log and the road map and then crack on with phase 4 I won't copy that let's say uh let's the change log and Road and start working on phase 4

this is the user authentication and profiles uh yeah let's go let's go um I'm going to need to I've already got my two free sites on super base and the third I've paid for so I'm going to go and set up a new super base account do this over here somewhere off screen so super base let you add two Nano projects for free without storage and then if you want to add anything else you can add micro um micro um and and then yeah if you want anything else you can add micro which is paid

and that's two core armm shared and 1 gigabyte memory but the Nano is a shared CPU and comes with up to 0.5 gab so if you want to test out any test projects is perfect for that but again you can only have the two databases on there so um I'm going to go ahead and create a new account because this is not my site so we don't need it online and it does allow you to connect to GitHub let me see if it's going to try and connect to my existing yeah it wants to connect

to my oh add another organization nice um but it still wants me to do the same thing over here connect to GitHub uh let's just set one up so we've got okay so it sent me a ver verification email I'm going to verify and then sign in we are on the free plan going to create and then I'm going to add another organization so this is cool it lets you add different different organization different uh businesses if you're working with different clients then this is going to be necessary get all my security stuff sorted out

and I can actually just show this part so you need to set your database password you can set the region so closest to you is best or closest to your users it says so if your users are in the US you want to choose one in the US uh we're in the UK it's going to be a UK local site and the closest thing we've got is I mean we've got we've got London so so selected London and data API plus plus connection string use public schema for data API these are default you've got Advanced

configuration we've got postgress and postgress or whatever that is don't know we don't need to change any of that all right so make sure you've copied your database password that you've set then you've got the public key and the service roll secret and then there are a bunch of API settings and information that hopefully you don't need now that it's integrated with superbase um because it will handle all of this behind the scenes but if you are building out the backend in word in Winter then you definitely need those and you need to have them

all in a safe location because you need to add them to your pmv file which is your environment variables again these are things that you're going to need when you're deploying the site they get very complicated but they are worth learning and understanding and you have to keep your keys very very safe so very important to go and research but for now it's made it easy to connect and integrate so I'm going to do this going to authorize authorize lovable access access and this is the organization we've just added so we're going to have the

two now we're going to have my default one and this one I'm not sure if there's any limitation on how many database super base um accounts you can add but it looks like you can just keep adding organizations for different projects which is great so we've done that that's connected oh we're going to click Connect Now super based dashboard view tables connect so I'm now connecting your superbase project to gather your database structure tables and security settings this may take a moment so let's see change log have been updated would you like to start implementing

the user authentication system so we've attached super base looks like you've not created any tables no we've not because we're going to do that now for phase four okay great now that super has been connected let's set let's start with phase four um I don't think I need to tell anything else I've already reminded that super base has been connected so we can begin with phase four I'll help you implement phase four starting with the user authentication and profiles perfect since this is a significant change we'll need to set up the database tables first then

implement the Authentication system perfect let's start by creating the necessary database for user profiles so I'm used to taking this which is the SQL file and adding it to superbase manually but I'm hoping now that it's connected please review and approve these SQL commands once approved I will proceed with implementing perfect let's go so because it's all integrated it's applied this migration it's s Game Changer again because as it's building this thing there's going to be a lot of back and forth as you change things so as I add a user is allowed to create

an account a user is allowed to delete their account a user is allowed to add a comment a user is allowed to delete a comment all of these things require an entry to be added to the database now when you're doing this in Wind surf you have to tell it what you need to do you can connect it to the CLI so it can see what it's already got but sometimes there is an opportunity for it to misunderstand or create a new table when we already have an existing table and then that leads to mismatch

and all kinds of issues so the fact that we can now do this within the initial tool before we take it out and do any other tweaks it just reduces the chance of error so definitely love that so let me know which aspects you'd like to implement first and I'll provide the necessary code changes so so the migration has been applied okay let's uh let's move on to this one so we're going to do it in these stages then the user profile pages and then protected roots and navigation so protected roots and navigation again is

what needs to be set up to enable users to create their accounts and then everything behind that login wall is just associated with them so you've got role level security otherwise if you don't create these things anybody can visit that public page so very important stuff and again it understands the order that we need to do this in so I will implement the authentication UI with logging and sign up Pages using superb superbase or thei components along with necessary routin protections again this makes me so happy because this has been hours and hours of pain

before these tools started integrating it and and I had to do it myself self figuring this out was crazy so I I really appreciate how easy that they've made it now and uh let's see I've implemented the authentication UI with the following features so we've now got a login and sign up page just check it out we've got protected roots with tools we've got off provider context for managing or state updated napar all of these things what you can do as well which does take some more time so I'm not going to do it now

but you've got these different off providers so you've more than likely seen on different sites you can log in with GitHub you can log in with Google which is the most common and easy one you can log in with apple all of these things make it easier for the end user but you can go into superbase and do this so you can have Google enabled but once you set this up you're going to need to go through and set up the API in Google Cloud I can't remember in Google developers you've got to go and

set that up separately it does walk you through it but again that's going to take me off by about 15 minutes so that's something you can do so you can when they go to login they can just hit Google and log in with their Gmail account one thing I do like to add is something that super base already has which is Magic link so I'm going to tell it to before before we go any further let's add we've got forgot password which is awesome and and again this connects to super base so this is all

handled for you you don't need to go and build the logic behind this so before we go any further let's add magic link already has this feature it's just going to tap into it and then it will allow your users to be sent an email link that doesn't it's not a forgotten your password it's just the link that they can click to log in on the device that they're in so I'll help you add magic Link passwordless login to the existing login page this will allows users to sign in you just using just their email

address so there we got sign in okay I want both okay I want both um sign in standard I don't want it to take it away so let's make sure so we've got email provider confirm email secure email change secure password change um magic link was already set up I believe so I don't know if I need to do this okay here we got it magic link that's there and you can change your com your email template so you can connect your own SMTP I highly recommend this once you've got it up and it's ready

to go in development leave it as it is you'll still receive the emails they'll be from superbase but once you've got your SMTP server set up you can change this you can change your confirmation it's got the variables here uh I usually get chat GPT to do this so I will copy the message message variables I'll copy the existing template and I'll tell it to improve it to add things and it can do this and then this is for each of the different emails and yeah you definitely recommend Chang changing those from the default and

it also tells you if the content is likely to be marked to spam so if you start to change the email and it looks spammy it will tell you and then you get you get a chance to redeem yourself and fix it but back over to Providers I'm not sure where this magic link setting will be cuz I thought it was already set by default so I'm going to leave that for now I remember moved the force magic link kep Show links users can now choose between standard email okay I can't see that maybe it's

just taking time to show up okay I can't see that just yet open that up in a new tab I got too many of these let's log in yeah I can't see that I'm going to tell it but I have a feeling it's going to show up when I start telling it that I cannot see no it cuz it didn't it took it away it changed it there we go sign send the magic Link email I would prefer that to be a button again small things we can change later let's proceed with the road map

let continue onto the next step on the road map the change log file is getting long 102 lines is hardly long would you like me to help refactor it no no thank you that's fine I don't think it's h why is the road map in the list of forbidden files why can we not can we undo that I don't know if if I can tell it this or if I have to do this manually because I I can't see I'd have to go to GitHub would I let's see okay we'll go over here let's move

the road map file to the source directory okay and Ure it's proper properly tracked okay okay so now we've done the user registration login we need to do user profile Pages progress tracking and those things great so let's see right off the things we have complete in in and continue with use profiles and while we wait for that I'm going to go over to policies in super base so you can see what it's done so it's built the SQL in the public schema for public profiles are viewable by everyone which is going to be important

because we're creating a a fitness Community uh users can insert their own profile and users can update their own profile so very very basic things uh we're going to definitely need to add a lot more as as well as role level security for different things so public profiles viewable fine those are going to be very simplified versions of the user's profile and then there's going to be data inside which is their own tracking all of those things which will be personal to them which will need to be in role level security so we got this

issue we'll try and get it to fix it and it says I've implemented user profile page feature which with the following functionality view profile information username full name bio Avatar so we'd want to make that an optional for them them and but we do have username which is good edit profile information with a toggle edit mode save changes to the super based database perfect responsive design so if you don't have a database set up then everything you do and save will be saved locally in folders which is not what you want uh responsive design with

proper layout success or error and so on so I think now that we're here it keeps bringing me back to this login page this is why I like to do or at the very end because now I have to log in I know I have to log in to test these things anyway but everything is now behind this user wall so when things go wrong you have to either get it to create an admin a super admin or just create a user and use it as as you wish but you've got free users in the

page users after a certain point and then you have to have super admin to be able to navigate both to see as a a free user and to he has a page user so it starts to get a bit complex if you're making a very basic site and you don't need users or there's only one type of User it's not too bad but when you have different tiers and things like that it can get quite complicated so what I'm going to do right now I'm going to make a user account I'm going to make it

from super base actually let me make it from the site to make sure it works fine oh we got this let's let's Okay it knows it's going to try and fix that for me it says don't have an account sign up so I tried to sign in and it gave me a code error message instead of a an an a userfriendly error message which would be you don't have an account or that account doesn't exist uh please create an account so there we go this ER message in it indicates invalid credentials we don't want it

to show invalid credentials 400 status code or anything like that you want it to give us a friendly message that the user would understand so I'm going to try that again failed yeah still doing it let's just tell it please create a userfriendly message for when they try to sign up but do not have an account should them do um yeah I think that's I think that makes sense because we have free users and paid users and um I have to figure out the mechanics of that down the line so if we have monthly or

annual users that's going to be on one tier if we have users who have just paid for a specific service then it will be I think the normal free account with that service added on gets a bit complex that's all stripe integration so it's going to be really helpful when these tools start to add stripe the same way they've added super base or Firebase integration when they start adding stripe it's going to make things so much easier for everybody so I updated the login page to provide better user experience okay let's try that again I

don't have an account so let's see no it's still doing it try and fix this if I try to do this now and it doesn't fix it I'll have to it's not something I'm going to keep telling it to do I'd have to take the code and give it to Claude but let me just look at it so fail to call URL okay so this looks like it's it's got an issue talking to super base error type fil to call URL I've made the following changes added more descriptive Place holders I don't think this is

what it's for authentication to we please make sure you have configured the site URL in your super base project okay added the correct redirect URLs okay let me get it to tell me what those should be for cuz I do need to go and add those it says local 300 and it shouldn't be says Local Host 3000 so we do need to change the site URL so the site URL should be set to your applications base URL hm but that's not the same as this okay we're going to do what it tells us so we're

going to set our local host and we're going to add the redirects which is these two don't know if it's going to let me add both of them it's going to let me add one and the second one okay all right so those have been added we we can skip verification but we've not even tried yet so okay let's just try now with that okay so it's let me sign up and again it's going to have sent this email via super base this is not going to show your SES URL or anything like that so

I've got the email here but the problem is it's trying to go back to Local Host so I'm going to take this link yeah so that's not the Callback I need let's try that again I may need to just make this email myself I don't think this is going to work like this um is this not the the domain I think this is the domain let me see the Local Host work should let's see what it says yes you're absolutely right okay um let's try that I don't know if it's just going along with me

because I've said it or not but I'm going to try that I'm going going to set the URL to this one and then I'm going to edit these I'm going to leave the Local Host ones in I'm going to add add these let's take off confirmation for now but we want to put that back on once we've got our site together so let's hope still giving me issues I see the issue the error indicates that you're trying to sign up with an email that's already registered okay so so then we need to get it to

change that message yeah I hope it's doing that because we do not want our users to see something like this added error handling let's see let's do that again just to see if it's fixed that no it's just signed us in okay so now now we're signed in we've got profile up here here and we can set let's get it to fix this nav bar nav bar seems to be overlapping site content please fix it says it's fixed it I know it does take a minute to uh catch up with itself was not too I'm

very aware that it probably is fixed it's just not refreshed let's see okay looks like it has still still got that on let's say let's make sure it is fixed on all pages as the does this everywhere let see if that's going to fix this page as well is that it done did it do it I thought yeah that's done okay why does it say build unsuccessful okay that's from edit I think then we need to go over to the change log see what needs to be done so now we can set a username so

I'm going to do Ariel I have my full name blah blah blah blah blah save changes let's see if the other save button works as well too awesome okay uh we oh we can't update a photo yet this is something else that needs to be attached to super base I believe that storage buckets are not free so you have to if you're using superbas storage let me see actually new bucket okay let's see um this will be a public bucket and this will be for avatars uh additional configuration no images but we'll just all right

let me do this so image Wild Card restrict file upload size of course photo shouldn't be bigger than 2 megabytes save okay so you can create buckets I I don't know why I thought that you had to pay to create a bucket so we've now created an a T baret I'm going to tell I'm going to tell loveable so let's allow let's allow our users to upload Anar for this I have already created a super base a super base bucket avatars um a public a public you can connect to make sure the folder is username

slash I think that's it yeah so so the so they're all kept separate so make sure the folder within the bucket is uh user slash username user slash username this will just keep everything tidy I think I think that's how we do it I think that's how we do it let's see so it what it should do is it should create a folder within this bucket there's nothing in the bucket here okay so it says I'll help you implement Avatar upload functionality for users so everything that we can do with regards to super base and

and lovable in lovable we should definitely do because if we can avoid having to do these in win surf we may not even have to move to wind surf wind surf is for all the backend tweaks connecting things I think I probably will need to move to it to do the blog CMS but beyond that everything that you can do try to do it because it can apply these changes it's fully connected so it can see what already exists so we're going to try and do what we can and it will save us a lot

of time and a lot of headaches so the migration has been applied and so let's hope that it has truly been I can't see this folder but maybe the folder will be created once I can make my my profile once I can I can add this and now let's implement the Avatar upload functionality exactly what it's doing in the meantime I'm going to head over to the SQL table editor to see if I've been added I have indeed been added this is the first user we've got the user ID the name the full name we've

got the avatar URL which will be applied from the URL given in the storage bucket so that's been added to the database as it said it had and biotext blah blah blah and that's how our blog would look in the database as well so I've updated the okay we can see that let's upload that it says success it's uploaded do I have to save Let me refresh and see if it's still there it's still there it's still there perfect the headache I went through doing this manually oh my God and over in Avatar as it's

said it's done it's created the way I've told it to so we've got the user folder we've got the username which is Ariel and then we have the file and the URL so this is going to have been added in the table no doubt here it is perfect this is all working this super based integration is a game Cher absolute game Cher so that's that that's the profile done that's done let's move on to the next thing awesome let's add this to the change log and move on to the next sh this is I'm loving

the ease of this I'm like when I tell you how long it's it's taken me in the past and uh I messed around with I think it might be easier to do a different a cheaper storage service like uh back Blaze now I was running into so many cause issues it was taking so long to fix but this integration it just makes it easier so even if you're having to pay a bit more for super basis storage when you upgrade your tier it's worth it for the hassle that you don't have this is honestly this

is the most seamless profile setup and storage setup and everything I've had since I started doing this no code low code build so all right I'll add the Avatar upload functionality to the change log the change log is getting long I don't think it's that long let's continue proceed with the next step in the so we're nearly 2 hours into this build but I think we've made quite a lot of progress in this two hours so far we have created the complete outline of the site we've connected superbase and created user accounts we have completely

set up authentication so they can sign in they can reset their password they can send magic links we have added uh the functionality for gain storage so they can upload avatars and down the line everything else because now it's set up with the storage what we created was a public table so the Avatar image would be able to be seen by anybody but then you'd need to create another bucket that isn't public so if they wanted to upload their progress photos or whatever it is that you you want to do with your website you'd have

to have a private bucket and you'd have to set up a role level security on that but again with this super based integration it makes it so much easier to build these things up front so get the site to the point where you want it build the authentication the login system build the storage and then you can start to build all those other features from there what is still a challenge for new people beginners or anybody just that's not done it before is adding the payment system Stripe have so many different options of of course

you've got PayPal as well either way whichever payment method you go with they're still going to have their own challenges because they need to talk to each other and that's where you have the opportunity for things like cause issues to come up and that's a whole whole whole another story so we've made a lot of progress in this time and um we're still going I think I'm going to go a bit longer I'm aware how long this already is for anybody who is still watching at this point kudos to you I hope this has been

very insightful for and uh you can follow the things that I've done as you build through yours because two hours in the grand scheme of what you're able to create I don't think is that long so looking at the road map we're currently in phase four user authentication we've completed registration system login log out functionality user profiles the next item in the road map is progress tracking dashboard let's go would you like me to implement the the progress tracking uh dashboard feature this would allow users to view their Fitness progress over time track various metrics

visualize their progress with charts the good thing about these sites as well is you can make it very very mobile friendly from the beginning which is what I've done so if you want to turn it into an app you don't have to go and make a whole new app you can just wrap this in app tags essentially so I'm not a part of the web app world I have built a few apps where I've out sourced the the creation one of those was a native app meaning it was built for mobile for iPhone and Android

another one of those was just like a normal site wrapped in app tags so it was a website that was already optimized for mobile and then it was just in a wrapper that was accepted in apple and in Android so this is something you can do with this you can make it completely the mobile version can be completely which it is mobile friendly everything you do this needs to be I need to tell it to make sure this is let me see actually this is the I'm doing it wrong I'm moving this when I should

just be clicking between here yeah so this is not I have to tell it to make this mobile friendly because this is not how I'd want it to look you don't want them scrolling left and right mobile friendly is is completely centered fits on the page no issues and has the mobile menu so everything should work perfectly as it would in a mobile in a phone app so I do need to tell it this um okay so it's got this error let it fix this and then I'm going to tell it to make sure that

everything we do is mobile friendly and it says that it's done that but it's not so need to tell it that so what it's added which did look quite cool but I was criticizing the mobile section is tabed interface to switch between Pro profile and progress section um progress tracking form to record weight and body fat percentage awesome visual chart showing progress over time latest metrics display responsive layout that worked on all screen sizes currently the progress data is not persisted to the database would you like me to implement yes indeed um I'm going to

say everything needs to be connected to the user in the database or persisted to or use it its own language okay so it's done that wait let me see no there still needs to be this still needs to be fixed okay regarding yes everything needs to be persisted you never heard that used like this before to the Bas and connected to the user I think that's fine so so every day I think it tracks the progress so latest weit okay where did it get that from I just want okay so it's already told me this

is dummy data and it's not persisted to the database so that's what it's doing now Okay cool so now when we go over to the database in SQL we've got this first table which is the user and then we've got this little fun print here which is the authentication so this is where everything begins so the user account and then we've got the progress entries so again it takes the ID user ID we've got the weight body fat date created at and then everything is going to connect up like this if you've got tables that

are floating and not connecting then that's an indication that the information is not talking to itself talking to each other they're not communicating and that's where you get loads of issues so it's good that it's done that I'm going to say that this uh progress oh it's it's I think it's fixed it okay let me see well it seems fixed because it's not got that chart so let me I'm not entering my personal weight details okay just entering some information okay let me just check yeah no okay so one so um the progress tab is

not mile friendly please fix and ensure all features going forwards are responsive okay that's better um H we do we this is a bit too narrow um we need to make the most of the space I don't know if that's because of the date it's not going to let me add something else um can I I don't have the element selection anymore either so that's a bit annoying but these are small these are minor things we don't need to fuss about that right now um we would want to add different things like goals so progress

track progress um within the progress tab let's add goals um a goals component ures persistance of database and other Fitness information information this is all I'm going to do for here because I don't know how we would want to build this user experience out this is not really the main focus because there are tons of apps that do this the focus is on now creating the local aspect aspect of it um I think structurally it's it's done I got to work through the road map to see what's left adding this to the database so we

now have has it gone we now have another section as you can see fitness goals progress entries all communicating with each other so all connected to the user we don't have this okay it's still doing it implement the goals component with the progress track ensuring it's responsive and user friendly okay so I'll let it do that see what it comes up with we need the contact page create a contact us page and then the contact page will be connected to an automation workflow so I would make the contact page quite detailed so it wouldn't just

be subject email message it would be targeted so to find out exactly what they're trying to inquire about and then it will be funneled where it needs to go gain content topic for another day but that's how the contact page the contact contact page would be set up let's go back over to profile to see what it's done update goals so program chart so I'm not really okay so this this updates the progress update goals So Okay so we've got the target weight Target body fat Target date status notes achieve let me see how this

works so let's say my target weight what did I say I was it says I am 80 let's see my target was 70 and my target body F would 20 and then Target date be um I don't even know what date are we on now 20 so that's a whole year to lose 10kg of course of course you can do it 2025 okay in progress get in there see if this adds a log um current goals in progress okay cool I like that that's cool that's that's that's done is it is it a log is

it keeping a log I don't know either way that's cool that's that works that's done that adds to the database and I can tell because I'm going to refresh and it's all still going to be there progress yeah perfect says build unsuccessful with something I'm going to let it fix that and then we're going to move on to the next step so the online coaching will be a hub and it will lead to different um types of online coaching available so this will be a hub again and then it will have information and links to

three other Pages the local classes will be the Hub page for the local SEO programmatic pages so those will cover all the different areas Fitness Training Fitness coaching in XYZ for the very local areas of the city and then the fitness guide again will be another Hub page but these will be purchasable um productized services so this would that would just be a page with different products so quite simple they go over to the r Services page and then they've got those three different options keeping it tight easy to navigate um but also still very

robust in what it's doing and what it's offering so it's covering these two things actually so Fitness guides and the co the online coaching those two hubs are for everybody so those would be SEO and you can do whatever you need to do to gain traffic and and build links um to to those and then the local classes of course these are for local SEO so the site is multi-purpose it's wants to attract everybody but then it's got very targeted areas for the local SEO aspect of it tools Target everybody they've put the tools behind

this user wall which was not necessary all right so I need to tell it that the fitness tools are free tools available to everybody uh progress track let's see yeah we probably need to remove the progress tracker because it's not doing anything for anyone okay um yeah we don't this makes no sense because yes I'm logged in but it's gone it doesn't make any sense so we're going to just get rid of that one um so I need to tell it so for Fitness tools oh it still is there still issues okay so for the

fitness tools on do page these should be publicly accessible not behind a user wall also progress tracker should be removed from the Dos page as it is not something it's not a one time useful that's all I need to say so what I want to add let me all right let me work through the road map so let's say all right so let's um let's remove that good let's remove that um let me work through um add oh let's let's move on to the next step in the road M it says it's trying to okay

use profiles partially done but needs enhanced progress tracking dashboard partially partially done with Pro progress tracker saved workouts and calculations personal goal setting already implemented achievement Badges and social connections love it uh and now it's going to add this into the database again I'm not going to get over that just yet first goal set progress Pioneer weight Milestone consistency King login for 30 consecutive days now we're adding gamification that's my go-to thing adding game ification and I didn't even tell it to do it so this is great so um when you're adding any sort of

community aspect to your site you definitely want to add gamification if you want to keep bringing people back and um making sure making sure where is it though I can't see it in the page the migration has been applied now that it's in the database I can proceed okay yes please now it's going to create those features so it's added it to the database first and then it's going to create the features so it always has the road map the database tables uh to look back on and then it will continue just so everything's connected

properly I love that and I can always go back to my SQL and verify how this is all coming on you can zoom in and zoom out so from the profiles we've got achievements here still all connected up user achievements so I think this is the main achievement board user achievement so I wasn't going to call it that I was going to call it like an accountability board or something like that first goal set set your first Fitness goal okay cool um saved calculations oh that's cool all right it knows what it's doing I'm starting

to get confused with these tabs so I wanted to make sure these are all connected up and they're making sense and not getting overwhelming so first goal set set your first Fitness goal uh it needs to continue let's see I've enhanced the profile page by adding two new sections the next features we can Implement are the automatic achievement tracking okay what did it say it has issues with so we're really starting to move now once you've got the basic structure and the database set up it's very easy to start adding all the features that you

want and that's that's what takes it to the next level compared to a static website or a like a WordPress site even though you can add users and BB press and all kinds of things you can add in WordPress I'm definitely not down in WordPress but the customizable nature of these tools is it's just insane it's just insane so let's see we got progress save achievements I don't think it's I don't know what it changed there I had another issue I'm going to do this one more time then we're going to have to put it

in clawed so the key changes made added validation for fetch saved calculations yes simplify the save calculation interface use typescript type narrowing to ensure the data matches our interface exactly nice these are things I don't get with wind surf because it's looking at although wind surf does look at the different data this is just looking at the whole picture a bit better because it has access to super base completely okay so it's updated the goal section I think okay added blah blah blah not the file is getting quite long I don't want to refactor it

just yet I want to continue and guys this is all done on the cheapest lovable plan this is all done on the $20 a month plan so if you can't make this work for you at $20 a month then this web this web website world just isn't for you uh properly typing this blah blah blah fixing not this file is getting long 148 lines is not long [Music] um typ script errors I'll update the code to probably handle the types by okay okay I just want it to continue though update the change log and you

definitely want to make sure you're updating the change log as you go because if you do let's say you run out of credits in loable or you want to go uh past the MVP to somebody else or you want to start building it out in Wind surf you're going to need that change log because it can see everything that needs to be done uh just as it keeps doing now it keeps going back to the road map and the change log so we know that we've done this we've done this personal goal setting I'm not

sure why that doesn't have a tick next to it social connections next item to implement achievement badges uh let's head over to oh we're in profile already achievements so how do I get these badges no okay so achievements aren't mapped to anything it's creating the logic for these achievements it's broken something we've got social connections this is starting to build out the community aspect of it and look at this I've removed the duplicate policy creation while keeping all other functionality again another [Music] thing that is um that's needed because you'd run into these shes doing

it manually now that we have the achievement set up in the database would you like me to update the UI to display yes and we also want to give these badges icons cuz they don't look very fun nice nice nice nice these are looking so much better let's uh head over consistent logger log weight for seven consecutive days it's got these uh bars let me fix this issue it's got these um let's refresh this one got it open up in a new tab here so we do need to make these work we've got these um

achievement uh progress bars which is nice uh set your first goal so we just need to make sure these are mapped so these can actually be tracked and automatically updated log 30 weight entries log weight for seven consecutive days uh we can add an inter intermittent fasting element all of these things fun stuff but this is how we start to get sidetracked CU I need to get through the road map and then go in and start to make these tweaks so after this I'm going to go to the road map see what needs to be

done and continue from there let's make sure it's doing what it's says it's going to do I've added save to profile buttons let's see that's not very nice save the profile let's see yeah oh wait why does it why is it is that Json h it a profile but looks like this which is not very user friendly but this video is now is going on a bit long so I think this is this is the basics I've I've shown the build from prompt to MVP this is what it's looking like um we've got working tools

we have some roots that still need fixing but we have our working tools um let me see if this is um adding it to the profile as well so just oh we can't do that uh calculate TD save the profile let's go over and see nice so we've got TDE calculations we can delete it and we've got BMI calculations it's got the date that it was added this is nice we've got these achievement badges um not entirely sure if they've uh if they're connected as they should be it says first goal set I thought I'd

done that already so it should have um but I'll have to go and talk to that data we've got this progress overview which works uh at the moment is I've logged it for the same day so you'll need to log this every day uh and it will show the chart which is nice that it works all out of the out out of the box and then you've got social connections which is when you start to build the public element of it the community element um but for the most part we've built the site we built

the structure we've built the blog structure and template we've built the the SEO so the Slugs for the pages we've got blog we've got the category and then we've got the SEO slug we've got the card of the blog the image the look everything we've got mobile responsiveness we've got the author card links to the social your we got the subscribe to the newsletter a game public element user generated content adding comments We'll add our internal linking features after when we're adding related posts telling it how to automatically select that for us so we're not

having to select these related posts um then we've got these local SEO pages that we'll build out then we have to build the online coaching hubs which I mentioned already the about section these are all easy things but the main things were the tools the blog because these are things that you want to create the structure ahead of time and then the static Pages like blog um contact these can be done very easily and uh yeah and then the Hub pages are accessible from the homepage brilliant for SEO or information then we're going to have

some more social proof added here and the Google Google reviews from Google my business um I think they can be imported I'm not sure definitely figure it out and but that's it for the most part that's a fullblown beautiful looking working site with added features so your basic local SEO your basic local business site with all these added features so it's actually beneficial to a wider audience and you can build your brand and have uh services and products that are Global as well as your local building up your local business I I think that's where

we're going in the future if you have a local business you're definitely going to want to think of ways that you can grow and reach beyond your local capacity so I hope that video has been useful if you have any feedback please drop it in the comments below you can find me at arop phoenix.com um I'm available to be booked and anything else drop a comment send me an email and I'll be happy to help