WordPress SaaS Tutorial: How to build a Shopify Clone and Sell Marketplaces

0:00 Welcome to this project video where I'm going to show to you how I use WordPress to build SaaS applications. And in this video we will see a complete Shopify clone where customers are able to buy a certain plan to provision their own websites. So they could select this one and subscribe for 20 euros and they have a certain website or a certain WooCommerce website and it would have a different things that's completely separated from the main website. So in this video I'm going to show to you the complete architecture, how I designed it, my methodology to build SaaS applications using WordPress and we are going to rely on an amazing platform called WPCS where it uses Kubernetes to provision different WordPress installations. So it helped us to basically don't care about the scaling for our application. So we don't need to care about infrastructure and so on. And it has different versions or different ways to build our WordPress types. So we have like the different tiers that I showed to you in our WooCommerce website. So I'm going to explain everything along this video, but just to give you an idea of what we are going to see.

1:11 And we I will going to show to you like the architecture and everything. And if you don't know me, hello. My name is Abdo and I have been building WordPress websites and WordPress SaaS applications for many years now and I have like a lot of things I have built. So if you like like to see like how I approach solving this problem and of course like saving a lot of money for startups. So yeah, you could keep watching. And let's start.

1:38 But the first question comes into the mind is why using WordPress? And the idea is when you are trying to solve a certain problem you don't need to care about the small things when you are trying to build a software. So you shouldn't care about authentication, authorization, email server, databases, CI/CD pipelines. You shouldn't care You should only care about solving your business problem. You should be able to build your own whole application in one day. This is the main idea of building fast or fast like fast delivery to the market eventually. This is the most important part when you are trying to solve software problems.

2:15 So, by using WordPress, you already you are using like almost 60,000 plugins. You have the access to use any one of them. So, you have store plugins, you have galleries or events or system for chatting and so on, forums. You could build a complete Reddit, for example, using these plugins. So, using WordPress already existing community and existing plugin system gives you a lot of boost. So, you don't need to care about these small things, but rather care more about your business model. And I'm going to show you at the end like the code that I have written.

2:49 It's only I did it like in one day. It's very small and didn't took too much, but eventually I use it to build the whole system. Like, it's only one day. So, if I'm trying to really solve a certain problem, I will be able to have a solution in one week, for example. And this saves a lot of time for startups when they are starting. They don't need to hire a complete team. They just hire like an experienced WordPress developer and it's fine for them to be able to start and deliver to the market.

3:17 So, when we are trying to build a SaaS application using WordPress, what is the architecture that we usually have? So, the normal architecture that we have is that we, of course, like we have our WordPress installation or main website and we attach different plugins. And these plugins are already things that almost similar to what we would like to do. For example, I'm trying to build something to similar to Amazon, for example. Amazon is already a store. So, I just get WooCommerce in this case because it's already a a system. I would like maybe to have invoices in my system. So, I would find a plugin for invoices and connect it to my WordPress installation. Maybe I would like to do, I don't know, like some coupons. So, in this case, I find a plugin for it and connect it to my WordPress installation.

4:06 And this all of this is ready-made. So, almost I would be finishing like 80% of my website. And what remains is my added value now to the website. And we use two things. We use custom themes and we use custom plugins. Why both of these things? So, custom themes would be my custom design because my brand should be unique. I should have a unique message. I should be able to approach my customers with a certain design I so and so on. So, I add inside my custom theme my designs. This could be just HTML and CSS and JavaScript like simple ones.

4:43 Maybe I would like to use React. Maybe I use Vue. Maybe I use Gatsby. Maybe I use Next. Maybe whatever technology you would like to use, you would be able to use any one of these. So, just use it for the UI stuff. The better, the faster, of course, it's better eventually. So, I add this to my WordPress. Second part is the custom plugin. And this one is very critical when we are building websites. not website, but rather the whole SaaS application. So, with custom plugins, I'm trying to add my business logic inside it. This is where I add my most critical part. We can write this if with languages, I could write it with PHP. If you like to write it with Node.js, Go, whatever the language you would like. Eventually, you would have a PHP file calling this application or the final part that is your added value.

5:35 So, the custom plugin would have your business logic, things you would like to add at the end. And this is where like the coding part start. But you see like it's almost like the a stuff compared to adding all of these because each one of these plugin has already permissions, authentication, authorization, different controllers, different models, services, databases, options like there are a lot of things. So you're already like getting rid of like almost like 80% or 90% and just writing this part. So this just architecture is basically simple, but of course the knowledge of which plugin to use and which plugin or custom code I need to add inside each one of them. This is the experience where it comes from.

6:19 But this part is just like a mixture. So basically we are trying to do like some chemicals. So like to recap, eventually we have like our WordPress installation, we have certain plugins we attach to it, and then we have our designs or custom designs, and the custom plugin where we would have the custom business logic or our added value. So now we have discussed the architecture of our WordPress. Now comes how we are going to build our Shopify example that we would like to build.

