React Native Killer... and No One's Talking About It

0:00 I honestly can't believe what I'm about to tell you is true, but I just built a native Swift iOS application using no code, 100% with AI. I did the mirror method where you take Xcode and cursor and actually use cursor to do all of your noode vibe coding without writing a single line of code. I built a hotel booking application that takes in live data using the light API and it works. In this video, I'm going to show you step by step how to set up cursor, how to set up Xcode, how to connect an API to bring in over 2 million live hotel data. By the end of this video, you'll know how to mirror both of them together and build out any project that you want. So, if you got an idea, if you've wanted to write native, but you're scared of it like I was, trust me, these two things

0:46 together are going to make it so easy, streamlined, all your errors are going to get fixed in cursor, and then all you have to do is set up Xcode the right way. Let's jump into it. I can't wait to show you what I actually created in this video. Best part, we actually start coding. So, I recently did a challenge for myself to see if I could actually build a full application from Idea to the App Store in 24 hours. There's a video right here. You guys could check it out. And it actually got approved and I was using a no code tool called ROR. But in this video, I want to try something completely different. I want to tackle native Swift iOS using cursor. So, I'm going to be building native in Xcode and then I'm going to be using cursor to actually do all of my coding. So, I'm going to show you how to set all of this up and you're going to be able to do this for any project that you're building. So, we have a live business called zello.com. It's a hotel booking

1:33 business. You can go in there, you could buy, you get the cheapest rates. We're using a light API. Gives you access to over 2 million hotels worldwide. I got a bunch of videos about it. We've launched a Zello through this platform. So, what's great about light API is this is a full white label solution. You set it up, you sign up. All the links are below if you guys want to check it out. You can set this up yourself and have a live booking.com try velocity competitor within minutes. You add your credit card, they do everything. Customer service, they run everything on the back end. They take care of all the bookings and you get a percentage that you set yourself in order to actually make money. And then they have everything in the development center where you can actually build out chat bots for travel. We've already built a website. We have a few other things that are in the works. But the last thing we're missing is this actual native application and that's what we're doing today. So here is the dedicated SDK that light API provides

2:19 for Swift. So we're going to use this to build our application. First things first though is setting up cursor and setting up Xcode. So let me walk you through this. So you just open up Xcode. It's Mac only, but you just download it. And then we're going to create a new project. So we're going to go to app. We're going to name this Zello. So this is Zello v1 native. Then you select you got your organizer ID, which we have. We're going to hit next. And then we're just going to pick a folder. So AI projects Zello. We're going to add that in here. It's going to create the actual folder structure. And you can see this is essentially the template that you get once you set up Xcode. But the catch is we're going to now open this in cursor. So we're going to open up cursor and we're going to open the same folder. So we're going to be using cursor as our noode editor. So now we're going to open

3:04 this up and we're going to go v1 native. So as you can see I'm going to be flipping between these two. This is exactly the same thing. Here is Xcode and here is cursor. We got our content view and then here is our actual application. So, first things first is you need to set this up. So, we're going to click in here and we're going to take off landscape. It's a portrait only and then we're going to get rid of Apple Vision. We're going to get rid of Mac. We're going to get rid of iPad. So, it's an iOS only iPhone application. So, back to Cursor. And then what we need to do before we start, this is very important when you're doing this, is we need to now give cursor all of the rules in order to build iOS native. And the rules are here. So what I did is I pulled up a couple of the websites that we're going to need. So the first one is the Swift

3:51 open language documentation directly from Apple. So we're going to go back to cursor and if you hit add, and then we're going to say docs, we're going to say right here, add new doc. So we're going to paste that URL. And now this is the Swift Apple doc. We're going to hit confirm. So that's one. That's going to add it into our rules right here. Let me close that right there. Apple docs. You just have to do this if you want cursor to perform the best. There's also a UI design dos and don'ts. This is going to make your app feel native using cursor in Xcode. So this is another one. So we're going to go back to cursor and then we're going to say add. Then we're going to say add new doc. We're going to paste that in there. And this is the Apple UI tips. This is just going to

4:37 guarantee that you're going to get the best of the best. So that's two. And the last one is Swift UI. Again, this is more about the actual interface. So this way you're going to be able to use everything that Apple offers directly in Xcode, but you're going to do it in cursor. I keep repeating myself, but this is very important for you guys to understand this. So we're going to add docs. We're going to add the last one. And this is Apple Swift UI. And that's it. So now we have the three rules and then one very very important thing what you want to do is you want to go to rules and memories and then right here where it says user rules this is what I write you are a native swift developer using the light API SDK. So that is the one I told you which is here and to connect a hotel booking app do not assume anything when it comes to the API and endpoints. always go back to the

