Building a Responsive UI with React Native | notJust Summer Startup #1

what's up no Jazz developers welcome back to a new live stream and today is a special day because we are kickstarting our summer startup challenge so during during this month the not just development Community will build and launch their application in one single month and we're gonna try to do that together with a community so this is day one and throughout this challenge I'm gonna document the process of me building an application and yeah before I get into them details about the application itself that I'm gonna build let me quickly introduce the startup Challenge and how you can also participate so as I said it's going to be 30 days starting from August 1st all the way till the August 31st we're gonna do that and I invite you to build your application idea I'm pretty sure that you have ideas of apps that you would like to build and maybe never found the right time to dedicate to it the same thing happened to me I always probably once a year I have urge to actually just stop and build an application listen to some music have fun along the way maybe learn something new and launch something real for for real users and this is very educational process this is a very good educational process and an experience that will teach you a lot so why not you join us and let's Build Together applications at the end we're gonna finish with a demo day on September 1st and we're gonna have a couple of projects that will present their projects at um on the demo day wrote all of this uh challenge I'm gonna document my journey here on YouTube for that I dedicated two live streams per week and we're gonna do that every Tuesday and Friday at our usual time at 3 pm GMT plus one so make sure to subscribe to my channel if you're interested to see the whole journey because I plan to build this application all the way from zero until it on the market and it's being used by the users maybe we will also Implement monetization strategy subscription try to do some testing around it so it's going to be a very interesting journey and I would appreciate it if you join it as well um okay so yeah there's a calling try and build your application where I know you don't have to do anything to to sign up to participate during this challenge all you have to do is start a project build features and by the way and try to have something a complete project an MVP of application that you want to build however yeah more information about the event you can find on our website or following the link in the description below however if you need a little bit more support if you need uh if you're not at that level where you can do everything yourself uh then we have something exciting for you we just launched our premium Community where you can get access to a network of our developers that are also building applications which can share each other share with each other knowledge resources information motivate each other and grow together during this challenge we're going to have weekly q a sessions with our Pro members and I'm gonna try to help you with any questions that you might have during the process of building your own application you can find more information at nodejs.dev Pro and only during this month we have some launch bonuses as well so you're gonna have the possibility to join the weekly calls you're gonna have a chance to present during the demo day and you have 50 discount uh forever as long as you stay in our community you're gonna have this discount so make sure to follow the URL in the description below join the community if you want to have more guidance building your project and if everything is clear let's get started and because today we have a long day [Applause] foreign is telling me that the stream is actually not on is that true let's see or is it on hmm hope it didn't happen again no everything is on yeah my YouTube Studio maybe is glitching so guys please let me know in the comments if you can hear me if everything is okay and we can get started it's very weird uh in the streaming software I see everything is perfectly fine maybe it created a new live stream yeah created in your live stream anyway but here we have it yes now I see your chat hello guys hello everyone who is joining the live how are you doing guys are you planning to join the challenge and let me know in the comments in the live chat what application you're gonna build so this uh by the way a quick disclaimer this is not going to be um the style of these videos and live streams will not be our usual weekly tutorials that we are doing for tutorials I prepare something for you I come prepared and I the goal is to help you learn something new in this series I'm gonna go ahead and figure everything myself so it's gonna be more realistic approach of building this application you're gonna see all the ups and downs if I'm gonna be stuck at some bugs you're gonna see that process as well and in all that this can also be helpful for you to understand how how maybe to debug or how to better go through the whole process as realistically as possible but yeah um nonetheless yes I also plan to learn new technologies during this process during building this application because that's what I preach but that's what I say a all the time that the best way to learn something new is to actually build a real project because building a real project you're gonna get into so many challenges that you might not be able to go through them while doing some tutorials and that the challenges are the ones that will teach us the best so I'm looking forward for that in a moment I'm gonna show you what exactly I'm gonna learn new so first of all the game plan for today what we're gonna do today I want to introduce the project to have a clear understanding about the goal what we're trying to achieve um I'm gonna set up a new project and we're gonna use something new there it's still going to be Rec native but some some sprinkles on top and we are gonna actually start working on our first features the tech stack of a project that I chose for this one is the following for the mobile applications we're going to use of course Expo for the this is something new we're gonna use tamagui for the as a UI library for The Styling and much more so this is the first time me using tamaguda it's been on my list to try it out for a very long time and I'm excited to to give it a try during this project let's see if it's going to be a good idea but I'm really excited about that another thing that I'm trying for the first time is Super Bass Super Bass is going to help us build the back end and um yeah again I haven't used it I heard a lot of good things about Super Bass and I decided for this project to use it and to give it a try in a real project to see how it Compares with other tools like AWS amplify that we used in the past so that that's going to be the new stuff that I'm going to learn and we're gonna do that by building the project now a little bit about let me first check the live chat hi guys how are you doing hello from Nigeria hello from Tunisia France okay Brazil Pakistan so let's first discuss a little bit about the project that I want to build so first of all um foreign on Tuesday when we launched this one I explained about I I told the story about the project that I built during the previous summer during another edition of Summer startup Challenge and previous summer I tried to build an application a educational application for developers and I invested a lot of time building it and after finishing the challenge like from the technical side everything was okay everything was ready but that application required a lot of content so the value of application was not in the application itself the value is rather in the content that you're gonna provide my idea was to build some kind of a Duolingo for programming where you can learn programming with real easy exercises on your mobile phone and as you can understand like to to this application to be valuable it should have a great exercises so I spent like probably one week trying to set up two levels that you'd spend like probably 10 minutes filling in and then I said like no it's it's too much time just to create all the content for that and I I don't have that amount of time for supporting the application and going forward so for this year um going forward I was sure that I want to build an application that you build it once and it doesn't require a lot of effort to maintain it so the application would be a utility application it should provide value through its utility um and also I don't want to get into any networks because applications that are marketplaces or social medias they depend on the network effect so it's really challenging to get it overground like it's not that challenging to build it but when to cover the critical mass of users in the application like a Marketplace or a social media for the application to be valuable like that it's quite challenging so an alternative would be a utility application that does not have a problem of network effect the application will basically provide the same value if only one user will use it or if one million users will use it um yeah so it will also not require any maintenance in terms of content or adding new content you build it once you build the features and hopefully they will be valuable enough for people to keep using the application in future um in our idea that I had in mind thinking about this application is it should be something that would be easy to attach to some habits um habit forming applications that you can basically yeah once when something happens in your life and you think oh I should do that something with an application you basically attach the usage of application to a person's habit and you have a a higher chance for the person to keep using your application in future so the habit that I was looking into is related to finances to budgeting to expense tracking and so on the problem is that I know that this Market of budgeting applications expense tracking it's quite competitive there are a lot of applications out there which are really great and it's going to be a bit hard to compete with them so I was thinking okay the next step is to compete with them you either have to be different or what you can do is to Niche down to a specific group of people and provide additional features targeted to that group of people so when there is a big player on the market that for example a budgeting application that is generic that applies to anyone and when there is on vower side a very specific budgeting application for your needs you're going to be much more likely to choose the one that is specific to your needs rather than a generic one so Vanessa is thinking okay but what what Niche how how should I differentiate it um I was looking I was doing some research on the markets also looking at the keywords and the niche that I really want to explore is web finances inside the couple finances inside the family so there are a lot of applications that provide budgeting and finances tracking for personal finances but what I intend to do is to Target couples that are managing the finances together that have common financial goals where can they can see the common dashboard because they are working together towards the same goals so I think there are a lot of people out there that would benefit from this application and it happens that I'm also part of the demographics of this application uh me and my fiancee uh Alex we have common financial goals we are tracking them uh we we talk we review of them quite often we even have like a board a whiteboard with our goals and we are tracking them there so that's the benefit of building something for yourself is because at least we're gonna have one customer and it's going to be us and yeah we're building something for that would help us because it will it will help me as a developer to understand what features I should do I can use it to to test it out and um yeah to to see how we can help our couples and families as well so that uh quickly is how I got to to idea uh then the next step is of course to to do some customer interviews to to try to understand what other problems were what are the biggest problems of people managing their financial as a family as a couple um I skipped over this part a little bit uh I only did some interviews with Alex uh but yeah we're gonna manage to do that by by building some features testing them out getting feedback from the users and then trying to organize and prioritize the the uh project board the roadmap based on the features that user request rather than on features that I think they will need so in order to accomplish this application my goal is to build a very very simple prototype it's an MVP minimum viable product and I'm going to try to focus on only one basically feature out of this application in order to increase the chances that I'm actually going to be able to finish it and deploy it to Market and after that after the application provides some value to the users I can already start getting users on the application and what's most importantly I can start already getting feedback of what to do how what to change what features to add and so on so where's my my primary goal have something usable have something that brings value on the market as soon as possible and look sorry let's see how how fast I can do that hopefully by the middle of uh August I'm going to be able to do that maybe we can do it even faster so yeah um let's let's let me let me walk you through a bit from through our project board and everything that we're gonna track so uh to prepare for for this I got went ahead and filled the business model canvas in order for me to have a clear understanding of exactly what I'm trying to build this is a this is a canvas it fits on one piece of paper and you can describe basically the whole business model of uh the the business that you're trying to do in this case the application so everything starts here in the Middle with a value proposition which basically means like how will we make our the life of our customers easier so the value proposition of our application is going to be personalized financial management and budgeting solution for couples and Families and the way it's going to make it the life easier is with Comprehensive view of Financial Health shared budget expense tracking saving goals debt management tools and other features that will help them uh the next important Square here is the customer segment and customer segment is important because you you need to know who you are targeting who are the people that will use replication and that will benefit from them because if someone asks you who are your customers and you see everyone um big news that's that's not gonna work that's trying to Target everyone will end up targeting no one so we need to be as clear as possible of who is going to be our customers where we can find them where we're where we can reach them so here are the profile of my customer segment like young families couples that are living together and managing their finances together and some communities maybe that they make they they are part of in terms of channels this is how we're gonna get our value proposition to our customer and the application is going to be on Google Play and App Store uh on the web we might also try to do something like a wait list or a landing page and through through social media and ads and we're gonna get to to the customers okay um I think I'm gonna stop here not to bore you because I just want to get into the coding part as fast as possible but this is also very important and this is an important step for that I want to to Showcase that you before jumping into the coding part I recommend you to have a uh to to sit down and do the homework do that do do this quick plan try to understand what problems you're trying to solve try to discover the customer segments who are they some demographics where you can find them online because this will help you reach them this will help you ask them questions get feedback and it's it's crucial because too often developers are building applications that in the end end up uh nobody needs nobody needs the application so that's a sad story that I want to try to to prevent going into and yeah let's let's continue so in terms of features uh yeah as I said we have a lot of them in a financial application there are basically a lot of smaller applications like share budgets expense tracking build reminders and so on but as I said for the MVP I really want to focus on only one feature and um from discussing with some people I realized that what uh you nice together couples in terms of financial goal financials is where common goals that they have financially so we're gonna focus on on this first feature I'm gonna try to provide a way for uh for our families to create common goals and to start saving towards those goals and to be able to track it with reminders and so on so as you can see the application is going to be quite simple it's going to have initially only one feature and we're gonna get started from there and see basically where the customer are pulling us towards what features do they want next so yeah that's our plan for the minimum variable product and here is our project board the project board is going to be helpful for us throughout the whole process to plan to see what features we want to do and before you jump into building the project try to look one to two free steps ahead you don't have to have a clear plan of everything that you're gonna do but having uh having understanding what's going to be your next three or four steps is going to help you move along and avoid being stuck like what do I do next and most importantly we will help you avoid spending time on features that should not be there sometimes we over optimize something or we start adding animations before our application is even functional so that's why um go ahead and create a couple of tasks for your project and I like to divide them into into three priorities initially so the P0 is that crucial tasks that will make the application unusable so without them you will not be able to use the application or you're not gonna get the the minimum value of that application the P1 very important but they can come as the next features after you have like a working prototype and then there are a lot of nice to halves and that's why I call them nice to have because they're not required they're not important they're nice features to have and I want you to try to avoid them initially as much as possible don't ignore them if you have ideas come back here add nice to have features but your first step is to build that mvp and to finish all the crucial Parts uh before jumping into the important and then nice to have later on the nice to have will become crucial but we're gonna get there so as I'm going through this project I'm gonna come back I'm gonna add tasks we're gonna come to the board view look at what's in progress and start working for it so that's that's our board it's our features tasks and yeah I think I think we can actually get started we're gonna initially get started with setting up a project so that's gonna be our number one goal and let's see what are you guys saying here so rash is asking how to build responsive design like fonts and other things that should look same in all different devices actually um as I said for this project I'm gonna use tamagui and that's going to be a solution that you might be interested in it's going to help you build the responsive applications what app do you use for wrist notes that's notion Mamma Mia okay so let's go ahead and let's start setting up a project so as I said where is the code here so I was looking I was researching for a UI Library uh because my goal is to build an application in 30 days so I'm gonna have to make sure to simplify my work as much as possible I'm gonna try to use pre-built components I'm gonna try to use some AI tools whenever that will save me some time um and I'm gonna do my best to be as optimal as possible and for that reason I was looking for some UI libraries what I'm gonna use in that can help me build this application faster and I remember that I met Nate from tamagui uh and he was telling me about tamagoya and I actually had it on my list for a very long time to give it a try so is not just a UI Library I think it's much more than that and I'm gonna find out about everything that it includes during this project but it also comes with pre-built components like buttons check boxes forms and a lot of uh a lot of pre-built components and also with styling uh system that helps with helps build responsive designs that would work on all platforms on mobile and also on web so I was looking for it and then I saw the this one with tamagoi takeout was launched quite recently and this line from idea to shift in less time than ever got me hooked and got me interested so what's this takeout is a starter project that contains some templates it contains some screens it contains icons fonts themes and a lot more and even like deploying and connection with Super Bass and I also plan to use Super Bass so it contained a lot of things that I believe will help me get started and get ahead quite fast so uh this is a paid product uh tamago is not sponsoring this video but if you're interested you can check it out and because this is not a tutorial uh I thought that it would be okay to to try to use it and see how it can accelerate my process of building this application so let me go ahead and I think I'm gonna have to sign in no let's see login continue with GitHub and view your subscription probably yes here I have a takeout stack so all I have to do is yeah there is this take out stack on GitHub with more documentation but I got access to take out give me just one second to find the url this is yeah this one I think yeah uh we add the documentation of a project and to get started we will have to run yarn create a magui with template takeout starter and that will initialize a brand new Project based on this uh takeout starter it's going to contain a lot of things pre-build um I'm gonna see how how it goes where do we go okay so let's go ahead and open a terminal let's zoom in so everyone can see I'm gonna CD into the projects and here let's go I don't even know the the name of application that I'm gonna use so who is the first one to give me a name for the application before we get started we're gonna use yarn krita magui template okay all right maybe we can use uh gbt um name suggest and name for a budget and financial application for couples and Families with features like budgeting expense tracking saving goal Summer Street what application are you building I'm starting to build a financial application that would allow families and couples to track their financials basically the goals the budgets and so on we budget is this available or should ignore let me let me check femify femify that's a good one so because it's coming from our subscribers let's check famify yes we are using that it was a very fast decision but we can also change that so let's hope we're gonna use it so thank you very much femi five that's how you spell it it's short and catchy project name should be all femify we budget I'm pretty sure we budget there is already an application but yeah let's let's not overthink things because overthinking prevents us to to move so progress over Perfection do you want to use git yes we want to use git and I need some air I'm cooking up inside my office uh Arjun what is your question adding up the Json to get ignore doesn't make sense how can I secure the security of this key which key okay now it's better set up Super Bass I really like that this uh template comes with Super Bass setup as well so I think we're gonna actually have like some back end up and running even from the first episode I was thinking that we would need like to focus on the UI first and after that back end but if it will allow us to yes run super bass status let's check the docker okay so yes let's add this to local and Link remote a Super Bass instance for you I can say no and try to do it later but you know what I'm gonna actually gonna go and do it now just because it helps us set it up uh right away so let's go ahead and probably sign in I don't think I have an account so let's create one hi or another schedule stream is showing waiting for you yes I'm I messed up that part I started a new live stream instead of connecting with that one so I'm gonna have to go and uh if anyone can write in that comment of that chat URL here that would be great maybe I can do it so let's let's should be this one messed up join here and I cannot pin this message come on oh here we go okay so let's go ahead and create a new project with Super Bass oh okay probably yeah the name ify uh I'm gonna figure out database password um all right region uh if we go USA Maybe let's go on the free plan and create a new project okay we have it here so link remote instance yes I want to link it uh you can generate an access token from OK enter your access token guys I'm gonna add the access token there so just understand where to do that probably I should still wait a bit it says initializing project yeah let's wait a second anyone has experience with Super Bass here come on okay I need to provide the project ID so the project ID should be probably this one from the URL okay now the database password and that's it and here is our project ready and initialized so create a new project perfect let's go ahead and open it in Visual Studio code and then have a look at it code it's famify so what do we have what can we do here first of all I'm gonna go ahead and do yarn iOS to run it on an iOS device this Pro step is going to take a little bit of time to build everything for the first time to pre-build the product and so on so let's run it now and then we can go a bit through the project structure so as we can see we can run it on the web using nextgios on iOS on Android to run the Super Bass script okay I'm gonna need to figure out all of this about Super Bass and if you've purchased and gained access to font and icon packages you can run yes I did that so probably I should go ahead and add them now let's try yarn tamagui add icon it should be a like a pack of icons pick an icon pack oh my God I need to choose material symbols Google materials material oh my God I don't know which ones carbon page one of 16. that's a lot of icons which one should I use hmm via code icons well I don't have a choice right now so I'm gonna stop this one and whenever we're gonna need some icons I'm gonna have to to look into it but for now it's okay I'm gonna wait for the application to build for iOS should I try to do for web as well so yarn web should build and run by a web application which is built using nextgs and while that is happening we can have a look oh here is our emulator perfect Rohit is asking I am planning to buy a Mac Air M2 is a gigabyte of ram enough for react native projects I believe it's more than enough I haven't used Mac with eight gigabytes but it should be more than enough and when Mark AR M2 is very fast and a lot of people are very happy with it for development so it's gonna be fine okay so from a high level perspective we start a project is um monorepo where we have this apps directory we have Expo for our mobile application uh the x-publication is using the is using rack router Expo router which I really love I'm happy that it's using as well there is the next folder which is the next JS application for the web Target of our application to be honest I'm not sure if I will Target it but if I'm gonna optimize the application for the web as well it depends on how how much effort it will take still my goal will be my target will be mobile so yeah there is also the story books and in the packages here we have for example our application and in the packages these are reusable components for example like the home screen it has components both for web and mobile so it's going to be a quite a new project structure for us so it's going to take a little bit of getting used to it at least for me so here is our starter application oh my God it looks so good and I think it it already has some widgets that is going to help me a lot so let's see what we have here so on the home screen it's a tab navigation uh we have some cards here horizontally scrollable some numbers there will be very useful for me to render some statistics uh it also has some posts I'm not sure if you can click on them probably not but yeah this is just a demo so it's a starter and oh by the way wait a second I'm gonna have to remove application and start it again run it again because you will see that this one actually has oh that was our next GS so I should have left it but here let's do opening on iOS try to do it again yarn iOS because this project also has authentication out of a box which is impressive okay uh let's let me look a bit more through the documentation because that's what I was looking for to rename a project you can search the workspace for the word my amp and replace it with your name we can also use ref native rename to rename direct native references so I'm gonna have to rename the application if I go ahead and search the whole repository for my app what will we have from expo here like the slog name Kim we'll see in a moment let's let's first receive application come on building foreign logged in that's a bit weird but I can go to the settings and I can log out and here is the login screen look at this login screen like it has already on boarding features where we can definitely reuse some of these screens to to onboard users in our application we are animated oh my God and here we can create an account I think I might already have this account sign up user already registered and I can go to sign in sign in boom we are inside our application well you know what that means that means that when it comes to the Authentication where is it Authentication users can create account yes we already have it it's done users can sign in done we saw that we can sign out done I think we can also reset passwords think everything is completed in both indication and to continue seeing the start of the project here as I said there are some uh we can go to our profile page there is no name we can edit profile not sure why it's loading we can investigate that if it's supposed to work or not there is a settings page with already settings like logout we can change the theme we can make it dark and everything works automatically love that what else is in this template in the general some account information we can change password and I believe this one is working we can change email privacy policy template page terms of service this is required for iOS about Twitter and yeah that's most of the things wow crazy and here there is also a example of a form that we can so nice okay did you change the stream config I think the video quality is different I messed up the stream I connected it to something else so maybe maybe stream health not sure what they can do now sorry for that guys is it new way to create cross-platform apps with templates um I am using a template just to speed up the starting the project and getting ahead of with some pre-built features as we can see here but tamagu is a great library for building cross-platform applications okay so yeah actually before we yeah before we jump into building features we need to a bit understand how everything works so we also have a website application which I can open at localhost and it should be here localhost and if I'm gonna check authentication the Super Bass I don't have here users because I'm running super based locally so when I'm developing locally oh you saw that was the this is our application on the web so it's it's reusing a lot of components from between web and mobile but as you can see like it's um the layout is a bit different and it has basically everything that we have we saw on mobile like the name change password and so on so that would be really nice to allow people to manage their finances both on the web and on mobile it might take a little bit more time to to make everything compatible with everything but we'll see create this is a form nice from the settings you can go to the theme you can do light dark or system wow okay so we have we have our application we have Expo let's go ahead and look at the screens so in Expo we have amp here we have what we have a bottom tabs with index which is the home screen and as we can see the home screen is simply importing from a package called up features home screen so this is importing all the way from a shared package up features home and features home and then screen this one so this is our screen it has some components like the achievements section overview section post section and on the web it also has some events on the web we saw something more so for achievements if I update something here will it take effect right away yes it takes effect right away which I'm glad because I thought it would need some step like to preview to build and so on because as you can see this achievement section is completely in a different package here inside our up screen and it's being used both in our X publication and inside the next application the next Pages for example we have index we have a home we have a home screen okay interesting interesting uh should I try to rename the application now because at the moment it's called my app hmm should I or shouldn't I so if you want to rename well before renaming I'm gonna have to check to do git status why did they change there okay I can do git stash easily okay now to rename should I try to manually or should I use this one because I'm thinking is it only the the X publication that needs renaming or do we need it in more places so my application my application in readme I can easily say femi Phi wait a second I'm not even sure about that this is going to be the final name so why should I waste time right now renaming it I can always do that later so let's focus on building features so authentication is done before we move on from the authentication I want to check where we can see basically our users because as we saw if I look at the Super Bass uh the users are not here because locally our project is connected with a local super based instance that was that is running using docker so how would I look into that maybe we can do Super Bass local development and look at some documentation okay okay okay login super baseli am I logged in Super Bass login so I don't even have super bass CLI getting started Let's uh maybe first install Super Bass I'm gonna have it here on the side and Super Bass Maybe Super Bass login nothing but I installed it oh it was safe Dev oh but maybe maybe wait a second maybe I don't need to install it globally because we have this Super Bass folder here with packages which definitely has super bass and yeah so I'm gonna open here a new terminal let's go to see this Super Bass uh clear and here maybe the Super Bass maybe npx Super Bass status stop Services super based local development setup is running API URL we have graphql database URL Studio URL okay I think that's what we're looking for this is our local Super Bass and we can go to the default project and what authentication and here we have the user that was authenticated perfect perfect that's our super base running locally as you can see and I think when we will deploy it will automatically connect with the one running in the cloud on the superbase itself but at least I know where to see users where maybe I'm gonna have to design the tables and so on okay okay guys give me one minute I'm gonna be back and we continue building and we're gonna start actually with our first feature foreign immigrations wondering how our immigration is created readme what about storybook uh what's that I mean uh I know it's I don't have experience with storybook so let's see what's chromatic chromatic is Storybook deployment okay storybook I know that it's for creating Design Systems so this one is opening an expo go okay there are code generation scripts for component to generate a component to generate a screen oh that's good they didn't know about with that so if we look in the root package here there should be a script for for how is it called gen [Music] yeah Jan we are in generate turbo yarn turbo what's Turbo the package manager of some sort I don't know so folder layout okay we looked at that a bit we have applications we're Expo native the next web web storybook native storybook packages shared packages across applications for the UI replication for features provider then with super based files migrations types plus Scripts Expo router that's good open the authentication is handled by Super Bass off email and password is included in the starter but you can get okay open authentication to work too maybe uh that's going to be another feature that we can add to our nice to have features and this is going to be sign in with Google and sign in with apple because when you have sign in with a third party provider like Google or Apple in that case like Google you also have to have the apple as well in order to launch it to App Store so I'm gonna add them here As Nice to haves okay okay environment follow okay thank you so what's up with packages UI what's this one source we have we have themes oh that's a lot fonts components onboarding this is a bit scary here on the right we see the storyboard so basically all the features for example UI achievement card I think it's coming from the UI components achievement card uh and there is the component itself achievement card TSX and here is the actual achievement card with icon title and so on okay uh so it's using a lot the um storybook hopefully that's not gonna slow me down for this we'll see all right so adding new dependencies okay okay so let's get started and by implementing some features maybe we will it will be easier for us to learn it I'm pretty sure about that so if we look at the board for the crucial part setup super based project bit this one is actually also complete we have set up that project so that's complete I think I can filter out based on status only when not started and maybe in progress set a project oh my God I'm a bit lost so this one done yeah the goals the saving goals is the first feature that I wanted to cover so the saving goals will allow users to basically create a new saving goal and start adding money to that start tracking it then the users will be able to view the list of goals user can view the details of a goal users can record savings for a specific goal okay so the first one probably is user can create a saving goal should we start with creating it or maybe displaying it interesting and our question is do we right away where is my code do we right away implemented it with Super Bass or do we work with dummy data well first of all I think we will need a new screen and let's try this command for generating a new screen tamagui generate where is it Jan screen let's try and see what's going on there couldn't find the script yeah because I'm in Super Bass here so CD here train foreign for this screen uh that's gonna be um how is this feature called like savings yeah probably savings let's start with Slash savings and this will just display a list of savings okay what feature does this screen belong to this could be existing or new exam example of feed chat it's going to be savings what's the name of this screen uh uh what's the name of this screen create list I think this one should be index changes made there was a packages packages up features and new folder savings created with index screen okay um yeah to keep it consistent I'm gonna call it just screen and here as well export const screen update Imports yes what else was created in the X publication apps Expo application we have savings index I think I wanted I need to update the import first of all and the screen simply so in the saving here not screen but savings screen anyway back here oh no but I think I want to add the savings as part of our tabs so if I'm gonna move them manually here move they should appear in the bottom stack yes that's good savings and in the layout here I will have to add a I will have to add a new top screen as well not last one maybe here or no the second one after home yep call savings title savings and top bar icon come on no right route name savings that's what the name here or this one foreign savings will it need a layout maybe layout lay how do you call it say layout here it's a stack with index and we don't have this one yet index okay here it is and for the icon of this tab where it's coming from Lucid icons how do I search um piggy bank yes I don't know how is it called piggy bank okay here it is here is our savings and I don't know we can try to see the same on the web how it's working not sure if that's required it's gonna take us a bit of time to always check it but at least let's let's have a look so I want uh to where was it added it was added to next apps next Pages savings so I can go to slash savings foreign let's check the savings index yeah the name should be updated here and yeah the page is rendering home layout I think that's what it also needs the page layout so home layout import it from here savings yeah it renders and I think we need to put it somewhere in the top navigation here so let's look how that navigation is working mobile nav bar um so there is that settings and home set things not here home layout nav tubs okay nav tubs here now of tabs we have okay and after home I can do say things and here savings and we have here savings and if I press savings it goes to the savings okay perfect so at least the screens are set up both on mobile and on the web I don't care that the navigation is broken right now like symmetrically because we will add more screens later and I think I'm uh so let's go ahead and do git uh the git commit odd savings screen okay uh you know what I'm gonna do let's uh let's maybe add some music yeah lower the desk and enjoy it take it taking it a bit easier so you're coming down with me let's go this should be good okay because I feel it's gonna it's gonna be a very long stream we need to manage to to build a lot we have a lot of goals okay my next step is to understand with a database do I right away connect it with a database where do I play around with it so still there are some questions about the Super Bass thing so to go for the setup okay here are some guys local development I think I did that uh Edward thank you very much thank you if you have questions guys feel free to ask them because I can stop we can have a conversation this template assumes you have a public storage bucket with a name avatars make sure to create it if it doesn't exist I don't know where because I think it also allows you to change the Avatar if you do edit profile and if you select this one you have created a public bucket with name avatars in your Super Bass dashboard okay so let's go ahead in uh our local dashboard that is going is running locally should they manually create the storage I'm wondering if the Super Bass things are happening with a dashboard in the UI or if I should do them from here from web I don't know CLI start to slint deploy I don't know we can't go to see this super base and try to do yarn status that's gonna call Super Bass status okay perfect let's go ahead and try to add the bucket called avataris which should be public that's what it was saying here in the readme avatars yes avataris additional configuration no let's go save now if I'm gonna try again to upload the picture will it work update profile yes it worked and now if I check here there should be this Avatar yes perfect so easy and out of the box okay good no name why it's not name okay and if I look at the table editor we have profiles with ID Avatar name and about and this one was probably created using this migration out of a box and here is adding Avatar's storage when was this one created I don't know let's have a look at Super Bass migrations because migrations is a way of updating the structure of your database so migrating and upgrading projects no I want or maybe simply creating tables here will create the migrations in our project what do you think guys but even before that you know what we have to do is to try to see the structure of our data the relationships and so on so let's go ahead and uh what website I was using for for database design previous time give me just one second to look for that uh true [Music] is it this one you know what we're gonna look at the previous live stream that we did I need to know what database designing tool I used there because it was quite easy to use come on odds what did we say for some music oh here it is yes it's loosened up no I was looking for the steps then no stepson is uh is for creating the graphql API I was looking for this one so let's try a new one okay this one so first of all we know that we have uh profiles there and profiles if we look at the database here the profile table editor definition it has the ID the Avatar URL name about and about so it has ID which is our primary key it has name it has it has about and it has it called the image Avatar URL not like that so actually I meant to add some music I think there was some trim beads which are copyright free I'm not sure if you can hear it [Music] why you're not using Rec native select instead of Expo uh why what what is the benefit of using recognitive CLI over Expo let me know it's much easier to get started with Expo and it provides a lot of added benefits anyway this is our existing table that's the only table actually that we have and what we want to add right now is a goal a financial goal right so we're gonna have a table goal with probably ID which is going to be primary key um the goal will have probably a name like what you are look what you are saving for let's also yeah it will have actual amount that you want to save maybe we can call it saving goal savings goal it will have a name it will have amount that would be a number of float a big integer yeah let's go with uh number uh what else would the goal have maybe we will want to have a due date like when we want to achieve this goal and this way we will be able to calculate for the users how long it will take them uh so Target date is going to be a date I also want to to add maybe not now maybe later than to add an icon for the goal I don't know why I like how notion is using icons like four or four for pages and so on and it makes sense like it makes it fun icon or emoji maybe I can or let's do Emoji to be more specific now the saving goal uh we can think about our things our fields that it will need for now it's okay but more importantly why I want to do the diagram is to understand the relationships between between things like the saving goal and a profile because as I said like yeah now I can simply connect the saving gold to a profile uh like this no bubble way around the profile will have saving goals but this will prevent us it will make it a bit harder for us to to adjust the schema when we add uh common like families to to be able to track because two users will be the two users that will use the application will be of type profile so basically we need a way to connect two users together and then the saving goal will be per basically household I don't know how I don't know how to name the grouping of two people like a family maybe yeah that that actually makes sense so let's create a new one here for family the family can also have a name it doesn't have a mount so delete row it doesn't have Target date I also probably will leave emoji for the family and most importantly it will it will contain two users I think that the way we're gonna connect it is I will connect profiles to the family there are actually two ways to do it it's either we add on a profile the field family ID family ID which is a foreign key where we add here two Fields partner one and partner two uh uh yeah I think that this way will be better because it will allow us maybe even to have bigger groups rather than two so this one profile is it this way one profile has no no it's rubber way around so now one fem one family has multiple profiles and one profile Belongs to Only One family yeah that makes a little bit more sense and when the saving goal will be attached to a family [Music] family idea or should I call it group to maybe yeah let's call it group to be more generic because maybe later it's not going to be only families I don't know because it's still a lot of things are unknown so no no okay so let's try let's try with first adding this group to our Super Bass maybe we're gonna just go here to localhost create a new table the name is going to be let's say groups because I see the name profiles and I will keep it consistent calling them groups so let's actually call them here as well singular and with lowercase and here profiles and here saving or maybe simply goals goals yeah what other goals we might have with savings goals I hope okay so groups description family or a group of people managing their finances you need to write an access policy before you can query data from this table without without the policy querying this table will result in an empty array uh uh you can create policies after you create this table okay enable real-time uh probably no columns timestamp ID perfect foreign column here so for the group what do we have name the name is going to be a bar chart variable lamp character string and the default value let's give it the default value my household I don't know what else Emoji for groups uh well delete it now let's start simple okay let's try to save it we have groups we have profiles and we did these uh the new migration here no it didn't how does it work foreign okay we're gonna have to learn a little bit about Super Bass oh Super Bass here like great immigration create an immigration file locally super bass migration director will be created if it does not already exist all schema migration files must be created in this directly following the pattern time step okay outputs from the uh like maybe pipe to migration new name oh I can do database div and create a migration based on the things that I do here I guess because if I do list migration history in both local and remote database let's try at least to see something migration list npx Super Bass me creation list so we have two of them but this one is local it's not remote okay repair is very mode migration history table requires your local project to be linked to remote databases flow your local and remote migration history goes out of sync you can repair it okay for example your migration history table may look like this after running remote can meet to reset your migration history to a clean State okay thank you apply pending migrations to local database tools to inspect your reciprocated database this one is a little bit confusing so create this Super Bass create table migration maybe we should look at the readme here more here are some guides managing environments after setting it up you can use scripts to manage the common task related to Super Bass crypts Crypts where is the script migration diff okay [Music] script starting with underscore are not meant to be used directly okay you can also run this scripts from the root by adding super after yarn yarn Super Start yarn Super G Super G generate types from your local Docker Super Bass instant generate remote types from your remote instance new Migration by diffing against the database yeah that's what I'm looking for yarn migration div and migration name foreign let's try to see what this will do your migration diff saves schema div to a new migration file for example uh groups or let's say create groups connecting to local database creating Shadow applying migration different schemas and we have a new migration created create groups which took the changes that we did visually and applied them here perfect I think that's exactly what I needed okay and okay okay okay now what else what else uh let's continue changing our schema to match this one for example I will add on profiles the family ID is so where is it so for example profiles here edit payable let's add a column group ID not family ID and this is going to be a foreign key two words groups and we're gonna Target ID which action is most appropriate if reference row is removed so if a group is removed the profile should not be removed yeah okay so this one is nullable okay group ID save okay now profiles will be able to access groups we're gonna have to think about how to automatically create this group so here in um foreign create a new group or that's actually under the family account a user can create a new house called the user can invite their Partners they can join yeah yeah okay we're gonna do that later so groups profiles and lastly we need to create a new table uh let's create a table for our for our goals that's what we're trying to do now goals savings saving goals uh okay what else so let's add a column what we're gonna have we're gonna have a name name of a goal [Music] um amount Target date amount Target date what else emoji and group ID group ID so now about the types so the name can be a varchar uh is nullable kind of a name of the gold be nullable Maybe the amount amount is going to be what should be an integer or should be afloat will it make sense to help flow like floating number goals like I don't know saving 12 50 dollars or should we go with an integer let's go with in four Target date oh but the amount this one cannot be nullable like we when we create a goal at least we need the amount Target date this one should be a date calendar date year month day I think that's enough for us um it can be nullable Emoji how are they emoji is it a a small string let's ask a hrgbt uh what data structure should I use to represent an emoji and post rescql text and bar chart that are capable of storing which is between okay okay probably should be a varchar and group ID this one is a foreign key towards groups and whenever a group is deleted do we want to also delete the goals probably yes so if a goal is delete Cascade delete the goal as well okay let's save it save and we have goals as well groups profiles okay now now we need to create a new migration create goals will you save a series on your YouTube channel yes we're gonna save them on the YouTube so you may need to manually rearrange do I need to do reset LBX Super Bass reset what that will do resetting database initializing schema seeding okay and I think besides these we also have to go ahead and generate some types where is it generate types be aware and generate types from your local Docker Super Bass instance yarn generate War yarn G okay let's try that yarn G and if I look into the changes of our thing we have types somewhere in the Super Bass yeah okay I think our super based stuff is ready we just need to to add the screen for example here we're gonna list all uh the goals then we're gonna need a form to create goals so now I'm gonna create a manually I'm going to create a profile uh not a profile a group insert row uh I'm gonna leave everything by default my household in the profiles for my account oh why it doesn't have it because I reset it and I need to sign back in do I need to create an account probably okay so now it has and for the group I'm gonna reference to that one now let's try to add a goal or a couple of them third row for example amount 150 for what for dinner it's too much but if let's try it Target date let's try it I don't know 0 1 0 9 20 23. for the Emoji let's choose a food group ID let's select the first one and let's save and let's try a new one maybe the amount will be bigger I don't know vacation Target maybe I don't know 31 12 2023 2023 and for the Emoji let's do come on I can take it from here easier so we have some data here let's have a look how we would query it inside our index here so that would be our first of all get status let's go ahead in apps I want to change the title here from index to savings so I'm gonna go to Expo application tabs savings and layout and here we have index and the options I'm gonna change the title it should work why not why still index uh if I do Heather shown false will it hide it yeah but why the title is not changed why the title bit is very weird that's how you change the title of a stack screen oh because it overwrites it here yes so I don't need to add options okay perfect so there is the savings screen inside up features and so on so let's go ahead in the packages up features savings screen here is where we need to query goals query goals uh Super Bass use super bass app utils use Super Bass up there is utils Super Bass and then use Super Bass my Super Bass types so I'm just gonna look at how it's done in other places and simply try to replicate and see yeah basically mess around with it until I understand how it works so for example in the application features in the authentication I see that it got access to the Super Bass this way so let's try the same in our screen uh will it work without import s use super bass yes it works without import as well use super bass and after that what can we do with Super Bass sign in foreign but in the sign up I think in the sign up Super Bass it should create maybe not in in profile edit profile screen this one should definitely uh call the super super bass API from profiles update mutation use mutation oh it's using react query that's another thing but I will have to understand how it works use mutation let's drive some kind of I don't need a motivation actually I need um use Query from tan stack use Query and let's have a look at react query Docs use Query queries to use user up utils oh my God so many things up utils use user use Query profile query function well I'm gonna look at this one because it's something similar in our screen so we have data which is going to be our goals is loading goals refetch use Query we're going to query goals query function that one from profile select Super Bass from goals select everything I need a list of goals so from goals I want to select everything where group ID right I need to check all of them based on group ID equal wave I'm gonna have probably here constant group ID equal one and I don't want uh dot single because that's one record I want Dot array I don't know let's try it like this and if I go to the savings uh what I want here maybe console log data it's empty array before I jump to conclusions uh I want to go back here and think about I remember when creating a new table there was like these policies you need to write an access policy before you can query data from this table without a policy acquiring this table will result in empty array of results so view policies no policies created what about this one view policies public profiles are available by everyone users can insert their own profile and users can update their own profile okay I understand now let's go to our goals and we're gonna try to view policies let's create new policies get started quickly foreign maybe a full customization oh that's interesting I will go ahead and enable read access to everyone and then I probably should come back to to check and update it or create policy name on public goals for select using true for insert to authenticated with check through let's try to Simply start with enabling access to everyone and here I'm gonna add review policy for tables goals and maybe groups okay and now if I'm gonna refresh will I receive something back if I go here yes we see it and it shows exactly what I wanted like um based on what we filter because if I choose group ID too yes it's empty okay so do get group ID Auto so assign uh newly created goal based on actual group ID so no rules edge cases for user being deleted error code I don't think I will need this one return data so the screen is responsible for querying things like in a profile and then it should feature savings do I also create here like yeah knob top where they create components I think the components yeah in this screen what I can do is probably render a flat list of items achievement card greetings okay foreign this scroll view how to how to properly render flashed flash lists like list of data with tamagui uh list item okay crawl view Rec native scroll view with tamagoi props is there any specific for tamagoye Flash list flat flat list thank you foreign looking nice did you design that or is it coming from no this is I'm using a starter template so that's why like the beginning is a little bit harder to just to to understand everything how it works but I hope once I get started it's going to be easier for for me too to go about it so I don't know um yeah basically have this data if I console log goals what do I see okay see an array of goals with them I can probably render a scroll View my UI from my UI where is this my UI coming from from here from UI Source components oh my God and it has a scroll View okay I can go from goals I will simply map and for every goal I'm going to render I don't know a text and the goal dot name okay dinner and vacation I already see them okay okay okay now it means that I will have to create a custom component for it so that probably should go into the UI Source components and this is the storybook side maybe I can look at I think I can reuse uh one of these components right for the goals yeah let's try let's try uh uh for example I'm gonna look in the home home screen to see how in the achievements this one is being rendered achievement card let's take it to the savings and let's render it here I'm gonna have to import it from my UI and if I go here the icon dollar sign the icon [Music] um I don't know nothing and the action nothing use Link where is use Link coming from solito property icon is missing maybe it actually needs this icon rendered more hooks why is that happening If instead of that I will simply add it here gold doesn't exist oh my God okay here it works haven't seen Lucas in a while Lucas is working hard on on his startup um why then it's not working this way this is coming from use Link to use Link is it from this one can I maybe not have an action yes yes something is is is working uh for example what would be the the whiff greater than medium let's do 100 percent here with 100 percent and this one I don't need it maybe greater than large to be we'll see if this is four or four here for the title it's going to be name uh goal dot name but it can be null foreign I think I will have to actually make it's going to be easier if I simply make the goal where is it hmm edit table so for the name to be non-nullable so if that happens what I have to do is I simply have to migration diff update name update call name use Link is a hook you cannot render it uh I'm not sure to be honest if that's a hook yarn G I think to generate the types now it works yes and the progress is going to be a full it's going to be Gold Dot amount and the current I don't know we didn't think about that labels now I think is the code available I don't think this code is going to be available I'm building this application to deploy it on market and also it's it's using a paid starter template it's using tamagui takeout so that one cannot share the code actually so it wants some spacing between them it should be something with a stack right text space I don't think it's gonna be here if I add the Y stack as part of a scroll View now yes it has some spacing uh I'm wondering why there is some space at the top itself uh if I do here scroll View content container style background color red it's there why it's not all the way till the top because on apps Expo application tabs savings index it's inside the safe area view what I don't need inside the safe area view because it's inside the stack screen yes foreign thank you uh so you can remove this one and on the home screen we saw also how to add some some themes so for example um here I saw that the achievement cards they are robbed in a theme that can add some styling to achievement card so if I go here okay now they are green perfect scroll View can I add it also like for example space I don't think I can margin 10. I don't think I can and maybe that should be actually the the index here saving screen let's do a simple view with how is the spacing managed oh okay foreign stack so that's what we need in the savings as well not here but in the saving screen you need a scroll View and Vanna White stack or I already have this y stack so I need um padding top I need PT 10. okay okay now it's better I'm not sure what's going to happen if there will be a lot of them but that's that's good foreign you know what I'm thinking to do maybe it's not the most important part no actually it's not the most important part I'm Gonna Keep the achievement card and I'll just add here um for the goals create a separate UI component for web savings goal based on the achievement card I can focus on it a bit later now I think we have something on the screen and that's the most important part I'm gonna leave it like this um weather is loading um let's check how how is loading is handled in other parts of application for example where in the nowhere what is the tool you use for tracking tasks that's notion spinner that's what I was looking for render a loading indicator use a spinner from tamagui let's try it this way so if I'm Gonna Leave it is loading simply if is loading let's return a spinner I didn't see it so I can simply add it here return spinner okay maybe I can put it into a y stack as well with some spacing padding top Maybe and if I don't save a color what's going to be the color okay I think I like that so I'm gonna copy this one to here and yes we have a loading indicator probably we do not see it because it's bad it's running locally and it's quite fast but yeah it's fair and refetch is going to be pulled to refetch that's coming I would be able to do that with a flat list I'm not sure how to do it with in the context of cross-platform in web as well um let's try to find some list list tab list item maybe there is something what are you building today uh today I'm I started a project which is going to be a project that I'm gonna build live document the whole process of building it all the way from the beginning till I have it on the market so this is a real project that I'm trying to build for real users um and I'm gonna document everything here the challenge is that I'm using new stuff uh for example uh tamaguyan Super Bass is something that I'm using for the first time and it's a learning experience for me as well so what I wanted to check right now is so yeah here for the goals users can view a list of goals this is in progress like I'm working on it setting up a project I think is also done we are finishing with uh users can view a list of goals and yeah Stacks okay let's look again support all the same properties react native full example foreign watching this has experience with tamagui what would be the right way to use a flatless in tamagui should I just simply use a flat list from react native let's try let's try we'll see up here so instead of mapping like these I can go ahead and use a flat list where data is going to be our goals and render item we're gonna receive an item and we are going to render this one I don't need the key anymore and if I go here property goal doesn't exist it's item yes I can rename it to go now it works but the why stack is not gonna work because yeah Gap it's not the same as this one actually so I don't need a scroll view anymore if that's a flat list the Y stack doesn't need the spacing it can have only padding maybe padding why yeah so here it works okay whatever I'm gonna have an array of a lot of goals I'm gonna just duplicate them is everything going to be okay here yeah yeah foreign list what I can do here is I can add a re refreshing equal loading is loading and on refresh I can call it a fetch so now if I go here and if I go and add a new goal if it's a goal yeah amount one two three games I don't know and if I click for the group ID one if I click save and go back to our application and simply drag and drop we are going to save a new one okay perfect all of them are zero now why don't I use Flash list I don't know maybe later I can add it but I can I I don't have any performance issues at the moment so I don't want to optimize something that is not broken yet um anyway here on the savings I would like to be able to add a new one so how is that gonna happen um we're gonna need a new screen so maybe for this one I can do git odd Maybe git add and git commit minus m um list saving savings goals now let's go ahead and try to create a saving goal so we're gonna need a new screen so let's try that using yarn gen screen what's the path the puff is going to be um can I do maybe tabs slash savings slash savings uh create or new or create let's do create what feature the feature is savings and the name of a screen is create so we have a new pack in the package okay first of all in Expo up tabs savings there is create index why is it create index if it can be simply call the file called create and then in the same folder like this okay this one is create goal and in the packages up feature packages up features there is the savings and there is create screen gray screen yes perfect I think that's what I wanted and when I go here I want to probably um the plus button in the heading that will navigate there uh so inside my Expo application tabs savings index I want here in that top header to have a they have a header right where is it here header right have an icon and I can uh how is it called lucid icons oh there is a plus that I need so let's simply render a plus sign and let's wrap it in a link where is the link coming from link from solito where did they find it uh so here is the link and when we press on this plus button we want to redirect to uh savings slash create right if I go to savings if I create here create goal and I can go back perfect um maybe yeah I'm not gonna stop to test it on web it's going to be too much it's gonna slow us down too much I want to make sure that we can do that here and yeah so yeah we have it here properly now I think we just have to go in our application features savings create screen and look at some forms for example the way we are editing this uh profile or maybe here in the create schema form foreign [Music] so if I go to the savings and create this one okay dummy page showing a form first of all in the export application settings uh not settings tabs savings I need to remove a safe area view again yeah because we have a header so we don't need a safe area View anyway here uh we need to provide a schema and that's going to be a Zod schema and based on that schema the Fields will be generated probably so what do we need here for the schema well a goal when we create a goal it will have I think I have it here so it will have first of all a name right so it will have a name form Fields text minimum 10 describe name your name what are you saving for description I'm not gonna have a description well based on this describe it automatically the render is the labels and what's after after it's the is the placeholder we don't need a description um what else we will need it we will need a mount so amount is going to be form Fields Dot probably number minimum minimum one and let's describe it as uh amount and a Target date but that one is going to be a date so that's one is going to be harder Target date form Fields Dot we don't have something else so I'm gonna comment out and let's say add emoji and group ID they should be automatically taken somehow so basically name and amount I'm gonna delete everything else default values for the name nothing amount can be zero but zero is not good number must be greater than or equal to 1. hmm types uh code the button will be create goal at the bottom Diamond Page showing a forum um let's call it create a new savings goal uh [Music] so here if I do create goal okay okay render after film inverse submit button and let's submit where is it coming from oh here on submit console log what we want to do is to save information inside super based table so can should we do a mutation right away here let's look at some examples for example in profile edit profile profile schema edit profile form uh there is a mutation yeah it does the mutation right away so that's what we're gonna do we're gonna get the mutation from react query um profile schema okay so let's do const goal we need to extract the gold schema call schema that we defined here with that object let's extract it and reuse reuse it like this now we need to import Super Bass from somewhere Super Bass it's using the use super bass okay and we use Super Bass from a hook up utils yeah okay now it should be gold schema on success let's simply do console log success and here Super Bass from I don't want profiles I want goals uh uh instead of update I want to dot create I think were insert and the name data dot name what else do we have there amount data dot amount there is also other things where besides this for example there is also the field Emoji I don't know I can initialize it with with him in emoji like goal what's what's a goal uh I don't know star emoji it also has a group ID so group ID is going to be foreign then we're gonna think how to add it properly and it's gonna have Target date which is a date let's do I don't know 12 12 20 23. some rotation function notation what is it going to happen next dot values so here on submit we're gonna take mutation dot mutate let's try go ahead test amount 120 free or even more create goal let's look in the console log success if I look in the database refresh I don't see goals foreign so ABC create goal it gives me success mutation goals insert Super Bass docs let's look at the Super Bass Docs the structure of explorator looks so much like next just 13 yes uh the exploratory is a file based navigation system so it it looks quite similar to how navigation system works in next.js so anyway database I want to to query uh uh API foreign let's look at the use super bass use super bass client from of helpers where is the documentation of how to access like managing maybe it also has a own error error and let's do console but it gives all success console log error success let's try to open the JavaScript inspector and look at the network let's try to create another goal well it's going good okay okay okay so here uh ABC two three one create goal okay you see it gives 403 403 means not of Christ yeah I think it it happens but why don't see the error itself I would expect the error to be called update let's look at the update [Music] I think this one does not give Super Bass client does not throw an error events happening oh here database fetch data okay insert perform an insert values the value says okay options uh a wave it can give us an error yeah okay okay so I'm gonna take this error const error equal and I'm gonna say if error then I'm gonna simply throw new or flow error okay something like this if error oh where did I see it I saw it somewhere for her let's try use mutation only here in the savings and profile anyway let's try right now create goal yes it doesn't go into the success it goes here uh true and it has a message so what I can do is using a toast something went wrong and with toast uh we're gonna look where to take it from for example in the create in the edit use those controller okay so now if I'm gonna create it like this something went wrong what's going on with this toast show show react native title and show options anything in silent navigation inside the documentation here for the toast uh yeah I think toast API reference label duration toast oh custom data what Native viewport name viewportation I'm gonna leave it like this at least we see something at the top how do I do the theme of it okay I'm not gonna spend the time on such small things at least if something goes wrong I see it at the top something went wrong uh and that what actually went wrong here is we don't have access to create goals so let's go ahead and the goals in the policies it redexes for all users let's create a new policies policy enable insert access for authenticated users yes only authenticative users should be able to create you create goals now if I'm going to create goal we see success and if I'm gonna look into the table goals yes we see the new goal ABC with all the data that we have provided here and if I'm gonna go back to the savings and refresh we see ABC gold here perfect perfect that's not everything for example I will go in the create screen here on success let's successfully created a new goal let's do a weight query client invalidate queries I want to invalidate their query from this screen in order to Auto refresh it and the query is called goals goals for that we need the query client a query client we can take it like this and router back yeah router back will be okay and the router probably will take it using use router okay and if I go now and do okay use router is not imported now if I go to the savings create a goal I don't know vacation amount one two three create goal successfully created goal and it's here as The Last One automatically perfect we are having very good progress so far I think I'm gonna go ahead and do git add git commit uh create new goals get status perfect I need one minute and I'm gonna be back and we continue working on it foreign [Music] all right so I'm back all right we have a list of goals here hmm uh okay if we look here at our view for the goals users can create a saving goal we are this is in progress It's not finished yet if I go there we should also to do choose and I can set due date assign that group ID dynamically and what else is important here for our mutation yeah the Emoji group ID and Target date that's for creating users can view the list of goals this is in progress because we still need to get um use group ID for the query maybe we also want to sort most recent at that top users can view the details of a goal users can record savings for a specific goal query goals based on actual group idea that's what we have here um in order for like I'm thinking whether to cover um features like adding Emoji and Target data and so on which probably are not like super important so maybe I can even uh extract the choose icon and set due date choose icon as a probably nice to have which we can add later set due date this is due date I think is important and and this assigned with group ID is very important this is actually crucial and we have it here uh Square not said that group idea when creating goal in this year this is actually crucial and with this I can say that we can we are creating a saving goals this is done because everything else we extracted into separate tasks users can be viewable list of goals yes we can view a list of goals it's done if we want to improve the user interface that's gonna be this one create a separate UI component for the details of a goal like this one the group ID the dynamic group ID this is very important for this application tool to be working even though I set it as everything related like family account as P1 not P0 I see that a lot of features that we have with references the current group that you are parting because when you will create an account you will have a choice of either joining a group or let's say a family or creating a new one and then like all the goals and so on they will be linked to them to the group itself so for that reason I'm thinking maybe it's a good thing to go ahead and set up the very basic features of creating and managing the group and after that come back to the goals and continue working on them so when it comes to the groups that's our family account or group management uh what I want to do is a user can create a new house called I'm thinking that whenever the user signs up or creates an account you'll be able to either join an existing group or he will be able to create a new one so I think it would be fair to start with a screen that will allow creating new groups um yeah I think that would be the The Next Step to allow users to create a new group this is in progress let's go ahead and we already worked with with some forms so I think it's going to be easier for us let's go ahead and start with yarn generate screen someone is playing at the I don't know saxophone or something like that I can hear it through my window so what's the path to this screen the path is going to be a group create group create not groups or maybe groups group create what feature does this screen belongs to um group what name of a screen it's create so let's first of all look at what was added so packages packages up features we have group create screen for example profile okay for Expo we have Ops Expo UPS Expo up group create index okay if you want to create folders instead of files okay I'm okay um so at the moment I want the navigation to this to to help and somehow automatically like if you don't have a group to to you will have two options to either create one or Join one but yeah right now uh let me just I don't know somewhere on the home screen uh where I don't think that's the right place but maybe yeah let's go to the tabs um index and here I'm gonna do uh link from Expo router to group slash create group and it should be somewhere at the top color red yes create group so if I press there I go to the create okay uh that's that's okay for now um now in the packages up group create screen I can look at what we did recently inside our savings savings create screen I will copy everything from here inside our group create screen back in our apps Expo application index I don't need the safe area View actually I need it but only for the inset or how is it called uh just only bottom okay so back to create schema here uh this is not going to be a gold scheme this is going to be a group schema and the group schema will yeah yeah I know uh the group scheme I will have initially only even name it will have a name it doesn't have an amount and it will not have Target date um here group schema it's going to be a bit different here let me first update the default values name let's default it with my house hold render after submit create group or maybe even this one should be should happen automatically I don't know we'll see and here error Super Bass group or groups how is it called it's groups insert name data.name and nothing else if error flow error on success console log success successfully created a new group query client but besides creating the group we should also join join the group the user should be added to this group and we don't need to probably validate any queries router go back it's okay something went wrong yeah maybe and if I do create group I see the error new raw okay because we need to go back to the groups add a policy to enable insert for authenticated users review save policy now if I go here and if I press create group successfully created a new group so if I look in the tables here yes it has it perfect but it also should assign the profile group ID to that newly created group so that means that I'm going to have to update the profile I can look at how it was happening inside profile edit screen so it was something like a waste Super Bass update okay create group so after saving the Super Bass I never had it like this then we do a weight from profile we're gonna update group ID with I need to console log the data to see how to take the idea of a newly created group so oh but notation duplicate data data uh new group data it should be here it's create group create and in the console log we see we see null what will insert return as let's Okay but in the status 200 and Status text created foreign count to use default what wait a second insert that perform and insert into the table or a view and I need to know that the object right away absurd will return data oh it's dot select Super Bass ID of inserted or inserted ID insert.select so if at the end of dot insert I'm gonna do Dot select maybe I need to specify only the ID well there was your return cell act there was a return date after inserting hey Ismail thank you very much for veterination spawn the nation but hopefully soon a new student on your premium course I learned so much with your YouTube video slam from Algeria thank you very much let's celebrate it and I'm waiting for you to join the course and to to help you there so yeah thank you very much what tool is that to generate screen Vats from I think it's tamagui but I think it's coming specifically from the starter the tamagui takeout which is a paid uh sir which is a paid product um so if I do select I have data and I have that one and I think I will receive the information new row violets because select doesn't allow um Alex sir data give me just one second someone is calling foreign already so many things in the groups we need a new policy to allow everyone to read okay let's try to do that save policy and now if I do it again create group in the console log we see created that we see id6 and the name perfect we were looking for the ID of a newly created um of a newly created group s because I want the end to update the profile with group ID using new group data Dot what's better an array of worse what is that oh where was it yes it's an array with one height with one item so can I assume that it's going to be at position zero dot ID it's possible and defined if new group data Dot dot length then we can throw unexpected error why is it possible and defined uh uh I can try it like this yeah and we need user ID where do we take user ID from user ID is is received from somewhere user ID user from a use user so in the create we have use user and here we have to import use user from up utils probably and when we take the user and we take user.id is possible null so with that being said now my profile doesn't have a group ID where it has I can remove it where if I create a new one if I create a new group my household one successfully created a new group and the group ID in my account is updated okay that's good now so creating a new group works and we are properly adding the user to that group okay that's good that means that we are user can create a group done a user can join a you know what I'm not gonna Focus right now on joining uh another group but I'm going to add some utility functions to easier get access to the user group in a similar way how we are getting access to the use user so let me check where use user is up utils packages up utils there is use user should they have it should I have a group part of a use user I think it makes sense because it's very close to functionalities of a user whenever we will need like the group of a user I think where we can add it here so um use user use user what's that um so we want to also return a group here the group user is session dot user use session contacts then what do we have here profile profile so the same way as we take profile we should take the user right so the same way we take profile we should take not the user but the group is loading is group loading then refetch I don't know if we need it use Query group we can we will work based on the profile data so if profile dot group ID is not there we're gonna return null otherwise we're gonna do query the groups select everything where ID equals to profile dot group ID single in the create instead of select if I do single I'm learning will this mean with the new group data is an object and not an array doesn't work anyway back here so equal single if error um from new error like this will be better probably return data is loading profile let's also do is loading group and I think is loading group is group loading No it should be is loading group and we will add to the general loading stuff so is loading group now now you know what that will allow us to do is when we create well first of all it will allow us to query the right saving goals only for our group so I can go in the application savings screen and here I have group ID which is one how do we get group ID first of all we get the group using the use user from app utils group so if group dot ID then return null otherwise this one will be group dot ID so now if I refresh in the savings we shouldn't see any any goals yes uh okay and in the create screen the same way we need to go ahead and do cost group use user from utils and in the mutation which this is going to be group dot ID it might say that it's undefined so what we're gonna do is if group ID is not there I will I don't know throw new error can't find your group so if I go here what are you saving for I don't know car create goal I'm going back here I still don't see the goal maybe we can look in the goals what for the car group ID seven and if I go here it's wait a second it's weird ABC it didn't update automatically now it updates but if I'm gonna create a new group create group now we shouldn't have any savings and if I create one ABC create successfully created a new goal but it doesn't refresh why I don't know so you know what query goes based on the actual group ID this is done uh uh send the group idea when creating a goal this is done we are automatically doing that with group ID yes um what else good so two more features done what do we do next okay so we can create this I don't know vacation create goal we have it here what's another thing that is super important for now to be able to basically add add fonts to to these buckets to these goals foreign in the group management which is also in progress to invite partners should they go ahead and finish the group management feature even if it's P1 it's not P0 um I think that this grew joining and creating a group should somehow um be part of the onboarding steps how is from boarding happening maybe I should actually commit and get status create groups so our application our application has has this on boarding screen it's coming from up features onboarding screen packages up features authentication on boarding screen foreign happens before on boarding I think this one happens before you sign up not after so I need them a screen with two buttons or two options either create uh a group or join a group is that right or how should I do it um Maybe I'm I'm thinking how to simplify the onboarding process of users I don't want to create groups right away maybe to automatically create a group which will be his own but no that's not gonna be good okay yeah this is challenging to to think how to better have an easier flow for the users but anyway like we're gonna have like a proper onboarding process with asking people like what are their goals and maybe to set up a couple of things so maybe we can start setting up that one this is going to happen where an authentication on boarding authentication how does Authentication how does it work in the layout get use effect oh okay okay okay okay Chrome group create group let's let's just move we can always change things so yarn gen screen we're gonna generate this screen that will have two options join group or create group what's the path for this screen it's going to be slash group what feature does this screen belong to this could be existing or a new uh group index so group index I actually don't like the name group like maybe in the database it's okay because it's generic but in the UI maybe I'm Gonna Change to something like household or something like that um okay this is our app features app features group index screen we have export app Group index Okay so um I want to somehow automatically navigate here if a person doesn't have a group how how is that implemented for the Authentication for example Maybe utils use we can look at the documentation of let me quickly find the documentation and there was something about Authentication guarding Pages there is up next util you can use standard server safe on Native apps export utils use protected route apps Expo there is should be utils here do you see use protected routes let's try to do it like this use protected and it's only in the next how does it work provider okay so provider is what okay provider is all the contexts oh use protected route here who is using it if a user is not signed in and the initial segment is not anything in the off group redirect to the sign in page on slash on boarding our wise redirect here to the slash on boarding so up should have slash on boarding I don't see Slash on boarding oh it's here okay that can be the up on boarding and we can create another one like a count on boarding oh I'm lost I'm lost um uh look what I am going to do I don't know in the Authentication let's try something like this actually uh I don't know new folder onboarding and this will contain account on boarding screens yeah maybe not okay okay okay authentication provider or what what is looking at um user where is it coming from use protected route user session dot user of provider hmm tough tough how to properly do it whenever the user doesn't have a group I simply want to render that screen oh boy um does it mean that this feature I should think a little bit more about it and come to bed to tweet a little bit later to to think properly how I want to add it and if I'm gonna have like other like account on boarding steps like maybe creating a new goal when you sign up and so on so for now it's just gonna be from this create group uh maybe I can look into automatically creating these groups and when you create an account and that will be even better uh for example where is that happening in the package is probably up utils no let's look at them Expo application sign up and in the sign up screen here we are doing what sign up with email but will it also save uh profile Super Bass from profiles packages API source greeting router I want dot insert no it doesn't have it when our web profiles created or maybe this is automatic from from Super Bass thank you handle new user what's this this is a function and what it does it creates a profile name of a function handle new user where is this one and it executes trigger the function every time a user is created after insert handle new user so in the handle new user I think what we want to do is let's see if uh jgbt will can will be able to help me uh update the next postgresql trigger to First create a group without values it has default values and then add the group ID field for the created profile so to achieve this first you need to create a group and capture the idea of a newly created group venues video yes that's what I want let's create or replace function and declare a new group ID begin insert into somewhere yes something like that oh that's gonna be interesting to to change so begin let's do why it's so small here insert into group table and capture by the insert into public groups default values returning ID into new group ID I need to probably declare the new group ID I don't know what I'm doing I hope the new group ideas of type integer will see and then the last step is insert group ID values new group ID foreign called in the user and edit function let's try let's try it again let's try it let's try I'm gonna go to settings log out and I want to sign up with a new user I'm going to look in the table editor to the groups and I see that we have currently all the way until 8. if I'm gonna create a new one maybe sign up sign up database error saving user something went wrong and it's most probably that function but how do I check it add user create user test gmail.com create user database here error yeah I can imagine uh but where do I see the error triggers what's been maybe it's not integer of a group ID let's look at the definition it's big end it might be it might be the problem so let's go ahead in the functions edit function and here let's go with begin confirm okay let's try again from here we can try test create user database error Auto confirm user create user without sending them let's try something else but even even you know what even the group is not inserted I'm gonna try insert into foreign let me try to maybe comment out the second part just to see if it creates a new group confirm authentication add user test invite user um no test database error okay I have another idea what if we go here to the functions and take this one and try to go into the SQL editor SQL query like this run syntax error into insert into profiles what's wrong with the previous one this one this one it's probably at the end returning ID 14th oh maybe no what's popping and trying to to build an application with Super Bass and it's the first time I'm doing that so it's an interesting Journey returning ID into Sims like returning ID in thought doesn't work the correct way to capture the insert statement returning ID capture the ID how do you capture it what would be the app for the application would be a finance and budget tracking application for couples for families so that's what I'm doing now like when creating a profile I want to automatically create a group and I'm looking of how to do it so maybe so let's try to Google it postgresql um function to create and Link to insert record in another table make by invite couples are not constant yeah definitely like even like uh targeting um I'm not targeting couples that are but that are a couple very for for not a long time because usually they are not tracking and managing the finances as a whole so I'm targeting more like young families and couples that maybe are living together and are tracking and sharing some common uh financial goals but yeah it's gonna be by invite definitely oh come on this postgres select into new group returning ID what's returning ID doing what if I do this one as part of the inserting group ID values and what if I do like this and here I don't need anything fail to create function syntax error near into probably this one right come on uh Super Bass boost grass function to First create uh a group and then a profile linked to that group by group ID some sort of shared post yeah yeah I'm sure create function by the declare begin insert into groups default values returning ID into like this returning ID into function save insert data to a variable store query resulting variable using yeah select into name select the expression into I need it from the insert insert and save ID to a variable I don't know because we declare then it has this begin this one should be I forgot insert into public profiles group maybe yeah the group ID was a problem oh I think so insert into public groups returning into the new group ID and then into profiles and I think this is group ID like this new group ID return new I can confirm and I can look at the hint I think it should be in eight for the groups definition begin so back to database functions edit function here begin confirm and if I'm gonna try to add a new user right now create user fail to create where do I see logs oh maybe here no um Super Bass local logs logging uh uh storage postgres show query where is it database oh why it's so complicated functions what's wrong with you declare new group insert into what if I comment out this part will it at least inserting a new group work new user a new user create test create fail database here error creating user if I'm not gonna have anything there functions uh edit function not even this part will it work create user test failed it still failed oh I'm going insane still failed foreign okay like this it works go away I'm going to end it of course created a profile for it yes okay but foreign let's try to at least insert into public groups default values what's the problem into public groups insert foreign look at the groups the last one is 14th uh uh and if I go to valve indication and try to uh the user uh it worked and if I look at the groups there is one 17th okay okay let's slowly slowly build towards that and we're gonna understand where is the problem now if I simply add this declare new group ID at the top and I think there is we can foreign T that's how we called it just let's simply add it save go back create user everything works so far functions edit function uh declare new group idea now we need to do returning ID into new group ID let's try right now add new user I think it worked and the last step is for edit function is to take the group ID and assign it here now create new user works create user failed failed failed why do you fail if I look at the profiles it has group ID int 8. look at the definition group ID big integer and the groups group was created oh my God database function if I do 14 here without accessing it just assigning still doesn't work it gives me the impression that the problem is with this one and I can go into the SQL editor column group idea of relation profile does not exist profiles group ID doesn't exist of relation insert into public profiles group ID profiles definition group ID it's here what do you mean of relation profiles profiles database profiles can it be can it be of capital the what if the problem is with a name having capital I let me change it to group ID save now now into the queries group underscore ID run missing from close something is different please work yes it works so it created a new user and it also most probably created a new profile this one and it linked to the group 22 and if I look at the groups there is this group 22. okay so finally we managed to do it and that means that if I'm going to create a new account here it will automatically create a group for me so let's continue continue here I'm gonna create my team at not just.dev sign up we are coming here and if I'm gonna go to creating a savings goal new goal it should work because it automatically created this group no can find your group can't find your group uh [Music] [Music] without doing anything if I'm gonna refresh and do it again most probably it's gonna work create goal something went wrong can't find your group still Let's uh what's going on profiles with newly created one group ID 23 23. oh yeah yeah wait a second because we have dated a little bit the group IDs so I'm gonna search for group ID app Feature savings so this one group uh underscore ID goals group under score ID where else profile group underscore ID in Super Bass we're gonna update it in a moment so let me generate a new CD or maybe I can do it with yarn super how is it npx super based database no we need to run by migration package migration div create group create group automatically can you do a Blog application react native within build Rich Text Editor upload the blocks way back and using pocket base um yeah we can add something like that for our future ideas and and I also have to do uh yarn G in order to update the types yes now if I'm gonna go to savings and try to add a new goal again something went wrong refresh savings one two three create goal details message group ID of relation goal does not exist group ID of relation calls where is it or where is it create screen savings create saving goal group ID oh okay because in the groups in the goals it's still I'll have to use a different case for my for example Target underscore date group underscore ID save and I'm gonna have to do me migrations again so migration snake case or how is it called foreign and to generate again the types not again types group ID what's the problem right now Target date yes because it should be Target underscore date perfect finally successfully created the goal and it's here and what that means is if I'm going to log out and create a brand new account let's create a brand new account with foreign up I should already have automatically a group created and I can come here goal one two three create goal again cannot find group if I refresh maybe it's not right away so that's why I'm testing it create yes this one creates successfully oh and why is there authentication provider no utils use user file group foreign feature authentication sign up screen so what is happening here sign up invalidate edit screen invalidate Query profile oh come on why is the first time not there use user I'm gonna console log everything the user will profile and profile and also the group and see why it's not here let's go ahead and sign out settings log out let's go to sign up dim plus two at no jazz.dev sign up so user a profile and group no should refresh it group is null group id25 but group is null group 25 now it's there uh I think here this might be a lazy query because this querying the group depends on their profile itself so let's look at Lazy queries that we can manually react query lazy lazy query use lazy query Fetch and okay so instead of query I'm gonna use a lazy query here import it from here their response will be a tuple with Fetch and then this one fetch group and the fetch group we're gonna call it in a use effect whenever profile dot group ID changes profile dot group ID if profile dot group ID is not defined we can no in any way we're gonna fetch group wait a second what I'm doing here fetch group so I shouldn't see that the case where it's null is not a function react query is not a function it's undefined what oh that's the query let's go Docs I'm looking for lazy disabled what the enabled option can no can not only be used to permanently disable query but also to enable meet at a later time a good example would be a filter from where you only want to fire all the first requests once the user has entered a filter value so instead of lazy query it's actually a query oh my God use Query and the only thing is that at the end is were enabled profile dot group ID hello yeah it's a bit I'm fixing some bugs uh but look uh yeah I'm finishing in a couple of um maybe five minutes do you want to to see how beautiful is the application already you will okay so let's try to last time to create a group continue continue sign up I still see group undefined here which I don't like and if I go here group and Define profile null user null what test 12. can find you or something went wrong yeah it's a bit weird that um before that even the user was undefined profile null everything was in all what use user session use session context okay so maybe uh yeah this this is a bug we are initially the group is not going to be there like you need to reload it once and then it's gonna it's gonna appear I'm gonna maybe look into it after that because it's already five hours more than five hours and we managed to actually do a lot of things today um so group management automatically create a group for a new account this one is in progress It's kind of crucial but only think it has a bug of um fix the issue of querying that group right after creating a new account all right but what we have is we have quite a lot of things managed to build today we have basically initialized a project we have set up authentication basically it was set up out of a box we have created these goals we managed to to create goals to view goals to create groups and so on so that's nice uh yes create one uh perfect so the next step for us is going to be to finish with the goals to be able to add savings basically to update a goal um to create maybe to set like a due date and so on and to finish up with this group management because this one is a bit interesting how to to implement so um as I said I'm gonna do everything live so I'm gonna try to do as little as possible behind the scenes maybe just set up the repository and so on but I'm gonna see you next Tuesday we're gonna continue working on this project I hope you're also working on your project and looking forward to see new projects built by the end of this summer startup challenge um yes want to remember to remind you that we launched our Pro Community where every week we will have weekly q a sessions where I'm gonna try to help you build your own project and you can get more information about that at notjusts.dev Pro where does a very long live stream thank you for being here with me thank you for staying till the end and I'm gonna see you next week bye

Channel: notJust․dev

Views: 6,632

Keywords: vadim savin, not just development, notjust.dev, react native live coding, live coding, javascript, react tutorial, react native tutorial, javascript tutorial, react native ui, react native for beginners, React Native, Full-Stack Development, User Interface, UI Design, UX Principles, Mobile Development, Coding Tutorial, JSX, Frontend Development, Summer Startup Series, Learn to Code, Sketch, Git, GitHub

Id: XbKkKXH-dfc

Length: 323min 10sec (19390 seconds)

Published: Fri Aug 04 2023