6:47 That's it. So the design we are going to build or the architecture for it is that we have a landing page, and this landing page just a WordPress or WordPress and WooCommerce installation. And at the end it is trying to provision when someone buys a certain like a certain plan from our system or subscribe to a certain plan, the it is going to start another WordPress WooCommerce installation. So inside this WooCommerce installation, there might be like inside the basic plan, there might be just ability to add products or ability to have certain payment gateway. Maybe another plan, there is the ability to add SEO like like to do SEO for example. And third plan, maybe it has the ability to connect to different other payment gateway or have like the ability to add your custom code, whatever you would like to do. So, these are like the different tiers or the number of website visitors could access your website and so on. So, you could differentiate between different tiers, but we are not going into the business detail, but rather the architecture overview. So, we're going to have like three tiers.

7:56 And in this landing web page, when someone buys a certain product, it is going to start a certain WooCommerce installation. If they buy another one, it would start another one and so on. Each one would have their own website. And inside this website or store, there would be like an admin account and when they are trying to do payment, it would be done on the main website. And when the subscription is ended or it is finished or canceled or whatever, we are going to delete this installation because they haven't paid and so on or they would don't like they don't want to continue at the end.

8:35 But for simplicity of our demo, we are going to delete this installation when they cancel, not when the subscription expires because there in business there is two differentiation between canceling and expiring because they could cancel the subscription, but still it needs 1 month to end. So, this is like the small differentiation. The final code that I'm going to upload on GitHub and it would be available on GitHub at the end. So, one moment, I'm going to show it to you.

9:12 So, the final code where you are going to see it at the end and the ability to add download the plugin, it would be available under releases. So, you would be able to click it and download the plugin at the end. So, this would be like our custom code at the end. But, this is just the architecture that we are going to use. We have just storefront or our main store where people would buy a certain subscription and it would start a WooCommerce installation and they are able to like determine if they would like to stay or continue. But for the simplicity of the video, when the subscription is ended, we are going to delete the whole website. Okay, so now comes the second part, which plugins we are going to use.

9:51 So, this would be of course like we said we are going to use WordPress and inside WordPress we would be need like three plugins. We would need the first one which is WooCommerce to do the whole transactional things. The second part is a subscription plugin. So, they would like to subscribe for a certain product because WooCommerce only allows you to buy a certain product, but it doesn't have subscriptions inside it. So, there is a second plugin which would have the subscriptions and people we would be able to create different subscriptions for each product.

10:25 And the third part would be Stripe. So, we are going to use Stripe as our payment gateway. And finally, our custom plugins. This would be the custom codes that we are going to add. So, this would be our business logic and of course at the end of the video, I'm going to show to you like the internals of this code. And the custom theme, I'm not going to show the custom theme because that requires like HTML, CSS and JavaScript and a lot of things, but we are going to use a custom theme. Like we are going to use like a third party theme that already exists. We are just like going to download it, do a small customizations to it just to give like a small branding thing to our website. But of course, usually when you are doing your own business, you would build the complete website and do the whole designs. Maybe you would like to use custom themes like complete custom themes or maybe you would like to use certain WordPress custom builders. For example, like using Elementor or Divi, I guess as well. So, there of course like there are multiple ones. So, yeah. You are like this part would be wide open because even you could go with React for example or View or Materialize. There is a lot of things could be done on the front-end part.

11:37 So, this would be the custom theme. And eventually we are going to use the platform that we mentioned, which is the WPCS, and it's would be used to provision the different things. So, basically our WordPress installation or storefront would talk to WPCS and tells it, "Hey, could you please build this website with this plan? Hey, could you please build this website with this plan?" And so on. And WPCS relies under the hood on Kubernetes. So, if you don't know Kubernetes, don't worry. There would be another video on this channel to explain Docker and Kubernetes. But, you could basically think as simple as that Kubernetes is just something that produces different CDs, for example, if you heard about CDs. So, basically it try it tries to start different versions. So, for example, you don't sell a certain copy, but rather you build different copies. So, basically it's just like a copier machine. So, you tell it, "Hey, I have this WordPress design that I have built. It has like these three plugins. Could you please build to me another one, which would be used by our customer? Hey, could you please build another one?" And so on.

12:46 So, it's basically like it's trying to copy the different things you would like to build. So, inside WPCS we would have our three tiers of designs that we would like allow our customers to buy. And eventually WPCS would be able to build different ones of each one of them. So, this is the whole architecture that we are going to do in this video. And it's like like I said, it's very simple. Like when we try to do it with WordPress. Of course, if you don't do it with WordPress, it would take a lot amount of time.

13:18 So, this is architecture. So, now let's start building our things. The first part is to build our storefront. And we could build any WordPress installation on any platform we would like. You could build it on wordpress.com. You could build it on WPCS because it also could provision different WordPress installations. You could build it on AWS or our example here would be on DigitalOcean. just like for simplicity. It's not like we have to use it, but rather because it's very simple to build it for our example. So, the first part in the DigitalOcean where we are going to build our website, we just need to create a droplet. It's basically like just "Hey, could you please build a WordPress the installation for me to be able to use it?" So, I go to the marketplace and from marketplace I try to find the WordPress installation.

14:12 And then I would build this one. And we let's select like this cheaper one, maybe, or this one, just to make everything to work fast. And I would select Frankfurt because it's close to me. And then it will require a password. just also for the simplicity, we would find generate password website just to have a password on our hand to be able to use it. So, I'm going also in this video to show to you like multiple websites that are helpful eventually to build like different tooling and so on.

