Improving our Couples Finance Tracker app | notJust Summer Startup

what's up not just developers welcome back to a new coding session during our summer startup challenge so during what's this challenge about during August this is we launched a community Challenge and we encourage all of you to start working on ideas that you have about mobile applications and try to build a minimum viable product until the end of a month something small that would solve a problem and that you can already launch on the market we're gonna end everything with a demo day on September 1st and the best projects will have opportunity to present their application there so join the community and start building the application yourself and you can find more information about the challenge itself following the link in the description below where you can go to our website and during the whole process I'm gonna document my journey of building one of the applications that I'm working on from scratch and I'm gonna do everything here Live on YouTube we are already uh in live stream number five and we already have uh working prototype of application uh which is already ready for beta testing so all of this have is uh documented on our Channel you can see uh all the live streams from the beginning where we set up a project we set up everything implemented the savings goals and now we are almost ready to launch the application so uh yeah let's get started with today's build [Applause] [Music] and before we jump into it I want to announce that this month we also launched our not just development premium community and if you need more personalized help and advisory to build and launch your own application the community is designed for you because we are going to have weekly q a sessions throughout the August to help you with a project during the summer startup Challenge and later we're gonna have it once a month where you can ask all questions related to uh to your project to rec native mobile development so go ahead and follow in not just the dev slash Pro for more information because we also have a launch bonus a 50 discount which is only going to be available during August and it is going to be applied as long as you stay in our community so yeah make sure to check it out and I will see you inside our community on Discord anyway back to our summer startup what have we managed to do so far first of all the application that I am building personally for this challenge is going to be a financial application targeted to couples and families and by days to help them manage better their financial goals their finances in general as a couple as a group together so there are a lot of features that I plan to add later in this application but in order to be able to finish something that can be launched in 30 days I'm gonna cut down everything only focus on one specific feature which is going to be the savings goals and by doing that it will make the whole project more feasible and it's going to be possible to finish something usable uh the text I got I'm using is of course Expo for the mobile applications for the for the UI I'm using tamagui and for the back end I'm using Super Bass I have to mention that I'm also using um the tamagui takeout this is a paid starter template so I have some pre-made components in my applications that I get out of a box from this starter template but everything else is uh is open source like tamagui super bass you can learn it together with me they are also new for me so it's exciting to build an application at the same time learn new technologies so the game plan for today the game plan for today is going to be checking out our project board here I have project board with where I keep track of all the information and if you're interested visit notion I know a lot of people are asking about that and here I have all the tasks that we currently have so my goal is to go ahead and follow some of these tasks to make sure we have the application is working smoothly because as I said the application is already on test flight I throughout the last days I have been battling with building because it was crashing in production so I spent a lot of time just figuring out like environment variables and so on but finally publication is live on test flight and if you are interested in helping me test this application if you're interested to give it a try uh send me your email and I'm gonna invite you as a better tester for the application before it's going to be available on the market so you can either send your email down in the comments or if you want to do it privately you can send it to me at Vadim not just.dev and I'm gonna add you as a beta tester uh and actually I would really appreciate your help with testing replication at the moment it's only available on on test flight iOS but soon I'm gonna prepare it for uh for Android on Play Store so anyone would be able to to test it out uh for building and employing I'm using EAS Services uh so yeah that's a little bit of behind the scenes that I didn't show in the live streams but the process is like long and you have to build it wait like for 15 minutes at least and then see that it's not working and so on so as you can see like the last five days that's what I was doing but in this morning I finally managed to fix it so good success there uh anyway here is our application here is the home screen that will show us how many savings goals we created how many how much did we manage to save here we have a couple of them and we can go to all goals to check out all of them uh we can um basically add transactions there to for example say that you are saving for a specific goal something probably here is not working properly I cannot select the goal so let's do some bugs here I don't know um cannot select goal when adding a transaction I also saw something wrong with the home screen numbers here because it says zero goals and zero dollars so stats are not displaying correctly so yeah we're gonna try to investigate these two issues and also the first time you basically open the application I think the data on the home screen are not loading like the savings goals here as you can see we're not loaded so you have to go to the savings then go back and they will be here so let's also do initial load of the goals this would be some of the bugs that I think are quite important but yeah today we're not only gonna work on the bugs I also plan to work a bit on them on boarding screens and as much as possible to make this application more ready for for deployment anyway how is everyone uh doing um are you guys building your startup let me know in there in the live chat in the comments down below let me see what the if there are any questions uh but at some point are you going to make any tutorials about animations recently on my project I wanted to achieve some collapsible headers on scroll but didn't found much on YouTube would be nice idea we already actually have some tutorials on animations I don't do a lot of them ah I don't do a lot of them because animations are nice but when I'm building applications they rarely have a priority like for myself like I always prefer functionality over how beautiful it is but yeah sometimes I realize like you you'd want to to add some interesting animations which I'm at one point I'm also gonna add to this application so probably I'm gonna showcase but uh let me check let me check some tutorials on our channel for example this blur effect and the whole custom animations Dynamic time these are individual videos Parallax effect this is also an animation flat list animation there are a couple of tutorials about animations and if we look in the live streams there should be where is it this one iOS 16 interact native is the the live stream that focused on focuses on animation so yeah check it out Dimitris hello thank you very much I appreciate that uh David is asking what's happening here what's this course about so long story short we launched a community challenge where we encourage everyone to build their own applications and to showcase the whole process how it is done I'm also working on an application myself and I'm documenting all of this here on YouTube and you can follow along uh to see the whole process this is not a usual tutorial that we do on the channel and I want to make this very clear from the beginning if you are interested in learning mobile development then check out videos on our Channel we have a lot of projects you can check the playlists then this those tutorials are specifically designed for your learning experience uh also if you want to get even more in depth you can check out our premium course at academy.nojas.dev and there you'll learn the full life cycle of building mobile applications from start to finish by building actually two real world applications but in this series uh I'm the the goal is not for me to teach you something because a lot of tools and technologies that I'm using are also new for me so it's a learning process for me as well and I'm not preparing anything beforehand I am sharing with journey as it is with all the ups and downs with all the bugs a lot of times we're just fixing bugs but that's what it takes to to take an application from zero to Market so if you're interested in that you can jump in um follow follow my journey and from time to time I'm gonna need your advice to to to understand like how to to build application how to move forward what to choose what tasks to prioritize so yeah that's what we're doing here on YouTube in a moment um we're gonna put some music and we're gonna get to the coding part Oliver hello from France how are you doing Oliver you are actually a student at our Academy how is it going so far there do you mean this is his first mobile application for deployment no actually I worked on other startups before but from the moment I started YouTube I focus only on educational tutorials so I always have this uh urge to to go back to building and launching applications that's what I was doing before coming to uh to before starting node.js development I co-founded a couple of startups we're actually still active you can check out fitinium if you are interested the guys are still working there and they're I um I was part of a team and build web initial version of application now actually Lucas is in charge of attenu anyone remembers Lucas here in the live chat I voiced most of your videos I was able to understand Rec native that's nice thank you all right so what do we start with where do we start with [Music] um first of all I'm interested about these statistics that are not displaying correctly what's going on here I think it might be quite easier to fix um so let's go ahead I'm gonna need to open the door to get some air I think we can already take a seat put some music and start the debugging process Let's Get Cozy come with me I roll down tell Lucas to make an appearance Lucas Lucas is busy coding we're gonna invite him to our private Community definitely okay so what do we have here we have here our application and let's check where is are these numbers coming from I think it should be in our packages application somewhere in their home I think there we have them overview yeah I think it was overview so here what we are doing is use count so that's the problem the count gold let's open it up from use count here use count goals use count goal so we're taking Super Bass maybe the group ID is not there that's why let's uh console log something here goals count query uh uh let's start by simply wearing gold count and maybe the group ID because if group ID is no no it's gonna stop here so oh now it loads you see initially it's zero yeah there is some problems with initial loading and I think it affects both displaying the savings goals but the savings goes because we are going here and loading them here and when we come back we appear so what might be the problem there was maybe I messed up something I had a provider index and here there was a insured data provider that was making sure that the user is loaded because I suspect that it's not loaded because initially there is no user or something like that or there is no group actually so if I check here we see querical count undefined so that means that the goal the group ID when querying the gold count is undefined and that's why it returns null but the goal was to stop to prevent this screen to it even like render unless we have unless we have a loaded group so how do we track that still loading uh console log finished loading hmm so what do we have there I see actually that spinner finished loading query gold count finished loading so let's open this use user and we see that is loading will return true if it's loading search and profile or group but the problem is that the um yeah I think initially tries to load the group here and I had before here enabled only if profile dot group ID so this query should be enabled well only when the profile group ID but for some reason for some reason I removed that but why did I do that you see now it works now it works what was the problem why did they remove it enabled previous time we worked on this ability to invite people yeah I don't know why I I remove that because we had it here so let's uh let's add it as a fix let's make sure to to remove our console logs that we added there like this one and this one and simply do get add okay that's good so that stats are not displaying correctly that's fixed come on what's going on here foreign hey what's going on here one second notion is loading okay so from the bugs cannot select a stat or no displaying correctly I think it's done initial load of a goals yeah I think it's done and can cannot connect gold when adding a transaction I think it must be fixed now if I go here yes I can select goals and I can add transactions expected number received string oh that's bad [Music] that's a different one ABC and expected number received string let's have a look that should be somewhere in our application features and this is a transaction so we go in transactions create screen so goal ID this value is the number and or undefined all this system transaction schema where is it coming from use transaction schema amount and goal ID select number the number received string hmm let's see this schema form uh where is it coming from utils schema form mapping okay so what do we have here select number it's a select field we added this one here seven days ago can be string or number well labels on value change field on change oh value item value to string I fixed it five days ago but why um string or number but we select item select item where is it coming select item from and why can't it okay tamaguya select let's check check it out in the documentation going gooey dogs there is the select select ID size and so on we need to look at the select.item this one used to add selectable values must provide an index as direct native doesn't give an escape hatch for us to configure it automatically index and value of type string provide the value that will be passed on selection okay yeah I think I need to treat the selected value as string here so in the select field where item dot value and I think item should only be a string and the next problem will be where I don't know if we here I don't even need the select number I'm gonna remove that and use only select with default value let's check here what do we have transactions form Fields I'm not gonna have select number I'm gonna have only select now it works but I'm not sure if it's here in the default value the goal is not assignable to a thing of string so let's do goal option dot to string now it works and here seems like it works value number goal ID select item okay let's see now if I go here and do let's say one two three if I press add enough what should I have worked towards vacation why it automatically selected the vacation transaction now it even doesn't work should I do here for the value goal id.2 string and now vacation is selected yeah and I I think I should simply remove it from here because we do it for all the goals we transform ID to string and I think we just have to transform it back when we save right now if I choose different ABC for example one let's add and if I go here we see one towards ABC I'm wondering how the unsubmit works mutate yeah here that's that was I was afraid of the goal ID the problem probably is with gold ID that it's of type string so we can do number dot parse integer yes now it works so when we save we simply transform it from a unicorn one two three add and if we look at the transactions yes yep uh another problem that I see right now here let me just double check if we didn't leave anything here is good here we set goal ID is a select schema form okay here we didn't need the select number and select field yeah we move back to only string select item to we remove it to string yeah okay perfect uh so this one would fix one of the issue and get and git commit minus m fix goal selector perfect and and yeah another thing is that when we go here we see the warning encounter two children with the same key and that's because if we look at these components where is it form Fields select field the ID of the select item select item where here by D is the item value but the item value is our name so we see here two vacations with the same name and there's a problem item dot name should I do item.value because the idea will always be the idea will always be unique so we're not going to encounter this issue if I go here we don't see the error I can change here to for example games and and if we go here yes it's there perfect so we fixed another issue cannot select gold when adding a transaction done fixed foreign okay that's good um what do we work on next authentication definitely no everything is good video with goals setting with due date for the goals and quickly adding yeah maybe it can wait I think here in transactions there were a couple of things that might be important and let's start by displaying the time step of a transaction so let's put this in progress and for example the transactions here are very minimalistic at least I want to add the possibility to to to see when you made this transaction right and I already think about the next one the next level which would be um group or not group but yeah odd monthly labels between transaction items for example if the first two were in previous month I would have a name of a month above this one and this way you can see chronologically like how many transactions do you do this month because I think a very important goal for for achieving your financial goals is to constantly work towards them to constantly add there but the first thing is to display the uh the timestamp right so let's have a look at our invest Source components I think we have here uh that transaction should be transaction list item and in order to see them to work only on the UI let's go ahead and hmm run the storybook so let's do yarn how is it called in the package a lot of scripts here so storybook native or iOS I'm gonna add a new shortcut with SBI for storybook iOS and if I'm gonna do yarn SBI it should call SBI it should simply corn call yarn storybook iOS the same way as we have here with SB use another Port yes dear Rossi thank you so what do we have here let's have a look it's still waiting to build um yeah because I'm at the moment I'm displaying the transactions as messages let me check um for example how other applications are doing like yeah I think somewhere in the bottom corner bottom right corner we can display the as a string for that we're gonna need some libraries to work with dates let me check if we have something like that already uh um in the dependencies of the project so independencies yes here we have our UI with transaction list item that we can see here as my transaction that's how it will look when we display my transaction and that's how it will look when we display someone else transaction so the call is like we select field will probably receive where is it not select field seeing about transaction list item transaction let's do time string or something like this time as string and inside there yeah let's maybe render it somewhere at least and also go ahead in from the stories send it for example here time would be uh August 13th something like that and here maybe three hours ago let's have a look how it will look okay that's already better so transaction list item we have time the text is coming from tamagui we can text text color should we take a Dynamic Color here gray seven maybe lower grade one no gray nine grade three four 10 um Gray 11. and how will it look for the other one yeah for everyone it looks okay as well in terms of color uh okay and should I position absoluted to the right I don't know five and bottom five like this and this is for them where transaction every single maybe no bottom five was okay let's do it like this which I think will be dynamic so even two is not enough 1.5 yes we have 1.5 okay I think like this my transaction August 13. okay all right now we need to somehow send this from our application because this is the UI and this is our application so if I go hey Kelvin thank you very much for the donation I'm Brazilian and I found your Uber clone project and it's really great congratulations keep it up I still don't speak English fluently and calmly but the subtitles are helping a lot I want to congratulate and thank you thank you very much I really appreciate that you made my day it's gonna be more fun to to work let's uh put some music I forgot about that went into [Music] okay [Music] Ayan hello [Music] uh what I wanted to check here in them application features transactions transaction list item so that's where we are sending this goal string and Define the sustainable to type string yeah but if I send here time it already displays it and how will it look on dark mode hmm let me check the documentation of tamagoi colors where is it colors uh orange red and so on do I have grade 12 I'm wondering yeah we have grade 12. and there is also gray dark foreign I think the grade 12 looks better command shift a command shift a to toggle the device light to dark mode okay let's put it to system and now Ctrl shift a oh my God thank you that will save me a lot of time foreign don't hesitate to take good training to learn how to make Instagram clone with AWS Vadim has done one hell of a project you can see everything you need to make your own application Advanced thank you very much for for the message it's it's the result of work for I think almost two years so yeah put a lot of effort into that and not only me like our whole team so what I wanted here instead of two hours I want to uh to somehow parse the item dot created and into some human readable uh way so for that we need um library for managing times let me check where um okay in the up here we have I'm gonna check if we have something related to two times no I don't see uh and actually I'm not sure which one should I use data FNS let's try to install this one inside our packages application so let's go ahead and open a new terminal CD packages up and here let's do yarn add date FNS datejust is nicer the GS oh it even has more weekly downloads 17 million data finesse okay actually if it's even like last size last published two months ago last probably four months ago issues issues okay let I'll try this one actually let me remove the date FNS from here and let's try the the GS so where is it English okay dgs remote server failed what oh it's without a dash yarn odd day yes hello pizza143 okay that's done let's go ahead and try to use it and as I said we needed it in the transaction here transaction list item so instead of time together okay let's try here they GS not there with a time they GS foreign okay it's already good um and where display time from now relative time plugin oh this requires relative time plugin let's have a look at this one oh boy uh should I use import here relative time from from and now can I do Dot two now in 27 no from now 27 minutes ago 25 and so on if I add a new one a few seconds ago I think that's good a few seconds ago I just want to make sure that if the it will be a lot of text for example here if a goal will be like this you see it's going to be a little bit display above so what I'm gonna do is here we have a text here we have a number text let's add here padding margin bottom like this and we become a little bit taller but I'm at least I'll be sure that the taxes will never overlap oh come on two or should this text have margin top two margin top oh no because it's absolute okay I can actually add it dynamically only if it has time but it will always have time so perfect so now if I'm gonna look at some of them uh yeah that's another place where we are rendering this goal yeah package application features on them savings foreign here we have this transaction list item I think yeah probably I should have a separate component that renders um a list like this for example in transactions if I'm gonna have a folder because I'm reusing it and I don't want to keep calculating this every time like I want to do it in one place so in transactions if I'm gonna do components transaction Dot TSX transaction transactions transaction list let's do it like this transaction list this is going to be a component that is going to be this flat list it will have a type transaction list props and with data will come from there but the data will be what the data will be a list of transactions so how do we um how did we do that in Super Bass we have a types not sure if that's the right way to access them but data base from Super Bass types dot tables or how is it called database public tables dot transactions and yeah it should be dynamically accessed like these [Music] definitely doesn't look look right so if you know a better approach to take the types from there and it should be an array of them for the flat list is loading refetch yeah I think these are transactionalist item can be imported it shouldn't be from Source by the way ah item dot amount does not exist on type Raw still something is not right dot roll yeah I think we need one more here for row and now I'm out yes it works time for the time we need to import the datejust and so on and here instead of rendering this flat list what we need to do is to render transaction list sending the data sending way is loading on the refetch null or undefined as well can be the data so no Lauren defined or this one now the transaction list works as before but we can take this one and use it in our savings uh uh if we look at one of the savings detail screen so instead of rendering this flat list here we can render the transaction list provide here for the data transactions we can also do is loading but it should be is loading it is transactions loading so let's use this one [Music] and what happens if we don't need a refetch let's try to give it so maybe yeah uh transactions refetch or what we can do is uh transaction query and this structure here all of them like this will it work yes it works and if I go to the vacation I see if I go to unicorn unicorn what else another vacation we don't see any transactions back to unicorn still don't see transaction yeah but I think there is an error there like with rendering them but in general I think it works well right now index screen here I might also not need all of them so list transactions I can destructure simply them and because everything is type prop properly should I do this is loading I think I should do the ease loading inside the detailed screen inside the transaction list if it's loading return this one and it's going to be the same like for example here it just loads too fast so from in this index screen it already became very very simple not sure what's happening here with this time transaction list item probably it was not updated like the the types okay perfect so refresh this one still works you can go back and look at all of them nice yeah that's one of the problems like if I go from transactions to details of one goal the list Remains the Same so that's under the bugs going from transact but uh display time timestamp of a transaction that is done perfect um uh no yeah if we refresh to working but anyway uh this task is finished so I'll just quickly have a look what we changed here I can go back to normal text but now uh should I work on this fun one at monthly labels which is not very important no let's actually first fix the bugs the bug going from all transaction tab to the goal because that's more important so let's focus on what's important why this is happening why this is happening um let's check how we query them on the features transactions index here we are using a list transactions we're gonna need this screen here and on the savings detail screen we are using uh use transactions by goal use transaction service use transaction by goal is it the same yes so this is the last piece of a puzzle use transaction service one of them is using list transactions list transactions which uses the key transactions and the number one is use transactions by goal use transaction Yeah by goal and because they both use the same key their cached as the same query but the thing is that the query is different so to make sure that they are cached separately I'm gonna add to this key the goal ID transactions goal ID I can even do transactions for gold and gold ID now now it will work better if it will run so the problem was going from this one to all the page and back now it works unicorn and it will even work like going here to vacation going here to this one going back yes so that's why it's important to have unique keys for different queries okay good use transactions by goal as you can see this one is a separate hook create transaction is a separate no but not a separate hook anyway list transactions I'm thinking two for the home screen where we display these savings goals there I also have some issues with this key so if I look at the home components goals section here I'm taking use list goals with a limit like it's a paginated use list goals should I simply copy paste it into a separate function and do use list top goals it's not gonna have any options but for the limit I'm gonna manually do here free and here I'm gonna say goals top goals and then yeah top three and this way but I need in the goal sections to use them use top use list top goals without any limit here now on the home screen we should load separately like this and in the all goals they should load like this not sure what will happen if I go here and add the transaction like one two of the first golf it doesn't update here as you can see or because it's it's a huge one doesn't update in real time for example if I add here to the vacation it doesn't update 12 I have to restart and yeah only when it updates why let's think about that if I go here transactions uh transactions create screen we have create transaction and we create transaction invalidate queries transactions but I also think I need to invalidate queries for the goals not sure if all of them but for example now if I go here vacation one two three four five odd 37. it's still not not instant hmm let's try to add a new one a new saving goal of 100. I'm gonna even call it 100. it's here the first one after I add something here like one two words one hundred or maybe 10 odd I expect to go back and to see if I'm updated but they are not if I go here they are updated so maybe this one doesn't Target the correct one if on the goal section instead of useless toggles if I'm gonna simply do use list goals I just want to test if that's the problem basically I'm querying here all of them so there will be a lot no wait a second why goals section use list goals hmm options limit something doesn't add up and go component goal section use list goals oh because I'm slicing them yeah anyway it's the same query so now if I'm gonna go here to add 10 towards 100 it still doesn't update um why use list goal goals goals invalidate query let's check react query invalidate queries yeah that's rack native should I try it like this query key goals so if I add another 10 towards 100 here should be 40. I don't know what's happening here create and transaction let's double check with that that's something that we are success maybe should I also like it's supposed to be all queries that start with that but even hello hello how are you doing now if I do that still doesn't update hmm use goal service goals goals top three that's supposed to invalidate all queries you see it worked 82. come on 84. and even the total saved 168 to free 16823 so if I add one velocity digital before yes hit updates so should I simply do invalidate all queries it's still weird because I want only some of them for example goals top top three 85 1 it doesn't update okay maybe I'm doing something wrong but I'm gonna invalidate all of them when we create a new transaction because the transaction will change kind a lot of things so let's let's do it like this and at least this way we know that it's updating right away on this page should we add some space on below the transactions let's do that but inside our savings savings details we have here transactions margin top five let's do margin bottom 2.5 project for my second year I am running out of ideas for the app because it has to be you know Innovative and every day come up with has been done any advice uh do it anyways even if it has been done because you can improve on it you can do it better you can do it differently and the application that I'm building is definitely not something new there are tons of Publications on the market related to finances related to budgeting tracking your goals and so on uh but how I'm gonna try to differentiate myself is the initial idea of going niche of targeting specifically couples so that's what you can do as well if you have an idea and it's too competitive or it's too hard to achieve it try to Niche down and Target it to specific people to specific needs that will solve like a smaller amount of problems and that way you can differentiate it from other things that are on the market so that's that's one way but yeah ideas are not that important the most important is the execution so just just get started as David says like here he's sharing some ideas uh calculator queues application note application drawing up to-do list dating job search movie up that's perfect ideas like a note application there are so many note applications out there yeah but you can have a specific uh specific feature in your application where you can differentiate it with your UI with your interactions with anything maybe you add a note application that has like a limit of only 200 characters per day and every day like you can have some notes I don't know like be creative here okay uh so let me check what have we changed so far a bit of things here yeah that is a thing within validation transactions top goal yeah perfect I'm thinking after adding a transaction for example towards this goal should I redirect bank or should they redirect to the details of that goal for example here in the features transactions create screen on success I do router go back maybe I should do router push uh it should be up when tabs when savings so slash savings and slash ID of a goal so let's try it like this [Music] call Lady but I'm not gonna know the data deep in the own success oh but it also will get data here will it let's check what data do we receive back in the own success for example one vacation success and defined but then virus while the virus also being defined success goal ID you see so from virus we need goal ID and the goal ID we can use it here and if that data we don't need I can replace it with an underscore now if I do add we're gonna go to the transactions and if I do plus here transactions one but towards something else again something not working for example one two words ABC perfect a few seconds ago ABC and you are updated with the start with the goal basically nice but what happens uh yeah if you navigate to a gold detail page first you cannot go back but going from all transactions tab to the goal will not refresh this we finished and we also changed where we redirect so we can go and do git uh the git commit transaction navigations oh but we are in packages wait a second I need to go back git add git commit okay perfect um what is the pro infinite gate to a goal yeah that was the problem if you go right away to a goal page for example if you click on this one there is no way to go back to all the to all the goals and even if you go here it's gonna remember it so what's the problem the problem should be probably an application create not create tabs savings and here in the layout I think it should be done with do I need it here what if I simply return a stack what do you use to get that overview of a task to do yeah that is notion and I can cannot go back but I think that's where those unstable options were coming into play export router layout routes foreign let's check this example application up layout and here this is when stable okay initial route we want the initial route to be index so from here if I go to the goal I still have a back button to the savings yes that's exactly what I wanted you can come here and there is a back button perfect nice another thing about the goals I think would be different background color for the card based on the status something like that because right now all of them are red anyway back button when navigating to savings details perfect so that was what if you navigate to the goal it was finished okay back to the transactions uh add monthly labels between transactions that's not important come on and think about deleting like updating transactions maybe it's not that important but at the moment if you made a mistake and you want to to somehow fix it at least to be able to delete it and then and then add it as a new one so that's what I'm thinking I will do next but before we add I'm gonna grab something to drink and we can continue working on it foreign good progress today very a lot of small bugs but um that's how we are improving the user experience so far um now I'm thinking how would them user how would they yeah like basically user experience for deleting a transaction would be so they have something like swipe to delete or if they do something easier simpler like long pressing on them and showing a menu first of all I don't like the scroll indicator there so what I'm gonna do is from our transactions components transaction list I'm gonna say shows vertical scroll indicator to false transaction list item we need a way to delete it for that we need a user interface delete transactions in progress what would be the easiest and at the same time a UI that would look good let's see here maybe something alert dialog UE open thank you let's check maybe a package rack native swipe to delete let's see something recent I learned by practicing do I understand correctly that we cannot reproduce this project unless we buy the starter um yeah I would say so because like for example these components that I have here yeah they're coming from the starter I adjusted them but still so many odds come on swipeable item I think that's what I need is it something that is last published a year ago or maybe hello Daniel how are you doing so how should I do that laziest way probably would be on long press on long press to open up a pop over so probably would be better did we use this anywhere packages up join group yeah inside the group here join group was join group dialogue oh boy still not sure still not sure what do you guys recommend maybe like an alert dialogue trigger content title cancel foreign for example on WhatsApp if I want to okay it opens a kind of menu if I press on it context menu or something like that iOS context menu is that what I'm looking for yeah yeah that's what I'm looking for and is it adapted rack native context menu creating a react context menu react native context menu so there is this one with let's check the project think it's a good one you drag you use native context menu functionality from Rock native and on Android it uses pop-up menu let's see if there is anything Expo context menu pop-up menu what is it using this one I kind of like it let's just check if I will be able to use it in Expo I I still will be able to use it but anyway let's give it a try react native context menu View hmm but this is a native package so how should we install it because it on the web is not going to be available here in the documentation of this starter we see native depend if you're installing a library with native code you must install it in Expo uh you can also install it the native library inside the packages up that's what I want if you want to get Auto Import for that package inside the app folder however you need to be careful and install the exact same version in both packages you can also install a version mismatch at all you're potentially getting terrible bugs this is a classic Model wrapper I use to help okay so that means that I need to do both in the inside the Xbox project so let's try this CD apps Expo and then let's go ahead and install yarn and Rec native context menu and I will also need to import to to install it inside our packages up and I need to make sure that it will always be the same version otherwise I can have issues you know what they can do is probably I can set the exact version and whenever I have to update manually and keep in sync with a version from Expo up comments are not permitted in Json okay and I'm gonna do the same here for the Expo now will I be able to feature transactions transaction list item um I'm gonna rename this transaction list transaction list item UI and I will Define another transaction list item here but no no no I don't need it I don't need it for now I can try to work here and but yeah what I need is to import this context menu your own styles and I think I need to rub our transaction list item inside this context menu so if I go here require native component context menu is not found in but yeah I think I have to restart rerun the application let's do yarn iOS hello risky installed pods okay foreign application is here hopefully now it will contain the native code for the context menu the library that we just installed option title on press okay prolex and I will take this one somewhere here uh menu options and most probably initially it will have only delete properties title subtitle system icon oh that's good system icon destructive deleted destructive so should be true and it will probably make it let's see right now if I go here yes it works wow now I'm gonna delete these options and do many new options delete as you can see wow so beautiful I just want to add the system icon but I don't know what delete trash yeah I guessed it trash icon what else selected no disabled in line thank you yeah anyway in the end I I think it's going to be a better idea if we extract like this part of rendering one list item inside a separate component transaction list item dot TSX and yeah that's basically what it will render transaction list item export default function transaction list item that will turn this one now it needs context menu it needs many options yeah transaction list item but imported not from there but imported from import transaction list item from this one now here transaction list item should be imported from UI and it should be called transaction should be renamed because that one is the UI let's bring the menu options here and the item the item uh it's weird no let me actually take the item here and send it probably as okay last step is to define the props here so type it it needs a transaction and the transaction will be database public tables transactions and then row and all foreign yeah it still renders Excel has this one okay I like it now in this now we can work only with this item because it has this on press event press is going to be equal to something native wear foreign what's the index I don't know press delete probably yeah the the order like it's the first option but what I need is based on this if event name is equal to delete right we need to call a method delete transaction until lead delete transaction okay it works so far so good now what we need is to actually um is in our services use transaction service here what do we have we have a use transaction we have used mutation let's basically support a new function use remove transaction we need the ID of a transaction as a number then we will return a use mutation the mutation doesn't need a yeah it doesn't need a key do we have another mutation here yes mutation function uh we need only verb what we don't need data because by ID we can take it from there or maybe we need the ID here and not here use remove transaction um yeah maybe and what do we do here let's check super based documentation Super Bass foreign libraries we need to see delete data Super Bass from transactions delete where ID is equal to the ID that we receive if error we are gonna throw it okay and the use mutation we'll also have our own succession and one error what should we do on success actually show something went wrong at least this one okay so let's try let's try the last one from the transaction which is 39 minutes ago if I do delete I don't see anything but if I'm gonna refresh 1.39 minutes ago it didn't work transaction s yeah because we didn't use it so let's use it in our list item here cost I don't know what is going to be use remove transaction remove this expression remove Dot mutate and here we need the transaction dot ID let's see last one delete and if we update the last one was ABC it's still there removing transaction with ID let's do ID removing transaction with a d49 most probably it's an error because the user might not be allowed to do it error null anything else like data transactions delete where ID equal to that one let's try to do yarn super status open there Studio UI here it is default project table editor transactions 49 well I think the the policies do not allow it because it only allows insert and select so let's add a new policy here enable delete access for users based on their user ID visible assumes that your table has a column user ID and allows user to delete rows which a user ID column matches their ID does our table where is it for transactions does it have a user ID yes it has a user ID so that will mean that only owners will be able to delete their own transactions exactly that's what we want so view policies let's create a new one like this save policy now transaction is this one let's see removing that transaction and I think it worked ABC yes yes it worked so what should we do await query client invalidate should we also like invalidate everything delete is deleted so you'll see delete delete so now vacation should have nothing or something like that War for example I'm gonna delete it and I expect to go on the home screen and this vacation yes to be updated and if I go to the details yes it's updated as well all right that's good I like it I think it works really well uh what if we delete something from this page if I delete this one it deletes it updates everything is perfect love it so delete transaction it's done it's actually easier when I thought uh should they delete some console logs from here okay let's go ahead and do git add Okay so good progress today uh the update transactions can come later by generation probably is important but as well uh at monthly labels now that's not important goals different background colors and so on yeah I think that we're gonna finish today and we can continue working on the application on Friday because by the end of August we're gonna go live two times a week to build this application so if you're interested in giving giving it a try and uh helping me better test this application it's already available for iOS send me your email and I'm gonna invite you for beta testing and I'm also going to work behind the scenes to set it up on Play Store as well and make sure that it's closer to uh to getting finished and deployed in um on the stores yeah thank you for for staying with me here till the end I hope you find these tutorials available even though they are different than what we usually do it showcases the full process of building these applications uh good luck with your applications uh try to to build it and try to have something ready by the end of of this month um and yeah if you're interested by the way where is it don't forget to check out our Pro community that we launched this month and we're gonna have different events and weekly q a sessions with our Pro members and all the details you can find it not just the dev slash Pro anyway subscribe to the channel and I will see you next uh Friday this Friday I mean uh very very soon with new features

Channel: notJust․dev

Views: 2,183

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, Tamagui, Couples Finance Tracker, app development, UI design, real-time database, mobile app, entrepreneurship, personal finance, Transactions & Savings Goals, app release, UI/UX, financial tracking, notJust Summer Startup

Id: kELbprXYzXQ

Length: 143min 14sec (8594 seconds)

Published: Thu Aug 17 2023