Photo by Alexander Shatov on Unsplash
Breaking Down App Cloning: How a Simple Approach Can Help You Build Complex Apps
I'm sure many of you regularly see those types of videos on YouTube where developers teach how they build popular app clones. For example, "Create Netflix clone with react", "Create Uber Eats with React Native" or "Build Twitter clone with Flutter", etc. I used to think that these developers are basically in the God tier of our developer community. I mean to say that lots of people think the same, they just can't figure out how these developers single-handedly build these popular apps clones which in reality are created by tons of developers around the globe.
And I was also one of these people. But now if you visit my GitHub profile, you'll find many repositories where I created app clones including Spotify, WhatsApp, Zomato, Rapidbox, etc. So you must be thinking what changed? How I also become a developer in the God Tier? The answer to this question is that first of all, there's nothing like the God Tier developer community. The reason why these developers on YouTube successfully build popular app clones Is that they follow a specific approach that they have learned from years of experience.
Let me start with how my thinking was changed. One night, I was surfing on YouTube, when I stumbled upon a video called "Create Instagram clone with React Native". It was on a YouTube channel called notjust.dev. In this video, Vadim who was the YouTuber on this channel was teaching to build an Instagram app with React Native. In the beginning, I thought its another one of throes videos where developers build popular app clones which only a few people can do. But it was different.
From that video, I learned about the component-based approach to programming. In this method, you don't need to look at the whole UI at once to develop something. The biggest fear developers have while trying to achieve the same is that they get overwhelmed when they look at the UI of the popular apps they try to build. For example, if you look at Twitter, Instagram or Netflix, you just can't decide where to start. It's such a massive app, and it affects your confidence and you are never able to even start cloning this app.
At this point, a component-based approach comes into the picture. In a component-based approach, you only look at the part of the overall UI. For example, when I was working on the Instagram app, I had screenshots of all the mobile screens which I needed to develop. If you look at the profile page of the Instagram app, you see we have the user's profile picture at the top and some personal information about that user in the same row. What I did was that I removed all the things apart from that component by cropping the screenshot and only focused on that single component. I forget that I was working on an Instagram clone, instead in my mind, I was only working on that single component. So I developed that component in React Native. Now I here I assume that people can build a single component that includes a user avatar, texts and some links. So, when I was done with my component, I placed it in my ProfileScreen.js file. Next, I found the component which gets repeated, like user posts. Every user post is the same. They have an image, some texts and comments. Only the data changes but this thing remains the same. So I developed this post component without worrying about the rest of the screen. And this is how I was able to replicate the app.
You might be thinking that it's not as easy as it sounds. But trust me, once you follow the component-based approach, there's no going back. You can build anything with enough practice. It's all in your mind. When you try to take everything at once, your mind gets overwhelmed and you lose confidence that you can even create something that. Just like when we eat pizza, you can't eat it whole. But when you divide it into pieces, you don't even know when it gets finished.
This is the app that I build recently with React Native. It's the clone of a very popular food delivery app in India and it's called Zomato. You can check the GitHub repo and see how I was able to build this massive app clone with this approach.