14:43 So, let's generate our website or password, sorry. And then we are going to go to DigitalOcean. And then add the password. And then it requires Yeah, must contain one number. Let's add one number into our password. Okay. So, now we have our password ready. And then let's create our droplet. So, it would take a while. Of course, like I'm going to And let's save the password here.

15:22 So, now the installation is done, we need to log in into the terminal for our website. Maybe I would don't log in to here, but rather let's log in into VS Code. And we need to It's just like something needed by Digital Ocean because I already know it. It's not like something magical or you don't know it, but because I have used this platform before. So we just like need to log in so we able to install WordPress so it would be able to install our installation and everything. Now I need to add the password.

15:54 Just copy it, paste it in. And now it would ask me, "Hey, I would like to What which domain you would like to add?" We will just use our IP now, the container IP. So this is the one that we have created now. And I would just edit it just to make sure that we have this one. Yes, 81. Now it asks me for my email address, and this is the second new website you would know about, which is called Temp Mail.

16:21 And this basically allows you to have temporary mails to be able to use it for your website. And of course they have a lot of ads. Okay. Let's add our email address, our username, admin. Password, a very strong one. And let's call our website or our store from that we are going to sell, like the Shopify website. We don't call it of course Shopify, but rather let's call it Bazaar. And it would ask if the information is correct. We say yes. It would ask me, "Would you like to have Let's Encrypt?"

16:56 Let's forget about it for now. We don't need it. And now it start to install my WordPress installation. And it should be ready. Yes, now it should be ready. So let's try to log into our website. And we just copied the IP address, and then we have our website. Now, let's try to log in just to start now customizing because, like you see, it has nothing. So, we go to the admin page. And then I enter my username and my very strong password.

17:34 And let's remember me. So, now we have WordPress. This is the first part in our design. Now, we need to install the plugins. So, we need to install three plugins. So, we add new. Let's cancel this. And we need WooCommerce plugin. Let's install it. And we also need Stripe. Let's install it. And then we need our WooCommerce Subscription plugin.

18:08 And there are many plugins that allowed, but this was one of the free ones that I found that you're able to use. There are of course like one from WooCommerce itself, like subscription plugin, but you have to download it from their website. But we are going to download this one. And it's easy. And by the way, one question. Why do I use a certain plugin over another? One of the determining factors about using one plugin over the other is, does it allow me as a developer to customize it or not?

18:38 How I customize it in WordPress from there is something called hooks and filters. You could think of it like a pub sub thing inside the war inside WordPress itself where I could add custom codes. I will create like another video of how do we develop WordPress and we how customize it. But in essence, it has this pub sub pattern where I could hook certain function into a certain part inside my code. So, if the plugin allows me with multiple pub sub things, in this case, yes, this is a good plugin and I actually would encourage to use it. And the subscription for WooCommerce, when I checked it, it has a lot of hooks inside it or filters in terms of WordPress.

19:22 And in this case, I am able to customize it in the end. So, we now installed our three plugins. Let's now upload my magic code, which is my custom code. Let's go to the desktop and I I don't have it here. So, I have now my plugin and it would be called the PPCS WooCommerce Subscriptions. So, we just like choose the file and I direct it here. And let's open it. And let's say install now.

19:56 Mhm. Yeah, it's installed. Okay, so now we installed everything. Now, let's start by activating my plugins. So, now let's go to plugins, installed plugins, and let's start by activating the first one, which is WooCommerce. yeah. Now, it goes to me and then ask to my address because it's going to install a a real store. It's not like a fake one.

20:26 So, we say like Berlin Street, which region region, Germany, Berlin, city, Berlin, and then my postal address. And we will keep this fake email just to be able to see like different things when they happen. Let's remove the get tips thingy. Say no, thanks for now. We say what is the industry? This our store, we say store builder, maybe.

20:56 Shopify clone. Okay, we click continue. We say okay, we are selling subscriptions. We're are selling physical products. it's all of this is just like they are collecting survey information. How many products they sell? It's three. And then, are you selling somewhere? No. And then, let's remove the recommendation just to keep everything simple. Do we need the designs now? We are going to install the theme at the end. And now, we should have everything installed.

21:28 Now comes activating the other plugins, which is subscriptions for WooCommerce. Here it would ask, what do you would like to name the add to cart? This is appears when we are selecting a product. So, we don't add to cart, but rather we subscribe because you are creating subscriptions products. It asks for creating product name. all of this just forget about it now. All of this is not important for the demo. Of course, you if you would like to read it, just read it. But, it's not important for now.

21:58 Okay, we go to the plugins and activate the last one, which is Stripe. So, now we have everything. Of course, I wouldn't activate this before we start discussing WPCS and what is WPCS give us. So, let's go to the sketch board again and create a new one. So, WPCS WPCS is a cooperate like backed by cooperates. And like we said, it's a platform that we speak to it and we create different images. We could just of course like I'm trying to simplify here as simple as possible.

22:38 because like complicating things, it would take like I don't know like 4 8 hours for this demo to explain it. But, for simplification, we think of cooperates like it requires two things. First, it require a certain image that we would like to have. So, basically the blueprint. And we create from this image containers. So, we have like different containers and this would be our clients. So, the PPCS is a platform expect by Kubernetes. We write it as K8S. This is how short for Kubernetes.