5:24 let me edit this to the SDK to the light SDK for the correct endpoints and API connection. So we don't want it to assume anything. We're going to give it very very specific instruction so we can give us the best code. So now we have everything. So now we're going to go to that. Make sure we have all the docs selected. So we got Apple Swift, we got Apple UI tips and then Swift Apple docs. So now we have all three things. Then the next thing we need to do is we need to get a solid prompt. I am developing a Swift native iOS hotel booking website. I want you to write all code native to Swift. I'm going to be using cursor as the noode AI tool, but I also have the same folder open in Xcode. I want you to understand that everything we do, I'm

6:10 going to be testing it in Xcode. So again, a little bit of context for the agent so it really really understands. We're going to switch this to cloud 4. I have the light API documentation and all API keys to use live data for this application. Let me know where we can add the API key correctly so Xcode can use it. Before going to agent mode, I'm going to go to ask mode and I'm going to say, do you understand? So yes, I understand you're developing a Swift native iOS hotel booking app using Swift UI and you'll be using both cursor for development and Xcode for testing. You have the light API documentation and keys for live data. Let's first explore the current codebase to look at it. So, it's going to set up the first foundation piece for this. And the great thing is when you go to Xcode, all that code that you're changing, it's going to be actually doing it inside of Xcode

6:57 because you're using it as a mirror essentially. One more piece is the SDK. I'm going to say this. Here is the official light API swift SDK. And I'm going to paste a link. Here's the link. We're going to copy that. Go back to cursor. And then we're going to paste that in here. And now let's see what it says. And here's the steps we need to do. So again, I'm using ask mode. I'm having a chat. I don't want it to just start hallucinating and creating code. I want to make sure it understands every single nuance that I want. So first thing, API key security setup. So using info.p list. So set this up in Xcode. Perfect. Using configuration files. This is where the API is going to be stored. Then we have the service implementation. And this is all using the light API documentation that I provided. That all looks good. Then we

7:43 have the hotel booking views. Let's create the Swift views. That's fine. And then we have the API values. This is exactly how to do it. That's fine. And then we have testing Xcode. And then key features. We got security management, the city search, minimum rates, error handling, loading states, image loading, and star rating display. That's perfect. All right. So now we're going to switch over to Xcode. We're going to go to file, and you're going to go to packages, and then say add package dependencies. And right here, you would paste this URL. As you can see right there, Swift SDK connected Zello native add package. So now what this is going to do is it's going to add the light API SDK into our Xcode project. Make sure you guys select your target because it's not going to know what it's being used for. So now we're going to add that package. And now you can see down here on the left you

8:30 have the whole API SDK connected with everything all the screens API help extensions all the API connections booking API. So now it's going to have the best understanding of exactly how to set set this up properly. Again, we're going super detailed here because I'm building a real product here. If we were just doing a demo, you don't have to do any of this, but I really want to show you and build this in public to one, see if I could do it, but two, to show you the steps. And again, you could do this for your own product. I'm just using this as an example. Okay, so check this out. I already caught it making a huge mistake. This is why you have to be super careful before you start doing it is it already started coding and I'm like, hold on a second. How are you going to know what to connect if you don't access the SDK? Why not add it into this project? We have it in Xcode,

9:15 but it's not added here. And look what it said. You're absolutely right. I was making assumptions about the SDK structure without actually seeing it. Not very helpful. This is why this step is so crucial. So now we have it set up here. And then we're going to clone the repository right inside of this project. So now cursor actually has access to it directly inside of the project. And there it is. See up here? Now we have the Swift SDK and cursor can access this at any moment. So now we can actually start coding the first thing. And the first thing I want to do is I want to connect the API, put my keys into it and make sure it actually connects directly to the API in sandbox and in production. Before we code anything, I want to set up the light API keys and make sure that the connection to the API works properly. So I know how to do this, but

10:01 I want to show you exactly how you need to set this up yourself if you're doing this for the first time. I've done this already a bunch of times, but I just want to go step by step so you guys have a clear understanding of what to ask, what not to ask, and how to actually do this so it doesn't just go off and start coding stuff that you don't want or get halfway through the project and then break it. Okay. And what it's doing now is it's setting up the structure for the light API. And then it's actually building a simple API configuration and test file. So, we're going to be able to actually see make sure that it connects everything properly and then we can move forward. But before we do any coding, I'm going to set up git. So, we're going to actually set up the initial git so we can have this project and we can start versioning right from the beginning. Like I said, this is going to production. I'm going to take however long it takes to build this out fully, but it's going to go to production. So, I'm going to make sure I take very, very careful steps not to break this. If I

