The Launch of nocodeui learning platform & live building.

oh oh we're live oh my gosh yeah I forgot I went live uh awesome dude yeah we this is fun so this is an exciting day like the culmination of of all this stuff it's really a culmination of a month and a half of work um interspersed with a lot of agency work but and we're matching today in not even with our no codei colors but Mark thanks for joining dude uh thank you for everybody sorry I didn't schedule this and post about it before this week we have been heads down with client work and then a bunch of uh just business related stuff on no code UI you know getting stuff set up on the back end MailChimp emails uh Graphics I App Store screenshots right so we are going to be we are launching no codei on the web today um I'm going to send out emails to all of our uh signups all of our sign yeah everybody that signed up for the the preboot camp pre-c courses so that will be super fun and then we will you know on our website we're I will just showcase it to you so no code [Music] uiu I think you I mean you even said that it's been like a month and a half of all this design work but it's even a longer time of just kind of brewing in your mind and in your heart more how long has it been I mean it's probably a year and a half or two years I mean really doing what I'm doing now 10 years like it's it's been a even from I mean 10 years ago my wife and I were we were thinking about how can we improve the lives of those around us right like how can we train people uh to have a better income or life Hood be better workers uh be be better individuals in society you know how how can we most effectively do this um and one of the ways that we thought was training people in design and we also really love coffee we owned a coffee shop for six years so we were like that's an easy way nobody needs like a a major skill set to learn about coffee uh to be a be a beneficial person a customer service person that's just you know Giddy and can make somebody's day better um but also just training people our our goal is to improve the lives of those of people that we interact with um and allow them not to just go away from the interaction they have with us like oh they were cool people but to be to have their lives inherently improved um and so this learning platform is something that has been mulling within me for yeah I would say about 10 years since 201 14 um and it's just taking this sort of form it's there's a long testimony and uh Pathway to get there a failure and then back into design and you know all this stuff but this is one of the passions that we have um and we're really excited so we have launch if you go to uh nood ui. I've updated the button up here to where you can actually join now and that join now will lead you to uh share this tab instead um the login page for no code UI and you can do that um yeah you can log in now it's open we will we are well let me um here I'm gonna just log in real quick uh show platform yeah we're going to showcase the platform and just kind of talking about it too and the the just the history of how it started in uh Andrew and also his wife's hearts and their minds and uh to really yeah be be an EMB betterment for the people around them people they care about but also yeah just families have a heart for people and I know first time I met Andrew I remember hearing about this and that was how long ago that was like that was that was uh eight years ago it was 2017 so seven years ago I think so getting old yeah I know right it's been cool you weren't even married then now you have what three kids and got three kids yeah and Andrew you've helped me as well and to be able to yeah to grow and design and and become a better designer and even provide more for my family and so to see this no code platform now is so exciting for me because I I believe it's going to do that for so many more yeah and and really like I've always enjoyed teaching I've been teaching uiux for the last two years um and I've enjoyed it but there's just always when you do it in a boot camp setting like there's just I've done it twice and both times the students leave lacking lacking in the proper skills they actually need to get a job um lacking in deliverables and and showcasing a portfolio that actually will wow people um and I know that I'm not going to teach people to be perfect in everything they do but my goal would be to empower you with the knowledge to deliver amazing applications uh at a higher rate with higher quality so that's why and really I'm going to stay within my expertise I'm not going to try to venture out into all sorts of development stuff and security of apps and everything I will bring on hopefully um some experts within those verticals but my goal is to empower you whether you're a beginning user a power user uh or an agency to deliver higher quality and better applications to your clients or for yourself you know how do you how do you improve the lives of your users we can we're going to go through all that so when you dive into the platform you get this dashboard it's not going to look like this you're not gonna have any courses you can go to courses here we have two ready to go right free we have get started which is your basic build an app with me tutorial from the ground up we start with um building an app from creating a project to connecting Firebase setting up authentication creating the UI for a home screen creating the UI for a detail screen passing data utilizing components um hooking up some logic doing some code Expressions knowing the power of code Expressions if then else statements um uploading data creating that data manipul data and then this stuff will also be on YouTube but if you're part of the platform you get a bonus video where we will actually go through um setting up some some filtering of Firebase data firestore data via Choice chips and then some conditional Logic for the ride screen where we you know we reserve or RSVP to a ride it's just a little ride app that we are uh creating at at no code UI so yeah yeah no and on the no code uh UI Builder when you're joined in it you get a bonus video and then that that one is the cherry on top is really good and yeah I'm really stoked about it yeah and then this flutter flow 101 course I I was dragging my feet on finishing out the in the totality of this because really this could be like 12 videos 14 videos 16 videos and I was like you know what I'm I I don't I'm I'll do flutter flow 101 and then I'll do 102 103 104 that's that's how I'm going to break it out but this is an overview this is going to be good for everybody it's not just going to be good for those people that haven't built anything before or those people that are super experienced it'll be good for everybody um in this course I essentially just go through my logic my thinking uh the process that I go through and why I set things up the way I set them up in flutter flow for every single project and also the way I set them up when I worked for flutter flow how we set up all the templates and themes and components and um yeah flows and all of these things how everything can work together and how your life will be much easier if you set that if you set things up in accordance with um the design system in place in flutter flow so we talk about I just give you like hey these are like my shortcuts this is how you basically build UI in flutter flow these are things that you're going to be touching theming goes in depth on how we lay out colors and typography templates and flows hey we just talk about stuff we've talked about on this live stream numerous times but you can see the power of it um so great for beginners then you get a little little quiz which is fun so you can uh you can take your little quiz based on the knowledge of all this stuff um then we go into building a a wonderful little uh layout basic so actually we can you probably just start this quiz I'll just start this quiz you can just see it in action okay so really important here uh make sure that you uh once you select an answer just the way I set it up once you select an answer you're going to be automatically navigated to the next question so overflow yeah and you can't go back to the to the last question right yeah there's no way right now sorry only because like the way yeah there's numerous ways you can set up quizzes and this is just the one way that I was like you know what no Grace quiz I just want to use one component so um Okay cool so yeah let's see add pages um from the green button Pages yes left side um how do you have a splash I don't want to go through this all for y'all so you guys can get this but yeah we'll yeah while you're doing that Marcel had a a cool question question Cool was the platform developed in flutter flow yes every bit of it was developed in flutter flow every single thing so um yeah and we are going to be launching on iOS um and and then eventually Android I'm gonna have we have a developer on the GL team that will help me with that um it's still sort of a a a for me but yeah we're going to be and we'll we'll touch on so we our main focus will be on building beautiful applications in flutter flow that are powerful so a majority of our content will be around Firebase and flutter flow um building applications and then designing those beautiful applications all the design stuff will apply to Firebase superbase everything we will build out some superbase uh content it's not going to be as robust as the Firebase content because right now the superbase um integration is isn't as powerful but we'll do a basic app with super base we'll do like a a responsive app with super base um we will be doing that same stuff with Firebase we're going to go through everything from the way I set up real projects so sending push notifications sending activity um allowing not you know allowing a user to read a notification uh chat right how do you how do you implement the chat flow and and maybe adjust it to your needs we'll go through all of that so um sorry I'm just going to go through this quiz nice see we have a question from uh from JP says I see a bunch of Firebase content will you have the equivalent for super base yes yeah we'll have similar not total so it won't be equivalent but we'll have some based off of super base if you guys want to know super B please go follow the digital Pro on YouTube he does an amazing job going through superbas superbase build ship all that stuff he's like light years ahead of me so uh go follow him and listen to his content give it thumbs up really support him he does an amazing job of walking through also he's gonna do a much better job of you know full-on tutorials like I'm very ad lib um and the way I do tutorials is very um off the cuff of my sleeve that is polished I tried to polish it um but you know he has a much more teaching atmosphere so if you want if you want somebody if that's the way you learn um then please just go and and watch his stuff you can benefit from both right benefit from both Styles I'll be teaching different content what than what he's teaching just so you yeah you guys now what's his what's his channel name uh the digital Pro digital Pro and uh also son asks will you guys do anything for apis yeah I'm not necessarily A an expert on apis so uh currently we will we won't be but again we may have some guests instructors come on and just walk through apis I think it's one of the most robust things you can do in flutter flow very powerful and not a lot of good education on it so we will do stuff we're going to be focusing on how to build apps uh period so yeah like I said I think the flut oflow channel does a great job of educating people how to use the platform and then uh other other platforms do a great job of how to integrate with other tools or how to build like very popular applications but there's there's not a lot of good um instruction on the theory behind building you know best practices um and hopefully training you to become an extensive Builder not just hey follow me along on this tutorial okay now you can build the thing that we built in the tutorial I don't want that like I I don't want that you don't want that you want to build other things you're you're following the tutorial so you can learn how to build your own project or you can learn how to build for clients so the things that I touch on the the places where I go into detail on something it explains some of the theory and thought behind um why I'm doing what I'm doing so that hopefully when you get a new project which there's plenty of projects in this vertical man again Reas why I left flutter flow which is a very cush position let's be honest uh it was it was awesome I loved working with the team I didn't leave because I was disgruntled I left because I saw an opportunity here um and I want to be at the Forefront of this opportunity where I can train people teach people um we can improve the the quality of apps that are delivered through flutter flow you can build such robust and amazing things so I want everybody to be empowered with that also I'm doing a little selfishly because us at Koo um we get leads we are inundated with leads and we have no uh quality people that we can trust to pass them off to I know now I'm going to get inundated with you know all these agencies um I'm very picky I'm I'm extremely picky on who I pass stuff off to so we have we have good agencies that we are working with uh already so we don't need more but we need more UI Builders designers that are capable of of carrying a figma design all the way to flutter flow laying stuff out correctly in flutter flow um and then hooking up the back end so that that's some of the thing some of the content that we'll be going over we'll also be going over you know basics of Firebase so what is it how do you do it um how do you structure data how do you query data how do you connect data pass data cachee data you know all sorts of things related to Firebase which I think is beneficial I there's so many times where I jump into a project and I see things uh not that I'm an expert of database stuff but I see things that are wonky let's say they're a little wonky so uh just going through that I will have an expert come and just give me some some guidance on best practices from a development standpoint um and and then I'll carry through some of the stuff that I've learned from uh the team at flutter flow in regards to database stuff um okay cool um yes and JP these are all all great questions So the plan is to have one-off purchases for for certain courses right you can see here like design principles building responsive apps and flutter flow intro design thinking Firebase Basics like there are one-off purchases that will be a signed and associated with your account um the goal in the future is to build this out where it's not just a learning platform but it is also like a community maybe a pro Community um that can share information ask questions get get more specified uh live streams or office hours or something uh with myself and then um get you know discounts and access to course material or maybe just all course material something like that that's an idea so I would like to well there's I'm doing this for you know two reasons right one I would like to create some income and utilize my expertise to do that where I don't always have to be present um but also I want to empower people and I see this as a as a yeah the the one area where I'm like okay cool yeah there's great design instructors out there but this area I feel like I have some expertise that I share and benefit the world so and then this one is also very good this L from Luke um helping to create a new role of ux Engineers 100% I would call them design Engineers but they can be ux Engineers as well um we will be tracking video analytics for users um currently we're just using we're hosting everything on YouTube right now um but eventually we're going to switch that over to sort of a custom either integration with YouTube API or something um I've already had a beta user reach out and like hey I'm building this custom widget that gives you more flexibility which is exactly what I want um but yeah So eventually we'll do that we'll be tracking videos um I'm tracking you know course activity uh even on like you know you get updates when I uh update courses or add new courses here you'll you'll get sort of you know you'll have the ability to sort of click in take action Etc on them and then on my end I'm you know I have a whole whole other platform built out for the instructor portion the admin portion of flut of no code UI where I can actually dive into Student Activity um grades I can you know that some of these provide the ability to submit um an assignment it's on the basics yeah yeah so final assignment share your work so you can just upload a you know a link a Twitter link or something you can share the the app that you actually built in flutter flow um and then I and then some of these like the Firebase Basics yeah that's was a good one uh right there'll be a grade for this assignment there'll be a grade for like your design uh principles assignment where we actually go through planning defining and creating thumbnail user uh thumbnail wireframes and connecting them a user flow in figma you know like doing that for an application and then submitting that as an assignment and getting a grade back um so it's sort of like impromptu uh learning but also I there is some benefit to getting feedback from somebody else so often there's like courses out there that it's just con content you consume consume consume consume consume and sometimes there's practice but there's very few times where there there's practice and feedback you know and you and you get interaction with um you get interaction with somebody else that that knows what they're talking about so yeah hopefully this will be a I don't know revolutionary it's not really revolutionary it's it's a it's a merging of of current practices and you know larger practices which is like a traditional education format so yeah yeah yeah I've done I've done quite a few courses where um you're you walk through through um building a specific app and at the end of it you're like man I can build anything and then the first like app that you're trying to build you like run into a problem that you that wasn't in the course and you're like who do I go to you know so I'm spending the next hour or two just on forums and different things like that and so to be able to really interact with you or to with the Cleo team is just uh yeah yep and there's there's plenty of places where flutter flow users can interact so you know that's where I I didn't launch with a community to begin with because there's already like the community at flutter flow there's a Discord there's you know digital Pro Community um there's there's plenty of these communities out there where you can actually get feedback but my goal would be to teach you know and and teach these things that we do every day whether it's creating admin panels or you know querying data correctly or um linking data you know or or utilizing component or apps or page state to formulate a list of Records you know and then sending that list of Records to somebody so yeah yeah it's been it's been good awesome okay let's see access blot yeah there's some maybe maybe some errors there's also a way to submit once you do log in you can also submit feedback please do um I get a push notification from this because I have the test flight so and then iOS we're hoping to to launch iOS uh next week we're sort of submitting to the App Store um and going to be under review have to do some uh some unauthentic we have to do some Anonymous users stuff uh so that they so Apple will accept it because they're they're real uh real Annoying about that recently but beyond that this is good cool and then today right we're only 25 minutes in we still have another 35 minutes um I wanted to just dive into whatever anybody wanted to learn if somebody has a question I wanted to sort of address that because I didn't I've been working on the no code UI platform so long and client work all week had I didn't have any time to prepare for this so there's one thing um that I wanted that I will touch on I guess if nobody has anything pertinent um we do have one we do have one request from let's see from Mark asking if you could do a little demo ah okay a code expression that receives a string as a temp and change it to show 14 oh man yeah why' you have to show that one Mark Mark to Mark Mark has been interacting with me on Twitter I think um good question so 143 there's a there is a code expression for that that will has done and I'm trying to I'm trying to see how oh you could just limit the characters but uh sorry trying to think about that code expression that takes a double and converts it to a a two-digit or or on digigit string um I would have to research how to do that Mark sorry I have wanted to do that and I just haven't so it but it is a simple that code expression is extremely simple because um you can you can do one of two things you can do a code expression or you could limit the characters in the front end so you could just say you know only give me two digits or only give me three digits um you you could also do for an EAS easy way you could okay I'll I'll do this it's not a code expression Mark uh but let's see window flutter flow okay not a code expression but a custom function that maybe you can take to a code expression because uh love chaty BT right so we are going to create a function here that function will be um convert the double to to uh to string let's just say that right we'll take a double by 14.37 and we can we can just return an integer let's say okay and this will be uh sorry we're going to return an integer we're going to take a double LOL all right uh current double okay then in our Code Pilot we're just going to say I would like to take a double and limit the decimals to zero and return as an integer integer um return and round to the nearest integer okay let's see if that gives us anything looky there that that will most likely give us what we need so if current double equals null return null save function and then I will I'll get a test mode up and running so that we can test that because for some reason in the desktop app you no longer can test in custom functions which is funky um Shadrach great question oh and then JP Mark we we'll touch on what JP just said so does the Launchpad provide a la yeah does the platform provide a Launchpad for beginners to experts in flutter flow uh yes Shadrach I would say it will eventually it's not going to right now but you will learn you'll move from beginner to intermediate right now with those two courses that are up there you'll get some actionable right building I believe that experience is required to become an expert you don't just do something overnight right like I wish it happened like that I really do um but it just doesn't typically so it's consistent practice and there will be a number of of courses that will be you practicing right I'll just do some short lessons there'll be there'll be some free form lessons I'm sure or a course where it's just like all of my thoughts on State Management uh all my thoughts on building robust applications that will help you help those nuanced use cases so let's go ahead and test that and then we will need to um need to see if we have a double here we don't in the rides yes ride length here so we have a double and we have the ability to create that so we can automatically test that custom function Mark and then JP you also had a really good question here can you explain your thinking on break points in a bit more detail yep yep this is a good question because I haven't formulated a I haven't formulated uh precise answer to it by that I mean just a precise answer as to when and where I do things so my initial uh answer to this would be give me a second I'm logging into that test mode oh yeah test um and while Andrew is doing that for those that just joined uh we're launching today no code UI so you can head over to the noode u.io and then click the join now on the top right and uh yeah see see all that's being offered there the there's two free courses right now and more to come and right now we're just Andrew's taking some questions of uh things that he can just show showcase right now I need demos so if you have any questions in the chat so JP I'll get to the answer of your question after we showcase this that Mark asked so um back here on our home right we have a we we did touch on this stuff last week right we have this miles text here we have our ride length this ride length is a double um even though it says string up here it's actually a double in the um back end so what we're going to do is instead of this ride length we're going to feed this ride length into that custom function okay so custom function convert double to string all right we're going to just do that ride length here number of formatting number of miles and then when we actually reload this we can go and create a ride in our test mode and we'll see if this converts we'll do like you know 14.34 and and we'll see where where it let me go ahead andare share you guys can Andrew something's up with your audio uh oh there we go can you hear now maybe maybe we're speaking to the side of it I don't know oh yeah yeah perfect all good all right so we will do this and I'll just upload a small image here Camp graphic um test ride you know San Antonio really awesome number of writers 200 ride length um 20 point oh oh well we need to do one more thing okay I'm just going to share my entire screen so I wonder if I can do stop sharing I'm just going to do my entire screen here perfect okay sorry we we masked on that create ride screen we are masking this to only only accept uh digits so we will do none so that we can Implement uh a period or a DOT and then we will just also remove those we don't need them okay sorry now I'm sharing my screen so on this on this length one um we had this mask on or no we had the filter on to only accept digits so we going to now be able to accept all things so really awesome San anonio this is great um 14.22 or maybe 74 200 uh we'll do our ride tomorrow at 3:30 okay let's see maybe we do need to upload this image oh we are getting a maybe that ride length is a sorry guys this is a ride length is a double yeah see what this is we were able to do this last week so oh my gosh oh this is the wrong create screen maybe oh I know LOL we hadn't even set this up we didn't set this up this is my this is my previous project okay give me a second we'll do we'll do this in our in our test project so um my private projects uh tutorial go live stream we'll just do it in this screen okay I'm sorry guys no worries Andrew and Michael we are uh yeah we're working on this so we're working on a welcome email with links to the free free lessons yes um I'm just doing that today so after this that's what I'm doing um it's going to be it's going to be fun so that and that's another thing that we'll go through we'll go through how to set up sort of email flows you know how to how to send out beautifully designed emails um to users that sign up to your applications so I'm doing that with build chip um okay yeah I Mark we may not be able to get to that um sorry I'm just trying to give me a second okay where is this sorry um any other questions mark um let's see JP had a question okay see where is that right okay yeah that's right so we will so break points Mark I'll have to respond to your question later I just don't think it's going to work uh today I apologize but that's that's the idea that you can you can utilize a custom function you can also just like research uh how to found in code and then you can just Implement that in the code expression so if I figure it out later today which I may I'll I'll send you a little I'll tweet something out and and tag you in it so okay where three minutes ago by you live stream perfect we'll come back to this so last week we put together a responsive design right we took sort of the UI bu of this mobile application and we made it uh responsive but as you can see it's funky it looks funky because we created a component here and we're utilizing a conditional Builder and so JP is wondering okay when do you use a conditional Builder and when do you just use um responsive break points right because you could also do this exact thing and actually better JP because I after I did this I was like you know what this is sort of annoying I I now have to like go to the conditional then I have to switch to mobile and it's just not as fluid as I would like and so after I built this I was like you know what it's sort of easier to as long as it's a component right as long as you have this in a component you're not managing this on a screen um so like you're not managing this on a page um it could be more beneficial to just in flutter flow right maybe not in code but in flutter flow just to have this instead be like a column or a stack or a row and then you have your desktop and you have your mobile and then whenever you do this it's going to adjust to your content um just depends on where where and how you want um to utilize that how much content you have as well so like managing content can be very difficult in this scenario we have a very easy way of managing so we have like one element up here or an element up here and then a list view so it's pretty simple um but utilizing components for these things is going to be much more beneficial um by that I mean um we don't have it here but we are creating a well even my uh even my no code UI dashboard is is basically all components because as you do things in responsive thing you're going to have duplicate backend calls you're going to have duplicate um queries you're going to have duplicate actions if you don't utilize components so throwing all those in components and then building your page your page content with those components whether it's responsive visibility or conditional Builder um is going to be more beneficial the ideal scenario as we mentioned last week JP is that at some point flutter flow implements something similar or akin to uh flexbox or something similar to like web flow that you can uh in in you know mobile view you're adjusting mobile view content in desktop view you're adjusting desktop view content you can also right you can sort of do that now but you're just showing hiding different things which is a little annoying because what I really want is I want one one page that has all my content and I want to display it differently here than on mobile right I want it to be I I want basically rows and columns to behave differently depending on the breakpoint so when it's a desktop I want this this is a column I want this to be a row then I want to stylize this card and I want to set a Max width for this So eventually maybe possibly you know that'll happen but for now we are we are living with um cool hey see are we did try to do our pin code last week it does work it does work it just worked but um so yeah best rules and practices it it really is up to you on how much chaos you want to deal with so responsive visibility would be my default um but when you're dealing with complex layouts sometimes it's just easier to utilize a conditional Builder so that you can adjust the content right it's not as uh it's not as UI friendly within flutter flow but it's more UI friendly in regards to code and also like when you're adjusting the content for that build you don't have to you don't have to worry about you know your break point at all so you can just adjust stuff here and then you can change your breakpoint and adjust stuff here so again it just doesn't behave as fluidly in flutter flow as the responsive stuff so in comparison I'll I'll duplicate this and do the alternate method and show you okay we're going to wrap this guy in a column we're just going to take this out and we're going to take this out and then we'll just apply our mobile and desktop so this is mobile view we're to th turn those off and on desktop view we want to turn these off and now we have this thing that responds very well is like this is how we want it to behave regardless so because this is nice we are still dealing with two content pieces so again you could probably you know create this list view as a another component right because this is a backend query we still do have two queries on this page so I would probably create this list view this this uh starting up here as a component as well so we just have one component on this page one backend call we're not duplicating it but you still get this you know fluid way which in test mode it's going to behave like this again regardless of if you're using conditional Builder or responsive visibility so it depends on how you want to manage it when you want to manage it Etc good question I hope that was a long-winded answer I know but yes and then Max Kazan yeah from kakistan the uh you did miss the beginning so the platform is launched I think we've shared it the the the link but you can also go to noode u.io and you can sign in you can you can uh it's app at noodi doio you can join now from the homepage so please feel free to do that is the is the training part maybe uh I'm asking about Boot Camp or like more Hands-On training because uh yes that will be later yes yeah the the the boot camp portion so yeah maybe I'll and you talked about this before Mark you're like what is the overall vision for no code UI so the overall vision is to do something akin to a boot camp where it's not just courses and not just impromptu uh learning but it is more Hands-On so I still need to wrap my head around what what that all is going to be uh but I do know it's going to be higher level course material weekly interactions live classes or something to or something like that Weekly uh Q&A or amas right ask me anything uh workr so workshops some mentorship um and then also just like individual training so though that boot camp will be limited to 20 to 30 people it's not going to be huge um and then I'm going to try to not just pay wallet to you know Americans so we'll try to tear in all all uh all countries and all income levels so with purchasing purchasing power parody um so yeah we'll try to try to improve that cool awesome good questions um that's great Eli so cool man welcome aboard yeah okay subscription management portal for web app for users okay this one's pretty good necessary tabs info for account Austin all right question best practices for building responsive account subscription management portal for web app for user subscription management necessary tabs and info for account okay I mean uh we can build a small a well we have 15 minutes we can definitely build this in 15 minutes um let's see best practices really it's to it's it's doing this exact thing that we were building but doing it in a um with a table so let's go ahead and do that we're going to just build a new page here and um we do have some responsive pages so let's just go ahead and utilize one of those look at did you guys all know this did you know there's responsive templates out there shoot this one's probably pretty good so let's go ahead and use that um we'll say um uh subscription management create page okay awesome it it it adapts to our uh theme which is really nice and let's just say we don't need this anymore we're going to focus on this table here and we're going to specifically focus on not making it a table here right you sort of want to view these guys as cards let's say this is our you know active subscriptions so active subscriptions all right and this is maybe subscription amount ah oh dude nice oh that is such a oh that's that's nice actually you can you can shift select an element to unselect it so 29 uh month okay so and then we have maybe like subscription ID here ID okay instead of all of this right what I would do is just like I talked about before we're going to create components we want a scalable system so when you have your design like this instead of managing you know maybe this whole view as a component right we don't necessarily need this whole view as a component what we would like is we're going to feed this um list from a backend query it's going to be active subscriptions so instead of all of this static information here we can create this container as a component so let's go ahead and do that we're going to say um subscription card okay now in this component we can then take this and we'll do exactly what we did for the second one earlier we will we will uh wrap this guy in a small column we'll say this one is our list View and what we're going to do is we're going to pass in um we're going to pass in a single amount of data right so like up in the component parameters you would you would pass in like your subscription data here okay and then what you're going to do is you're going to link it to all of this stuff and I'm going to duplicate this for now and we're going to say this one's our card view so mobile view and instead of list view maybe desktop view something like that sorry my spelling is uh ah better than mine yeah oh okay we'll just leave it so this one's desktop view this one's mobile view so we'll again just responsive visibility this oh not this desktop cool and then we'll adjust this mobile view for a second here here is we're viewing mobile and so on mobile we want this to behave a little differently we want to make sure that we don't have a height set here we probably want um yeah this this little guy to wrap around so this is a row right now let's go ahead and wrap that row in a small column okay and now instead of showing hiding elements right this is going to be ID so it's going to be like uh a random number let's adjust the size here and we can bring that above the column oh we're expanded here it's awesome so we'll bring that above here adjust that content and on that column We'll add a little bit of space here I'm going to add eight pixel space so that's nice um on this row it has a bunch of space so we'll remove that and that cool so this is going to be your ID you have your customer information here and you probably we could wrap this ID in a row and we'll bring this paid up here right and now we have this text that is able to span that oh we don't want that to hide okay we can space in between this and we could even probably bring this up so let's go ahead and adjust this down to like 16 we'll do this one 36 oh 32 nice we can do that and let's set some spacing on this row so eight pixels in between items and I'm going to bring the paid over there and I'm G to expand this text which is just going to push all that content over to the right perfect okay so right there now we have this card and then in desktop view or tablet view we have a list view see so maybe you want we could even adjust this to where our break points are probably really um large here so I think last time we did uh design system yeah 1024 okay so we can actually break this down to like 990 there and this one's like uh yeah 1400 is fine so cool and now this is going to adjust once we hit above 990 it's going to go to our list View and then it's going to be a card otherwise so we can go to that subscription management and we will remove all of these and now when we go to mobile oh you know what this one is different because in this template see this is just this is the fun stuff you are we're showcasing something totally different here so we can remove that and top stats we have card table we want to always show there you go cool we'll maybe hide that on mobile all right and then you can just let's say you get right um oh yeah anyways you would set this from a backend query here and you would get this view you get sort of a card view right rather than a list view so that's how I would that's how I would do it probably so and then in addition to that let's see biggest challenge making a reminder system okay I'm just starting to learn be something having trouble okay yeah there's some good questions coming in um sorry so hopefully Austin hopefully this answers your question this is s sort of how I would adjust it um make sure you utilize components here at this level right sort of goes back to that Atomic system so I think I tweeted something out earlier like how do you how do you build things you build things from atoms up not from Pages down so you know even these small things like this is a repeatable element so although this was this came with a template what I would actually do is make this a component you know and pass in data so maybe a custom icon as a parameter a title as a parameter and then a value as a parameter right and then I would have these four elements that would be one component instead of four so little things like that are going to help you build scalable to systems uh that function great so and it's quicker too in the long run much quicker yeah yeah yeah learning this in in figma right now for sure so and at first it's easier just to go through and just design everything or build everything without making a component but then when you have to do iterations on it and you start realizing oh I'm having to go in and edit all these little cards when if they were just a component you just do one and so maybe one iteration takes five minutes but if you have to do 10 of that 10 of those iterations and it's 50 you know and just it adds up over time oh and uh I wanted to address this Eli thanks for letting me know so currently uh I have a developer working on the Google signin um Joseph actually Joseph Carman thank you for alerting me to the fact of some security issues around Google sign in so um I have a developer working on fixing that right now um so if Google signup is not working it's it's temporary fix so it does work just maybe redirecting um in a in a weird way right now uh because of that issue that we're taking care of so making it a little more secure uh give it a couple hours and I'm sure it'll be fixed we also have on which is annoying I just found out that Apple signin doesn't work on the web for flutter flow which is a little frustrating because in order to launch on iOS you need to have Apple sign in so there will be this Nuance where if you log into the m app which will be launching next week with apple then you won't be able to access your especially if you do it privately you probably won't be able to access your account on the web which is a little annoying so I'm gonna come up with a fix for that all right just you guys know you guys can just sign in with Google Google works everywhere which is great but yeah thank you for letting me know that um let's see flutter flow no code hello I'm starting to learn something I'm having trouble understanding uh what is there a post being seen by all users and only the Creator seen it on the back end oh this is great this has to do with uh rules okay this has to do with rules and it just depends it depends on filters um I don't know your name but yes it depends on filters for the front end and rules for the front end so whatever post you're creating if you allow it to be readable by everybody um then it can be readable by everybody both in the frontend design design but also in backend stuff so um be aware of that and you can filter out if you want to create post to be private you can actually set um let's see like on this ride here if I want I wish I could zoom in I apologize on this rides this is sort of like post okay so if I wanted this to be private I could simply make a you know private ride toggle and I can make it a Boolean right so I have this private ride Boolean so when I'm creating my ride I'll be able to toggle on or off if I want to toggle it on to be private I can toggle it on and then on my backend query so on my home screen here we come over here on this list view right we have this list view you can then filter to only show we have a filter for categories we can filter this to only show Private ride equal to uh false right so you can filter that out so that all the private rides are only viewed right they're only viewed by other by people within that group only invite only maybe something like that so there's a lot of power you can do here on the front end with that um and mark this is a great question oh this a good question um had the same question yep yeah there's pros and cons to both but yes I would piece by piece I don't know if I would rebuild my entire app but piece by piece I would rebuild it so once you once you um build it out there's definitely some steps so like you know I want to build this card as a component now right I did this in the tutorial so when you go through this tutorial because we actually go through building this right app and laying this stuff out when you go through this tutorial you're actually going to build this card as a component well that's a lot easier to start with when you don't have any data hooked up if I if I was to create this hook it up now and then say hey I want a component boom I'm gonna pass I'm going to do this ride component now I have all these parameters which is nice I'm I'm not going to lie it's sort of unnecessary um because I have to manage all these parameters now right really what I want to do here is I just want to pass in uh a rides document to this and again this may not be best practice sorry Pua if I'm doing this wrong and you do want all these things but for me I'm all about Simplicity I want to um I want to do the least amount of work required um for each part so what I mean by that is um if I have eight parameters here when I pass in on this screen right when I pass in I have to set all eight of those things here okay if I want to add something I have to go to this component add it in the component and then add it here again okay now if I just pass in one element here which is the ride document which is what I'm going to pass into this because that's what I'm getting that's what I want to showcase if I ever wanted to access anything else on that ride document I would have the ability to I could just be like oh well now I'm also showing um location I want to show the map of the location here oh awesome we have access to that we don't have to create the element here and also pass it in right I could just create it here um if I made this responsive like we did on the other one right so it's uh mobile and desktop I could just copy and paste to the desktop version it' be very simple and extremely easy so little things like that it's it does take a lot more time reverse engineering stuff but it it is more beneficial so now when I want to use this ride card somewhere else it would be a component it wouldn't just be you know I wouldn't have to utilize this whole thing I could just utilize this this card you know maybe on a profile screen or on a on a group screen that has a that has rides associated with the group so that is what she said okay let's see Joseph is responding dark reason there's probably no Dev who's always done it right yeah that's very true um okay gotcha all right so this is good Joseph thanks for doing the research you should okay so you can put in a document you just shouldn't put in a doc ref okay and then and then make the call and the component not yeah okay that makes a lot of sense so the thing that I'm the reason behind that from my understanding would be because you would do two calls if you did that so I'm doing a backend call for this list view right of all rides and then if I if I just pass in the doc reference to this card on this card in the component I would have to query or showcase that document anyways so I would be doing a a read in this card and a read for the list so it would it would definitely mess up your performance so Joseph if that's if that's the reasoning then that's probably the answer from my limited knowledge of how backends work but uh yeah that's what I would say very cool I'm glad to hear awesome sweet um sorry guys that this was so impromptu um I hope it was help helpful Mark um I will I'll research that I know that will you can you can tweet at will hobik uh on Twitter and he would answer this for you he's he's a whiz of that stuff uh he would be able to answer you in two seconds I'll have to research it but I know there's a way um because I had asked him about that for the e-commerce app uh flow so very good man yeah sick and I guess I guess just to reiterate you know what started with the beginning of the whole you know today's the no Cod DUI the launch of it and uh just happy also to see all the feedback already um yes when you guys watch the videos and when you join maybe you can show it again where you can where you can uh actually leave some feedback because that's GNA be super totally helpful for us you know we'd love to hear from you guys and also learn from you guys as well and uh yeah so you can uh you can dive into courses here I'm going to go through like what these are the two courses that are free so sign up to both of these right you just go in here and you can enroll you'll see an enroll button here when you sign up um and then you can just take the courses you'll Mark complete which will take you you know back here and you can start the next lesson in the account page if you do find that there's problems with something you can submit new feedback just tell me what's going on going on if there's a specific you know course you can um select that course and then you can select even the lesson that's sort of affected and then I will get access to this you can tell me what's going on so you g even upload a screenshot Joseph has already done this thank you again um submitted a screenshot of like what's what you see maybe it's a gray screen maybe it's an edge case of you know maybe it's the screen you know the page isn't loading well or something so let me know then you can just the ticket um and that should all work so and you can also see um tickets that you've submitted so here when I when I review the tickets I'll be able to update them and send you a little note back so you can understand and I and I can adjust the uh status of it so you'll see this submitted and then you'll see it pending or in progress or complete so you are benefiting the platform and I did all of that with a flow from flutter flow come on I added to it right but it is pretty cool what you get out of the box so and cool to see that like what we're learning on on the no code UI platform was built in flutter flow like yes and you'll be able to download it on your iOS devices and Android devices soon yeah so which is really the power of it it's not just web it's it's all so yes cool yeah Joseph I sort of agree I added this after you submitted that ticket so I was like you know what I wish I could uh tell him thank you and and send him an update so I added that post post your submission awesome well thank you guys so much uh I hope that you enjoy the content please share feedback and share on your social platforms right if you've learned something um again I'm gonna I'm gonna we're g to make all these public on YouTube as well so you can always like them can subscribe you can do all that stuff um I think the platform provides them in a more consumable way um and also it gives you access to um limited content like on the getting started you get a full extra video um and we are we are looking forward to seeing you guys improve and become better design Engineers um that that produce higher quality applications for your clients or for your yourself um for startups that you work with there is so much potential for this um and we're just want to see more beautiful applications built on flutter flow um in accordance with best practices um so it's sometimes very difficult to just sort of uh wander around uh the platform there's so much opportunity it's like oh I can do it this way and maybe it's not you know the best way to do it I'm guilty of that 100% so I'm just I'm trying to disperse all of my knowledge of all the failures I've made on these live stream stream specifically um to everybody so that we can all build better so Mark you can follow me on uh design uh let's see let's see Twitter home I'll go to my profile and I'll share it here okay here's my handle you can follow and reach out there so thank you all so much uh hope that it's going well yeah thank you thank you again and we will see you guys next week next week will be the uh yeah I'll be taking a break after next week going on a little vacation so not really digital noad but I just will I'll be traveling uh yeah looking forward to it thank you all so much

Channel: Kaleo Design x NoCodeUI

Views: 354

Keywords:

Id: nRpeXHNUlj4

Length: 69min 40sec (4180 seconds)

Published: Fri May 31 2024