23:17 And Kubernetes requires two things inside it to create many websites. You could think of it like many builder website like for example when you you like visit I don't know Wix for example and when you create like a new website it creates it from a template. So, this blue thingy is our template or how we call it like images. And from it we create inside the PPCS different images. And from these images we create different websites like actual websites that we deliver to customers.

23:54 So, this is the architecture of inside the PPCS. But they have like different terms of how they name things. So, inside the PPCS they have things called versions. And versions are WordPress like access like a WordPress image where you are able to change stuff. Like you are able to add like different plugins, add different designs, add different themes, allow them to do different things inside their website or in our case would be the tier one or basic or gold and so on. Like this is tier two.

24:30 And this is tier three and so on. And we create a version and from this version we are able to create different containers. So, this is the idea of what inside the PPCS. They have something called snapshots. They have CLI the PPCLI. We wouldn't go all of these things. I would add link for their website and also accept like it would have like further explanation of the different platform, different features they give. But away from all of this, we just need to think of the PPCs as something to build to build images.

25:12 to build to build containers from images. This is what we need to think eventually about the PPCs. So if I go to the PPCs and login on of course they allow you to have a trial subscription and you are able to play with it. So the first thing I would like to create inside the PPCs is to create a product. And my product is the Shopify clone, which is Bazaar. So it would ask about my product, let's call it Bazaar.

25:43 So it would start creating and it would take a while. So now after it's done, we need to create our tiers. So of course like they don't have tiers inside the PPCs, they don't call it like that, but rather when we are using a certain platform, we try to use a certain technology inside it and then use it with our own terms to be able to build our product. This is when we are need to rely on a third party platform to be able to use it for our system.

26:14 So when I check the PPCs, the closest thing to a tier, it's called versions. And you could think of versions if you are a developer like for example we have like a development environment, prod environment, staging environment, different type of environments or if we have like an actual version V1, V2, V3. So it allows us to have different images like we said like the different templates that we are going to build and we are going to build from it the containers that we would like to use. So inside the PPCs, version like our templates are called versions.

26:50 And our containers or the things or the CDs that eventually are delivered to the customers are called tenants. These are where the actual tenants, like if you think of a tenant inside the hotel, so a tenant are the actual stores that are going to be delivered to customers. So, first thing is version. So, we need to create our first tier or version here in this case, and we create the basic tier. Let's call it basic tier. And it requires WordPress 5.6 and requires PHP 8. And let's keep it for now like as an empty like an empty WordPress. Now, we create the second version or the second tier, and let's call it golden tier.

27:36 And we have inside PHP 8. And yeah, it says like relies on this one. Let's keep it. Yes, it would require a little because it they have like a certain system inside the PPCs, so we have to wait a little. So now, it's finished, and it would allow us to go into the editor. I'm going to explain all of this. But let's finish the second part, which creating the second tier. So, we create a new version or tier. And we add the golden tier. We select PHP 8. And snapshot initial and so on. So, this is fine as well. Of course, like I'm going to add links for the PPCs because all of these are completely new to technologies. And let's call the last tier galactic tier.

28:25 Which is like the best tier ever. And let's submit. So now, we have like our three versions or our three tiers. Okay, what does editor allow us? So, editor allow us to be able to log into this WordPress template. And inside it, I could add things to my customers who are going to buy this template. So, for example, I would like to add WooCommerce for this one because of course they would need WooCommerce. This is a basic thing.

28:57 So, let's add it. And let's maybe like Yeah, we would like to add shipping tags. Maybe we would like to add Facebook for WooCommerce. I don't know like anything you would like to add. So, we'll just like keep it like basic. This is just a basic store. And then after the plugins are added, let's just enable them. And activate. So, now we activated these three plugins for our basic tier.

29:29 And that would take a while. Yes, we don't fill these things and we keep it with the basic theme. This is what we are going to deliver to our customers. This is for the basic one. Now, the golden tier is done. Let's go to the editor. I click the editor. If I edit this fast, just to go to the editor the golden tier, sorry. And then we add the same plugins. So, we add WooCommerce as well.

29:59 So, we install these. This is what we are going to give to our customer and maybe the gold tier we need to give it something extra. So, let's give them Jetpack. And if you don't know Jetpack, Jetpack is giving like a lot of post thing to WordPress installations. So, it gives them the ability to see analytics, improve certain caching things for images, and so on. So, it does like a lot of things and it's one of the important things to add for our website.

30:27 So, we are just like to remember the second golden one, we added like the second golden one, we added Jetpack. Let's go to the plugins and activate them. And let's give it as well a different theme. So maybe I open it in another one. So let's give them I don't know. Let's go to add themes. And maybe install Hello Elementor, for example.

30:59 Just to be able to see like these are like different things. And let's activate it. Okay. So we now did this and this. Now let's go to our last one, which is the Galactic Tier. And we are going to do the same stuff. So go to plugins. Add new plugin. WooCommerce. This and this and this plugin as well. Maybe add this as well.

31:31 well, it's not a problem. And let's add Jetpack. And maybe add Jetpack CRM just to be an extra because this is Galactic and let's add Yoast as well. Which is SEO plugin to allow them to do like SEO optimization and so on. So. Okay, now they are uninstalled. Let's go to the plugins and activate them. So we select all of them and we click activate.