10:47 was a full stack dev, which I'm not, I could know exactly what's going to break. But in our case, I'm not, right? And I'm trying to v code this. I have a good understanding of what I want now, how to do it. And then we're going to go step by step and do it. We're going to go to get. We're going to create a new repository. We're going to call this Zello native v1. We're going to make this private. And then we're going to create repository. That's the first step. So now we have that. Then we're going to copy this. Go back to cursor. All right. And all I got to do right here is do the get setup commands. I just ran it. And now we go back to git. And you guys can see I hit refresh. And there it is. So now we have a copy. Now we can start versioning. If anything screws up, we just back up and do it again. So if you already know this, I apologize, but for a lot of beginners that are watching my channel, these are the steps. And one important thing, it's

11:33 about security. So for example, it created a a file called.git ignore. So if I search for API keys in here, check this out. You can see right here, API keys and secrets, it's already set up. And then you got custom API, which is in the info.p list inside of Xcode. So next, we just have to go into Xcode, add our API keys, and now we'll be able to pull from that inside Xcode. Okay, now API is added. You can see it created all the files. info.p list. And if I go back to Xcode now, if I click on info P list right here, you can see light API key right there. I'm going to add that in here so you guys don't see. You can just get it from right here. Once you're inside the dashboard, you just click API keys. Okay, now everything's added. So, what I want to do is I want to commit this right here. And I'm going to say added API key plus security. So, once

12:19 this is done, and of course, we're going to commit and push. Now, we have our project. So, these are the steps I took to make sure that the project is set up on both. I have the SDK connected and now I have our API keys connected with a file that will actually test our API. So next, look what it says. Once you've added these files, run the app and check the console for success messages. Okay, next we're just going to hit play. It's going to bring up our simulator which loads. Perfect. And down here, look at this. Light API SDK configured successfully. Voila. So now we have it all working inside of Xcode. All right. So here's the first thing we're actually going to code. First, I want you to create a simple view that has a test API connection button. Once clicked, make sure you're able to actually connect to the light API. Again, baby steps. Sorry

13:06 it's taken so long to get to this stage, but again, if you guys really want to learn how to actually do this, not being a full stack dev that knows Swift natively, these are the proper steps to get this set up. I've gone through a lot of hoops. I've jumped through many and it's been difficult. you know, as a noode developer, I'm taking the steps that I've learned from other videos, from other creators to actually set this up properly and a lot of trial and error. Check this out. Perfect. I can see that the light API SDK is already integrated and configured. Now, let's create a simple test view with a button to actually test the API. All right, so it finished connecting everything. Let's go back to Xcode. And if I did everything correctly, we should get a display with a button up here. Make sure you guys have your simulator selected. You can also do it on my phone which is connected, but I'm just going to do it on here so you guys could see it on

13:52 screen. Okay, let's see if Let's see if it comes up. There it is. There's our simulator. iPhone 16 Plus. It's going to boot up and if we did everything correctly and there it is. We got our light API test. Drum roll. Let's hit it. Connection successful. API test results. Receive data from US cities. And then down here, you can see all of the cities in the world are in here. Jackpot. First major step is complete. The API works. This is how you set it up. Now for the fun stuff. We actually get to build some UI and actually start connecting all of these endpoints. All right. Next, we're going to build out the homepage. So, I have a design here. Same stays. Where are you going? Select the date, the checkout date, and then one room and two adults. So, exactly the standard stuff. So, we're going to drag this into. Next, I want to build out the homepage where a user can use a search field to search

14:38 for cities, comma, check-in dates, comma, checkout dates, comma, how many rooms, comma, how many adults. I've included an image for your design reference. Period. Make sure you use all of the Swift UI for all of the navigation elements, buttons, everything. Very important. I'm going to keep reiterating this into cursor so it really understands what we're building. And then one more important piece, make sure you use all of the SDK endpoints to set this up correctly. So in the next step when we do the hotel results page, it's going to have the endpoints correctly set up from the SDK. Baby steps, one by one. Don't try to oneshot a Swift native iOS application. I promise you it's not going to work. I

15:25 tried. Okay, it finished and it's got everything. city name checkin. It's using all the SDK information to get the correct endpoints. This is the most important part right here. You can see and there it is. We got our first results. So now let's type in our city. So if they did it correctly, we should have we got San Diego. We got our picker. Let's go 11th to July 12th. We got one room. And let's hit search. And there we go. Okay. So we got Courtyard Marriott Hotel Indo. So, let's take a look at the So, let's go to Zello now and let's take a look at the same one. San Diego July 11th to the 12th. Hit search. And there we go. We got Courtyard Marriott 264, Hotel India 292, 264, 292. And just like that, we've

