Perfecting the Couples Finance Tracker app | notJust Summer Startup

welcome back to a new live stream for our from our summer startup challenge this is an event that we are organizing with then not just development community and we encourage everyone throughout the month of August to build their and work on their app ideas and to try to have something functional by the end of this month we're gonna end everything with a demo day on September 1st and the best projects will have opportunity to present their applications and yeah I encourage you as well to take part of this challenge try to put your ideas in practice try to build something even if you're not going to be able to build everything you envision is going to be a perfect start for you to to work on them idea that you probably procrastinated for a long time the same way as I did and yeah more information about this you can find following the link in the description below uh on our website during this process I'm also building an application and I'm documenting the whole journey here on YouTube We're Going live two times a week and all the coding part of the application that I'm building I'm sharing here so this is live stream number six and we can get started [Applause] foreign all right then before we actually jump into the coding part I want to mention that this month we also launched our premium Community during the month of August for the summer startup challenge we're gonna have weekly q a sessions with our Pro members from the community and I'm gonna try to help you build your application uh with advice and with technical information that I can provide you uh you're also going to be part of a private Discord Channel where we have already more than 200 members I think so it's a very active community that with people that are actually working on their dreams more information about that you can find following not just.dev pro and only during the month of August we have some uh some special launch bonuses including a 50 discount forever so make sure to check out not just the dev slash Pro if you want to join and be part of our premium community and I'm gonna see you inside now previously when summer startup what um as I said I'm building an application myself and I'm sharing this journey with you here on YouTube the application that I'm building um is around the idea of helping couples and families manage their finances together there are a lot of financial applications budgeting applications but most of them are targeting like individuals and it's a pretty competitive market in order to have a chance to differentiate in this market I decided to Niche down and specifically build something around managing finances as a group of people like a family or a couple and so on there are a lot of features that we can build in this application but if I'm gonna jump straight away into all of them the chances that I'm actually going to release something by the end of this month will be very slim so that's why I will focus on only one feature I will have it working and with a good user experience I'm gonna launch to real users and Van based on their feedback I'm gonna prioritize what to add next so that's my goal I'm gonna focus on the savings goals where couples and families can manage their saving goal can save towards something the text tag that I'm using is of course Expo for the mobile applications tamagui and Super Bass for the back end the application is actually already available for beta testing on test flight I didn't manage to publish it on play store yet but that's coming soon as well so if you're interested to to check it out and test it for yourself and help me uh test this before it goes public you have opportunity to do that by following this URL and I also added it in the where in that description let me also put it in the live chat if you are interested to to join the beta testing on test flight anyway so what do we plan to do today well uh we are approaching the the moment when we will public replication for release of application to the public and before I do that there are a couple of things that I want to make sure that we have in our application in order for us to easier understand what's happening in our application here I'm talking about first of all analytics I'm talking about Crash reporting for us to understand if the application is crashing all of a sudden to be able to fix these bugs because this influences a lot the user experience so we don't want that and also uh I want to start looking into the up reviews and to ask users to review the application to give to give a review because the way app stores are the App Store search optimization the way it's working is very heavily based on operatings so the more ratings you have the higher chances your application will be listed in the search results when someone will search for example financial goals or financial tracking so yeah that's that's the goal for today we're gonna still like fix some of the bugs here and there that's a process and before we jump into that I want to make sure that this point is clear uh this is not a tutorial that you're used to on this channel if you are interested in learning mobile development you can check out a lot of our free tutorials on YouTube we have probably cloned most of the applications that you have on on your phone so check that out on our page choose a project that is interesting to you and those are the things that I prepare and I'm pretty sure you'll enjoy uh this one is a documentation of How I build it I'm not preparing everything is uh is life done here and with sometimes with bug fixes and so on but at the same time I know that this will be very valuable to people who are also on the same journey to see what it takes to build an application so um hello everyone in the live chat how are you doing guys Oliver hello thank you for helping me test the application hello Rohit from Somali hello Rogelio how are you doing Hussan hello hello Brooklyn New York hello is this for beginner uh this is not a tutorial like if you're interested in tutorials for beginners check out our tutorials on our Channel how do we install the application on iOS device without app store [Music] if you download the test flight and you accept that invitation you're gonna be able to install the application through test flight that's a way to test your application before it goes public Oliver is doing is helping me market the course better than uh when I do yeah Oliver is saying or the full stack course of course yeah if you went for a couple of videos on YouTube and you are already comfortable building small applications and you're ready to move to the next level I highly recommend you to check out the full Stack mobile development course which is our premium course that will teach you everything from zero till uh being able to build end-to-end full stack applications so yeah this thank you Oliver for mentioning that what companies have you worked at just curious where type types of roles uh my story like I tried everything like in all environments I started I think when I was 16 I was I got a job as a web developer after only half a year of coding and when I got the job I told them like hey I don't know anything I'm like in terms of web development I'm good at like basic programming Concepts I have a good fundamentals and I really love this and I really want to to learn more and they said like no don't worry like we're gonna teach you everything so it was a small company like I was a web developer then I started doing freelancing that was going pretty well then I got into game development for game development first of all I was doing like freelancing and a couple of my personal games that I launched which led me to work in a company that was more related to VR AR interactive installations that was also an interesting experience when I went to University in Netherlands I needed a job to to support myself and nobody hired me because I didn't know Dutch they all required Dodge so I decided okay you know what uh I'm not gonna give up I'm gonna start freelancing so I started freelancing when I got so many clients that I was not able to fulfill all of them I hired a couple of developers and quickly we grew in a uh in a in a in an agency development agency and after that I wanted to to try something corporate even though I knew pretty sure that I'm not gonna work like in a corporate environment they just wanted to uh to to learn and to see how it is from with Finn for that I got an internship at Amazon I worked there for more than half a year I received a job offer from Amazon but then I had like three things to to decide from like either I'm continuing with my startup I take the Amazon with a great salary or I go all in on YouTube and on educational content and after a lot of debate yeah I decided to that my passion is helping people and trying to to have a bigger impact by helping our developers become teach and learn how to build like applications and and that's that's how we end up here so yeah and also of course I didn't mention like the startups that that I co-founded throughout the years so yeah from small companies to agencies to uh to corporations like Amazon it was a it was a great experience to to learn from everything and to understand like how everything works there what's your suggestion for an absolute beginner for an absolute beginner like uh first of all learn a little bit of programming fundamentals what's a variable WhatsApp if statement what's a for Loop and so on uh and after that learn something like by building like I don't know if you're interested in mobile application follow some of our tutorials with react native and build a real application because if you have fundamentals of arachnid of programming you're going to be able to follow some of our tutorials if you're interested in web development check out some other project-based tutorials and I think these are a great way to get started um regella you made the correct decision 100 you are making a lot of us successful thank you very much yeah like after like the first year maybe it was harder but I think after one year like I already was so confident in the decision that that I made to to be able to help so many of you guys it's it's an opportunity and I always thought like hey if that doesn't work I can always come back to corporate like all right so let's uh let's start coding a bit and throughout the coding part feel free to ask questions we can stop and and have a conversation of course I'm also going to put probably some music uh like this so here is the application here we have our onboarding screens these are some screens that I also want to change because I just have to write something but probably I can do it like behind the scenes because that's not very interesting um here let's go ahead and sign in I don't know what's happening here you see like after I sign in I get redirected to the quick ad and when I cannot go back let's see weird here I also have like our project board so let me add these Thunder bugs after sign in we get redirected to Quick add without back button okay here we have it uh uh oh okay one second I think I'm using the production environment so I'm gonna have to switch to the local let's try that again by the way I love your accent he's nice thank you not a native speaker great authentication up with expert router B2 it's a good idea what other languages do you know Romanian is my native language I also know a bit of Russian I mean I I can understand perfectly Russian but it's a bit harder for me to talk and I'm learning Spanish at the moment so yo say cuatro idiomas pero espanol is un poquito bad to say me and my girlfriend both watch you at the same time and are about halfway through a world world clone that's amazing that's like couple goals I heard from some of our subscribers that their partner was already tired of me and every time they heard my voice in their house they're like oh again like those tutorials but it's good that you are on the same page with your girlfriend I learned Spanish with Duolingo si mitambien uh yo tengo uh uh 400 and something like almost 500 Days uh of streak but still the level is quite bad um yeah like what why active Tab and Define why are you redirecting here that's weird and that's after signing right if I log out and then sign in again if it's not the first time I think it's good but if I close it for example if I log out close the application and start again better never think like you see like when I open the application it first shows the home screen and then it redirects have a look like home screen and then it redirect so now if I do continue continue sign in sign in I'm here okay so that's a bit weird because it happens it happens I think because of the fact that initially we are simply rendering the home screen and we're navigating back I don't know why I think that's the problem because the second time if I do log out and then login in this situation everything is fine but if I open the application so let's try to fix the problem of seeing the home screen first why that can be a problem because let's see how our application is loaded so we have our application initially it loads the underscore layout so what do we have here ah what do we have here we have a view with providers and I think yeah that's a problem presentation mode model create tab don't think we even need it because the presentation card is by default so let's try just he didn't face the first problem but let's see maybe it fixes the second one yeah I think it fixes the second one for some weird reason like I don't think that's a problem but in a combination that we have right now I think it does I'm gonna try again because I press skipped in the onboarding screen so maybe that was a problem but if I do continue continue and Here sign in oh no yeah I think now it works okay weird but anyway like this problem after signing we get redirected to a quick ad is fixed but uh uh initial open shows where home screen for a split of a second so the red bug why is it happening are you see so this layout is a stack and I think this provider is the one either authentication provider authentication provider is from them dot off and we have this native so what it does this one use protected route is the one that is so if I do here console.log two on boarding and here redirect to home screen let's see there is this finish loading where do I cancel log it okay let's try again redirect one boarding redirect one boarding but without this redirect onboarding will it always stay on the home screen or where yeah it stays here because I commented out like go to onboarding but why it even gets here I'm I'm interested because I don't have an index page maybe I should prevent the splash screen for from uh from being hidden unless we load the user and nowhere to redirect but the provider is inside that's hard so initial assertion hmm where do we use this use protected should we create an index.tsx here with a I don't know a loading indicator a spinner like this it looks a bit weird but I don't know I think it can work for what I want to achieve like to prevent from displaying the home screen when you're not authenticated that's what I'm trying to do and here I can also add a stack dot screen options header shown false and I can add here and a white stack also imported from my Umi and I can put it in a line items Center no justify content and flex one yeah like this index so in our off provider can a console log the console log the segments segments is empty so we are on index can I also do a I don't know const if the segment.length is equal to zero that means that we are on this index so let's think about how we're gonna do the redirection so if user is not signed in and the initial segment is not anything in the off group that's correct uh we want to redirect to the onboarding but if user is defined and we are either in off group or we are on index in both situations if user is defined I want to redirect to not this one but to to where don't like it very much so if I uncomment this part let's see I think that's good let's try to sign in okay now what will happen if I go here I think it works well maybe this index can render the same onboarding screen is this life yes this is life Chris if you are interested in a tutorial and if you want to learn uh check out other videos on our channel that we design as tutorials this one is not a tutorial here I'm just building and sharing the process with you guys and yes these are all recorded and will be available on our Channel uh I'm thinking here where is it let me prevent from going here just to see the index so instead of spinner maybe I should do an image with the source I don't know import plush assets dot PNG and I'm wondering if this is coming from from tamaguyo or not yeah probably I need to do it like this so now I think it will look even better because it's gonna be similar to our there is this flash but they don't like but it's not that big of a deal so we can do um index.ts and splash screen causes a image how is it called like flash or something like this flicker but it's going to be a very low priority I don't know it's a P2 and this one is actually fixed we just fix it complete okay let's go ahead and think we are good here okay all right um I think the next one that they want to work on is probably Analytics because I wanted to give a try to uh uh to a new service using analytics for mobile applications and we can learn together how to install it and here I'm talking about I think amplitude right uh yeah so the idea is that when launching the application it's important to understand what's happening in the application if it's important to understand what features your users are using and which one they are not it's important to understand how often they use replication and if they um how many of them keep using it for a long period of time that's very important to take data driven decisions so for that reason we need some kind of Analytics in our project that I did I was integrating with Firebase analytics but now I wanted to give it a try to amplitude which is not sponsoring this video and I haven't even tried them I just want to to give them a try so first of all I'm gonna check the pricing I think we have a small teams core analytics advanced I hope I'm gonna be able to stay on this one I guess apply what up to one thousand mtus okay let's give it a try okay let's confirm our account yes it's life how do you want to send data to amplitude uh with SDK what your industry uh Finance Maybe big popular Finance events to start sign up I don't have a select bank I don't have a connect Bank I don't have submit money transfer do you have access to your code base yes uh popular browser SDK what is amplitude amplitude as far as I know is a tool that enables us to track analytics and not only so yeah let's explore it I like to take this approach with all the project that I'm building it's always like to try something new like it's an opportunity to give something new a try select the data source will we have something for react native here we have react native well we have something for Expo Maybe Expo probably no but the rec native hope I'm going to be able to change the API key setup instruction yarn Expo let's go with Expo for iOS install the native modules okay so let's go ahead in our application let's see the to apps Expo and here install these dependencies using npx export install then I'm gonna need to do pod install I can do npx pod install and once installation is complete you can use the following code to initialize amplitude let's do that inside our application underscore layout and we're going to initialize it here and we're gonna do amplifying it and I think I'm gonna move this to to environment variables [Music] I'm not sure where actually so in export if I'm gonna find in folder Envy Expo public amplitude or nothing let me just console log this one to make sure that it works and what I'm gonna do is I'm gonna run yard iOS and David I was out for a minute and I don't understand a thing this guy is a genius react native what I'm doing now is I'm trying to set up amplitude now in my project and that will help me track analytics and data so I just created the account I'm installing it and still trying to configure it what's this song Okay so amplitude dot track next okay we still need to send some data the problem is that most of them events they are not happening inside the ex-publication where happening in our package application because our components are reusable so I'm gonna probably have to install it here as well but let's just double check uh yeah I think it should work because I see the environment variable and here so we need to send the sign up event uh where is that happening that is happening in our authentication in sign up and there is the sign up screen so if we go to sign up screen we get into our application here so sign up sign up with email I think that's where that's where we should track it so what we're gonna have to do is import amplitude here and then do amplitude Dot track sign up is that how it's supposed to be let's try again view all node.js tutorial we have some node.js tutorials on my channel sign up like this so let's give it a try to see if it works sign up uh email sign up okay I need the number email what do we do next save your organization for a chart user activity daily active users what do you have to do here funnel feature getting started let's do save as dashboard user activity foreign so that already shows us some information at least we're gonna know like how many users we will have do you have a tutorial about handle authentication with file based router um I didn't have a specific tutorial for Ved but in some tutorials on our Channel we definitely covered that so um might be in the LinkedIn I have a short term memory so I don't remember in which one user demographics not yet there but for example how would I check Finance media current amplitude Academy tracks the country okay it's good real-time events sign up I think what I want to do is I want to track multiple events on different actions that are important for example whenever we add stuff right so let's go ahead in the transactions create screen and here in the create screen in the use transactions service use transaction service we have a create transaction and if there is no error we can do amplitude that we can import where so let's do amplitude dot track event name is add transaction and most probably we should we can also send like information about that but we can look at amplitude Docs sdks for Rec native oh I can simply import track not everything and I can add here what I can add here amount and we can test it outward so if I go ahead and add the transaction to I don't even have a goal yet so let's do the same for goals use goal service we should have here uh savings create oh we didn't change the mutation so okay station if error from error else track odd goal and the goal yeah it can have an amount I can also probably track emoji I can save it because new goal equal to this new goal and here I can do new gold at amount new Gold Dot so now let's try for example I don't know air plane travel amount I don't know 1000 let's create the goal and then let's go ahead and add the transaction like 100 towards travel odd yes we have it so now let's check in our console and for some reason we have two user activity okay still have to learn about it but we see the add goal did it also have a event Explorer foreign level while me wondering if he has two brains or more it's not like that I don't know it's it comes with a lot of time and experience but as you can see like I'm still like figuring it out as as we go so this event has been deleted why this event has been deleted no it hasn't okay we'll see later how to work with them at least I'm sending them and that's good then I see that from a documentation that that's how we send properties tracking events to multiple projects you can track also like revenue and so on but let's think what is a very important like things to track when the person so far we have sign up we have probably we also have to do the sign in the same way as we have sign up in the authentication sign up screen here we have amplitude probably we also can take only the track in order to have it simpler track sign up let's also do track sign in in the sign in I don't know maybe we will need it um probably here track sign in transactions at goal sign up um oh and it's also important to when people join group I need to know like how many people will use it alone and how many people will join groups so let's track it inside the group components join group dialogue so in the join group dialog here on press join group from use join group else track and with track let's import it from joined group okay what what what's important what's important I think that's good at least that's what we are interested in so let's go ahead and do get status git I can have a look if everything is okay here so we change the environment yarn lock we initialized that one in the sign up okay analytics implemented so it was quite easy less than one hour probably half an hour uh we just set it up and also track the most important investment are happening in the application and this way we're gonna be able to track like what's happening in replication once we launch it to the public so analytics let's say done okay good um another thing that is probably also important is the error monitoring and if crashes happen I want to also be able to see that where are you originally from are you a Spanish no I am from Moldova yo soy uh so for error thing I was thinking about integrating with Sentry let's have a look at Sanford as well so C issues that really matter this whole visual learn insight and improve based on crashes and so on issues replayed test coverages at least I need to see like crashes and things like that because it's quite important and sometimes you do some changes and all of a sudden the application starts crashing and you don't know about it let's see the pricing we have a free tier limited error and performance for party metrics alert 5K errors 10K okay yeah let's give it a try get started okay welcome to Sentry select your language or Frameworks and install the SDK to start tracking issues uh let's start drag native does it have X Y always Wonder Expo no react native configure SDK if you are using Expo how to add Sentry to your Xbox project with SDK works for both managed and better projects let's see the guide from Expo it notifies you of exceptions or errors that your users run into while using your application and organize them for you on a web dashboard reported exception includes tax races device info version another relevant context information why Central 3 track native as a first class Citizen and we're doing and we have collaborated with Centric to make sure Expo is two it's very easy to set up and use it scales if it's free for up to 5000 events per month it seems like your error reporting code across okay native crash reporting is not available in export goal but we are not using Expo go we are using a development build okay installing sign up for a center account we did that and we need to create a project in the dashboard let's try to open it here projects we have this Rec native one let's go ahead and create a new one he is the previous one already created okay let's go from installing Center in our Expo and after that we're gonna come back to see the configuration on the dashboard so here what do we have let's go ahead and do npx play install Sentry Expo also requires some additional Expo module package to install them run X publication export constant aren't they already there add the following to your apps main file such as up to GS but because we are using Expo router that's going to be our Expo application layout so I need here process .env dot Expo public Sentry DSN enable debug if true okay so I'm gonna go ahead and create this environment variable give me just one second just to find it somewhere so we are saying that we need organizations like project name settings projects client key tab okay one second one second I'm looking for this security token I also need to to organization take note project name go to Sentry API section and create an auth token a token requires okay give me just one second to do that create a new token it needs access to organization read yes project really is yes and project right yes create token one second guys dealing with some tokens here okay I think that's good so I needed to initialize in our here that's what we did Sentry if true Center will try to print out useful debug informations and goes wrong with sending the event set it to false in production okay capture it from native to capture errors configuring Sentry Expo is done through the config plugin in your app.jsonor app are using this Library no configure a post publish hook to your project why so what do we have to do for an up.json of our Expo I need here in the Expo hooks Expo do we have hooks here not yet let's go at the bottom and add hooks we need this post publish file Sentry export upload Source map config organization Sentry organization slug or use the Sentry work environment variable what oh boy that's not that straightforward as I thought can I at least try without setting up with Source maps with capture exception and I can do that where um I would do this actually thank you I would do it at the global level you can export and nested error button component from any route to intercept and format component level errors using Vector boundaries export do we have any error boundaries at the moment oh boy how um I remember in export template uh there was an example of error boundary how do you like using notion I love it like I do everything on notion from project management documentation and so on I don't know where to find the repository of the template like the default template of Expo so I think the easiest way is for me to generate a new one let's go projects playground so let's do npx create Expo application and no test okay hmm okay so we have that project here if I'm gonna do code I'm only interested in the test oh boy it's not what I needed I need template tabs so Century react native side probably layout should it be Sentry dot native Dot try to do a wrap around our function what will that do export default Sentry native rub and our home layout couldn't find native modules export device but I think we can go ahead and do a yarn iOS and here I just wanted to check the application layout and here there is an expo error boundary but it just export the error boundary without doing anything else we'll see either this way where I can export like maybe after the home screen here function error boundary text from react native let's see okay 80 bundling let's see what we broke come on uh let's see I solve it oh whoa whoa top what's going on what if I don't wrap it oh okay so we already have something issues and if we try to come on if I try here throw new error um dummy error foreign are you guys using Sentry in your applications for crash management so something is going on here if you don't know why CD ABS exponent let's just simply do yarn start I don't need to rebuild okay that's good and if I initialize this one but still good if export this error boundary now there are some problems with Sentry so let's not initialize it but let's simply throw this error so we have the arrow boundary here that is just playing in case of an error here I can do an some I think it's a very good screen to have like a global error management error boundary because it will prevent if something goes wrong it will prevent it so it will prevent the application from um crashing so I'm gonna go with uh why is that kind of text from from here cannot read property state of null what at this moment you cannot use y stack ah probably um is too early I can work with a view what happened if uh good question if you were starting from zero how would you start as a freelancing freelancer would you use some kind of platform would you try to go to get your own clients or how would you do that yeah definitely try to get your own clients but you can use like platforms um like freelancing platforms like upwork back when I was doing it which was probably more than four years ago I I've got my my clients mostly through-up work try to probably stay away from platforms like Fiverr that would because you are you're competing with with hours on the price and it's um it's a difficult place to be in to have to build application for a 10 or 20 bucks I don't want you to be in that situation so try to Target like the high-end clients try to to build your own network share be active on on social media share your projects here what you can do and this way you're gonna build like a network of people that might be interesting interested in your services and always talk about like what you're doing what the new projects new new things that you haven't that's how you start to build your brand and it's going to be easier and easier to get crop clients uh what do I have it's missing a semicolon where I have an R somewhere but I don't know where I put it uh Json package layout Point file where is that yeah Fiverr is very cheap they could take one USD per hour yeah definitely like it's it's not something that you want to to compete with definitely that's why a little secret that's why my courses are not on udemy because on udemy all the courses are very low quality and all of them are like ten dollars and I don't want to come with a premium and high like very in-depth course and compete like with with the ones like to to the bottom as simple as that what is why stack in tamagui it's a view that has a flexbox and will render things in a column y stack X stack will render them in the same line so very similar like a view with a flex Direction that's it dummy error and if I minimize it I see the error screen here okay what I was doing here Arrow boundary uh background color let me do a line items Center and justify content as well Center dummy error background color black text here Style wait is it really true that I'm not gonna have access to yeah but probably that's true color white let's do oops something went wrong we have font size 24 font weight 500 margin vertical 10. or 20. here I can do gainsboro for the error message for the error message and for try again oh let's uh add some margin vertical 20 as well I can also do a border with one border collar White [Music] um padding 20 maybe 10 border radius 20. yeah I think that's good and if in this error boundary if I'm not gonna load it here but maybe here and if let's go ahead and try now to initialize Sentry and hope that press here to retry Sentry logger integration installed and handle promise rejection and what we can do is inside this error boundary we can have a use effect that will trigger based on props Dot error and when that changes I want to do Sentry dot native Dot dot something I don't know what Sentry dot native capture exception why don't write style in CSS files I usually do that but this one was just for this error boundary so it's okay I just my goal right now is to make this uh Sentry work rather than Robin make that application the code clean because I can always clean the code error dummy error yeah that's the one that I was looking for and we have a component stack Trace in home layout that's already good that means that yeah what we have done so far is we installed an configure Sentry which will help us track uh on a in a global way our crashes and errors then we created an error boundary that instead of crashing replication it will rubber try to render this screen so if something bad happens in the application it will not crash replication completely it will simply show this screen with maybe some details I cannot hear like some information like hey please send an email or like a way to send some feedback but anyway like when this error boundary renders an error it will be captured by Sentry here I probably should check if props dot error is defined only when to track it I don't know if it can be undefined because it's always defined so in any case I can leave it like that and yeah that's good then we're gonna see them here and I'll be able to see like which are the most common crashes I can go and debug it but that's not everything because I think we also need to configure properly in order to get proper stack traces so I'm gonna go again through this documentation on Xbox uh the installation we have done it in the code we initialize it correctly we set debug to true set it to false in production can I do that somehow automatic I don't know depending on which platform so for Native we are doing sentry.native okay capture event okay up configuration configuring centering Expo is done through the config plugin in your app.json or OK configure a post B publish hook add X for hooks property to your project up.json file Sentry upload Source map config organization Center organization slug I think I can do that this is amplitude this is Sentry organization settings this is my organization Slug and that should be inside the app.json and project name this is Rec native let me rename it to famify save okay now back to this organization project to apply the source map to Center you must create a Sentry of token we did that after creating your Sentry of token here you can configure this token through Center of token environment variable in EAS build okay uh that would be inside export.dev because I already I'm building using expon yeah yes and I think here in the secrets so give me just one second to set the secret create after creating error you can configure this token prover Center of token when variable in EAS build you can configure and the value one second never commit secrets to your repositor keep the Sentry of token in a safe place outside your repository and use the environment variable in C instead beside the off token you can also configure the following options for environment variable organization we can do that through Sentry work or project I think web Sentry project and Central organization was okay to do that directly maybe if we want to have different projects for different environments we can do that with environment variables in addition to the required config Fields above you can also provide set commits whether or not to tell a Sentry about which commits are associated with a new release we saw Sentry to pinpoint which commits are likely causing an issues I don't think I need that add the config plugin okay in the export plugins we need this entry export plugin where is plugins Sentry exports added it's good Source map with a post published hook in place that one post publish now all you need to do is run Expo publish and the source Maps will be uploaded automatically we automatically assign a unique release version for Sentry each time you hit publish based on the version you specify in app.json and a release ID on your backend this means that if you forget of the version but hit publish you will still get a unique Sentry release export publish but export publish is sun setting with export datia that's what I'm using release builds of both IOS and Android apps will create and embed a new update from your job to business update will not be published automatically and will exist only in the binary with which the it was bundled since it isn't published The Source Maps aren't uploaded in the usual way like we are when we run Expo publish actually we're relying on centuries native scripts to handle that your release will automatically be set to centuries expected value the configuration for build time Source Maps comes from let's see so far I basically see human readable issues here like stack traces so if I'm gonna have a problem I probably will come back to read more um about this documentation but now I kinda see so we'll have a look if I misconfigure something if you're using it or if you're self-hosting you need to take the following steps to upload the source map for your update to Sentry run yes update visual generator folder in your project oh boy well anyway I will see how this will go I don't think I need uh this is the way to that it will work because I'm not using publish so I think I'm gonna comment this out and in the layout I'm not gonna send that error I'm gonna return null here and everything should work fine Clinton thank you very much the stream is lagging I don't know what's happening with that on the app directory layout in the root of directory yes I was doing that in on the root layout to add a global error boundary but yeah let's uh I'm gonna I'm gonna use it like this Sentry and Global error boundary and the status of this is done I'm gonna still like have to go back and see if everything is working there properly but it looks good okay give me just one second I come back and we see what we are working on next foreign [Music] where can I learn how to use typescript for react native um the best way would be like if you already have experience with JavaScript just try using typescript in a project and that's going to be the easiest way to to learn like the basics and fundamentals you're gonna go through the typescript documentation while building and trying to understand how everything works I think but be the easiest okay okay okay okay what what this one is a fun uh amount saved this month this is as start like a statistics that we can render here on the home screen because so far we have like total saved we don't have total save this month which I think is also quite an important metric so let's go ahead and work on this feature um because it shouldn't be that hard first of all what we need to do is do yarn super status in order to see them yeah in order to see our studio UI and this is our super based dashboard let's go here we have our database in here we have our functions we have total saved by group should we added this function to Total save by group to give like to give a basically a time frame like this month for this year and to return that to the user select amount from transactions where okay is this one and if I'm gonna do that with an SQL editor is equal to I don't know one no rows returned okay let me check in the tables uh transactions and the group is one for a lot of them and there is also created at which is at time stamp so should I do here and created at I'm gonna use postgres filter based on time stamp transaction edit table what we have here created there timestamp Z okay is more than your surgeon fire okay probably created ad is more than a string and a string can be like this and probably will it work like this run snowed still null but if it's less it's 200 okay okay if it's more or equal what if a month will be zero seven okay and what if we only provide the year yes it works okay okay so let's go ahead and what we have basically to do is adjust the current function that will calculate total amount saved edit function I'm going to use charge everything to help me do that I have this postgres function um update this function to include an optional parameter date from date from and date two right yeah date from that will be a applied as that will be used as a filter for created at let's see we need to add the parameter in the function signature so that means that arguments I cannot cannot be referencing the funk I you see I cannot uh change the argument so most probably I'm gonna have to create a new one or maybe even delete this one foreign total saved by group total saved by group a return type what was the return type was it integer numeric probably floated group ID and we also need date from the group ID should be of type int 8. if I'm not mistaken we can look at the groups and check what's there yes it's in eight the date from should be a timestamp TZ I think now let's see what everybody told us if date is provided use it in the where Clause otherwise ignore it I'm gonna have it uh I'm not gonna have it as optional so I'm always gonna have to send it so I don't need this if statement so I can check it based on this one so we have what select sum into total amount from transactions from transactions where transaction.groupid equal to this is the name it should be this one and transactions created that is more than or equal date from but it also should have this field total amount return zero let's try let's try I think the application should crash right now because that function and I need to do Expo not Expo yarn super immigration update total saved function we will generate a migration to store like these updates inside our migration files because we are doing it locally and using these migrations we're going to be able to update our production Super Bass project and after we do that we should also generate the types which is the difference between the kind of int I mean in four in eight and so on it's van um size over numbers used for that integer so an INT 8 will use eight first of all like an INT 4 will use uh four bytes to store the number and the maximum number that could be stored in four bytes is let's do what the maximum number stored in in four it's I think 32 000 or 32 million in four it's a four byte integer yeah it's is it a 2 billion this is a million yeah it's two billion so if a value that you're storing you are using will never exceed like you're sure that it will never Exceed 2 billion you can easily store it in in four and your database will use less memory but if you know that the the number can be more uh what about INT 8. in that situation you use an INT 8. and 8 uses eight bytes to store it and that's the minimum and maximum number that could be stored in an in eight that's quite a lot but it will use double the amount of size for every single entry for that specific column so instead of four bytes it will use eight bytes okay warning okay let's do yarn Super G to generate the types and then we're gonna go into our packages application features on the home screen we have overview section and here we are using what use count goals total saved use get total saved as you can see this one is no longer yeah besides the group ID what we also need is their date from now it's zero but if we add date from new date and if I do what I was using here in the queries I'm pretty sure that data will not be before like 2020 right because the application one was not launched there so for the total amount of save I can use this and that calculates correctly and I can also have it get total saved you can also have a query for total saved this month and I think I'm gonna use the same kind of or maybe I can export a different function use get total saved this month and what I can do here is total totals saved What If instead of two separate functions I'm gonna have one that will also receive the date from date from which is going to be of type let's do a type date and after that we can do here date from dot to string or maybe two ESO string so in the overview section here we can do new date 2020 one one it works but if I do 2024 is zero but we also need to add it at the query key with date from maybe I can do date from tostring this way if I change something here it automatically updates yeah so I'm gonna do yeah like I don't know even 2000 will be okay uh total saved and I'm gonna use the same hook twice I hope that's possible but in this case I'm gonna say total saved this month use get total saved let's do I don't know 20 23 I think here I will use the import dgs or even uh JavaScript date one month ago it should be last 30 days actually should be better to get the date for one month ago from the current date in JavaScript you can use date uh that's three lines of code can I do it with what about datejust I think that's what we use what I was doing uh with Super Bass I created a SQL function that will calculate like the total amount of money saved for an account I had it before like to calculate the overall total but what uh uh what I want you to do now is to see to be able to also send a date to see for example how much money we saved during this month so type the AGS is missing in the following property today to string cast they just type to date dot to date and that would be total saved last 30 days so we can use an overview card as well probably even the second one we've saved pretty base let's do this one is zero so if I add here a new transaction one two travel what's happening there oh oh what's going on wait a second stop stop stop what is the problem there it's simply updating um isn't it oh boy what um uh hmm from they just object keep only that bait without time start of day try again reload in total saved what do we have okay but if I'm gonna go ahead and refresh and for example in the transactions the latest one that I created probably it's this one if I say that this one was added previous month so during zero zero seven not even 18 but 17. we should see something different for the last 30 days total saved 112 and last 30 days is 100. and if I go here we see that 12 where a month ago and yeah that's correct and I can also add to the overview card what else does it have it has title value badge text I know for example plus 30 percent and I can do badge date success for example and badge after ABC what's that com no I'm not don't want let me check how it how is that in our in our screen here because in our screen there we have what achievement card with icon title I just want to see how the previous home screen is looking Pages not pages Expo up tabs index and here instead of my home screen I'm gonna import screen oh boy yarn as b i to run the storybook maybe there we can find more information but anyway uh in the home components overview section here besides the last 30 days I will also need to do oh but I'm not going to be able to do it or maybe like last 60 days and then minus the last 30 days so I can do total saved last 60 days or let's do last month no let's go for 30 days and 60 days and then what they can do is previous month equal total save Dot dot what is going to be a number minus total saved this one okay so I need to to know the percentage of how much more we saved this month compared to previous month so const uh increase is equal to if let's use chargeability uh having two values month one and month two calculate the increase of month two compared to month one in JavaScript month one my minus one two two [Music] let's use that thank you month one value is previous month probably and then whatever one is total mom saved here dot to fixed one and I can use it for this value 733 percent because it compares the 100 with the 12. so 100 compared to 12 maybe I can do 150 to to make it easier where was that 12. 50 previous month and 100 this month that should be 200 percent more that's yeah but it doesn't have a plus sign so I think I will do the plus sign if increase is more than zero should be plus sign oh but increase now is uh move it to fixed there so plus 100 if this month we did twice as much but if previous month we did twice as much that should be minus fifty percent let's see total save should be 300 minus 50 percent and the success would depend on increase more than zero should be success otherwise failure okay looks good I think that's good but what if previous month we would not have anything I'm afraid it will compare with for example zero one here it might crash because it will divide by zero Infinity here we divide by month one so that means previous month if previous month equal to zero I don't know increase is zero and then in the badge text I should do if increase equal to zero then don't throw anything yes if increase is zero it doesn't show anything if we increase by going here zero seven foreign if we're gonna have more it's going to be plus 50. Plus 100. yes should it be to fixed zero yeah I think it's okay and I think this one total amount of goals I can do last because it's not that important like it's important to know like how much you saved last days maybe total amount of saving only then okay that's good now what we're doing is calculating and also showing some comparisons as well which is really nice uh let me check if I didn't leave any console logs which I see here and other than that this feature is finished yarn no tr get add git commit uh saved this month start okay perfect so I think start amount save this month finished all right I think that everything for today we managed to implement quite quite some important features we implemented analytics we implemented Sentry to be able to track all the crashes that are happening in production and this will help us understand like if something goes wrong with our application and we will be able to take action uh to to fix the issues we added one extra feature for the information that we display and yeah we are very ready to to start launching replication if you are interested you can already join the test flight and start testing this application using this application for yourself and yeah that will help me a lot to understand to to better test it before we launch it publicly to join that I will leave a link in the description below where you can use it here and yeah uh when it comes to the summer startup challenge I really can't wait to see your project yesterday we had uh the Q a sessions with our Pro community and uh I managed to to see a couple of projects that people are building so very excited about that if you are also interested in more personalized help make sure to check our not just uh development premium Community by following the URL in the description below we have some launch bonuses only available during August and we're gonna have weekly q a sessions with Pro members during August for the summer startup Challenge and later on we're gonna have them every single month so a lot of things happening there I can't wait to see you and uh yeah good luck with building your projects we're gonna see each other next Tuesday with the continuation of this project maybe we're gonna even start working on some new features we'll see all right thank you Oliver you're still here that's amazing

Channel: notJust․dev

Views: 2,653

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: C39WQI4hK2o

Length: 164min 59sec (9899 seconds)

Published: Sat Aug 19 2023