in this video you're going to learn how to develop this full Stack mobile application not only for Android but for an iPhone as well this is going to be a completely beginner friendly tutorial so if you're a non-technical person and you have never developed a mobile application and even if you have never written a single line of code you can still develop this mobile application we are going to develop this application in react native which is a crossplatform framework that means this application we can launch on Android on iOS and any of these platforms we are going to build our back end in super base and we are going to integrate AI with the Deep seek I have provided source code this project absolutely for free the link is in description again this is a completely beginner friendly guide and if you have no experience in developing mobile applications this is going to be your completely step-by-step guideline before we start please do not forget to subscribe this YouTube channel our goal is to reach 100,000 subscribers before 30th of June 2025 and for this particular video our goal is to reach 1,000 likes so please click on that like button all right before we start development of our project I have prepared this short presentation so anyone of you who have no idea about mobile apps development and have never developed any sort of mobile applications and an absolutely beginner and non-technical person so this few minutes presentation should be enough to give you a complete idea about mobile application development and especially in this particular video what will be the Tex stack that we are going to use what will be the approaches that we are going to use so if you already know about mobile application development and you know what is native development what is crossplatform development you can maybe skip this few minutes presentation but I highly recommend you watching this few minutes presentation because it will actually help you to like understand better and especially what tech tack are we going to use in today's video so whenever you want to develop a mobile application there are two ways to do that one is native development and another one is crossplatform development in in Native development if you want to develop an iOS application we choose something like Swift what is Swift swift is a programming language that we use to develop iOS applications and Mac applications and for Android application development we mostly choose a programming language which is called cotl again in Native application development if you want to develop for both Android and iOS you develop separately an iOS application and then you develop separately an Android application while in crossplatform development we got multiple Solutions there but I will only mention three first one and most popular one these days is called react native this is a framework by meta platform then there is flutter this is by Google then there is cotl multiplatform this was very recently launched the most popular ones are actually react native and flutter if you're choosing mobile application development as a carer I recommend you using react native because for re native developers there are more jobs available than flutter most of the companies these days use re native for the development of their applications and I highly recommend using react native as well if you interested in learning more about react native versus flutter you can actually read some of these very famous articles the most helpful one is actually on Reddit you can simply just go to Google and look for react native versus flutter and then you can actually find this Reddit now if you're choosing react native for development of your mobile applications there are two ways to do that one is developing mobile applications in react native using CLI and another one is using Expo what is expo Expo is a layer on top of react native that actually help us to develop review and deploy react native applications more easily Expo literally makes it very easy for us to like develop and test mobile applications when we are developing crossplatform applications on Windows the most challenging part for us is actually now to test this application on iOS devices the problem with iOS devices is if you're developing your application in Rea native and you're using Windows you cannot easily test your app on iOS now during development of our application it is easier to test Android version while it is really complicated to test the iOS version so Expo actually has a beautiful solution for that Expo has a mobile application called Expo go for both iOS and for Android you can download this application on your both iPhone and your Android and now you can seamlessly test your application on both Android and iOS without having any issue and that to within like just few seconds we'll cover further details on this topic later in this tutorial but let's get back to our presentation now you have more clarity about crossplatform and about Native development let's not talk about actual development of our application to develop our mobile app we'll be using AI code editors so we'll be using something like cursor or wind surf or maybe a vs code with an AI extension inside vs code there are extensions like GitHub copilot or Klein or rine you can use any of those extensions inside vs code to write code with AI but in this tutorial we'll be using cursor AI cursor actually makes it very easy and simple for us to write code and develop applications you can either use cursor or wind surf whatever you want to use both are very similar similar both are folks of vs code so functionality will be very similar whatever code editor you'll want to use next Once you have chosen what AI code editor are you going to use next step is now to develop front end of our application we'll be using Tailwind CSS to create front- end of our application this is an actually open source framework to create high quality UI designs for back end there are multiple options but I have only shortlisted two you can either use super base to create backend for your application and to create like database for your application and to manage authentication system and all of that stuff you can manage easily inside superbase or you can use Firebase so both superbase and Firebase are really famous platforms to create backend but in this tutorial we'll be using super base for air integration we'll be using deep seek because this is probably one of the cheapest model out there right now but you can use open AI or clot whatever you want to use but we'll be using deep seek so this was kind of an overview and very basic presentation to just give you an idea about mobile application development and what options we have and what text stack we'll be using now before we start setting uper project in our code editor we need to just finalize requirements of this project this is really crucial step because you should understand what exactly are you developing to finalize my requirements I'm just using deep seek you can use chat GPD or maybe CLA I just explained my idea to deep seek and it gave me very detailed requirements document I have provided the link to this requirements document in description you can just copy it from there all right once you have got your requirements document or maybe you have got my version now next step is actually to set up your development environment now if you're a completely non-technical person and you are an absolutely beginner and you have never written any single line of code you have never developed any mobile application so these next couple of steps are for you first step is installation of node.js and then second step is installation of AI code editor which is in our case cursor AI you can use wind surf or vs code whatever you want to use to download nodejs on your computer simply just go to Google and look for nodejs download click on the first link and then just download the windows installer simply just click on this button and then it will actually download nodejs locally on your computer now next step is you simply just double click on that whatever you have installed and then simply just click on next next next because I have already installed nodejs on my computer I won't do that again but you can simply just like click on next next next and it can simply just install it locally on your computer once you have installed nodejs on your computer you just now need to verify the installation to verify installation simply just go to your search bar look for CMD open that and then uh this icon simply just copy this command from here node and then simply just copy this command from here and press enter and then you can see the version here if it is showing you the version then that means installation is done if it is not showing this version here that means you need to install nodejs again once you have installed nodejs on your computer next step is actually to download and install cursor cursor is an AI code editor you can come to this website cursor. comom and download it for free you can simply just log to cursor using your Google account and you can start using the free version of cursor if you want to use any other code editor you can use you can use something like wind surf or maybe A.D or maybe vs code whatever code editor you want to use that doesn't matter really but what you cannot use is actually something like bold. new something like loable dode those web based AI code editors you cannot use those you can only use the native AI code editors on your Windows or Mac now once you have downloaded cursor simply just open it on your computer this is how it will look like when you'll open it for the first time simply just click on open a folder I'm going to name my folder noes taking react native just name anything after that just click on select folder and now cursor will actually open your folder inside cursor if you're using cursor or any other code editor for the first time and you're confused about its interface I highly highly recommend you watching some basic videos about using AI code editors you can find some videos on my YouTube channel I can leave the links in the description there is a very detailed video about cursor on my YouTube channel you can just watch this video to master cursor but to set up everything quickly and to create an empty project just click on these two buttons on on this top right section simply just click on this button and then this button this will just bring these two panels over here one is actually the chat cursor composer panel the another one is actually a terminal panel terminal is where we will actually we can run our commands to create our project or for any other purpose we can run our commands here and inside our composer whenever we want to like create something write some code or like ask to do some changings in our code we can actually ask inside this cursor composer agent section so let's just create an empty project here we we actually because we actually going to use Expo so let's just create an empty Expo project inside cursor all right to create an empty project and to run a command to create an empty project just go to export documentation page you can simply just go to docs. export. or simply on Google look for export docs and you can simply just click on the first link right after you'll open this dos. export. def page you can find this command here simply just copy this command from here and then let's come back back to cursor and paste that command over here once you'll paste here click on enter and after that now it will actually ask us to name our application let's name our application as notes make sure that you're using small letters not Capital Notes app let's just name it Notes app all right so after that it will now start creating some files automatically it will run this command which is npm install that means it will install dependencies for our application what are dependencies just considered as code libraries that it will actually install for our project after just a couple of minutes it has now installed all of these dependencies and now our project is fully ready next let's just move to our project directory on this left side you can see it has created this empty project for us with with all of these folders and all of these files here but on Terminal you see that our project is not right now inside our nodes app directory so to do that you can simply just click on CD and then write our Notes app n o Tes a p and now we are inside our Notes app next just run npm start to start this project and to open this project on your mobile applications on expoo mobile applications to test that if your project has been created or not just run npm start and now in a second it will actually give us a QR code to scan on our mobile applications here we go it has now provided this QR code to scan on our mobile applications now either you are using your iPhone or maybe your Android phone just download that expoo app from that app store or from Google Play Store on app store just look for Expo go and then you can actually find this app with this logo similarly on Google Play Store if you're using Android just look for expoo and you can actually find this app with this same logo before we test our app on our mobile and scan this QR code make sure that you have signed up on expo. dev and created a free account over here just provide your email address and your password and create a free account over here once you have done that now you can actually scan this QR code on your phone and open this application on your phone I will simply just scan it and I will open I'm just opening this Expo application on my iPhone and now it will actually start opening this application and there it is you can see this is an empty Expo application that it has created this has this has some empty text and empty content and that means our application is created our empty application is created and now we can actually start development on top of it once we have tested our application now we are actually good to start development make sure that your main root directory is open inside cursor not the Parent Directory of this folder make sure that your main root directory is opened inside cursor now next step is we'll actually create a new file inside our main directory and we'll actually name it as requirements MD remember that requirements file that we created we are now going to copy that content over here inside requirements. MD file so just copy this content from this file from here and then let's just paste that inside requirements. m file this way every time you're actually going to make any changing cursor will actually know understand what exactly are we developing now let's give a first command to our cursor agent make sure that you have requirements. MD file tagged inside here in this chat and now let's just give an initial command to cursor agent please review the requirements. MD file we are developing a notes taking app please review our requirements and then just create a basic home screen design we'll implement T of the features later this is not a very good practice the way actually I'm giving this prompt but this is like as simple as it can be this is very basic prompt there is no science behind it you can simply just like explain in your own words because we have already provided it details in in requirements stmd file so cursor will actually go through this requirements stmd file understand what it is building and now we'll actually start developing that before I press enter there's one more step that I want to mention that is actually tagging our documentation of the text tack that we using inside our project that means because we are developing our project in Rea native using Expo and also for back end we'll be using something like super base for front end we'll be using something like Tailwind CSS so we need to make sure that we add we tag all of those documentation in here so just go to settings just click on top right button go to features and then in here just click on add new docs simply here and then provide links to your documentations here I have already provided link to my all of these documentation that we using in this project but what you need to do if let's suppose if you're using Expo good documentation simply just copy this link from here and then paste that link over here like this enter that and then give it a name and then it will actually tag the documentation it will actually fetch all of the documentation in here right inside your cursor ID so that that way actually cursor will be updated about the latest updates in code so that way will actually not make too many mistakes it will make comparatively less mistakes so make sure that you tag add all of these documentations I have added Firebase documentation as well I have added super based documentation as well so whatever text tack we'll be using just add all of those documentations here now simply just click on submit and now let me just make sure that requirements. MD file is tagged perfect and now I'll just click on ENT all right so what cursor AI agent will do it will actually scan our entire directory it will go through our empty project that we have just set up and now will actually create like edit our page. TSX file and then like make changings in that and now it is actually creating that home screen. JS file and so it will actually take care of all of the code side you don't have to write any code it will write code what you'll have to do is just know what it is writing just like if it is like making any errors or any mistakes it will just show all of those syntax errors and if if there's any issue any problem you can just note that and then let's suppose if during learning project if you find any bug inside app then you can explain that to her cursor AI agent and then we can just like like take care of that all you'll have to do you can simply just click on accept accept whatever it will create just make sure that you just create on accept if you're a absolute beginner I don't recommend you going through code at this stage otherwise you can get confused if if you want to like learn to like write code or like at least understand code so I highly highly recommend that whatever code it has written so now we can actually go through each of these files app do so now it has written this code for that after that it is not tagging this homes screen. JS file over here this is the content of homesc screen. JS file that homescreen doj file is actually inside screens now it is like importing that file inside that app so then it has updated this package.json file that means it is actually importing some more dependencies inside our project all of the dependencies in our project are actually going to be tracked inside package.json file and similarly it has made some few other changings now let's start our project again just just run npm start press enter our project is running let's just run our project I just run our project on on our mobile app and it is giving some error so I can see that error over here so now the best way is actually I'll just copy this error log from here all of this copy that paste that inside cursor cursor agent and then now I'll will say and I open my app in Expo go IOS app it shows this click on submit and now it will actually go through that error and it will understand that issue and hopefully I think there was a dependency error so now it will actually fix that error click on accept all right once that's done what we need to do we need to just simply just run our npm install command so any new changing that it has done inside package.json file we just going to like install all of the required dependencies so now it is installing these dependencies and apparently when we'll run our project now it should fix our by the way because every time you can actually open your project or in your mobile application but like if if if you don't want to like do that every time you make like a small minor change you can simply just run your project open your project in in your browser as well this time I'll show you that how you can do that perfect now it has installed all of the dependencies let's just run our npm start once again there was an error plugin error fair to resolve plugin for Expo router okay fine all right after few changings error is removed now and it is working fine here and I have just opened this project on web as well so if you just open this URL it's a local host URL I just open it in my browser and now I can see I can access my app in web as well so let me just click on press on enter add a new note and click on Save and I can't see it here cool perfect let's just ask it it might give any error here okay when I add a new note it does not show that on my home screen or please see the attached storage related error this might be the reason but whatever isas is reason please fix it so I think we're actually using this like library for storage so I think it was async storage so there might be a storage related issue so far we are just like doing that storage locally on app if you're opening this on app or like on on your web browser so it's not linked to backend yet so we we'll actually do that later all right I can see in problems tab there is still this error this error is actually related to add. TSX file this file and I can see there is a storage related error it's an error so let me just give this error here in cursor composer cursor will actually deal with it that error is fixed now I'll just restart this server npx Expo start clear and then it will just start a new clear session I'll just open this once again just reload this one let just yeah perfect so it's working fine now perfect so I can add a new note now perfect I'll just add that I can save that and yeah so that note is being added now this is perfect next step is now let's just add an option to like add nodes like voice to text kind of nodes now add nodes functionality is working I want to integrate Voice to Text functionality there should be an option to click when user click on that it should allow user to speak and then when user speak it should convert that into text and then add that as a notes I'm just press enter all right it has just made this changings let me just open our web version and yeah I think that mic option is here let me just click on that when I click on that nothing happens when I click on microphone button nothing happens please navigate the issue does it show anything when I click on this and does it show anything on Terminal let me just see no it doesn't show anything on Terminal Okay cool so let's see what what's the problem so we need to make a few changings for sure voice recognition works properly first let's add the necessary permission to your app. just okay fine it needs to add some per permission so it will actually every time you open that you actually try to open that on iPhone as well so like you you need to like when you submit your application on app store or on or on Android store so you you will have to like provide those permissions make sure that I mean whenever user install it so you can ask for those certain permissions from user so yeah continue with uncommitted changings okay fine yeah several important changes to fix okay fine all right let me just run this once again in a fresh so we'll test now this time we'll actually test it on on iPhone and on Android both on web as well so let me just refresh our web browser from here and see if it is working inside our web it is still loading that it load then I will open it separately for iPhone cool I think there is no perfect okay cool let me just open that I'm just opening it on iPhone there's an error when I open it on iPhone there's an error so let me just try to fix this error let me just copy this error from here uh invariant violation your JavaScript code try to access a native module that doesn't exist okay so this is due to actually I think accessing microphone hold on let me just copy this from here I'm just add to composer when I open my app on iPhone this is what it shows all right so that error is fixed there was an error because we were trying to use that react native voice so in expoo so yeah there was actually an error so it is fixed now let me just try to CLI testing speech recognition perfect so yeah it is working now testing speech recognition perfect okay but whenever I click on that it just says that testing speech recognition but it does not allow me to like speak testing speech recognition cool perfect okay yeah all right our app is working fine now all of the functionalities are working spe to text is working as well let me just give it a note title and then let me just click on that please write something and it has just written please write something click on Save and it will just create a new note which is which says please write something perfect so now we are actually good to go and we can actually start implementing like start creating our developing our backend so to do that what we're going to do we going to actually integrate superbase into our project so this is superbase just go to super base.com click on sign up start your first project to create first project on super base it's absolutely for free you won't be charged anything for the first project but after that you you'll be actually charged for that so first project you can create for free so just create an account on subase just log in then click on add new project simply just click on new project choose your organization it will actually ask you to create an organization so I have created one and after that just name your project let's just name our project noes taking and after that just choose this micr plan which is good enough for us and if you have already created your first project so after that it will actually cost you $10 per month for second project for third project so just choose your location I'll just choose my location as London and after that just copy your Pro password whatever password you have created just copy that let's just paste that here somewhere let me just paste that project here and create a new project so I'll actually remove this project so if you try to like copy my password don't worry about that because I'll remove that project right after this tutorial so there are some keys now that we actually need to put into our project so like this is Project URL this is Anon key this is the service key we need to add all of these Keys into our project first let's just go back to cursor and ask cursor to now integrate superace I want to create a back end for my project any note that user adds in my app should be saved in back end please go through super base documentation and create back end for my project let me just I think it has written super base it's not super base it's super base let me just click enter and let's just see what it does all right so first thing first we need to install super base as a dependency so let's just install that it's an mpm package so it just installed that all right so cursor composer has created some superbase related files one of them is actually superb. TS uh then there is uh s SQL this uh we need to run this SQL query inside SQL editor in super base I'll just let you know in a minute after that it has created this EnV file in here EnV file and we need to uh like add this superbase URL and Anon key from superbase so let me just guide you what you need to do so after that our back end is fully ready so first thing let's just let me just add these two keys here so let's just go back to super base let me just go back to super base and first thing that I need is super base URL so this is superbase URL let me just copy that from there and then paste that over here next thing that I need to find is this key uh where is that an on key I'll just copy that from there and then I'll just paste it here if you somewh are not able to like find these keys from here so what you need to do simply just go to Project settings after going to project settings just go authentication and in authentication you can find your keys sorry in API key not in authentication inside API key this is Project URL and this is your an on key and then there is a service key we don't need service key right now but when it will be needed you can find all of these details from here project settings and then API key all right cool perfect now this is the SQL editor section simply just go to SQL from here just go to SQL editor and now we need to run that command here that actually it created that SQL query this SQL query I'll just copy that from here and I'll just paste that over here I'll just click on run and then it it has now created this success node rows return that means that notes table is now created here perfect awesome so that is done that was it related to like backend that's it now our any of the notes that we actually create will be automatically saved in our back end so whenever like user new new user creates a new account then all of that will be saved inside inside our super base so this was it about super base I mean there is no complex things related to that so this is that easy to build like backend for your application all right the next step is integration of d seek into our app to have a functionalities to integrate deep seek there is a deep seek documentation you can actually access that documentation for API Das do.de seek.com so this is where we can actually we're going to use this documentation into cursor and then we're going to integrate deep seek into our app to get API key for deep seek you need to come to deep seek.com and then click on this API platform button today this deep seek API platform URL is not working I think for some reason it is down deep seek website is down due to like high volume of traffic due to this recent open ey versus deep seek war that just started so that's why I think it is not working but very soon when you'll be watching this video hopefully it will be working so yeah so it should be working by then but it's really simple to create an API key from here the only problem that we'll actually face here you'll have to top up some balance maybe like $2 to like create an API key so but if you don't want to do that if you want to use like a free uh completely free version of dpcp key so you can actually use something like fire works. a on fireworks you can simply just click on sign up and simply just sign up login with Google simply just log in with Google and after that it will give you credit worth $1 if you just go to the API key section then click on create an API key just name something to your API key and then just simply create an API key it will give you a simple API key and after that you can simply just copy that API key and use in your project but to integrate fireworks. a into your project the documentation will be different than the documentation that we have for deep seek this documentation so that that I mean if you want to use fireworks in your project so you can use like this documentation instead of using this deep seek documentation because this deep seek documentation is actually for the purpose when you're going to use this deep seek like platform API key but right we actually going to use like let's suppose if to use like fireworks AP ke so that way actually you can use this documentation I personally recommend you using DCP key from the official website site because the cost here is very very Less in here the cost is too high you can see the cost for deep seek R1 for per million tokens is $8 here but officially on its official website it's around $2 so the cost is almost four times more than the official DC website so I recommend you using from here so now what we're going to do now I I have actually and DC kpi key already created that I created for another project we are going to use that by by by the time you'll be watching this video this function should be like this option should be working for you and so let me just like guide you that how you can integrate deeps into your project and after that we'll just use our test API key and we'll see if if that will work or not but I do not recommend using any like from using a deeps AP from any other platform rather than using from the official website all right so to integrate deep seek make sure that you have added deeps uh API key documentation in your cursor make sure that inside your documentation tab you have added link for your deep seek API documentation after that just now I want to integrate deep seek API key in my app to add a functionalities please review this documentation all right so let me just rename it from here to deep seek and after that I'm just going to tag deep seek oh sorry I think yep here it is this is the latest one so let me just add this one let me just press submit now cursor composer has actually integrated DEC and then it has I think added an environment variable here I'll add my D CPI key here and after that what I'm going to do now I think it has added AI functionality already into our add tab so what I'm going to do I'm going to actually add my API key here in my environment variable I won't share that with you I'm sorry I have only one API that I accidentally created for another project I'm not going to share that here so I'll I'll make sure that I I do not share that on my screen but after that I'll actually then test or app and see if everything is working and then I think final step would be to now create then build and see if everything is working fine and that's it all right DSE is integrated and I have added environment variable and but the only problem is because it's down so that's why I think that API key is not working I need to create a new one and to access new one whenever dcq will be back only then I'll be able to do that by the way if you want to use like openi API key or Cloud API key you can use any of those but we use DPC because it's is cheaper far far cheaper than using open a key so that's why I added that in this text tack but due to like technical issues from deeps that's why actually we cannot test that AI functionality like again I can see that like the functionality is working but we need to just like create a new API key whenever it will be back by the time you'll be watching this video you should be able to like create a API key on deep seek directly and then like use this I functionality other than that everything is working on our app for now as you can see we are able to add a new nodes we we can actually write a note yeah we can use like this text to speech and we can add a new note so our app is working fully fine we got our backend running we called our AI integration so I think next step is now to I'll just guide you about creating the builds and then after that I think publishing this app this that is actually topic for a separate video but related to development I have almost covered all of the aspects Now to create build what you need to do you need to go to Expo Dev make sure that you have logged in into your account let me just make sure that I do not share my login details all right so once you have done that so make sure that you have logged into your account this is how like all of these builds are actually shared like this so I created this build so this build is created like that to create builds in expo Expo has provided this very detailed guideline you can simply just go to this documentation URL which is docs. export Dev /u/ setup go there and then you can simply just run this command npm install and then es you need to just like install this particular command and then after that simply just log in with as login after that to login I mean whatever login details you used to create your Expo account just do that and it will actually just then connect your terminal will be then connected your project will be then connected with your Expo account and after that you can simply just es build configure and then I think for Android es build platform Android so you you just need to like run these five different commands here right now actually video is getting too long so that's why I'm I'm just actually leaving that for a separate video but the if you want to like create a separate build this is this is the guideline I will leave a link for or a build dedicated build video in in the description so you can just like find that from there but yeah so this is how you can actually create build and once you want to like once you have created your build on you want to access your build this is how your build will actually show inside your project like just like that so you can simply just success your build like that so so yeah I hope this was really helpful for you I have tried to cover maximum things in this video if I have missed anything please just do let me know in the comment section and then I can create another video on a separate topic but yeah do let me know do let me know about your feedback and I'll see you next video bye-bye