16:11 started building out our native application. So, next thing I'm going to do is I want to pull in the actual photos from the SDK. Everything is inside the light API. So, let's do that next. Next, I want you to pull in the actual images from the SDK. so I can see them on my hotel search results page. Bang. Set that off. Hey, let's give it a shot. See if the images are loading. Let's go to San Diego. We got the 11th. And then let's hit search. And there it is. Bang. All right. Perfect. So, we're just going to continue going now. So, now we need to do the details page. So, when I click on here, we're going to pull in the actual details from the hotel. So, let's go back to cursor. So when you get deeper into your project, make sure you reset your cursor so it just has new context because that's finished. We're done with that. So now

16:56 we're going to do now I want to create the hotel details page. When I click on the hotels from the results page, I want to pull in all of the details from the light API SDK. Make sure you include any images, facilities, any other details that are inside that you can get from the endpoints. And just like that, we're off and running. Next page. All right, let's see if we got our hotels view. So, here's our results. Let's click into the Marriott. And there it is. So, we got overview, we got check-in, we got the results, we got the facility, we got the different rooms that it has. And just like that, guys, we are continuing to build this out piece by piece. Next, I'm just going to continue

17:42 working on every single step. But before we go, I do want to add a navigation. So, let me go to cursor and add a navigation on the bottom with the different things that we actually need inside the application. But, as you can see now, I just have to continue doing this. And obviously, I can't squeeze this into a video. It's probably already running really long, but you could see the process that I just did. Set up Xcode, set up cursor, make sure they're mirroring each other, build it out, set up your APIs. You can even do MCP servers if you have them. This is the exact process you need to build an actual Swift native iOS application with me not knowing how to code at all in Swift. Zero. I'm able to build out full projects that are it's going to take time, right? This is an actual production product that we're going to be launching for our business. But as you can see, this is the step-by-step process. All the errors, you relay them

18:29 back to cursor and it tries to fix them. But this is the whole thing. Next, I want to create four icons for my bottom navigation. One, search. two trips, three explore, and four profiles. And as I mentioned, if you guys are interested in setting up your own white label booking site, you can do it all through light API. All the links are below. It's free to start. As you can see, everything is in here. All your analytics, customer service is handled. We built our own site and you guys could do it, too. And of course, it's free. You set your own prices. This is the white label dashboard right here. You have all your development pieces here. You could build a website. You could build a chatbot. You can build an SDK app like we're doing right now. There's all kinds of different development kits, whatever you're looking to do. You got Python,

19:15 Node.js for websites. You got Swift, you got Java, everything is in here. So, if you have a travel blog and you're looking to add just a widget for search, for booking hotels, you could actually do that with this with this platform. You could do pretty much everything in here. You could build it on sandbox and then push it to production like we have with our website, Zello. All of your bookings are handled through the platform. They do all the payment. you get a commission which you can actually set yourself depending on your needs. You can do your vouchers, you can do widgets, there's fraud management, everything is built into this platform. All right, let's open up the app. Let's take a look if everything is done. And now we have our navigation in the bottom. Check this out. We have trips. We got our bookings. We got explore different things that we can connect in there. And we also have now our profile page. This is very important when you're doing native. Obviously, I'm going to

20:01 continue developing this, adding all of the different things that you need in here. and you have to go through the documentation. Apple's very strict when it comes to actually launching these apps. We're going to do a sign in on the next video. I'm going to connect all the payments. Everything is going to done through here. But for now, as you guys have seen, we were able to take our light API and actually build a full functioning application that's swift native for iOS using cursor, using the light API. It all works. So, next is the fun part. I'm going to continue developing this. I'll keep you guys posted. As I said, I'm building this for production, so it's going to take a lot more work to actually get this ready and not get it done in a I don't even know how long this video is. Probably 20 minutes. And if you guys enjoyed this, thank you so much for watching. My name is Marson AI. I'm a no code dev. And now you have the tools. You have the power

20:47 to actually build with these powerful tools and actually do something native. I've done a ton of videos where I vibe code using React Native applications that I've launched in the store, but this is a whole different beast. But I hope I simplified it for you enough where you could actually go in here and try to build something native and actually publish it to the app store. I took on a huge challenge. This is a massive undertaking and I hope I showed you enough where you could now get inspired to at least try it. Go get cursor. Go set everything up. Go get the light API if you want to go this route or just build something for