32:15 And it would ask bunch of stuff. Let's next next next. We don't care now. Let's remove my email. Just not get things from them. Cuz this is just like for testing. Okay, now we enabled all of this. So we added more stuff. Let's add another theme. Maybe for the Galactic theme we would like to give them premium theme, something very prominent for example. But just like for now, let's install this theme, Astra.

32:46 Okay, and we activate it. So, we now have our three tiers. Now we created like the three tiers inside the WPCS and from it, it would be able to create new tenants or new customers. But of course, we don't want to create them, but rather inside our and this is where the added value that we discussed is our custom plugin. Where this custom plugin like our custom plugin would speak to WPCS and by speaking to WPCS, it would provision the different tenants.

33:22 So, this is what is going to create and it was going to create them from the different tiers. So, we we need to tell WooCommerce which product translates or maps to which tier inside our system. And from it, it is going to create our customers. So, basically we have now an automated system, a funnel or a pipeline. We don't need to work again. We just like build this Shopify thing and just allow customers to build their own shops and we just like collect money at the end of the months, a renting system.

33:53 So, let's go to our WordPress WordPress installation. So, it's under Bazaar. Of course, like let's cancel this one. Just I'm cleaning because we have many plugins or many websites. Okay, yeah, it was the last one. Okay, let's add it at the top just to be able to see it and let's close this one. And now we enable the last plugin which is WPCS. And when I wrote WPCS, I tried also to make it as clean as possible for people to use. So, inside WPCS, you will find like this tab, You click on it, and then you add the API keys. And API keys are ways for the PPCS like our website to communicate to the PPCS. It's like the secure line.

34:42 If you don't know API, but if you're a developer, of course, you know what is API is. So, now we need to create an API key. So, we go like in the PPCS and click API key, and then create one. And let's call it Bazaar secure communications. And let's submit it, and now we copy the API key, and there is the secret. So, we just need to add this one. Like this, and add it.

35:14 And then it would ask for my region. The region is EU1. How I know it? It's from here. It's called EU1, and there is US1. These are the regions that we have. So, we just like created inside the EU, and then save changes. Okay, so now we added our API keys to create the secure communication between our website and the PPCS. Now, we need to add the products and map each product inside WooCommerce to one of Bazaar's tiers here. So, we just go to WooCommerce, and not WooCommerce, but rather products, and let's add new.

35:52 And now we would see here the PPCS plugins that I have created. This is the custom part. Like this is the business logic that we are going to have. So, instead of like each tenant sends us like a contact form and tells us, "Hey, I would like to subscribe. Could you please create my image or my container to be able of not of course not image, but rather the container or my WooCommerce website for me." And we have to do all this manual work, but rather now we are going to automate it.

36:20 So, let's create the first one, which is the basic tier. And of course, like we could add like bunch of marketing stuff. But, we just like maybe add an image. And I have a simple van. So, we created for the basic tier. And now we need to determine the money for it. So, I just let's scroll down and we say it's a virtual it's a subscription. And we need to say the price for it. I would say it's 20 euros for start. Then I go to subscription settings.

36:54 It says how many days or how the interval should be renewed. So, I say it each month. there is a free trial. Let's give them 14 days. And now we publish it. So, now we created the basic tier. And now let's create the other two. So, I'm going to create two new tabs. And the first one or the second one. Yeah. We create the golden tier. Bunch of marketing stuff people would add. We'd add the image.

37:24 So, we have this one. So, we set the image. And we have a big ship here. And then we say it's a virtual subscription, 50 euros. And it renews every month. And we have 14 days of free trial. And let's publish it. Of course, I forgot to connect which one. Let's connect to the golden. And now the last one is galactic tier.

37:59 We are going to the galaxy. Galactic. Okay, it's try it's right. And let's add the plane. So, we add it. And then we select it's virtual, it's a subscription. And it's not the sale price, but rather the regular price is 100 euros. And it's 1 month and 14 days. And we select everything now. The galactic tier is fine. So, now we have our tiers and let's go to see it inside the store.

38:34 So, we have Oh, yeah, we forgot to add the custom design. We are going to add but let's go back. There is a galactic tier doesn't have an image. Oh, yeah, I uploaded to the wrong the wrong field. Let's select I uploaded it to like the product the gallery instead of the product image. Okay, we update it now. Yes, everything is fine. Now, we need to give our custom design. We now connected everything like each one is connected.

39:07 So, each product is connected to certain type of PCs and now we need to add the appearance. So, we go to themes and we need to add our custom theme. Of course, like I'm not going to build it but rather let's get an existing one. So, there is this one that I have seen which is nice and also similar to the one we have shown in the first of the video. And it is installed. We click activate.

39:34 And now let's bring the templates we have cuz usually these free themes usually have a template that you are able to install directly instead of having this like sample one. If you go to the website now, you would see like something that is not expected. yeah, I need to click this one. You would see like what is this? It is It does nothing. So, we need to upload like our design. So, we go to usually they have like something called starter themes. So, you say that it needs to install like certain tools to be able to import it.

40:05 So, I clicked on it and then we would like to import this design that we saw at the first of the video. It says I I would like to import like different content, widgets, and so on. So, I say import the entire designs just for us to make things easy. And now add our content. Do we do like small customizations. So, we now go to WordPress customizer. We just like click next next. And let's remove this sentence and call it build your own store. Just change that like this.

