Building a Startup with React Native and AWS Amplify (part 6)

what's up nunja developers welcome back to a new live stream and we are in week six uh of our noja startup challenge we are coming to an end uh and next week we have our demo day and that means that today we're gonna work on uh publishing the latest features that we have in the application and preparing the application for production and uh preparing it for to submit it for review on app store and play store um a little bit about the challenge not just startup challenge is a seven week challenge where i invite all of our community to build their own startups uh we are ending it on 12th of august and during uh 12th of august we are we have our demo day where you will be able to present your project your startup that you have been working on during the last weeks and uh you will be able to participate uh we also have some prizes for the best startups uh we have one thousand dollars for the first place five hundred dollars for the second place and 250 dollars for the third place that's not a lot but it will allow you to continue experimenting and continuing working on your project for at least a couple of months until you get some tractions with real users so uh during this process during this last seven weeks i'm sharing uh all of my journey of building my own startup here on youtube with you guys and it's been uh very nice to to be able to build this thing in public with you here every friday on youtube yeah so if you're new here you're welcome my name is vadim and i'm a full stack mobile developer i founded multiple startups in the past but now i'm focused more on sharing my experience and my knowledge with you here on youtube so if you found this video available don't forget to subscribe to the channel and i think we can get started with this week right let's roll the intro [Applause] [Music] all right hi dv how are you doing hi everyone in the live chat where are you joining us from today so let's quickly see the game plan for today during this challenge i am building a mobile application i wanted to build something for developers because we have this great community of developers here on youtube and i also wanted to do something educational after talking with some users and after seeing some patterns uh i see that a lot of people are getting lost in the complex world of software engineering not knowing what to learn first what tech stack to pick and the value out of the things that they are learning so this leads to not having clear vision jumping from one stack to another and this is not productive for developers the solution that i thought of would be an interactive roadmap an interactive learning plan that will help you go from one step to another until you reach your uh goal the roadmap will be based on resources exercises projects and also quizzes and of course i have i have to build an mvp in this short amount of time because i don't have um hours to build a fully fledged application here so for that reason i decided to scale down the application just to test the waters to test the idea out there so for that reason i'm gonna focus on only one module on introduction to javascript and for the content that i'm gonna use i'm gonna try to curate it as much as possible instead of creating so um yes in the previous week we started the first week with designing the home screen which is a tree like shape of topics that you'll have to follow and complete from top to bottom after that every topic there is composed out of resources we also have a quiz that you can take with a couple of multiple choice questions and advanced like you receive this nice end screen in the following weeks i think it was week two or week three we did the back end we implemented all of these functionalities using aws amplify by creating the authentication layer our database and all our queries in our application to receive this data and to save it properly in the cloud uh previous week we have worked on the in-app subscriptions with adapti and it was fun to implement this it wasn't that complicated but now our application is monetized using in-app subscriptions so people can buy a premium version of application based on a subscription model to pay either a monthly or yearly and to uh get extra benefits from applications like pro resources or not having to watch ads actually we didn't implement ads yet but well we can see so today uh today it's coding time and we have some tasks here but we're gonna have to uh to fix some of these uh were left from the previous streams so today is going to be more like polishing making sure that everything works as expected fixing some of the bugs issues that we find on the way basically preparing our application for publishing it to production and starting uh to serve real users so yeah we're gonna go through through these tasks uh complete them one by one which we can do during the live stream and then we're gonna be ready for the demo day so let me tell you a couple of things about the demo day now at the beginning so if you are working on a startup so yeah i want to ask about live audience if there will be there are any people watching this live that are working on your startup if you're working say yes i'm interested and we can i can explain real quick how to sign up to pitch your idea because it's not going to be complicated you don't have to pitch it live all you have to do is to record a video of your presentation prepare some slides prepare what you want to say and do a video of maximum three minutes where you talk basically you pitch your project that you have been working on then you submit that uh video and we will run it during the demo day which is in exactly one week all right i see a couple of people yes murshid supra divi and selm uh dano daniel saying yes but your video was clear previously published yeah hopefully you saw the video but for people we didn't see like all you have to do to find out more information about them how to submit your presentation give me one second is to check the blog post that i wrote on no just.dev if you go here not just.dev it should be the last blog post here demo day so pitching your startup with demo day if you go here you will find all the important information about the pitch you'll find the structure that i recommend following because it's going to be much easier if you have a structure and you just simply go through them and answer these questions and after you prepare everything that you want to talk about go ahead and make some slides some very simple slides don't put a lot of text there and go ahead and record a video out of this and then submit your pitch here by pressing this button and just pasting the url of the video here and that's it you'll be um you will join the competition that we will have next week so the demo day for this is 10th of august so it's wednesday so make sure to to be on time and to submit your projects to be um to participate in the demo day the demo day will be also here on youtube guys so you'll be able to watch it alright so i'm talking too much today i don't know why let me check let me check from db i see a message this message uh is shown when i open subscription in play store to adding up products you need to add the billing permission in your apk can you tell me what is the solution for this the solution for this is to upload a new version of your application that has this billing enabled so if you are working in xbomb and if you have followed what i did in the previous uh stream like after you install like expo ad the adapt sdk after that do another build and upload it to google play and then they will see that you enabled subscriptions if you're working with roc native cli i think i think it's also automatically managed by adaptive uh blockchain developer nope i'm not but i'm interested in that feel so from time to time i'm looking into that is it mandatory to have face come in video that's a good question i would say probably not mandatory but preferably to create a connection with the community but yeah make sure that i don't know the audio is clear that's very important for people to understand if it's not very clear maybe you can add subtitles where we can see what we can do in that regards yes the content is more important than video production i don't expect like any crazy animations or transitions just keep it really simple and focus on what you want to say instead of some video editing skills so yeah keep it simple was very part five or did they miss something yes a previous week we have a part five in which we worked on the monetization so in the video title it's not sad like part five but that video like is chronologically part five of our series or all war also you can check the description box i have all the links there all right guys so let's have a look at what do we have to do here so starting from um well i remember from previous video that we worked on uh we didn't finished implementing the pro resources basically let me run the application first and we should see it uh dv yes that's what i had to go through i also had that issue and after uploading a new build after installing the react native adapter then i could manage the subscription subscription uh products on google play so here we have uh i updated expo and we already don't have i have um web ui for our build build tools everything is moving so fast when we started this challenge at the beginning i just found out about uh xbox one setting the web ui and now it's already gone we don't have it but it's okay so uh let's open it on android and here we should have it all right hello and be the king don't like my camera position i don't want to mess it up it's too tall no i will mess it up i will mess it up badly look at me now it's not straight come on all right all right sorry for that guys so um yes we have our application here and if we have a look we implemented uh we kind of mocked a feature of having pro resources which are shown with a lock here and when you press like it um checks if you if you are a pro member using adapter but we didn't implement this feature on the back end so today what we have to do let's open our console and let's change the data model to have another extra field that will say if a resource is pro or not so i'm going to write aws just amplify console come on come on i cannot write console uh adapted can also manage in-app purchases also yes all both purchases and subscriptions so let's open amplify studio and from here let's go ahead in our data and for our exercises yes exercises i think will also be uh categorized in pro or not so let's add here a field pro with a boolean and it shouldn't be required because if it's not set that means that it's not pro uh the same thing with our resources yes so let's do pro here again boolean and that's it um what else should we what our features should we add only for at this moment i'm gonna keep it like this only and later on we'll see how to manage it manage it better give me no worries uh send them and from time to time when i will have to when i'll have to wait like in this moment i can definitely answer your questions events related to the things that we are working on right now damn look at this update i haven't seen it this diplomatic can take a few minutes yes it usually does and it's painful to what cannot push amplify environment staging due to missing lambda function environment variable variable without yes to fix function del reminder is a missing value for user table uh all right that means that i'm gonna have to do this from locally if i cannot update it from here so let's go ahead in our amplify backend let's go to api schema and we can do the same thing that we did in our console we can do it here but you know what's missing some music is missing so let me open spotify quickly and i just saw that the application is out of a screen like this all right okay i can zoom in a bit here so that everyone can see and we have stream this here can you see can you hear it everything good yes we can continue so as i said like for our resource we're going to have another extra field pro which is going to be boolean and not not required like it can be nulled and the same as we did for this one we will have to do for example size okay like this now let's have a look at um let's write amplify status to see on which branch are we because i already set up the uh production environment should i upgrade amplify let's go through it let's go for it really quick have you ever played valorant game this is related because i have built up on that um i have never heard about it i don't know i've been fighting yesterday with some waves some very big waves like i don't know two meter waves and now i feel like my i'm my voice changed i don't know i feel that i have like still water in my system here all right so uh i wanted to see on what environment are we we are on staging that's good and now we can say amplify push command amplify to push the changes of our data model to our backend interest security enhancement for your graphql api the changes are applied automatically with this deployment the change won't impact our client code continue yes let's do that wait um i think it's already too late to stop it because i also have a task to move uh our api to work not with api keys but with cognito based authentication so to improve a bit the security of application of our api uh and for production it is recommended to use cognito based authentication for api instead of api keys and if oh i can stop it now right and i can do amplify amplify update api graphql uh let's do authorization modes and let's select amazon cognito user pool configure additional authentication types uh no i'm okay with only one of them of direct error wave api key provider found but the project has no api key authentication provider configure it is it here in the schema ebay key no um off directive rules allow public let me double check with the quotation what i'm doing wrong here amplify docs so let's go to libraries and i'm interested in the api authentication authorization modes if i just look here it's api key i don't want it um come on uh let's see let's see oh define authorization let's see authorization rules let's maybe check the error maybe we need the vp key for them lambda functions but again i don't think so seems to be an issue [Music] remove all of directives from the graphql so we are saying should i remove all the authentication here rules [Music] remember there was a table here public because our rules are allow public this is provider api key this is the reason yes i remembered so because our strategy here we set allow public it depends on the api key but if provider yum user pulls owner yes private any sign in data access unlike owner based access any signed in user has access to it yes i want to change it to private per user group data access no custom no yes so instead of public here i'm going to change to private private to allow access to this data only to people who are signed in not to anyone publicly okay let's give it a one more try no or yes yes let's go graphql authorization modes let's go amazon cognito user pool additional no successfully updated now we can write a write amplify push and this should update both of these tasks so the first one is we move from api key to the cognito based authentication so let's say it's in progress and the second one is the pro resources also in progress now we're going to wait until everything is pushed and we can update some of the logic of how we are rendering these pro resources we almost have everything ready there just a couple of changes uh all right so while we are waiting while we are waiting uh we can go with the next features but one that i also have to work on is to update the name on the profile page because if i go now on the profile i see uh the vm7 which is my name which is fine but this is a hard coded text so everyone will see this instead of that let's go ahead in our source we have here a user context should we expose something from here the user context has the sub it has some user data let's see what user data do we have there maybe to display adjustment name we mail yeah let's console log user data okay this is user data so it has somewhere attributes attributes it has email i know let's at least render the user email there because we are not asking during the registration process about anything else so we this is the only thing that we have so that's going to be another email sati mail and let's do set email with user data attributes user data dot com on something like this dot email all right we don't need to console log it anymore in this email i want to expose it outside uh here here mail so that we can consume it later but we need to specify that our context also has an email which is string initialized with empty string okay now everything perfect yes now what we can do is to go um as simple as that we go to the screens for our profile screen we use the hook use user context which gives us right away the user context and from where we can get the data that we send like email so here instead of item seven we're gonna have the email at least some personalization yes and it's working perfectly all right that means that we can put this task in completed and it's out of sight uh let's put it in the sprint week six just to be able to track it and the same for our ones week 6 pro resources week 6 i'm gonna put valvers one as well uh this one no this one no maybe we can randomize the order of uh answers maybe if we have time all right so uh the question is aws amplify support roles like having admin an agent and users yeah definitely it supports roles you can set them up using the cognito pools and you can give access to to api or to other resources based on the role so if you see here the strategy can be group and in this situation you're going to use the user pool groups to give access to some api calls to uh to do all right so update name on profile vet is complete and here where is by status or by sprint i already i'm already lost [Music] let's do my status and here we have complete today filter week six only okay this is complete so what's going on there with our yes we have pushed the changes let's double check them here in amplify studio so i'm gonna refresh the page for our api hello surya and let's check for exercise it has a pro boolean and for the resource has pro and if i look at the manage api authorization okay the default authorization mode is coming to user pools perfect amazing so uh now when we query our resources we will have this field is pro or not so in our source components where we are rendering this [Music] resource list item resource list item we have this resource and we will not need this is prompt because we will work with them [Music] resource dot is pro or just pro and you see it's not it says that pro doesn't exist on resource that's because it didn't update our models so i think we have to run amplify code gen to update to regenerate our models to include the new field [Music] maybe i will trigger it with a pull command let's give it a try but him did you go to the latest witchcon no i haven't no no how to change staging to production in aws amplify one second i'm gonna help you with that question in a moment but now let's see does it have pro yes it has pro which can be a boolean so that's good let's see other places where we're changing for it for example here so instead of checking it like this we're gonna check it like resource dot bro come on bro all right and i will do it like this that's it i think so now none of these resources should be pro but and i should be able to access them by the way do you remember i was having a bug when uh the emulator was crashing when i was pressing on these resources do you know why it was happening it was happening because the emulator was running out of storage uh or even my pc like the disc uh was running out of storage and that's why i just was crashing it which was weird uh what i wanted to do i wanted to change some resources to be pro so let's go through the amplify studio and delete them from here yes sir rabbits that's a weird bug uh and i'm lucky that i found it kinda randomly while also having some issues because of that like emulator always crashing i was like why is it happening and when i check that i don't have memory like does this can this be the reason why and it was so it's magically solved after freeing up some space uh let's go ahead for their resource we have three of them let's go for the last one we're gonna set that this is a pro resource save and same for exercises the second one will be a pro exercise now if i refresh [Music] let's go into variable and we see two of them here are pro perfect so if i press on them i will be redirected to the [Music] screen paywall right but if you will be already subscribed you will be able to see it right away there okay so uh that means that we are done with this task with pro resources we are properly managing them here uh and that's good api key yes we checked it was sold as well what else do we need this one is looking interesting topic screen header i saw somewhere these pictures and i thought because if you remember in my presentation here initially i designed the topic page with a little bit a nicer header with like an image background or something like that when when i started implementing it i thought that having like an image background will be um too complicating for for me to add these topics and find the proper image and then i saw like this type of [Music] backgrounds for titles and i think they will look kind of dope in the application so um i'm thinking to add them let's have a look at our options one option would of course be to uh add them like as images like these uh backgrounds and just render them there but i've been thinking maybe we can try to use the react native um how's it called gradient gradient library to render them properly so let's give it a try but before that i'm gonna add everything git add get commit minus m pro resources first the color color styles then do images color styles you mean color palette the color palette here well i think that it's going to take me a bit of time to to choose the colors for the application but we can get into that i think that this one will be more fun so what do you mean like for these headers to first do colors because it's easier and after that upgrade to images maybe yeah that's also a possibility what i wanted to see is maybe xbox has something extra great gradient but i don't remember i think linear gradient is a library expo linear gradient okay so let's go ahead with this one and after that user usage we have linear gradient we will import it where in our screens and we have our topic screen let's do topic screen here we will import this one on top linear gradient and i don't know let's try to render something at least something and to work from there so here on the topic we have right away intro but before that we're gonna have the linear gradient styles um header header let's just do header for the header what do we need there i don't know height 100 just to see it on the screen rack native component explain was not found in the ui manager i think we need to restart the server so come on so [Music] do come on no he doesn't want [Music] do we need to create another custom build let's double check [Music] if you're installing this in a big arrangement you should also follow no it's not a bear but maybe what if we try to launch it in expo go yes in expogo it works so that means that uh in order for the application to work in my development build as well i have to uh create an hour build that will include this library of linear gradient in it so yeah here we have our gradient uh yeah let's work with it first of all we will need that title to be there the title will be the title where is the title it's the topic name or something like this topic dot name title yes topic.title we need to put it inside this inside this linear gradient so let's try to do it like this [Music] and here we're gonna have a text with topic.title okay i see the text there let's give it some styles title title all right we're gonna style it in a moment we're going to style it in a moment but i see that we will have to to move a bit how we are applying applying padding to this page because this linear gradient i wanted to fill in the full weave and for that reason if i look at this container it has some padding let's add content container and let's move the padding from here to here and we are going to put all of these sections in a view with the styles content container until the end here we need a view let's import it and let's have a look yes now we have still padding on all of the page except for this header another thing is that here where we have set of setting the title of this page i will not need to do that because because i don't need this header at all so i'm gonna go ahead in our navigation index for the topic i'm gonna say options or screen options or screen come on options header show one i want to say false to hide it and if i go no no it doesn't work come on where is it all right so the header disappeared our [Music] um how's this called the gradient is all the way to the top now let's put the title a bit lower so where we have here title um uh a line self no not a line self i want the header to have justify content center not center but flex end yes i want the header to also have a padding of 10. all right the title i want font size of i know 24 font weight bold no just thirsty 30 and letter spacing i know lucas likes to play with letter spacing if you put one is like this one is okay i think 1.5 1.2 maybe not bold but 500 okay so the title is okay now let's work a bit on the gradient on the gradient itself so it has a list of colors colors is an array of colors that represents tops in the gradient at least two colors are required for a single color background use the background color prop on the view component and for example means that the gradient will end 10 from the left and 20 from the bottom location and the rivet contains number range from zero to one inclusive and is the same length of the colors each number it gave the colors top location where each respective color should be located if you specify specific colors will be distributed evenly across the gradient okay means that the gradient will start temperature left and from that top okay uh so now i'm gonna have to find some gradients but i'm gonna continue in a moment because i need uh real quick to be somewhere be back in one minute [Music] do all right add margin top status bar current height in the header um i i will not have any com component there and i want them um i don't want to add margin on the top i want the background gradient to go even behind the status bar let's have a look at a website like this and let's grab some gradients i don't know let's let's test this one to see how it looks [Music] like this and like this something is showing up for the height height 100 is too little 200 oh my god i closed everything that's good um i'll also be able to add like the details about the module like 101 and i can do that at the moment here just as a hard code text because all of them will be just 101 but later on we're gonna have more one on one and this is subtitle and for the color i need colors dot light dot i don't know something like that um what's up with this gradient it's kind of good i like it it's okay should i do um border radius bottom end tan and the same but it's not gonna work bottom start header header header linear gradient why didn't work [Music] style overflow hidden maybe yes so it's 20 maybe 20. does it look better or even more whoa that was cool 250 like this and we're gonna have parting bottom maybe 20 like this it's too much 20 20 yes like this is better i just want to test how it looks with color white here not that bad to be honest i think i like it but what if we invert the colors to have light on the top no no it doesn't look good the color should be light on the bottom okay so let's grab some of these backgrounds let's create a new component for this so that's going to be a new file topic header dot tsx recognitive functional export let's grab from the topic screen our linear gradient and put it in here now this is going to render the topic header topic header and in the topic header we need to import the linear gradient we need to define some styles let's copy them here we need stylesheet from react native and we need only header title and subtitle so content container no oh my god i messed it up a bit but that's okay we need to import colors from constants we need this topic we're gonna we're gonna receive it as a parameter or let's do just title where the whole topic now let's do title and we're gonna receive it from props in the topic screen we're gonna say title equal topic dot title what else all right so what's going on here should work should be the course name be the title and the topic be the subtitle not sure to be honest i will no i still think that we need to focus on the topic name but have some information like where is it coming from so i want to add some margin vertical to this title 20 margin maybe 10. i don't like the colors the colors colors i it's such a mess with the colors oh my god no so bad we'll see we'll see what to do with these colors but what i want to do right now is have a list of gradients and these gradients will be for example this one maybe something else maybe this cherry so i'm gonna put them on the side and just bring the colors in let me add the structure for them like this let me copy paste a couple of them [Music] and let's generate some [Music] this one no maybe this one it's a good one stripe oh this one is out of three colors [Music] nice [Music] hope it's gonna look good [Music] i need the darker one should be the first one [Music] mango [Music] [Music] use alt shift plus up and down alt shift yes thank you very much you probably saved me a lot of time i knew how to do that in webstorm because i was using a lot webstorm but i didn't know how to do it here so thank you very much i really appreciate that and this one now how do we get the gradient how do we get the gradient we could randomly get it where we can um i want like every topic to have some kind of his own gradient so can we get a random number but based on a seed so but first of all let's let's try with random numbers so i don't know for example [Music] in order not for the gradient not to change when we re-render a component i'm gonna probably have to say yes gradient index like this and use effect and i use effect to change this one only when the title changes not like this when the title changes let's go ahead and say i think like this basically taking a random item from there okay that's good if i come back it's the same oh yes because i need to do here gradients add gradient index so if i go here it's a different one if i go back it's a different one different one different one and so on one kinda like it maybe should also do the second one a bit transparent how to do transparent no zero zero yes no i don't need zero zero i need five five i'm gonna leave only one of them come on this is with a bit of transparency but in this case i think i'll have to move to back to dark colors here colors dot light dot basically come on give me a darker color but not black color picker something like this yeah that's good and for the gradient maybe even less like six six or three free zero zero will wow is it good no i don't like it and if we add some shadow to this container then it might even look better there is a shadow generator here so if i increase a bit of depth we can take the properties from here and add it to our header oh yes oh yes i like it and it also changes perfect white is still looks better so uh indeed i think uh it would be better to use use memo here instead of use state so because yes we just simply in this use effect whenever the title changes we set the gradient index but we can say const the end equal to um yes use memo from react use me more and this memo will be called when the title changes and we will return gradients gradients add this random position at this random position gradients at this random position so we don't need these ones we simply will use gradient for the colors yes it works yes thank you yes it's indeed much better like this [Music] does math random ex uh can it take a seed in order to give the same uh background for uh the same like topic based on this id for example [Music] oh my god it's all hard probably i'm not gonna do it [Music] [Music] but you know what i can do in the topic header can i receive here in the topic header uh i don't know id it's gonna be topic dot id i'll do some some magic there and i'm just gonna sum up all the djs from the id and based on it get the thing here i'm not sure how smart is that i just don't want whenever you refresh it to change the background maybe i don't even need i think it's a string right so with this id if it's a string i want to first of all cancel log id okay now i want to sum all its characters so id dot split like this will give me an array of all the characters now i want to reduce this array uh the number then we have a current value and what we need to do is number plus current charcoal at zero i think so i don't know what's gonna be there but let's see yes it's a number and based on this number we can say uh divided by gradients dot length and probably also math.floor on all of this oh my god that's a long formula which i'm not sure if it's correct um what's the type of this it's a number this operation actually where am i so that's going to be a function let me put it into a function uh random [Music] kinda random number based on a seed so for the seed is going to be by d gradients length it gives me what zero id split is not a function not id but seed split undefined uh yes because i need to return and it's two and if i go again it's again two if i go again it's again two and if i go to the other one for example if statement that's a zero and if i go here that's a one and if i go here that's uh interesting why if i give here let me just check for example one okay it's nine how many gradients do we have zero one two three four five six seven eight nine yes that's the last one so that's good and if i put two that should be zero if i put zero that should be eight right yes it works it kind of works so for that reason i'm gonna do gradients add this kind of random number with id and gradient's length this way every time you go to a variable it's going to have this background as you can see it takes it kind of a random number based on its id which id itself is kind of random so all of them will not change their background awesome well i'm happy with how it turned out here and we can say that it's it's kind of done [Music] so random might as the word no topic screen header it's complete awesome hit add git commit topic screen header so if we look here what else to randomize the order of answers in our quiz we could do that but i'm not in a mood to think about an algorithm how to randomize the worder so i'm gonna simply search something on google javascript shuffle array all right we will use this function we will borrow this function in our [Music] where somewhere in our quiz so screens quiz screen quiz screen we have i'm gonna add this function in the utils i don't know [Music] let me make it it's an array of anything [Music] okay so let's import this shuffle and when will we use it uh we have [Music] question let me check how we are rendering it so multiplayer multiple choice question choices okay question choices [Music] well we're question all right so then we're gonna save them that's over complicated [Music] we're also going to save the choices into variable choices equal we're gonna equal to well shuffle the question dot choices or an empty array okay but i want to do that only when the question changes not every time so i'm gonna put it into a use memo i'm gonna put it here like this and only to update it when the question changes [Music] choices so use memo let's import it from react the choice is now now we need to update here to get it from this variable here as well and let's have a look start quiz and finally not an object question dot choices where and what uh what here in that user fact question like this start quiz attempt assign to read only property [Music] is it because of this shuffle um a ray [Music] let's uh put them into a different array destructure them i mean like this okay error is on the second place if i start again errors is you know is on that last one error is here perfect yes now it randomizes the worder as you can see yes it works all right so that's i think finished we are on the roll today one and a half hours in and i'm all we're almost done with all the features that we have to implement today random order okay perfect this one is finished now uh i think it's time for the color color palette well i'm not sure if i'm ready to do that in a live stream because i have no idea how to properly pick colors uh but we can research something on that i don't know um how to define a color palette for an application i just need to know like some guides on how to make sure that it looks good hello maxim how are you doing because if i start like it's gonna look like this with pink yellow hmm [Music] [Music] first of all what's the emotion of a color of this green one because the logo is this kind of greenish like avocado nope nope let's check a couple of services start the generator i think i can set one of these colors and i'm going to i'm going to somehow get the red green from them avocado so i'm the json here we have it and no i think one of the colors should be this one and we should lock it right yes and if i change it's gonna try to generate with this one this is good what else do we need so bad at this few more please um okay this one so bad advice come on i know what i expect like to land on one that i like or what how will this green look in our application swirls constants colors it doesn't look good at all untold from home oh yeah here let's go i didn't understand hi andrew how are you doing how do you find colors for your applications i think i will need a help from someone because i'm really lost but what about this one how will this one look very very bad as expected [Music] no no no guys uh i'm not gonna do that here probably i'm gonna ask some help from my girlfriend she's a bit better with colors than me so i'm gonna just do ctrl z to our original colors that we have here magenta dark magenta sounds good but i don't believe in my powers to choose colors now so let's have a look at what else we plan to do and if there is anything that we can do here live color palette i said that i'm gonna do off camera i'm gonna try to get some help here uh we i need to set up that um the tokens for our notifications from firebase and for the app store uh i'm that's also like a boring part i don't want to do it live stream uh i have to start working on the content itself so this is gonna take me uh some time i'm planning to do this during this weekend in order to submit the application for review as fast as possible so i'm gonna start covering uh all the information and structuring it for our first module and the first 10 topics here resource link types resource link types can be documentation it can be a blog it can be a video um let's let's implement this one to be honest this can be something interesting like we will have like a list of resources here but what i want to do is to categorize them uh into the types and have like here like a small icon saying like what is this and maybe also to give credits because if i'm gonna reuse like a blog post for from a popular publication i'm gonna write here like the name of a publication does that make sense i hope so uh for that what do we have to do uh we will have to adjust a bit our data schema [Music] but again do i want to do that it's going to complicate my process of adding data but yeah let's let's see so back-end api schema first of all what i want to add is a enum type here [Music] will i be able to deploy it from where from the cloud because previous time i wasn't able so if i add the enum here with the name resource type [Music] it's not a model it should be a enum [Music] uh it should be added a bit differently so in the resource and we're going to add a field called type enum create new called resource type what resources will we have we will have [Music] docs basically official documentations that's also quite good we're gonna have um blog post we're gonna have um [Music] youtube video or tutorial [Music] what else maybe book maybe course [Music] i'm not sure if i'm gonna have them but let's add them to see not to have to add them later uh whatever types of resources will i include documentation blog youtube books courses where else are you finding information musa is asking if i could push it one hour later because work finishes at five almost in all countries yeah but um like we have people watching this live stream for from all over the world like we have people from india that are watching and now it's already night for them we have people from usa that are watching which is morning for them so to be honest it's really hard to accommodate everyone we invented time zones we don't need them um so let's leave it like this resource type and maybe also for the resource itself to add besides the type maybe credits and this is going to be a string if we use some resources from some popular websites or creators to give them credits [Music] i'm still not sure if we need this but yeah let's let's try let's see i'm gonna add that for the resources only at this moment and let's hope that it will work here now but while it is being uh deployed let's see how we are gonna add that in our source uh components resource list item here so we have our title and i think below the title we're going to have this one so for that reason we're going to have to put them inside a view the title and for example expo icons let's see youtube we need to import it all right something like that well you know what i'm gonna do with this lock thing i'm gonna put it on them on the completed itself i'm gonna check first if it's pro i'm gonna do that so if it's prom i want to render the this [Music] lock otherwise i never encourage having more than two conditions in your in your tertiary operators because you get lost as i am doing right now i'm really lost but i think i've got it so instead of 20 it should be 20 and for the color we can go with um colors dot light dot colors don't like the dark something like that yes now we have our youtube here which should also be colors.light.dark probably 22 will be enough one it's going perfect um 15 and also after this text i will add the credits for example not just.dev as an example i'm just saying view let's put them together to put them in the same line like this and for the style i can do flex direction roll uh credits so let's add some styles for this one as well uh that's gonna be margin left five okay the icon itself i think 20 is too much even it's 22 right at the moment so 18 it should be the same size as the text font size 16. align items center [Music] okay it's kind of weird to be honest it doesn't seem aligned let me be this [Music] all right so uh now i want to to have these icons based on that type that it can be so re resource type i can it's gonna be a mapping from for example youtube it's gonna be this one then what else do we have here actually it's not going to be like this it's going to be the deployment failed why [Music] so i wanted that here the type which is going to be enum i just want to see how to declare with cinah types graphql yeah it's simply enum so let's edit them from uh locally from amplify backend api schema where we have our resource let's add the enum resource types and they're gonna have as i said docs uh youtube or simply video because it doesn't necessarily need to be on youtube docs video blog [Music] docs video blog book what else dogs video blog book and there was one more course and maybe newsletter maybe i can recommend some newsletter to follow for a specific topic not sure if like newsletter books they are relevant for one specific small topic but maybe we're gonna have like a bonus uh topic advan like a general one that would recommend like this newsletter for like javascript 101. so maybe we'll need it uh now that type will be of type resource types and credits is going to be of type string okay let's go ahead and do amplify push [Music] uh now i need for all of them to provide an icon so here i have video already oh my god here i have video when i have docs uh let's have a look at them docks [Music] [Music] that one is from in typo maybe i can look at only on typo let's go with this one for the docs i'm gonna adjust the size and the color in a moment let me just finish a blog [Music] this one is from one i'm not sure what's that maybe it's some specific for for a company or [Music] but we're gonna use it uh book [Music] so hmm of course what and the newsletter okay now let's go ahead and change the size always to 18. and for the colors like this and what do we have here oh my god i didn't say yes how many days google take to review small mvp application uh i think it's up to two days around like that like one to two days but expect like to go through some loops uh to fix some issues fix some changes that we require okay so what i wanted to do there was instead of this icon i will render an icon based on the resource type icons resource type and here for this text i'm gonna have resource dot credits let's wait until it updates because now it doesn't know [Music] okay [Music] how uh how is your progress guys where are you at with your project with your your building [Music] come on let's go [Music] is there any module that when we open an image and full screen and we can zoom in and out i think yes i think there was a module for that a package for that um x4 full [Music] screen image [Music] no no um [Music] don't remember which one i was using but you can check this one pinch to zoom for both ios and android double tap to zoom it actually has a lot of weekly downloads and the repository has a lot of stars and it was updated quite recently a couple of months ago so i would look into this one [Music] okay we're still waiting for this one to to change why aws are not firebase because i have experience with aws i love aws with on aws specifically with amplify we can build uh quite easily backends but at the same time we are not limited by any features so anytime when my application grows out of what amplify or what firebase can do i can always extend it with custom services and custom functionalities on aws with the services that they provide so you have a lot of control over how your application will grow with aws and this is what i love about them [Music] okay so uploading files still a bit of data visual editor [Music] oh come on it worked let's pull again in order to regenerate the models okay and now what do we have here credits uh does not exist on time okay let me check the type resource it should have a type and it should have credits dot credits phrases does not exist on exercise so here we're gonna say uh if resource [Music] instance of right or how in [Music] type script check if variable is of type type off my brain forgot this one should be instance off resource then credits we have and here null cannot be used as an index type type undefined cannot be used as an index type um i know uh were zero not zero but [Music] unknown and there i will put something for unknown with the same colors now it should work but we need it only if a resource type is defined right and in this case i think we don't need this one yep like this [Music] come on [Music] and resource type now nobody has anything but if i'm gonna go ahead and change some data for our content here if i'm gonna change it for resource for example this one if i'm gonna say the type is docs if i'm gonna save and the credits is where credit be free school let's refresh variable yes we see the dogs from from the free school i'm gonna work a bit on with for example title i'm gonna add some um probably not on the title i'm gonna do it only if it has this view margin top 10 okay and for our this one the this view line indicator line indicator height can we say height 100 percent yes but it should be even more 110 okay now it works but as you can see it looks good in this situation it doesn't look very good when we don't have the second thing so i'm gonna say margin top here let's add here more checks we also want to render this only if we have resource type and yes now it works perfectly and if i'm going to go ahead and change this one to a video i don't know not just.dev save and if i'm gonna check it again this one is a video probably it has too much margin top so i'm gonna add five and now it looks perfect for the title uh i'm gonna do font weight 500. okay like this and for the credits dark gray even darker gray one maybe this one dark yes let's do it like that alright so here we have our resource types and credits as well so let's do it add git commit and this feature resource link types completed but it should be in week six completed so perfect now if i check the status from week six come on we have managed to finish quite a few tasks today in just two hours so we have finished the topic screen header which we can see here uh with a nice gradient uh style header we have updated the name of the profile page so if i go on profile page here i don't see like that random name i see my email address we have moved our api from using the api key authorization to using cognito based authenticate authorization uh we implemented the pro resources in the database so now we can manage them from uh from our database and now here we see them as prior resources uh then we have randomized the word of our answers in the quiz which will uh give us a bit more dynamic to the quiz and we implemented resources resource link types that will specify if this is a video some documentation books courses and so on and also we will give some credits to uh people that have created these resources so that was it for today that is everything that i wanted to do uh today in the live stream um during the weekend i'm gonna finish everything and i'm gonna work on adding the content for the modules to yeah to start having some content already there and um and and and yes then i'm gonna submit the application for review on apple store on a google play store and hopefully by the next week i'm gonna have uh the demo ready so you can download the application right away uh so guys if you have any questions uh we can stay for five minutes uh otherwise we can see each other at the demo day and i remember you uh i want to remind you that uh the deadline to apply uh for pitching at the demo day is on august 10th so make sure to check out the blog post if you go to the not just dev website not just.dev and you can check the latest blog post here here i explain all everything how to create your pitch how to structure your presentation then you'll have to record it and submit it here uh in this forum so make sure to check the blog post thank you very much for being here with me till the end i'm not gonna do the proper outro for this challenge because it's not done yet i will see you all of you next week at the demo day i'm super excited to see all the projects that have been have been started during the last seven weeks and i want to see all the progress that you had during this period of time i want to encourage all of you to apply even if you didn't accomplish the goals that you have set that's perfectly fine your project shouldn't be finished if you have some progress if you have moved the needle that's already good and that's already worth being appreciated by the community and shared with others so don't feel shy about your progress go ahead and submit the pitch because this is going to at least improve your presentation skills it will improve your skills to present your ideas your projects and it will yeah it will be better for you you'll learn new things uh where do i apply you check out the blog post on nodjas.dav you can find the link in the description of this video if i'm not mistaken or i can paste it right away here in the chat so in that blog post i explain everything about the structure and how to submit will you announce the winners live vets that's the surprise we're gonna do the demo day next week next friday at the same time at three o'clock gmt plus one basically uh two hours before now if you're watching this live uh does it have to be a startup or like a personal project there is a great line between these so um personal projects as well like definitely go ahead and submit them because a lot of startups are starting as a personal as a side project that that was intended like to to be built like i don't know for learning purposes or maybe for one very specific need where maybe you have built a project for yourself only and that's also fine share your journey and share your learnings uh with the world but in where we can buy not just dev merchandise do you like my t-shirts would you love to be able to buy this let me ask a poll [Music] because uh i've been playing around with a company i'm looking for the best uh manufacturer for these ones and i think i found one that which is really really good quality for the t-shirt and we'll see let's go excited for the demo week i'm also super excited i want to um to see all of your projects guys all right we already have seven votes and all of them are a yes which is exciting also we have uh i've been playing around with designing a water bottle what do you think about this one i really really love it like with all that our knowledge development maybe the logo we will do it a bit bigger but it's going to be like a nice prop to always remember to stay hydrated so this one some secrets i'm sharing with you and we also have a hoodie do you want to see a hoodie do you want to save a hoodie or should i keep some surprises for later make laptop stickers that's also a good idea the designs the design of a bottle but in a t-shirt like with all with these elements that would be interesting if you have some ideas shoot me an email if you're a designer that would even be better yes i'm almost done alright um please show uh i think i will show you during the demo day i'll try to wear that hoodie and now i have to go uh it's been a pleasure guys to to code with you live here and to see so many people that are joining every week at the same time helping me and following my journey as i said i'm watching i'm looking forward to see your presentation your demos so make sure to submit your peaches uh by the deadline and we're gonna see all of you during the demo day after one week friday 12th of august thank you very much have a nice weekend uh stay hydrated guys write clean code build awesome startups and

Channel: notJust․dev

Views: 3,763

Keywords: vadim savin, not just development, notjust.dev, live coding, full stack mobile development, notJust Startup, react native tutorial, notjustdev, react native ui design, react native project, react native for beginners, learn react native, build a startup with react native, get started with react native, react native tutorial for beginners, aws amplify, react native with aws amplify, react native authentication, aws amplify authentication, aws amplify tutorial

Id: JRA8EjZ8SvM

Length: 128min 11sec (7691 seconds)

Published: Fri Aug 05 2022