40:45 like what's it called it? Banner, I guess, or motto. And let's change the title. Okay. Let's see our website now. So, if we refresh, we now see this is on our home. Like it's under the IP address, but of course you could have like a domain. And we need to change these to become the shop page. And let's change just one of them. So, this would change it to the shop. I'm now changing the link. And now we change instead of learn more, let's call start today.

41:22 Or start selling today. Yes. And let's remove the second button. It is not needed. This is just a small customization we are going to do for this short demo. Of course, you could spend like whole day doing the whole customization. So, I'm just like going to do this. Let's check our website again. And we need of course to remove these links to have our WooCommerce links. So, they are under if I go to maybe I Yeah, this is because then old page.

41:54 Okay, we need to go back. And I go to appearance and menus. So, now I need to change the links on the top to add WooCommerce link just to make our website easy. Let's remove all of this. And let's remove selected items and let's add WooCommerce specific links, my account page, checkout, card, and shop. Let's add them. Save menu. Okay, everything is saved. Let's refresh.

42:27 It's ready. And now we have our shop. Now we connected WooCommerce to WordPress. We connected our Of course, I forgot what was this, but it's Yeah, the subscription part. Yeah, so we connected the subscription part and we added our custom plugin. Now we need to add Stripe. So this would be the last one, which is money. We need to collect our money. So already I have an account on Stripe and I'm going to create a new account for our store.

43:04 So I'm going to say Bazaar Store. Let's remove the caps. Bazaar Store. And it's in Germany. Create a new account. And of course, like Stripe is one of the nicest payment gateway. It's already in test mode. It would say activate to live data. We just need the test mode now. And they have Of course, like each one when I go to developers, they have the API keys. Of course, like when you are doing an actual payment gateway, you would add the actual keys. But now we are just going to add the like testing keys just to make things to work.

43:41 So I am going to WooCommerce settings. And then I have payments. And then if I go down, there is Stripe. So we go here and then we enter our keys. So let's get this to be closed. Let's copy the first publishable key and the second one, the secret key. Let's save.

44:11 Yeah, no, no, no, no, sorry. This wasn't this one. Should be in the test, not the live. Let's copy them again. Save save the key. This is a good UX thing because they say like explicitly you are saving the test keys, not the live keys. Okay, now on Stripe is enabled. Now we have everything. So, everything should be ready. So, let's try and test. So, we connected like if you go back to the design, we connected WooCommerce, we connected our subscription, we connected Stripe, everything to WordPress, we connected using our custom code to the WPCS.

44:48 So, everything is now connected. Now let's start like as a user trying to buy stuff. So, start Yeah, it was wrong one. Yeah, yeah, yeah, right, right. The last thing. Yeah, it it has to be always a small thing when you're doing testing. It's just selling We need to fix the links. So, usually in WordPress By the way, all of this because I already worked with WordPress a lot, so I know like these problems. So, it's just like problem with links.

45:15 So, I just need to change it from the custom structure to like the post name. Let's save it. And if I refresh Yes, now we are in. Okay, so let's buy our plan. So, we go to I would like to buy the Galactic Tier for example, and I would subscribe to it. And let's go to cart. Proceed to checkout. It asks if I have a coupon. I don't have one for now because it's now free.

45:47 And it asks for my first name, so we say Abdu. Abdu without not Abdul. It's Abdu only. And Tawfi, and then website name. This is something custom I added to the platform to allow users to create the like to add their own website name. So, we say maybe So, we say Black Pearl Store, for example.

46:21 Black Pearl Stores. Okay, and then we have Germany and we say our address because it would be needed for payments and invoices. We add zip code. We add Berlin. We add some random telephone number and we keep our email. Why? Because I also programmed it when someone subscribes, they get an email to see the admins are able to edit their own stuff. So, inside the Galactic, you remember we have Jetpack and so on, so we should be able to see it.

46:57 not Jetpack. It was the SEO plat plugin. So, and this is because you are using Stripe testing mode. They gave us a random credit card to add because we need to test it. And the dating like the date for the expiry date for the credit card, they say we need just to add like something in the future. And this just any three numbers. And let's save it for the future. Now, let's place our order. Okay, so our order is successful and let let's see it inside the PPCS.

47:30 Yes, we now see a tenant is created and we see it under the Galactic tier. So, it would take a while to see and last thing we should see it see it in the email. So, we got like a bunch of emails and we see this is the custom email that I added, which is your website is being created. If I go into it, I see now I'm able to log in into the admin URL and the email and the password. Of course, like it would take a while, so if I click on it, I would see like a 404 page. Or it's provisioned. That is super fast from WPC.

48:03 So, I log in and I need my email and password to log in to the admin. And let's wait. Or I clicked the wrong link. Or I'm already I'm logged in. Okay, I click this one. And then I add the password. And then log in. I say, yeah, the email is correct. And now I logged in. I should see.

48:37 Okay, so we probably did a mistake because inside WPC, we did changes. But when we do changes and we create the platform, the platform is created from an image that it is still still not ready to be deployed. We haven't deployed it yet for the customers. We So, when we create an image, let's go to the dashboard. And this is important to explain as well. And it we are lucky that we had this bug. So, when we create an image, like we create an image and we create the tenants inside this one. So, we create like this one tenant.

49:20 Maybe I will just keep it red for now. And this one and this one. But after a while, you would like to make an update. You would like to do changes. So, you would create a new image. So, this would be image two. And but clients are still on image one. This is the basic one. So, what we need to do is to push the changes to our clients. And they call it here deploy. So, we need to deploy that changes. So, when we are we were doing the demo, we were doing it on the image one which was before submitting our changes. So, before we did that changes.

50:06 we like before doing any changes. So, we created the image and just connected together. But, rather we need to deploy our changes where we added the SEO plugin and of course in the second golden one, we need also to push it because we added like other plugins as well. So, we need So, we need to push the three push the three tiers. So, let's say deploy. And let's say the name is added plugins.

50:40 So, we click submit. Okay, we add this one. Just a comment and we deploy. Added plugins. This is just like adding a name for it. And then we click deploy. Added plugins. And the good thing, this allows people using the that PPC is if you would like to update your platform, you don't need to be a developer to update it. So, you just like log into the platform using the editor, do your extra changes, maybe add a new plugin, maybe upgrade it, update it, do whatever you'd like and then you would click deploy again. Of course, they have like different tweaks inside the system to be able to understand it. So, like like I said in the in the description of this video, I'm going to add links for everything so you'll be able to read further. So, we just wait till deployment to be done.

51:35 So, now deployment is done. Let's go back and try to refresh. And now our plugin is available. This is what we said. So, basically because we haven't deployed. So, this is as a customer now. Let's put the customer hat again. So, I would usually activate them. And it's now activated and they now could configure and do everything. So, now they have their website. Okay, let's do the purchase again.

52:07 So, I go to the shop as a customer. I would like maybe to buy another shop. I would like to buy the golden tier. So, I subscribe. I go and proceed to check out. And what you see, it's very snappy. I just like click click click. I don't need to wait time. So, let's call this one Dukan. And we already have the credit card saved. Our information is ready. So, we place the order.

52:38 Okay, now the purchase is done. We need to go back to our email to get the link. And we created By the way, the links are already there inside the VPCS inside the tenants and we see now Dukan is created under golden. But the link is there, but just like I'm trying to see to see it how the user are going to see it. So, I click WordPress. And then I click this one. It would say it's not found because it's still being created.

53:02 Let's copy the email to be ready. Okay, it is now ready. Let's refresh. Our image is ready. It's our our email and our password. Remember me. Let's log in. This email is correct. Update WordPress database. Continue. And now we have everything is enabled unlike the first one because this one is created with the correct image. But rather the first one that we made, it was before we deployed the new version.

53:41 So, we with the setup we now explained how you are able to upgrade the version or not upgrade the version, sorry. Do changes to tiers to give it to customers. So, for example, our Galactic tier, maybe I would like to add live chat between between me and the customers who are using my tier. So, I would upload like a custom plugin that I create. This is one of the added value. So, they have direct connection between me and them. So, maybe they have like 24/7 support, but maybe the basic tier they only have like second day support or like 2-hour support, for example. So, I would add my custom plugins inside it as well.

54:22 Because you could still go to the editor and upload your own plugins and change it. So, yeah, we now have everything. The last thing is when I cancel it. So, if I cancel, it should also delete this. So, if I go to my account, So, by the way, like what we see so far, we haven't written any code about all of this. We just like added the code to connect, and I'm going to show it to you.

54:48 So, go to subscriptions, and then let's cancel the Galactic one. So, yes, we need to allow them to be able to cancel. So, let's put back again the admin hat, and we go to the WP Swing and subscriptions, and we say enable the customer to be able to cancel the subscription. Because I forgot to enable it. Let's put the customer hat again. Yeah, it's part of being a developer. And we have now the cancel button. Of course, it should be named like another name, but let's cancel it.

55:23 It will take a while. Subscription is canceled. Let's go to WPCS console, and it says now removing. So, after this, we just like deploy it, and people are now are able to use our platform to create Shopify stores, and we don't need to do anything. Maybe provide them the direct value, the business, the part that we need to focus on. We don't need what the technology we are using, how how we should like deliver the most sophisticated, most complex platform to deliver to customers.

55:53 When you're starting, like this shouldn't be the thing you need like focusing on, but rather you need to focus on how fast I could deliver to the market the value that I'm promising. As a startup, the thing that is different between me and the competitor as fast as possible, as cheap as possible. I don't need to spend ton of money on like devops or like an army of developers to build everything, but rather start small with as less as possible and then deliver the value to the customers. And after that, like from that you could get money and then you're able to build your army of developers. And now you could build like the most sophisticated, most complex thing. But just at first you would start with the thing that you need to focus on, which is your business value. This is the most important part.

56:39 So now like we see in this video, I showed you how to build like Shopify, I don't know like in 1 hour and we see like everything. So this is the whole system. Now comes the part where I'm going to show you the custom code that I built so you are able to understand what I have written as well. And I am going to upload this custom code on GitHub so you're able to see it and watch it and I'm going to add links for it as well in the description of this video. And also I'm going to update the readme so you're able to also start the development environment locally.

57:14 So what is this repo has? So the first part I used Docker Compose to have my development environment. I didn't install WordPress, I didn't install the database manually and spend hours to do it, but rather I used Docker. And Docker is this like it it like Kubernetes is using Docker behind the scenes. Of course, it could use different things, but usually it use Docker. And I just say, "Okay, I need WordPress and I need database and I need like this information to allow me to connect locally with this website to do the whole development." So, it's just building the development environment.

57:50 And then under the source, you would see the custom code that I have written. And it's just a custom plugin. So, at the top I add the WordPress description for a plugin. And I define here the different AWS API like keys, region, secret, and they are defined as WordPress options. So, you don't store secrets inside the like inside your file first. It's It's very risky. And second thing, it's like not reusable. Like imagine everyone buys your plugin or use it and they have to change like the API key inside. But rather you should make it as easy and accessible and like able to scale as possible. So, I add like these options and then we have like the tenant subscriptions. And this is to maintain the subscription part inside my system.

58:41 And when I'm building WordPress plugins, I'm not building every single one file like usually in certain tutorials like you have the functions file or the index file for a plugin and it has everything. But rather we use normal PHP OPP design, solid designs. We have like injections and we have like normal programming stuff. So, this is the part like when we write things. We try as much as possible to stay clean because it would help us in the future to extract extract this custom code and create our own custom project away from WordPress because WordPress shouldn't be the final thing, but rather it should be the start for your startup and eventually it would migrate to become your own custom environment when you have like your army of developers. But at first, we are using WordPress to make things easy.

59:29 So, now let's rewind back to continue describing the file. So, we have like the tenant subscription. It like it its main concern is to tackle the subscription part inside our system. We have WPCS settings page. This is where you saw the part where I changed the API keys inside the website. So, this part, like this one, or this class consists of this one. And we have the version service. This is an API service to communicate with WPCS to get the different versions that we see inside the product page. Like here, inside this one, when we add you saw like the widget on the side, this one.

60:08 This is the class that consists of this one. Like this is a service that communicates. And WooCommerce meta boxes is the one that shows this thing. One question that you might think about is how the naming doesn't conflict with WordPress. So, like because WordPress might have like this function. I don't know. It might have it or version service. So, I'm using name spaces in PHP. So, in this case, we are protected. We don't like have any problems with conflicts and so on.

60:38 And I'm using, of course, composer to do the auto loader or the auto include inside PHP. It basically like the import inside JavaScript or like Java and so on. Like different languages that are able to import. Okay, so the setting page when Okay, away from the setting page and classes. So, normally when I am building classes and they rely on WordPress functionality, I would add the functions. And these functions or class methods are the ones that implement different features that I would like to add inside WordPress. And the construct would be where I add the different actions that hooks inside WordPress system. So, inside WordPress, we have hooks to add like functions into a certain place inside my code.

61:25 So, we add this method inside this action, and then it start like doing the stuff that I need. So, this one is just like to show the part inside the admin, and the other code is to show like the different settings that we need to add inside the code. Of course, like I wouldn't go in deeper into this part. You would be able to like read this code and understand it more. And the WooCommerce meta boxes is similar as well, which is the actions in the construct.

61:50 And you would see like the way where we add like the different meta boxes inside the code, and we get the service using the dependency injection to add the service to our like to our class, or our container in this one. And we have the version service. It's the way to communicate between our website to the PPCS to get the different versions available, which are the different tiers that we have inside our website. So, this one is to communicate it.

62:22 And the tenant subscription is the one that like this is one of the core more most important core part inside the code where we subscribe to two things. When a user creates a subscription, and when a user cancels a subscription. These are the two most important parts. The first two parts could actually be separated into a separate class. The first two are showing just the like the part to to add the website name. Like just add the website name.

62:52 but the second two parts are the most important parts. So, the cancel part, we're just like getting the order, getting the first product, and then sending it to the PPCS using the create tenant request. The PPCS already provide a like development tool or a library to be able to use their API package. They already have some of their API already done as methods. The other one, which is not yet implemented, so I just use the like WordPress remote get to be able to get the versions. But the other ones are already available, so I just use their method and then I set the version, set the tenant, add the email, add the password, the things we are setting to set the admin for the user to be able to log in.

63:34 And after we create the tenant, we send to them the email that says hello, like this is the admin URL, this is the email, this is the password. And the last one to remove tenant, and that's actually like four lines. Like you see like it's it's relatively small when we are doing the like the whole usage of using WordPress. So, yeah, this is the whole library. And of course like there is a test file and it has like different plugins inside WordPress. This is just ready to Docker to help me like during the development part. And of course all this information I'm going to add inside the readme how you are able to start. So, you just like get like get clone your website and then you just like do the different things I'm going to mention in the readme and you are able to start.

64:17 So, yeah, I think this is the end of the video. So, thank you for watching and I hope this added value to you and so like how we are able to build whole startup just using WordPress. And don't feel like ashamed or like you think WordPress is bad thing to add inside my startup, but rather it's actually a very strong tool to be able to use it when you understand how to use it. So, it's very strong. Don't feel like oh yeah, he's using or she's using or they are using WordPress. Yeah, it's a bad technology or something. No, no, no, it's like like you saw like with this amount of plugin we made our website very snappy, it's very fast. You are able to start your startup with as less money as possible.

64:57 You don't need to spend ton of money and there's like millions to be able to start your application, but rather just see how to use it and just get experienced developers to be able to build your websites and get your startup going. So, yeah, thanks for watching. And of course if you have any questions, leave them in the comment section. I will answer them. And yeah, see you in the next video. Ciao.